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

FrontPage ＞ Programing に戻る　

（このページは、2008年ごろに書いて、ときどき修正しています）

Photo by Gayatri Krishnamoorthy via Flickr

Bookmarklet(ブックマークレット)は、Webブラウザに追加できる小さなプログラムです。

ブックマーク(お気に入り)に置いといて、そこから呼び出す小さなプログラムなので、こんな名前になってます。

たとえば、Wikipediaや英和辞書で調べたり、今見ているWebページをちょっと加工したり、なんてことができます。

Webブラウザを使っていると、自分専用でちょっとした便利な機能が欲しくなることがありますよね。

解決する方法は色々あるけれど、とりあえずBookmarklet(ブックマークレット)が簡単なんじゃないか。

ということで、作り方を調べてみました。

ちなみに、ドラッグで選択した文字を検索するのは、ブックマークレットを使わなくても、右クリックすればOK

>>オススメのJavscript解説書

• 確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)
• JavaScript コードレシピ集
• 改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

Bookmarkletを作るには †

ここでは、簡単な「Hello World」から初めて、選択したテキストをYahoo!で検索するといった検索系ツールまで作成しています。

また、ブログ用にhtmlコードを生成するサンプルコードも用意してあります。

ただし、自分用にFirefox3で使える奴を作っているため、IEやOperaでは動作するか不明です。

Bookmarkletを作るには、少しばかりHTMLとJavascriptの知識が必要になります。

最近のWebサービスでは、サービスを便利にするBookmarkletを配布していることもあります。

Bookmarklet(ブックマークレット)で検索すると、いろいろ見つかります。

ブックマークツールバーを表示 †

ブックマークレットを使うには、事前に、ブックマークツールバーを表示しておきましょう。

ここには、使用頻度の高いブックマークを登録できます。「表示」-「ツールバー」-「ブックマークツールバー」で表示されます。

ブックマークツールバーには、ドラッグ＆ドロップでリンクを追加できるので、そこに使いたいBookmarkletをボタンとして登録しておくと便利です。

ブックマークレットを使わなくてもできること！ †

Webブラウザは標準で、「Googleで検索」機能を持っています。

1. 検索したいテキストをドラッグで選択
2. 右クリック->「Googleで検索」

さらに、こんな機能もありました。

• 検索バーの検索エンジンを切り替えると、「Yahoo!で検索」に切り替わった。
• Wikipediaで検索もあった。
• エクステンションには、「goo辞書検索」があった。

でもまあ、自分で作れるという感触は重要。

Firefoxだと、Javascriptを使って、もっとすごい拡張機能を作れる。だけど、いきなりそれは難しいので、こんなところから。

Bookmarkletを試してみよう †

さて、実際にBookmarkletを使ってみましょう。Bookmarkletは、ブックマークを利用した機能なので、リンクの仕組みを活用します。

まず、次の「Bookmarklet Test」リンクをクリックしてみてください。Yahoo Japanへ移動します。ここには、Yahooへのリンクが貼ってあります。

• Bookmarklet Test

Firefoxで、このリンクをブックマークバーまでドラッグすると、そこに「Bookmarklet Test」というリンクボタンができあがります。このボタンをクリックすれば、どのWebページを表示していても、Yahoo!に移動できます。

リンクボタンをBookmarkletにするには †

では、この「Bookmarklet Test」のリンクボタンを書き直して、Bookmarkletを作ってみましょう。

Bookmarkletでは、このリンクボタンのリンク先(URL)に、Javascriptによるプログラムを設定します。Bookmarkletは、1行で書かれたJavascriptのプログラムです。リンクボタンのリンク先として、次のように書くと、クリックしたときにこのプログラムが実行できます。

javascript:(実際の処理);

リンクボタンにBookmarkletを登録するには、右クリック-「プロパティ」を選択して、URL欄に入力します。

Bookmarkletの配布サイトなどでは、Bookmarkletが設定済みのリンクが表示されているので、それを直接ブックマークツールバーにドラッグ＆ドロップしても大丈夫です。ここでは、技術的な理由でそれができませんでした(Pukiwikiで直接Bookmarkletを配布する方法があるかな、ソースをいじらないとダメか)。

Hello Worldを表示させる †

Hello Worldをダイアログボックスで表示します。上記の手順で、ブックマークツールバーの「Bookmarklet Test」のURL欄に次のプログラムをコピペしてください。

javascript:alert("hello%20world");

ちなみに、「%20」はスペースを表しています。

日本語も表示できます。

javascript:alert("世界の皆さん、コンニチハ");

Hello Worldを別ウィンドウで表示させる †

javascript:var%20d=window.open().document;
d.writeln('<textarea%20rows=1%20cols=40>'+'世界の皆さん、コンニチハ'+'</textarea>');

改行を削除してからコピペしてください。

ちょっとややこしいので、複数行に展開してみます(%20はスペースに置換)。

javascript:
   var d=window.open().document;
   d.writeln('<textarea rows=1 cols=40>'+'世界の皆さん、コンニチハ'+'</textarea>');

選択したテキストを表示させる †

ダイアログで表示

javascript:var%20d=document;
var%20tx=d.selection?d.selection.createRange().text:d.getSelection();
alert(tx);

「?」記号は、条件文を1行で書く、条件演算子というテクニックです。また、選択範囲のテキストを選るには、getselectionを使っています。

別ウィンドウで表示

javascript:var%20d=document;
var%20tx=d.selection?d.selection.createRange().text:d.getSelection();
var%20subw=window.open().document;
subw.writeln('<textarea%20rows=1%20cols=40>'+tx+'</textarea>');

改行を削除してからコピペしてください。

選択したテキストをYahoo!で検索する †

検索結果を別ウィンドウで表示します。

javascript:var%20d=document;
var%20tx=d.selection?d.selection.createRange().text:d.getSelection();
var%20subw=window.open('http://search.yahoo.co.jp/search?p='+tx).document;

改行を削除してからコピペしてください。

検索系ツール †

ここまでくれば、あとはそのバリエーション。いくつか自分用に作った奴をおいておきます。

Wikipediaで検索 †

javascript:var%20d=document;
var%20tx=d.selection?d.selection.createRange().text:d.getSelection();
var%20subw=window.open('http://ja.wikipedia.org/wiki/'+tx).document;

英辞郎で検索 †

javascript:var%20d=document;
var%20tx=d.selection?d.selection.createRange().text:d.getSelection();
var%20subw=window.open('http://eow.alc.co.jp/'+tx+'/UTF-8/?ref=sa').document;

補足：実は検索系機能はFirefoxでは標準で、できるのです。 †

その後、使っているWebブラウザ(Firefox)では、標準機能で、選択した語を検索することができることが判明していました。手順は、以下のとおり。

1. 右上の検索窓で検索先を選ぶ
2. 調べたい語をドラッグで選択
3. 右クリック->「＊＊＊＊で検索 "(選択語)"

これは、Firefoxで検索できるよう登録されているなら、どれでも利用できます。あとから検索機能を追加するアドオンも出回っているので、それを使う方が便利ですね。

• Firefox アドオン - 検索エンジン | Mozilla Japan
• MacFan201103号_Mac Fan.jp

翻訳系 †

• Bookmarklet：英語のWebページをGoogle翻訳で日本語にして開く | catch.jp blog

次のステップ †

次は、Web更新を支援するbookmarkletについて調べてみます。ここで、Javascriptのクロージャ―とかいうテクニックが出てきます。が、サンプルコードを押さえておけば大丈夫でしょう。

• これまでのbookmarkletのいいところ
  • お手軽
  • コツさえつかめば、応用が広がる
  • 定番ツールは公開されているので、それを加工するだけでも良い。
• 難しいところ
  • グローバル変数になってしまうらしい。つまり、同じ変数を使うBookmarkletが複数あると、挙動がおかしくなる。

これを回避する書き方が、クロージャとかいうらしい。

実例を見る †

次のbookmarkletは、今見ているWebページのタイトルをテキストエリアに表示します。

javascript:(function(){function%20o(s){var%20d=window.open().document;
d.writeln('<textarea%20rows=15%20cols=80>'+s+'</textarea>');
d.close()}var%20contents=document.title;o(contents);})();

1行だと分かりにくいので、複数行に展開してみました。

javascript:(
	function(){
	    function o(s){
	        var d=window.open().document;
	        d.writeln('<textarea rows=15 cols=80>'+s+'</textarea>');
	        d.close()
	    }
	    var contents=document.title;
	    o(contents);
	}
)();

関数(function)の中で、関数o(s)を定義しています。で、定義したo関数に、Webページのタイトル(document.title)を渡して、別ページにテキストエリアの一部として書き込んでいます。

なぜ、これが動くのか、詳しくはクロージャ―の説明を読んでもらうとして、とりあえず、これを改造していけばいいんじゃないかな。

クロージャについて †

• [JavaScript]　猿でもわかるクロージャ超入門　１　問題 - DQNEO起業日記
• JavaScriptクロージャを完全理解！スコープチェインを知る（前編） - builder
  • スクリプト言語:JavaScriptのイロハ - page2 - builder
• Life is beautiful: Javascriptクイズ（中級者向け）：無名関数と実行効率の話
• JavaScript のクロージャ と オブジェクト指向 | すぐに忘れる脳みそのためのメモ

Web更新用 †

現在表示しているページから、ブログやWikiに貼り付ける情報を作成

現在表示しているページのタイトルとURLを表示 †

javascript:(function(){function%20o(s){var%20d=window.open().document;
d.writeln('<textarea%20rows=15%20cols=80>'+s+'</textarea>');
d.close()}
o(document.title+"\n"+location.href);})();

これは、ながらく愛用しているので、さらにパワーアップしてみた。

• Webコピ太朗
  • 使い方：https://www.catch.jp/program/copy-taro/index.php
  • ソースコード：https://github.com/ycatch/copy-taro

現在表示しているページへのリンクhtmlタグを作成 †

javascript:(function(){function%20o(s){var%20d=window.open().document;
d.writeln('<textarea%20rows=15%20cols=80>'+s+'</textarea>');d.close()}var%20prefix='';
var%20suffix='';var%20contents=document.title;var%20target='_blank';
o(prefix+'<a%20href=\''+location.href+'\'%20target=\''+target+' \'>'+contents+'</a>'+suffix);})();

現在表示しているページへのMarkdownリンクを作成 †

javascript:(function(){function%20o(s){var%20d=window.open().document;
d.writeln('<textarea%20rows=15%20cols=80>'+s+'</textarea>');
d.close()};
o('-['+document.title+']('+location.href+')');})();

現在表示しているFlickrページから写真貼り付け用htmlタグを作成２ †

• A collection of Flickr Bookmarklets / Tools at sean mcgrath’s weblog

javascript:(function()%20{var%20url=location.href;
%20if%20(url.match(/http:\/\/(www.)?flickr.com\//))%20{
%20window.location%20='http://seanmcg.com/flickrtools/html.php?url='+url;%20}
%20else%20{%20alert('You\'re%20not%20on%20Flickr!');%20}%20})()

現在表示しているFlickrページから写真貼り付け用htmlタグを作成１ †

• 参考：flickr の写真をブログに貼り付けるタグを生成するブックマークレット
  • http://negisio.net/?p=145

●注：Flickrのタグ構成が変わっていて、うまく動きません(2009/04)

javascript:document.body.innerHTML.match(/property=\%22dc:title\%22>(.*?)<\/h1>
[\s\S|.]*?<img%20src=\%22(.*?)\.jpg\?v[\s\S|.]*by%20<a%20href=%22\/photos\/(.*?)\/%22/);
document.body.innerHTML=%22<textarea%20cols='100'%20rows='10'>
<div%20style=\%22float:right;margin:5px%200px%2010px%2010px;border:dotted%201px%20#aaaaaa;padding:5px\%22>\n
<a%20href=\%22%22+document.URL+%22\%22%20target=\%22_blank\%22>
<img%20src=\%22%22+RegExp.$2+%22_m.jpg\%22%20style=\%22border:none\%22></a>\n
<a%20href=\%22%22+document.URL+%22\%22%20target=\%22_blank\%22>%22+RegExp.$1+%22</a>
<br%20/>\nPhoto%20by%20<a%20href=\%22http://www.flickr.com/photos/%22+RegExp.$3+%22/\%22%20target=\%22_blank\%22>%22+RegExp.$3+%22</a>\n
</div>\n\n<br%20clear=\%22all\%22/></textarea>%22

現在表示しているページへのPukiwikiタグを作成 †

javascript:(function(){function%20o(s){var%20d=window.open().document;
d.writeln('<textarea%20rows=15%20cols=80>'+s+'</textarea>');d.close()}
var%20prefix='';var%20suffix='';var%20contents=document.title;var%20target='_blank';
o(prefix+'-[['+contents+':'+location.href+']]'+suffix);})();

メール †

現在表示しているページのメールを作成

href="javascript:location.href='mailto:?SUBJECT='+encodeURIComponent(document.title)+'&BODY='+escape(location.href)

• Screening - A Useful mailto Bookmarklet を日本語対応に改編

Gmail †

現在見ているページをGmailで送信

javascript:(function(){x=document;y=window;if(x.selection)%20{Q=x.selection.createRange().text;}%20else%20if%20(y.getSelection)%20{Q=y.getSelection();}%20else%20if%20(x.getSelection)%20{Q=x.getSelection();};m='https://mail.google.com/mail/?view=cm&fs=1&tf=1&to=&su=[FYI]%20'+encodeURIComponent(x.title)+'&body='+encodeURIComponent(x.title)+encodeURIComponent(Q)+encodeURIComponent('\n\n'+x.location);y.open(m,'addwindow','status=no,toolbar=no,width=575,height=510,resizable=yes');})();

• これ、Gmailで！ 選択テキストを本文に挿入してくれます。
• [N] 気になるページをGmailで送信「Gmail This」ブックマークレット

Twitter †

• ツイートボタンがないページでもツイート画面を開くブックマークレット - Qiita

javascript:window.open("https://twitter.com/intent/tweet?
status="+encodeURIComponent(document.title)+" "+encodeURIComponent(location.href))

• Blog記事からTwitterアカウントを取得するBookmarkletを作りたいー！ - @hebyumetan
• URLをダイアログボックスで表示できた　〜Blog記事からツイアカ取得に向けたBookmarkletのお勉強　Vol.1〜 - @hebyumetan

スマートフォンでブックマークレット †

スマホを使うとき、やっぱりブックマークレットが欲しい。というわけで、関連リンク。

ただし、Androidの標準ブラウザでは、リンクにjavascriptを登録できません。

Android版FirefoxやOpera Mobileあたりを利用するといいでしょう。

• Androidでもブックマークレットを使えるようにしよう | あんどろいどスマート
• iPhone、Android ユーザを虜にするかもしれないブックマークレットにまつわる２つのプロダクトをリリースしました。 (フェンリル | デベロッパーズブログ)

参考資料 †

• ブックマークレット-Wikipedia
  • http://ja.wikipedia.org/wiki/%E3%83%96%E3%83%83%E3%82%AF%E3%83%9E%E3%83%BC%E3%82%AF%E3%83%AC%E3%83%83%E3%83%88
• JAVASCRIPT::BOOKMARKLET
  • http://bookmarklet.daa.jp/
• 誰にも便利な検索ブックマークレット
  • http://tech.bayashi.jp/archives/entry/bookmarklet/2006/001363.html
• Bookmarklets - ブックマークレット
  • http://www.teria.com/~koseki/memo/bookmarklets/
• BookMarkletの作り方
  • http://oyasirazu.dip.jp/article.php/20070621055807535

• Bookmarklet Builder これはイイ！
  • Help for Bookmarklet Builder

• ブックマークレットを作るときのTips - Qiita
• ブックマークレットで jQuery を使う魔法の 210 文字 - Qiita

---

というわけで、さらにすごい奴を作りたいなら、ちゃんとJavascript挑戦しないとネ。

>>オススメのJavscript解説書

• 確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)
• JavaScript コードレシピ集
• 改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで