Bookmarklet を作ってみる

ちょっと便利なブックマーク、Bookmarklet の書き方です。

Bookmarklet: Bookmarklet とは、JavaScript で記述された小さなプログラムで、ブラウザの普通のブックマークとして利用できます。例えば、このようなものです。→ 電卓 Bookmarklet; 　; Bookmarklet は普通のブックマーク (お気に入り) となんら変わりませんので、ブックマークとしてブラウザに登録して、使いたいときに選ぶだけで使えます。; 　; 上の電卓 Bookmarklet をブックマークして、そのブックマークを呼び出してみて下さい。ウィンドゥが開きますので、 "1+1" などの計算式を入れて "OK" を押すと、その式の答えがでてきます。このようなことができるのが、Bookmarklet です。 JAVASCRIPT::BOOKMARKLET のサイトが Bookmarklet を取り揃えていて有名ですので、一度見てみると面白いと思います。ちなみに、私も簡単な Bookmarklet を公開していますので、よろしければどうぞ。

基本的な書き方

javascript: で始まり、その後ろに JavaScript でプログラムを書いた URL のブックマークを作れば、Bookmarklet の完成です。リンクを Web ページ上に作成すれば、使う人も簡単にその Bookmarklet が使えるようになります。

早速簡単なサンプルを作ってみましょう。

	javascript: alert('Hello!');

このようなサンプルプログラムをリンクに埋め込みます。→ サンプル

この「サンプル」と書かれたリンクをクリックすると、ウィンドゥが開いて "Hello!" と表示されると思います。もし表示されない場合は、Web ブラウザが JavaScript に対応していないか、仕様が禁止されていると思われます。

Bookmarklet の中身は JavaScript なので、後はアイディアと工夫次第で色々と便利なブックマークが作れます。ホームページなどと組み合わせるとますます便利です。

注意点

Bookmarklet の正体は JavaScript なので、ブラウザの対応状況などで色々と注意しなければならないことがあります。

変数のスコープ

一連の JavaScript を実行した後に値があると、ページの移動を起こしてしまいます。

	javascript: test=prompt('適当な言葉を入れてみて下さい');

また、このように変数も使えますが、グローバルスコープで評価されてしまうため、Bookmarklet が実行された Web ページの変数と衝突を起こす可能性があります。

これらを回避するために、無名関数を使うようにすると良いでしょう。

	javascript: (function(){ var test=prompt('適当な言葉を入れてみて下さい'); })();

文字数制限

Internet Explorer 6.0 では 509 文字以上になると Bookmarklet が動作しなくなります。また構文エラーがあってもエラーメッセージを出さなくなってしまうため、注意が必要です。なお、Internet Explorer 5.5 ではこの文字制限はありませんでした。

選択された範囲の文字を得る

Web ページ上で文字を範囲選択して、Bookmarklet を実行すると、その文字を検索するなどが出来ると便利なのですが、選択された範囲の文字を得る方法が統一された仕様がなかったために、ブラウザによってまちまちです。

選択された範囲の文字を得る関数
関数	対応ブラウザ
window.getSelection().toString()	Firefox 1.0 以上、Google Chrome 1.0 以上、Safari 3.0 以上、Opera 9.0 以上
document.selection.createRange().text	Internet Explorer 4.0 以上
document.getSelection()	Netscape Communicater 4.0 以上、Mozilla、Firefox (下位互換のため)、Opera 6.0 以下
document.selection()	Internet Explorer 4.0 以上
window._content.getSelection().toString()	Firefox、Mozilla
window.getSelection()+""	Safari 2.0 以下の不具合対処方法

新しいブラウザは window.getSelection().toString() で取れますが、Internet Explorer だけ document.selection.createRange().text である必要があるようです。

戻る