Bookmarklet - ブックマークレットを作成する際のポイント

Updated: 2003-09-28 05:44:07+0900 [Home]

値を返してはいけない

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

これならOK

変数はページ内でグローバルになってしまう

varをつけても、ブックマークレットで使用した変数は、ページ内でグローバルになってしまいます。表示中のページの動作や、他のブックマークレットの動作を変えてしまう可能性があります。

上のリンクをクリックしたあと、以下をクリックするとcontentsの中身が変わっているのが見えます。

これはページに書かれたJavaScriptなので当然に思えますが、URL欄に

を入力してエンターキーを押してから上記のリンクを実行するとcontentsがxyzに変わってしまっているのがわかると思います。ブックマークレットがページの動作を変えているわけです。javascript:以降をブロックで囲んでも同じです。

これでも駄目なことがわかります。「ブックマークレットのグローバル変数汚染デモ」もご覧下さい。

変数をローカルにするには

無名ファンクションのインスタンスを生成して、これを呼び出すようにするといいようです。

これだと使用した変数contentsの値999は外から見えません。

無名ファンクションの内部で入れ子のファンクションを定義することもできます。

見やすくインデントすると

javascript:(
    function(){ // 無名ファンクションの定義開始
        var contents='out';
        function abc(){
            var contents='in';
            alert(contents)
        };
        abc();
        alert(contents);
    }
)(); // 無名ファンクションを呼び出す

入れ子になった名前ありのファンクションabcも外からは見えません。

上記は、abcは宣言されていないというエラーになります。function()をfunction xxx()に変えると、

ページから見えてしまいます。(Netscapeは大丈夫みたいでした)

無名ファンクション内でvarを省略するとどうでしょうか。

やはりグローバルになってしまいます。

スクリプトの長さ

IE6で使えるのは最大で508文字。これを超えると動作しなくなるようです。

Operaは、スクリプト内でURLエスケープが使えない

以下は、NetscapeやIEだと500を表示しますが、Operaは20(50を30で割った余り)を表示します。

以下ならOK。20になります。

50%30を表示したい時は以下は駄目。Operaは50%30を表示しますが、IEやNetscapeは500を表示します。

これならOK。50%30を表示します。

まとめ

参考


KOSEKI Kengo <kengo at tt.rim.or.jp>