ブックマークレット(Bookmarklet)の動作原理

ブックマークレット(Bookmarklet)の動作原理について


このページの対象読者

このページではブックマークレットを作成する際の注意事項など技術的な面を説明します。これはサイト開発者向けの情報です。ブックマークレット利用者の方は、ブックマークレットとは？をご覧ください。

ブックマークレット(ブックマークレット(Bookmarklet))の制約

文字数の制限

IE6で使えるスクリプトの長さは最大で508文字です。これを超えると動作しなくなります。

値を返すとページを移動してしまう

値を返すとページを移動してしまいます。

例えば、次の代入式は1という値を返却するのでページが移動してしまいします。

javascript:x=1;

javascriptでは、式自体が値を持つことに注意してください。奇妙かもしれませんが、変数へ値を入れるという代入式それ自体が値を持つのです。

これを回避するには、varまたはvoidを使って値を返却しないようにします。

javascript:var x=1;

javascript:void(x=1);

変数はページ内でグローバル

javascript:var x=1;

javascript:var x=2;

上のリンクをクリックしたあと、以下をクリックするとxの中身が変わっていることが確認できます。javascript:window.alert(x);

ブックマークレット(Bookmarklet)内だけで使用していると思っている変数が、他のスクリプトに影響してしまうことがあります。変数の名前が競合しないように注意する必要があります。

このように{}で囲んだとしても状況は変わりません。

javascript:{var x=3;}

このように()で囲むとxはローカル変数として扱わるようです。

javascript:(var x=4;)

URLエンコードの扱い

古いバージョンのOperaでは、スクリプト内でURLデコードされません。

(※注意) Operaの10.0より下位のバージョンすべてでこの問題が発生するという意味ではありません。

Script Opera(旧)
※注意		 Opera10.0
IE7
FireFox3.6
javascript:alert(%30); 0 0
 javascript:alert(50%30); 20 500
 javascript:alert(50 % 30); 20 20
javascript:alert('50%30'); '50%30' '500'
javascript:alert('50%'+'30'); '50%30' '50%30'

↑このページの先頭へ

ベストプラクティス

無名ファンクションと呼ばれる、名前を付けない一時的な関数のインスタンスを作成すると、その内部で定義される変数はローカルとなります。

javascript:var x=1;

javascript:(function(){var x=6})();

javascript:alert(x);

無名ファンクションの入れ子

無名ファンクションの中に、名前付きファンクションを入れることが出来ます。無名ファンクション内の名前付きファンクション内部の変数はローカル変数として外部には見えません。

以下の例では、無名ファンクション内と名前付きファンクション内でxという同じ名前の変数を定義していますが別々のものとして認識されます。

javascript:(function(){var x=1;function myFunc2(){var x=2;alert(x)};myFunc2();alert(x);})();

javascript:(
    function(){ // 無名ファンクションの定義開始
        var x=1';
        function myFunc2(){
            var x=2;
            alert(x)
        };
        myFunc2();
        alert(x);
    }
)();

function前後の円括弧と、関数後の()を取り除いても同じ？？

javascript:function(){var x=1;function myFunc2(){var x=2;alert(x)};myFunc2();alert(x);};

無名ファンクション内にある名前付き関数には外からアクセスできません。

javascript:myFunc2()

また、名前付き関数内にある、名前付き関数にも外からアクセスできません。

javascript:(function myFunc3(){var x=3;function myFunc4(){var x=4;alert(x)};myFunc4();alert(x);})();

javascript:myFunc4()

一番外側の名前付き関数には外からアクセスできてしまいます。(Interexporerの場合)

javascript:myFunc3()

無名ファンクション何の変数をvarを省略すると変数はグローバル変数として扱われます。

javascript:(function (){x=5;function myFunc6(){var x=6;alert(x)};myFunc6();alert(x);})();

javascript:alert(x);

まとめ

「javascript:(function(){スクリプト内容})();」というフォーマットを使うのが一番安全です。

スクリプト内ではvarでローカル変数であることを明示的に宣言します。

varを省略して衝突しにくいランダムな変数名を使う手法もよく使われますがが出来れば避けたいです。

IEの文字数制限のためにスクリプトは508文字以内に収めます。

URLエンコード

URLエンコード（ゆーあーるえるえんこーど）とは、URIにおいて使用禁止である値を使う際に行われる符号化の俗称である。RFC上ではPercent-Encoding（パーセントエンコーディング）という名称である。 （Wikipediaより引用）

WikipediaではURLエスケープという言葉は見つからなかった。

JavaScriptではエスケープとエンコードが、用語として一緒くたになっている

エスケープシーケンス (escape sequence) とは、コンピュータシステムにおいて、通常の文字コードでは表せない特殊な文字や機能を表すための、エスケープコード (0x1B, ESC) に始まる一連のバイト列のことをいう。

また、エスケープコードで始まるものでなくても、類似の構造や機能をもつものはエスケープシーケンスと呼ばれることがある。 代表的なものに、C言語やその他のプログラミング言語の文字列中に用いられる、バックスラッシュに始まるものがある。

参考

Jesse's ブックマークレット(Bookmarklet)s Site

http://www.teria.com/~koseki/memo/ブックマークレット(Bookmarklet)s/tips.html

http://www.teria.com/~koseki/memo/ブックマークレット(Bookmarklet)s/publishkit.html

 

↑このページの先頭へ