ブログ記事内でJavascriptを動かす方法まとめ当方で公開しているブログパーツは、Javascriptで動かしている。
非同期通信(Ajax)を利用して、スムーズな表示が可能になるためだ。
しかし、各社が公開している無料ブログサービスは、Javascriptの動作に対しては冷たい orz…。
+++
問題点:
●自動改行
ブログ記事は、自動改行され、<br/>が挿入される。
Javascriptコードも、、<br/>が自動挿入されてしまう。
●特殊文字が変換される
記事中の特殊文字が、文字実体参照に変換されてしまうブログサービスがある。
例えば、JUGEM,ロリポブログは、記事中の({ } \など)が文字実体参照(それぞれ {、}、\)に変換されてしまう。
記事編集にエディタを利用すると、「&」が「&」に変換されてしまうケースもあるようだ。
●自動に<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プログラムを読めなくする(暗号化)目的にも利用できる。
エンコードするプログラムを作ってみた。
※Googleアドセンスを記事中に設置したい場合も、本件と同じような問題が起きる(Googleアドセンスはjavascriptで動いているため)
※当サイト内ページへのリンクがないと、受け付けない仕様になっています


RSSフィード