ブログ記事内でJavascriptを動かす方法まとめ
08/08/13 Comment(0) Trackback(0)

当方で公開しているブログパーツは、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プログラムを読めなくする(暗号化)目的にも利用できる。

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

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

エンコード後プログラム


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

トラックバック


※当サイト内ページへのリンクがないと、受け付けない仕様になっています
コメントを投稿
上の情報を保存する場合はチェック
月別エントリー
2008年11月(3)2008年10月(4)2008年09月(8)2008年08月(6)2008年07月(4)2008年06月(4)2008年05月(6)2008年04月(7)2008年03月(8)2008年02月(14)2008年01月(22)2007年12月(10)2007年11月(10)2007年10月(5)2007年09月(7)2007年08月(5)2007年07月(16)2007年06月(1)2007年05月(4)2007年04月(9)2007年03月(9)2007年02月(10)2007年01月(20)2006年12月(6)2006年11月(15)2006年10月(11)2006年09月(27)2006年08月(9)2006年07月(5)2006年06月(11)2006年05月(2)2005年09月(1)
264
264