2008-1-01

Bookmarkletの作り方

Category: Programming

※「catch.jp-wiki」から移動したページです。

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

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

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

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

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

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

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

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

Bookmarkletを作るには

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

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

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

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

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

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

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

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

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

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

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

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

検索したいテキストをドラッグで選択
右クリック->「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('&lt;textarea%20rows=1%20cols=40&gt;'+'世界の皆さん、コンニチハ'+'&lt;/textarea&gt;');

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

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

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

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

ダイアログで表示

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('&lt;textarea%20rows=1%20cols=40&gt;'+tx+'&lt;/textarea&gt;');

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

選択したテキストを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)では、標準機能で、選択した語を検索することができることが判明していました。手順は、以下のとおり。

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

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

翻訳系

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('&lt;textarea%20rows=15%20cols=80&gt;'+s+'&lt;/textarea&gt;');
d.close()}var%20contents=document.title;o(contents);})();

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

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

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

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

クロージャについて

Web更新用

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

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

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

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

javascript:(function(){function%20o(s){var%20d=window.open().document;
d.writeln('&lt;textarea%20rows=15%20cols=80&gt;'+s+'&lt;/textarea&gt;');
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&gt;(.*?)&lt;\/h1&gt;
[\s\S|.]*?&lt;img%20src=\%22(.*?)\.jpg\?v[\s\S|.]*by%20&lt;a%20href=%22\/photos\/(.*?)\/%22/);
document.body.innerHTML=%22&lt;textarea%20cols='100'%20rows='10'&gt;
&lt;div%20style=\%22float:right;margin:5px%200px%2010px%2010px;border:dotted%201px%20#aaaaaa;padding:5px\%22&gt;\n
&lt;a%20href=\%22%22+document.URL+%22\%22%20target=\%22_blank\%22&gt;
&lt;img%20src=\%22%22+RegExp.$2+%22_m.jpg\%22%20style=\%22border:none\%22&gt;&lt;/a&gt;\n
&lt;a%20href=\%22%22+document.URL+%22\%22%20target=\%22_blank\%22&gt;%22+RegExp.$1+%22&lt;/a&gt;
&lt;br%20/&gt;\nPhoto%20by%20&lt;a%20href=\%22http://www.flickr.com/photos/%22+RegExp.$3+%22/\%22%20target=\%22_blank\%22&gt;%22+RegExp.$3+%22&lt;/a&gt;\n
&lt;/div&gt;\n\n&lt;br%20clear=\%22all\%22/&gt;&lt;/textarea&gt;%22

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

javascript:(function(){function%20o(s){var%20d=window.open().document;
d.writeln('&lt;textarea%20rows=15%20cols=80&gt;'+s+'&lt;/textarea&gt;');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)+'&amp;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&amp;fs=1&amp;tf=1&amp;to=&amp;su=[FYI]%20'+encodeURIComponent(x.title)+'&amp;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))

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

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

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

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

参考資料

ブックマークレット-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

catch.jp blog

Bookmarkletを作るには

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

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

Bookmarkletを試してみよう

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

Hello Worldを表示させる

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

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

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

検索系ツール

Wikipediaで検索

英辞郎で検索

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

翻訳系

次のステップ

実例を見る

クロージャについて

Web更新用

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

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

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

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

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

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

メール

Gmail

Twitter

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

参考資料

Categories