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

ブックマークレットとは、ブラウザのブックマークに登録して利用する、JavaScript で記述された簡単なプログラムのことです。１クリックで、ちょっと便利な機能を実行することができます。

ブックマークレットは、HTML と JavaScript が少し分かれば、簡単に作ることができます。


【ツールバーを表示しておく】
ブックマークレットは、ブラウザのツールバーに登録するモノなので、まず、ツールバーを表示させておきます。
ツールバーの名称は、「ブックマークツールバー」、「お気に入りバー」、「ブックマークバー」など、ブラウザによって異なります。
ブックマークレットは、リンクをツールバーに、ドラッグ＆ドロップするだけで登録することができます。





【簡単なブックマークレット】
ブックマークレットでは、JavaScript のクロージャという書き方を使うことが一般的になりつつあります。
これは、JavaScript のグローバル変数の問題を回避するためです。
ただし、ふる～いブラウザは、クロージャに対応していないこともあります。

とりあえず、簡単なブックマークレットのソース

javascript:(
	function(){
		function o() {
			var title=document.title;
			window.alert(title);
		}o();
	}
)();

いま見ているページのタイトルを表示するだけのプログラムです。
function() の中に function o() がありますが、これが、クロージャという書き方です（大雑把すぎる？）。
このソースから、空白を削除したり、特殊文字を変換したり、改行コードを削除したりして、１行にしないといけないのですが、手作業だといちいち面倒なので、こちらのサイトで一発変換します。

Website Tools：ブックマークレット変換（成形）

上記のソースをコピーし、このサイトに貼り付けて、［ブックマークレットへ変換］のボタンを押すと、１行に変換されます。

ついでに、［>> 変換結果を試してみる］ というリンクが表示されるので、クリックして動作を確認することもできます。

さらに、［>> 変換結果を試してみる］ というリンクをツールバーにドラッグすれば、そのままブックマークレットとして登録できてしまいます。

ブックマークレットの名前を変更したい場合は、ブックマークレットを右クリックしてプロパティから変更することができます。


これで、ブックマークレットの完成です。
あとは、プログラムを拡張していくだけです。見ているページのリンクを取得したり、反転させた文字列を検索したりといったプログラムも可能です。



【ブックマークレットを作るときに注意すること】
HTML や JavaScript が間違っていなければ、動作します。
ただし、ブックマークレットは、登録できるプログラムの長さに制限があります。
プログラムが大きくなってくると、文字数の制限に引っかかってしまいます。この場合、動作しません。
文字数の制限は、ブラウザの種類やバージョンによって違うので、怪しいと思ったら確認してみてください。

参考：ブックマークレット／Bookmarkletの作り方



【ぶっくま！のブックマークレット】
ぶっくま！のブックマークレットは、以下のようになっています。

javascript:(
    function(){
        function g(s) {
            var d=window.open(
              'http://www.bukkumaweb.com/bml.php?'+s).document;
        }
        var zu=location.href;
        var zt=document.title;
        if ( zt.length > 30 ) {
            zt = zt.substr( 0,30 );
        }
        var para="zu="+zu+"&zt="+zt;
        g(para);
    }
)();

ぶっくま！の場合、いろいろと複雑な処理をする必要があるので、主な機能は、サーバー側で処理しています。
この方法だと、仕様が変わっても、サーバー側のプログラムを直すだけ対応できます。

タグ：ブックマークレット 作り方