ウェブテコでやったブックマークレット入門のLT資料

ウェブテコ(WebTeko)第5回でLTをやった。ブックマークレット入門ということで、簡単な作り方の説明と、僕が作ったブックマークレットを紹介した。

その中に出てくるブックマークレットはこんな感じ。

W3C HTML 4.01仕様書の日本語ページと英語ページを切り替える

LTで紹介したのは日本語から英語だけだったけど、これは両方向OKだよ。

javascript:
(function() {
    var urls = {
        ja:'http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/',
        en:'http://www.w3.org/TR/1999/REC-html401-19991224/'};

    for (var key in urls) {
        if (location.href.indexOf(urls[key]) === 0) {
            location.href =
                location.href.replace(urls[key], urls[key == 'en'?'ja':'en']);
            break;
        }
    }
})();

もうちょっと詳しい説明を別のエントリでしたよ。

a要素のリンクを無効化し、ただのテキストにする

リンクが無くなって単なるテキストになるので、コピペするときに便利だよ。

javascript:
(function() {
    /* node に含まれるテキストを連結して返す */
    var getText = function(node) {
        var f =  function(n, strs) {
            if (n.nodeType == 3 /* Node.TEXT_NODE */) {
                strs.push(n.data);
            } else if(n.nodeType == 1 /* Node.ELEMENT_NODE */){
                /* テキストノードを再帰的に探す */
                for (var m = n.firstChild; m !== null; m = m.nextSibling) {
                    f(m, strs);
                }
            }
        };
        var strings = [];
        f(node, strings);
        return strings.join('');
    };

    /*
     * replace オブジェクト
     * 'a': HTMLAnchorElement
     * 't': TextNode, 'a' に含まれるテキストをdataとして持つ
     */
    var reps = [];

    var anchors = document.getElementsByTagName('a');
    for(var i = 0; i < anchors.length; i++) {
        var a = anchors[i];
        var text = getText(a);
        if (text) {
            reps.push({'a':a, 't':document.createTextNode(text)});
        }
    }

    /* a要素をTextNodeで置き換える */
    for (var j = 0; reps.length; j++) {
        reps[j]['a'].parentNode.replaceChild(
            reps[j]['t'], reps[j]['a']);
    }
})();

こっちも、もうちょっと詳しい説明を別のエントリでしたので、見てね。

あと、ブックマークレットを作るときの注意事項なんかはBookmarklet - ブックマークレットを作成する際のポイントページにかいてあるので、参考にするといいよ。