ブックマークレットの作る際の注意点

ブックマークレットを作る際につまづいたあたりを紹介したいと思います。

「;」

ふだんは抜いて書いていても問題のないセミコロン。これ、ないとエラーでます。そりゃそうですよね。ブックマークレットにするとき、urlのところは1行におさめられてしまいます。そのため、;がないとアウトです。ただし、そんなめんどうなことをしたくないと思います。そんな方に朗報です。Closure Compilerというものがあります。Javascriptを構文解析して、圧縮してくださいます。しかも、1行におさめてくださるので、非常にらくにブックマークレットの作成ができます。思わず「Googleの技術力は世界一ィィィ!!」といいたくなりますよね(Closure CompilerはGoogle製です)。

jQuery

これはあまりいないかもしれません。でも書いておきます。基本 jQuery はNGです。使えません。読み込む方法もあるかもしれません。でも、使わない方が動作が軽快だし、そもそもurlにはいる程度のプログラムに90KB近くもあるjQueryをいれるのはどうかとおもいますし。

じゃあ、どうしろというんだというかたのためにさくさくっと代用方法を書きたいと思います。 まず、$()は、document.getElementById()もしくはdocuent.getElementsByTagName()です。前者はIDをつかって検索をかけます。後者はタグの名前から検索をかけます。クラス名は、がんばってください。全部列挙して調べるしかないと思います。

次に.html()メソッドの書き換え方法です。こんなかんじです。

document.getElementById("hoge").innerHTML="fuga";

jQueryだとこんなかんじです。シンプルですが、しょうがないです。

$("#hoge").html("fuga");

まあ、できないこともないです。力技ですが。

function $(selector){
    return document.getElementById(selector);
};
HTMLElement.prototype.html=function(content){
    this.innerHTML=content;
    return this;
};
$("hoge").html("fuga");

再利用するつもりなら、これでもいいかもしれませんね。ちなみにさっきのは、チェーンメソッドできます。

おつぎは.css()です。だるくなってきました。さっきのを使い回します。$()は宣言されたって事で

$("hoge").style.background="#fff";

jQueryではこんなかんじです。

$("#hoge").css("background","#fff");

このstyleは、プロパティがたくさんあります。HTML DOM Style Objectココ参照です。.css()はめんどくさいのでやりません!がんばってください!というか、多分$()と.html()と全部かいたらブックマークレットに収まりません。

終わりに

なんだかjQueryをネイティブに戻す回みたいになってしまいましたねww。それはそれでいい勉強にもなるし、サイトも早くなるのでおすすめです。では、オリジナルなブックマークレット作ってより便利な生活を手に入れてください。