2007.12.11 ( Tue )
今回は、ブックマークレット(Bookmarklet)の使用方法や作成方法の紹介です。ブックマークレットとは、ブックマークにURLを登録する代わりに、短いJavaScriptを登録して、ブラウザにいろいろな機能を追加するものです。
URLの代わりにJavaScriptを使うというのがよく分からない場合は、試しに以下のコードをクリックするか、ブラウザのアドレス欄にコピペしてEnterを押してみてください。
javascript:alert('Hello');
実行すると以下のような警告画面が出ると思います。
これはJavaScriptのalert()という関数が呼び出されたためです。
※ なお、何も表示されなかった場合は、JavaScriptをOFFにしている可能性があるのでJavaScriptをONにして試してみてください。
alert()という関数はカッコ内に書いたメッセージの警告ダイアログを出すことができる関数です。
このように、JavaScriptはブラウザのアドレス欄に記入して実行することが可能です。
また、JavaScriptをお気に入りに登録しておけば、そのお気に入りを開くだけで利用することが出来ます。
以下、ブックマークレットの作り方
ブックマークレットの作り方ですが、一つ作ってみるとどんな感じで作れば良いのかわかるので、とりあえず現在開いているページをInternet Archiveで検索するブックマークレットを作ってみたいと思います。
Internet Archiveは前に紹介したので、そちらを参考に
まず、Internet Archiveで検索した際、どのようなURLになっているかを調べるために、Internet Archiveで「http://www.google.co.jp/」を検索してみます。
すると以下のようになります
上記画像の検索結果のアドレス(URL)を見てみると以下のようになっています。
http://web.archive.org/web/*/http://www.google.co.jp/
つまり、Internet Archiveの検索結果は、
「http://web.archive.org/web/*/検索したサイトのURL」
となっているということが分かります。
それなので、現在開いているページをInternet Archiveで検索するということは
「http://web.archive.org/web/*/現在開いているサイトのURL」
というアドレスにジャンプすれば良いということが分かります。
現在開いているサイトのURLを調べる方法ですが、JavaScriptには「location.href」という現在表示しているページのアドレス（URL）を示す変数があるので、これを使えば簡単に調べることが出来ます。
試しに、以下を実行(or アドレス欄にコピペ)してみてください。
javascript:alert(location.href);
現在開いているページのURLが書かれた警告ダイアログがでたと思います。
なお、location.hrefは変数ですので''(引用符)でくくる必要はありません。引用符でくくってしまうと「location.href」という文字列そのものが表示されてしまいます。
また、location.hrefは現在表示しているURLを示す変数ですので、location.hrefにURLを示す文字列を代入すると、現在表示されているページが代入したURLのページに置き換わります。
つまり、location.hrefにURLを示す文字列を代入すると、そのURLページにジャンプすることが出来ます。
以上のことより、location.hrefを使いInternet Archiveで検索するブックマークレットを作成すると以下のようになります。
「http://web.archive.org/web/*/現在開いているサイトのURL」に置き換えるという操作を行っています。
上記のスクリプトの=(イコール)は等しいという意味ではなく代入するという意味を持ち、+(プラス)は文字列を扱う場合は足し算ではなく、文字の連結を意味しています。
試しに、Googleのページを開いて上記スクリプトをブラウザのアドレス欄にコピペしてEnterを押してみるとInternet Archiveで検索できると思います。
※ ブラウザにポップアップブロック機能が付いている場合、機能を有効にしていると動作しない可能性がありますので注意が必要です。
上記スクリプトをブックマークのURLの欄にコピペして登録しておけば、わざわざブラウザのアドレス欄にコピペしなくても登録したブックマークを選択するだけで実行できるので便利です。
JavaScriptでいくつか関数を覚えれば、簡単なブックマークレットならすぐに作れると思うので試してみてください。
作る際の注意点は以下のサイトを参考に
Bookmarklet - ブックマークレットを作成する際のポイント
余談
上記のInternet Archiveで検索するブックマークレットですが、Internet ArchiveではURLに「#」があると「#」以下が消えてしまうので、より正確なブックマークレットを作りたい場合は以下を使ってください。
まあ、URLに「#」があるページの「#」以下を消しても結局は同じページということが多いので、やっても意味なさそうですが…
変更点を簡単に説明すると、上記のコードではURLの「#」を全て「%2523」に置き換えるという作業を行っています。
本来、「#」のURLエンコードは「%23」なのですが、「#」をそのまま「%23」に置き換えると、ジャンプする際に「#」に置き換えられてしまうみたいですので、「%」のURLエンコードである「%25」を使って「%2523」→「%23」→「#」となるようにしています。
追記 (12/13)
わざわざreplace()を使わなくても
一応書いておくと、escape()はカッコ内の文字列のURLとして用いることができない記号や日本語を「%xx」の形式にエンコードしたものを返します。
ただし、escape()はブラウザによって文字コードの扱いが異なるため使う際には注意が必要です。
ちなみに、encodeURI()だと「#」が変換されないので使えず、encodeURIComponent()だと「/」が変換されてしまうため使えません。
Internet Archiveは前に紹介したので、そちらを参考に
まず、Internet Archiveで検索した際、どのようなURLになっているかを調べるために、Internet Archiveで「http://www.google.co.jp/」を検索してみます。
すると以下のようになります
上記画像の検索結果のアドレス(URL)を見てみると以下のようになっています。
http://web.archive.org/web/*/http://www.google.co.jp/
つまり、Internet Archiveの検索結果は、
「http://web.archive.org/web/*/検索したサイトのURL」
となっているということが分かります。
それなので、現在開いているページをInternet Archiveで検索するということは
「http://web.archive.org/web/*/現在開いているサイトのURL」
というアドレスにジャンプすれば良いということが分かります。
現在開いているサイトのURLを調べる方法ですが、JavaScriptには「location.href」という現在表示しているページのアドレス（URL）を示す変数があるので、これを使えば簡単に調べることが出来ます。
試しに、以下を実行(or アドレス欄にコピペ)してみてください。
javascript:alert(location.href);
現在開いているページのURLが書かれた警告ダイアログがでたと思います。
なお、location.hrefは変数ですので''(引用符)でくくる必要はありません。引用符でくくってしまうと「location.href」という文字列そのものが表示されてしまいます。
また、location.hrefは現在表示しているURLを示す変数ですので、location.hrefにURLを示す文字列を代入すると、現在表示されているページが代入したURLのページに置き換わります。
つまり、location.hrefにURLを示す文字列を代入すると、そのURLページにジャンプすることが出来ます。
以上のことより、location.hrefを使いInternet Archiveで検索するブックマークレットを作成すると以下のようになります。
javascript:location.href='http://web.archive.org/*/'+location.href;
一応説明を書くと、上記のスクリプトは、現在表示されているURL(location.href)を「http://web.archive.org/web/*/現在開いているサイトのURL」に置き換えるという操作を行っています。
上記のスクリプトの=(イコール)は等しいという意味ではなく代入するという意味を持ち、+(プラス)は文字列を扱う場合は足し算ではなく、文字の連結を意味しています。
試しに、Googleのページを開いて上記スクリプトをブラウザのアドレス欄にコピペしてEnterを押してみるとInternet Archiveで検索できると思います。
※ ブラウザにポップアップブロック機能が付いている場合、機能を有効にしていると動作しない可能性がありますので注意が必要です。
上記スクリプトをブックマークのURLの欄にコピペして登録しておけば、わざわざブラウザのアドレス欄にコピペしなくても登録したブックマークを選択するだけで実行できるので便利です。
JavaScriptでいくつか関数を覚えれば、簡単なブックマークレットならすぐに作れると思うので試してみてください。
作る際の注意点は以下のサイトを参考に
Bookmarklet - ブックマークレットを作成する際のポイント
余談
上記のInternet Archiveで検索するブックマークレットですが、Internet ArchiveではURLに「#」があると「#」以下が消えてしまうので、より正確なブックマークレットを作りたい場合は以下を使ってください。
javascript:location.href='http://web.archive.org/web/*/'
+location.href.replace(/#/g,'%2523');
※ 幅の関係で2行になっていますが1行にしてコピペしてください+location.href.replace(/#/g,'%2523');
まあ、URLに「#」があるページの「#」以下を消しても結局は同じページということが多いので、やっても意味なさそうですが…
変更点を簡単に説明すると、上記のコードではURLの「#」を全て「%2523」に置き換えるという作業を行っています。
本来、「#」のURLエンコードは「%23」なのですが、「#」をそのまま「%23」に置き換えると、ジャンプする際に「#」に置き換えられてしまうみたいですので、「%」のURLエンコードである「%25」を使って「%2523」→「%23」→「#」となるようにしています。
追記 (12/13)
わざわざreplace()を使わなくても
javascript:location.href='http://web.archive.org/*/'+escape(location.href);
とescape()を使えば「#」の変換は大丈夫でした。一応書いておくと、escape()はカッコ内の文字列のURLとして用いることができない記号や日本語を「%xx」の形式にエンコードしたものを返します。
ただし、escape()はブラウザによって文字コードの扱いが異なるため使う際には注意が必要です。
ちなみに、encodeURI()だと「#」が変換されないので使えず、encodeURIComponent()だと「/」が変換されてしまうため使えません。
