最新の20件
- Bookmarkletの作り方
4 user online
Webブラウザを使っていると、自分専用でちょっとした便利な機能が欲しくなることがありませんか。それを作るには色々な方法があるけれど、とりあえずBookmarklet(ブックマークレット)が簡単なんじゃないか。ということで、作り方を調べてみました。
ここでは、簡単な「Hello World」から初めて、選択したテキストをYahoo!で検索するといった検索系ツールまで作成しています。また、ブログ用にhtmlコードを生成するサンプルコードもあります。
ただし、自分用にFirefox3で使える奴を作っているため、IEやOperaでは動作するか不明です。また、Bookmarkletを作るには、少しばかりWebサイトとJavascriptの知識が必要になります。それは、ここでは説明していません。
Bookmarkletって何さ †
Bookmarklet(ブックマークレット)は、ブラウザに追加できる簡単なプログラム。ブックマーク(お気に入り)において使う小さなプログラムなので、こんな名前になりました。
たとえば、ドラッグで選択した文字をYahoo検索したり、Wikipediaや英和辞書で調べたり、今見ているWebページをちょっと加工したり、なんてことができます。
- 横道にそれる
- Bookmarkletの作り方を調べている途中で、右クリック->「Googleで検索」機能を発見
- 検索バーの検索エンジンを切り替えると、「Yahoo!で検索」に切り替わった。
- Wikipediaで検索もあった。
- エクステンションには、「goo辞書検索」があった。
- でもまあ、自分で作れるという感触は重要。
最近のWebサービスでは、サービスを便利にするBookmarkletを配布していることもあります。Bookmarklet(ブックマークレット)で検索すると、いろいろ見つかります。
Firefoxだと、JavascriptとXULを使って、もっとすごい拡張機能を作れる(らしい)。だけど、いきなりそれは難しいので、こんなところから。
事前に、ブックマークツールバーを表示しておきましょう。ここには、使用頻度の高いブックマークを登録できます。「表示」-「ツールバー」-「ブックマークツールバー」で表示されます。
ドラッグ＆ドロップでブックマークツールバーにリンクを追加できるので、そこに使いたいBookmarkletをボタンとして、おいておくと便利です。
試してみよう †
さて、実際にBookmarkletを使ってみましょう。Bookmarkletは、ブックマークを利用した機能なので、リンクの仕組みを活用します。
まず、次の「Bookmarklet Test」リンクをクリックしてみてください。Yahoo Japanへ移動します。ここには、Yahooへのリンクが貼ってあります。
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");
日本語も表示できます。
javascript:alert("世界の皆さん、コンニチハ");
Hello Worldを別ウィンドウで表示させる †
javascript:var%20d=window.open().document;
d.writeln('<textarea%20rows=1%20cols=40>'+'世界の皆さん、コンニチハ'+'</textarea>');
改行を削除してからコピペしてください。
選択したテキストを表示させる †
ダイアログで表示
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!で検索する †
検索結果を別ウィンドウで表示します。
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;
Web更新用 †
現在表示しているページから、ブログやWikiに貼り付ける情報を作成
現在表示しているページへのリンク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);})();
現在表示しているFlickrページから写真貼り付け用htmlタグを作成２ †
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 の写真をブログに貼り付けるタグを生成するブックマークレット
●注：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);})();
感想 †
- いいところ
- お手軽
- コツさえつかめば、応用が広がる
- 定番ツールは公開されているので、それを加工するだけでも良い。
- 何とかしたいところ
- 1行で記述するのが面倒
- グローバル変数になってしまうらしい。つまり、同じ変数を使うBookmarkletが複数あると挙動がおかしくなる。
- それを回避する書き方もある(グロージャとか使うらしい)。初級レベル(オレ)には意味が分かりにくい。
- とりあえず、ブログの更新補完ツールは便利。
というわけで、さらにすごい奴を作りたいならXULに挑戦しないとネ。
参考資料 †
- ブックマークレット-Wikipedia
- JAVASCRIPT::BOOKMARKLET
- 誰にも便利な検索ブックマークレット
- Bookmarklets - ブックマークレット
- BookMarkletの作り方