Electronic Genome

更新：2011-08-29 10:28
　

■概要

　これはブックマークレット作成者のためのブックマークレットです。ブックマークレットには文字数制限(IEで508文字)がありますが、ブックマークレットから外部スクリプトファイルをロードして実行することでこの制限を回避できます。事実上ブックマークレットの文字数制限は無くなります。さらに別ドメイン(別サーバ)のスクリプトファイルのロード、実行も可能。他のメリットとしては、スクリプト本体を完全に外部ファイル化しておけば、後で動作を変更したくなってもユーザ側に再登録をお願いしたりする必要がないということでしょうか。
　

■デモ

外部ドメインのスクリプトファイル
http://t-service.no-ip.com/blog/72_ExternalScriptDemo/demo_outerscript_utf8.js
をロードして実行するデモ。
別ドメインの外部スクリプトファイルを実行するブックマークレットのデモ
　

■ブックマークレットメーカー

　１行コードの中のURLを書き換えたりする作業は若干イライラするので自動で生成できるようにしました。外部ファイルのURLとEncodingを指定して「Generate」ボタンを押すとソースが生成されます。Nameが空白でないなら、Nameに入力された文字列でHTMLリンク用のソースと、テスト用のリンクオブジェクトを生成します。
　大体のブラウザで動くんじゃないかと。デフォルトで入力されているデモのデータは「Clear」ボタンで削除できます。値チェックは面倒なのでしてません。Encodingについては後述しています。
ブックマークレットメーカー 　

■整形ソース

　ブックマークレットメーカーで生成されるコードを整形し、コメントをつけて貼っておきます。

javascript:(function(){
//外部ファイルURL
var url='http://t-service.no-ip.com/blog/72_ExternalScriptDemo/demo_outerscript_utf8.js';

//キャッシュ使用を回避
if(!url.match(/\?/))url+='?'+(new Date()).getTime();

//scriptエレメント作成
var d=document;
var e=d.createElement('script');

//外部ファイルのエンコーディング指定
e.charset='utf-8';

//srcを外部ファイルURLに設定
e.src=url;

//エレメント追加
d.getElementsByTagName('head')[0].appendChild(e);

})();

今回のデモで使っている外部スクリプトファイルの内容は以下のような感じ。

alert('外部ドメインから実行されました。\nEncoding is "utf-8".');

　

■外部ファイルのエンコーディングについて

　ブックマークレットを実行するページのエンコーディングと外部ファイルのエンコーディングがずれていると日本語などの2Byte文字が文字化けを起こします。これを回避するためにソース中の、

//外部ファイルのエンコーディング指定
e.charset='utf-8';

の部分で外部ファイルのエンコーディングを指定する必要があります。スクリプト中でASCII文字しか使用しない場合は省略しても問題なし。
　以下は指定したエンコーディングと外部ファイルのエンコーディングがずれている場合と、一致している場合のデモです。ブラウザによって結果が異なります(後述)。
　
　以下はエンコーディング指定しなかった場合のデモです。このブログのページのエンコーディングはeuc-jpです。 　

■各ブラウザのエンコーディング指定と文字化けについて

　この記事を書いているときに気づいたんですが、Opera(9.26)はどんな条件でも正しく日本語が表示できるようです。
　IE(6、7)、Firefox(2.0.0.12)は指定エンコーディングと外部スクリプトのエンコーディングが不一致の場合や指定なしだと基本的に文字化けしますが、指定なしでもページの エンコーディングと外部スクリプトのエンコーディングが一致している場合は化けません。
　Safari(3.0.4 for win)はIEやFirefoxとほぼ同じですが、加えて、指定なしだがページエンコーディングと外部スクリプトエンコーディングが一致している場合でも化けるようです。
　まあつまり基本的にエンコーディング指定は省かない方が得策。
　

■キャッシュからのロード回避について

　通常のブラウザは通信量を減らすためやレスポンス速度を上げるために、一度ロードしたファイルをローカルのハードディスクにキャッシュとして保存しておき、再度同じファイルへリクエストがあった場合はキャッシュからロードします。しかしこのキャッシュのせいで外部スクリプトファイルの内容を変更しても、キャッシュからロードされてしまい変更が反映されことがあります。それを回避するためにURL末尾に、「?」に続けて実行たびにURLが変化するように現在時刻をミリ秒で取得したものを付加しています。

//キャッシュ使用を回避
if(!url.match(/\?/))url+='?'+(new Date()).getTime();

外部ファイルの内容を一切変更しないのであればこの記述は必要ありません。
　

■外部ファイル化されたブックマークレットの危険性

　スクリプト本体を外部ファイル化したブックマークレットは、文字数制限を回避できるおかげで通常のものよりも高度な処理ができ非常に便利ですが、セキュリティ的には危険を孕んでいます。たとえばブックマークレットの作成者に悪意があれば、あるサイト用のブックマークレットを公開後、ユーザが増えてきたところで動作をこっそり変更してユーザのcookieを盗む、ということも可能。ブックマークレット実行時のスクリプトの権限はそのサイト管理者と全く同じなのでcookieにもアクセスできます。怪しいサイトのブックマークレットは危険かもしれないという話。