- 追加された行はこの色です。
- 削除された行はこの色です。
[[FrontPage]]
Webブラウザを使っていると、自分専用でちょっとした便利な機能が欲しくなることがありませんか。それを作るには色々な方法があるけれど、とりあえずBookmarklet(ブックマークレット)が簡単なんじゃないか。ということで、作り方を解説します。
ここでは、簡単な「Hello World」から初めて、選択したテキストをYahoo!で検索するといった検索系ツールまで作成しています。自分用にFirefox3で使える奴を作っているため、IEやOperaでは動作するか不明です。Bookmarkletを作るには、少しばかりWebサイトとJavascriptの知識が必要になります。それは、ここでは説明していません。
#contents
*Bookmarkletって何さ [#f3eec267]
Bookmarklet(ブックマークレット)は、ブラウザに追加できる簡単なプログラム。ブックマーク(お気に入り)において使うので、こんな名前になりました。
たとえば、ドラッグで選択した文字をYahoo検索したり、Wikipediaや英和辞書で調べたり、今見ているWebページをちょっと加工したり、なんてことができます。
最近のWebサービスでは、サービスを便利にするBookmarkletを配布していることもあります。[[Bookmarklet(ブックマークレット):http://search.yahoo.co.jp/search?p=bookmarklet]]で検索すると、いろいろ見つかります。
Firefoxだと、JavascriptとXULを使って、もっとすごい拡張機能を作れる(らしい)。だけど、いきなりそれは難しいので、こんなところから。
事前に、ブックマークツールバーを表示しておきましょう。ここには、使用頻度の高いブックマークを登録できます。「表示」-「ツールバー」-「ブックマークツールバー」で表示されます。
ドラッグ＆ドロップでブックマークツールバーにリンクを追加できるので、そこに使いたいBookmarkletをボタンとして、おいておくと便利です。
*試してみよう [#t235f426]
さて、実際にBookmarkletを使ってみましょう。Bookmarkletは、ブックマークを利用した機能なので、リンクの仕組みを活用します。
まず、次の「Bookmarklet Test」リンクをクリックしてみてください。Yahoo Japanへ移動します。ここには、Yahooへのリンクが貼ってあります。
-[[Bookmarklet Test:http://www.yahoo.co.jp/]]
Firefoxで、このリンクをブックマークバーまでドラッグすると、そこに「Bookmarklet Test」というリンクボタンができあがります。このボタンをクリックすれば、どのWebページを表示していても、Yahoo!に移動できます。
Bookmarkletでは、このリンクボタンのリンク先(URL)に、Javascriptによるプログラムを設定します。Bookmarkletは、1行で書かれたJavascriptのプログラムです。リンクボタンのリンク先として、次のように書くと、クリックしたときにこのプログラムが実行できます。
javascript:(実際の処理);
リンクボタンにBookmarkletを登録するには、右クリック-「プロパティ」を選択して、URL欄に入力します。
Bookmarkletの配布サイトなどでは、Bookmarkletが設定済みのリンクが表示されているので、それを直接ブックマークツールバーにドラッグ＆ドロップしても大丈夫です。ここでは、技術的な理由でそれができませんでした(Pukiwikiで直接Bookmarkletを配布する方法があるかな、ソースをいじらないとダメか)。
*Hello Worldを表示させる [#k153c91f]
Hello Worldをダイアログボックスで表示します。上記の手順で、ブックマークツールバーの「Bookmarklet Test」のURL欄に次のプログラムをコピペしてください。
javascript:alert("hello%20world");
日本語も表示できます。
javascript:alert("世界の皆さん、コンニチハ");
*Hello Worldを別ウィンドウで表示させる [#f39278c8]
javascript:var%20d=window.open().document;
d.writeln('<textarea%20rows=1%20cols=40>'+'世界の皆さん、コンニチハ'+'</textarea>');
改行を削除してからコピペしてください。
*選択したテキストを表示させる [#n41ad959]
ダイアログで表示
javascript:var%20d=document;
var%20tx=d.selection?d.selection.createRange().text:d.getSelection();
alert(tx);
別ウィンドウで表示
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!で検索する [#z3b8b10c]
検索結果を別ウィンドウで表示します。
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;
改行を削除してからコピペしてください。
*検索系ツール [#fe24039b]
ここまでくれば、あとはそのバリエーション。いくつか自分用に作った奴をおいておきます。
**Wikipediaで検索 [#k542bcd4]
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;
**英辞郎で検索 [#u18af69e]
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;
*感想 [#d8394007]
-いいところ
--お手軽
--コツさえつかめば、応用が広がる
--定番ツールは公開されているので、それを加工するだけでも良い。
-何とかしたいところ
--1行で記述するのが面倒
--グローバル変数になってしまうらしい。つまり、同じ変数を使うBookmarkletが複数あると挙動がおかしくなる。
--それを回避する書き方もある(グロージャとか使うらしい)。初心者には意味が分かりにくいよね。
というわけで、さらにすごい奴を作りたいなら[[XUL:http://developer.mozilla.org/ja/XUL_Tutorial]]に挑戦しないとネ。
*参考資料 [#z131d7e8]
-ブックマークレット-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
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
