Bookmarklet を作ってみる

ちょっと便利なブックマーク、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('適当な言葉を入れてみて下さい'); })();

文字数制限

ブラウザごとに Bookmarklet の文字数が一定数以上になると動作しなくなります。また、Internet Explorer 6.0 などでは構文エラーがあってもエラーメッセージを出さなくなってしまうため、注意が必要です。

ブラウザごとの文字数制限は以下のとおりです (色んなサイトからかき集めた情報をまとめています)。

Bookmarklet の URL の最大文字数
ブラウザ	最大文字数
RFC 2616 (古い標準仕様)	無制限
RFC 7230 (新しい標準仕様)	最低でも8000文字を推奨
Google Chrome 3.0〜	6138文字
Google Chrome 〜2.0	3176文字
Firefox ?〜	100000文字以上
Firefox 3.0〜	10000文字以上
Firefox 〜2.0 ?	2000文字以上
Opera ?〜	190000文字以上
Opera 9.0〜	10000文字以上
Opera 8.0	2000文字以上
Opera 7.0	4094文字
Opera 5.0	4061文字
Safari ?〜	80000文字以上
Safari ?〜	2220文字
Safari 4.0〜?	2083文字
Safari 3.0	10000文字以上
Internet Explorer 11.0	2083文字以上 ?
Internet Explorer 10.0	2083文字
Internet Explorer 9.0	2083文字
Internet Explorer 8.0	2047文字
Internet Explorer 7.0	2084文字 (2083文字?)
Internet Explorer 6.0 SP2	488文字
Internet Explorer 6.0	508文字 (Bookmarklet にだけかかる制限)
Internet Explorer 4.0〜5.5	2084文字 (2083文字?)
Netscape	2000文字以上

古いブラウザまでサポートするつもりなら 480 文字程度、新しいブラウザのみで良いなら 2000 文字が目安でしょうか。

外部スクリプトの読み込み

この文字数制限を回避するために、長めのスクリプトを書きたい場合は自分の Web サイトに .js ファイルでスクリプトを設置し、 Bookmarklet はそれを読み込むだけにするのが良いです。

	javascript:(function(){
		var s=document.createElement('script');
		s.setAttribute('language','javascript');
		s.setAttribute('type','text/javascript');
		s.setAttribute('src',読み込むスクリプトのURL);
		s.setAttribute('charset','utf-8');
		document.getElementsByTagName('head')[0].appendChild(s);
	})();

このようなコードになります。この例では .js ファイルは UTF-8 エンコーディングにします。Bookmarklet が実行される Web ページがどのエンコーディングになっているのかはまちまちなためです。

ただし、この方法では最新のブラウザで特定の Web ページでうまく実行できないケースがあります。

ひとつは Bookmarklet を実行した Web ページが Content Security Policy を指定している場合です。 Web ページのレスポンスヘッダーに Content-Security-Policy が含まれており、それで指定ドメイン以外の読み込みを禁じている場合、 Bookmarklet が読み込もうとしている .js ファイルがそのセキュリティポリシーに違反するためです。これは回避しようがありません。

もうひとつは Bookmarklet を実行した Web ページが https (SSL) のページの時です。最近のブラウザは https のページから http に置いてあるコンテンツの読み込みをデフォルトで禁ずるようになってきており、その制限に引っかかるためです。これを回避するには、.js ファイルを https ページにも設置し、 読み込むスクリプトのURL の指定を //example.com/bookmarklet.js のようにプロトコルを書かない表記にすることです。個人で SSL サーバ証明書を取るのは大変ですが、無料サービスを利用するか、 Dropbox のようなクラウドストレージサービス上にファイルを置いて共有リンクを利用すると良いかと思います。

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

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

選択された範囲の文字を得る関数
関数	対応ブラウザ
window.getSelection().toString()	Firefox 1.0 以上、Google Chrome 1.0 以上、Safari 3.0 以上、Opera 9.0 以上、Internet Explorer 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() で取れます。

戻る