404 Blog Not Found:javascript - meta bookmarkletのひな形

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

javascript - meta bookmarkletのひな形

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

Life is beautiful: 複数のbookmarkletの機能を一つにまとめた「シオレット」

そこで、いくつかのBookmarkletの機能を一つにまとめた、メタBookmarkletを自分のために作ったのだが、せっかくなので、ここで公開。

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

MetaBookMarklet - Selected Text

とりあえず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

Posted by dankogai at 06:15│Comments(1)│TrackBack(5)