ブログ記事内でJavascriptを動かす方法まとめ

当方で公開しているブログパーツは、Javascriptで動かしている。
非同期通信（Ajax）を利用して、スムーズな表示が可能になるためだ。

しかし、各社が公開している無料ブログサービスは、Javascriptの動作に対しては冷たい orz…。

+++

問題点：
●自動改行
ブログ記事は、自動改行され、<br/>が挿入される。
Javascriptコードも、、<br/>が自動挿入されてしまう。

●特殊文字が変換される
記事中の特殊文字が、文字実体参照に変換されてしまうブログサービスがある。

例えば、JUGEM,ロリポブログは、記事中の（{ } \など）が文字実体参照に変換されてしまう。

記事編集にエディタを利用すると、「&」が「＆amp;」に変換されてしまうケースもあるようだ。

●自動に<br/>が挿入され、かつ記事中の\nが削除される
FC2やSesaaブログがこれに当てはまる。\nが削除されてしまうため、Javascriptコード内のコメントアウト（<!--）が上手く効かない。

+++
上記問題の対策をまとめておく

対策1：外部ファイルにする
外部ファイル化すれば、上記の問題は全て解決する。

<script type="text/javascript" src="hogehoge.js" />

対策2：コメントアウトを活用する
Javescriptコードには、必ず改行しなければならない箇所がある。

<script type="text/javascript"><!--
[コード]
[コード]
…
[コード] //--></script>

コメントアウトの部分、<!--の後は必ず改行しなければならない。
しかし、ブログ記事の中だと、この部分に<br/>が挿入されてしまい、上手く動かない。

さらに、コードが複数行に渡ると、行ごとに<br/>が挿入されてしまう。「;」で区切ることでコードは一行にまとめることができるが、<!--の後だけは、絶対に改行が必要だ。

そこで、<!--の後の部分にコメントアウト「//」を入れておく。「//」の後に</br>が入っても、Javascriptコードとしては無視されるため、プログラムは正常に動く。

<script type="text/javascript"><!--//
[コード];[コード];…;[コード]; //--></script>

対策3：自動改行をOFFする
FC2ブログやSeesaaブログは、自動改行されるうえに、改行記号\nもキャンセルされてしまうため、上記「<!--の後の改行」が作れない。

よって、ブログ記事中にJavascriptコードを書き込むには、ブログ機能の「自動改行」をOFFして対策するしかない。

対策4：エンコードを利用する
特殊文字の変換に対しては、コード全体をエンコードしてしまうとよい。エンコード後の文字に変換が加わることは、ありえないため、ほぼ完璧な対策となる。

例えば次のようなJavascriptコード

<script type="text/javascript"><!--//

function test(){ str="test"; return str; } document.write(test()); //--></script>

上記コードをエンコードしたものを用意して、コード上でデコードしてeval関数で実行する。

<script type="text/javascript"><!--//
eval(unescape("function%20test%28%29%7B%0D%0Astr%3D%22test%22%3B%0D%0Areturn%20str%3B%0D%0A%7D%0D%0Adocument.write%28test%28%29%29%3B"));//--></script>

この方法は、Javascriptプログラムを読めなくする（暗号化）目的にも利用できる。

エンコードするプログラムを作ってみた。

Javascriptプログラム隠し 変換したいプログラムを入力してください

エンコード後プログラム

※Googleアドセンスを記事中に設置したい場合も、本件と同じような問題が起きる（Googleアドセンスはjavascriptで動いているため）

最終更新日:2008.11.28 | コメント(0) | トラックバック(0) | ブログパーツ開発