2007年02月25日 06:15 [Edit]

javascript - meta bookmarkletのひな形

私はメタ男くんなので、さらにメタ、すなわちこういうmeta bookmarkletを簡単に作る方法を考えてみた。

Life is beautiful: 複数のbookmarkletの機能を一つにまとめた「シオレット」
そこで、いくつかのBookmarkletの機能を一つにまとめた、メタBookmarkletを自分のために作ったのだが、せっかくなので、ここで公開。

まずは、メタブックマークレットそのもの。ここでは選択されたテキストに対して何かをするbookmarkletを用意。

とりあえずSafariとFirefoxとOperaで動作確認。IEの動作確認きぼんぬ。

[追記:IE6でも動くようです。報告ありがとうございます]

しかし、主題はソースの方。

まずはbookmarklet、というよりJS Loader。

無名関数に、引数としてloadしたいJSのURIを指定している。これなら手で編集するのも容易だ。

次に、LoadされるJS本体。

[追記:Operaのためにiframeやめてソース直張りにしました]

mbm-selectedtext.js
(function(json){
    var s = 
        document.selection ?
            document.selection.createRange().text :
        document.getSelection ?
            document.getSelection() :
        window.getSelection ?
            window.getSelection() :
        null;
    var menu = document.createElement('div');
    menu.style.position = 'absolute';
    menu.style.top = 0;
    menu.style.border = 'outset 2px';
    menu.style.backgroundColor = 'yellow';
    menu.innerHTML = s;
    var ul =  document.createElement('ul');
    for (var p in json){
        var a = document.createElement('a');
        a.setAttribute('href', 'javascript:(' + json[p] + ')(\'' + s + '\')');
        a.innerHTML = p;
        var li = document.createElement('li');
        li.appendChild(a);
        ul.appendChild(li);
    }
    menu.appendChild(ul);
    document.body.appendChild(menu);
    
})({
    "Search Google(en)" : function(s){ window.open(
        'http://www.google.com/search?hl=en&q='
        + encodeURIComponent(s),
        '_blank'
    )},
    "Google(en)で検索" : function(s){ window.open(
        'http://www.google.co.jp/search?hl=ja&q='
        + encodeURIComponent(s),
        '_blank'
    )},
    "Search Wikipedia(en)" : function(s){ window.open(
        'http://en.wikipedia.org/wiki/Special:Search?search='
        + encodeURIComponent(s),
        '_blank'
    )},
    "Wikipedia(ja)で検索" : function(s){ window.open(
        'http://ja.wikipedia.org/wiki/Special:Search?search='
        + encodeURIComponent(s),
        '_blank'
    )}
});

見ての通り、メニューをレンダリングする部分を無名関数とし、それにメニューをjson形式で指定する形にしてある。これなら、付け加えたい機能はjsonの部分をカスタマイズするだけだ。

Enjoy!

Dan the Javascripting Metaphilia


この記事へのトラックバックURL

この記事へのトラックバック
404 Blog Not Found:javascript - meta bookmarkletのひな形
404 Blog Not Found:javascript - meta bookmarkletのひな形【】at 2012年01月21日 20:47
きっかけは、こちら。 「アルファブロガー・アワード2007」に15人を選出 - 毎日jp(毎日新聞)
Bookmarklet - link them all!【404 Blog Not Found】at 2007年12月11日 03:15
こんなすごいサービスなのに、 もはてブされているのに、「ITmedia Biz.ID:いつも「すごい」しか言わない人へ -「類語辞典」で表現力アップ術」を読むまで存在を知らなかったorz.
Weblioがすごい【404 Blog Not Found】at 2007年02月27日 00:46
こんなすごいサービスなのに、 もはてブされているのに、「ITmedia Biz.ID:いつも「すごい」しか言わない人へ??「類語辞典」で表現力アップ術」を読むまで存在を知らなかったorz.
Weblioがすごい【404 Blog Not Found】at 2007年02月27日 00:45
毎日のニュースが盛りたくさん
今日の毎日ニュース【今日の毎日ニュース】at 2007年02月25日 14:11
この記事へのコメント
Google(en)で検索 -> Google(jp)で検索
Posted by たろう at 2007年02月25日 19:56