小さい頃はエラ呼吸

いつのまにやら肺で呼吸をしています。


ブックマークレットの作り方と個人的にハマったところ（Internet Explorer編）

JavaScript
はじめに

InternetExplorer（以下IE）におけるブックマークレットの作り方と個人的にハマったところをまとめてみました。

2009.10.12追記

少し説明を加筆し、表現を直しました。

ブックマークレットの作り方

スクリプトを実行するためのインターネットショートカットを作成する

ブックマークレットはその名のとおり、IEのお気に入りに登録して利用します。そのため、IEのお気に入りが格納されているC:\Documents and Settings\xxx\Favorites配下に新しいインターネットショートカットを作成します。（xxx.urlというファイル）
以下は、hogeという文字列をアラートするブックマークレットです。
hoge.url

[InternetShortcut]
URL=javascript:(function(){alert("hoge");})();

作成時のポイント

ほとんどのことはhttp://www.teria.com/~koseki/memo/bookmarklets/tips.htmlに記載されていますので、そちらを参考にすると良いと思います。押さえておくべきポイントは、以下の3点です。

  • 値は返さない
  • 変数を汚染しない
  • 文字数制限に注意する
ブックマークレットの文字数制限

ブックマークレットに使用できるスクリプトには、ブラウザごとに文字数の制限があります。以下のサイトによると、IE6ではわずか500文字弱しか許可されていないことが分かります。

文字数制限の回避方法

上記のようなブラウザごとに文字数の制限があるため、500文字以上のスクリプトをIEで実行する場合は、以下のような手法を用います。

  • ブックマークレットから外部のサーバに配置されたjsファイルを動的に読み込んで実行する
javascript:(function(){var s=document.createElement("script");s.charset="UTF-8";s.src="http://example.com/example.js";document.body.appendChild(s)})();

これにより、文字数の制限を回避することができます。

createElementでscript要素を作って、その中にhttp://example.com/example.jsとソースを指定することによってそのJSを実行できる。WinIEとFirefoxでは確認済み。もちろんcharsetを指定することにより好きなエンコーディングでブックマークレットを記述できる。これがすげー便利で、サーバ上のjsファイルを編集してこのブックマークレットを実行することで簡単にデバッグもできるし、機能追加などもjsに追加すればいいだけ。ただ問題となるのが、通常のブラウザの場合、サーバにリファラを送ってしまうこと。どのページでブックマークレットを実行したかが解ってしまう。それがブックマークレット利用者で嫌な人は、リンク先のJSを自分のサーバに落としたりなどが必要になる。
bookmarkletの文字数制限を無くす - 川o・-・）＜2nd life はてなブックマーク - bookmarkletの文字数制限を無くす - 川o・-・）＜2nd life

ローカルjsを読み込むことができなくなったIE7
javascript:(function(){var s=document.createElement("script");s.charset="UTF-8";s.src="http://example.com/example.js";document.body.appendChild(s)})();

IE6では、s.src属性にローカルファイルd:\\hoge.jsのように指定しても読み込むことができていましたが、IE7では、これがエラーになるようになっています。したがって、読み込むjsファイルは、上記のように外部のサーバかローカルのWebサーバ上などに配置する必要があります。

IE6だとimgのsrcにローカルファイルを指定(img src="file://〜")できたのですが、IE7だと指定できなくなってました。
あと、IE6で使えなかったdataスキームは、IE7でも引き続きつかえませんでした。
IE7は imgのsrcにローカルファイルを指定できないし、dataスキームも使えない - Enjoy*Study

以下のエントリもあわせてどうぞ