135
122

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ブックマークレットを作るときのTips

Last updated at Posted at 2014-02-22

##名前空間を汚染しない

//javascript:
(function(){document.getElementsByTagName("title")[0].innerText;})()

特に多くのページで利用されるブックマークレットは、平凡な変数名だと既に存在する変数名とバッティングする可能性が高いので、このように (function(){...})() することが重要になってきます。関数ブロックは変数スコープを作り、 この中で var で宣言した変数は外部で使われる同名の変数と別のものになります。

また、このようにすることでブックマークレット全体の実行結果として何も返さない(voidを返す)ことも都合が良いです。

すべての変数は無名関数ブロックの変数スコープ内で var を使って宣言しましょう。var は複数の代入をコロンで区切って宣言することができます。

var div = document.createElement("div"),
    content = div.innerHTML,
    abc,
    xyz = document.getElementById("xyz");

(上記は実際には一行にまとめられます)

ブックマークレットでは文字数の少なさが重要です。またvar宣言はスコープの冒頭に巻きあげられる性質があるので、使う変数は関数ブロックの冒頭にまとめて宣言しておいたほうが混乱がないと思います。

##引数を活用する

//javascript:
(function(d,l,e){/* some code*/})(document,location,encodeURIComponent);

良く書くdocumentといった組み込みオブジェクト等の短縮記法として引数活用をするとよい場合があります。

##デバッグにconsole.log()を利用する

FirefoxやChromeなど、最近のモダンブラウザはデバッガが標準で付いていたりFirebugなどのデバッガを入れることができるようになりました。

その時にデバッグ出力をデバッガのコンソールに console.log() メソッドで出力することができるので、何が起こっているのかプリントデバッグのようなことができます。alert()でもよいのですが、オブジェクトを出力させたときにChromeでは中身を表示してくれるといったことをconsole.log()はしてくれたりするのでオススメです。

##はてなletを活用する

ブックマークレットを公開するための便利なツールです。デバッグレットという作りながら試せる機能もあります。

##JavaScriptのコンプレッサーを使う

長いブックマークレットになってくると、最初から一行で書くのはつらくなってきます。公開したくないブックマークレットだと、はてなletを使うわけにもいかないですね。

そういうときには、 Google Closure CompilerYUI Compressor などの JavaScript コードを一行にまとめるコンプレッサーの類を使うことも検討しましょう。

ただ、上記ツールはJava製なので、JavaVMなどが入っていないと使えなかったりするので面倒です。

私(@xtetsuji)のbookmarklet GitHubリポジトリには、js2let.plという簡単なPerlプログラムがあります。真面目な構文解析などはしていないので複雑なことをしているスクリプトが壊れる事もありますが、たいていの小さなブックマークレット用JavaScriptは問題なく一行にできると思います。Perlの外部モジュールへの依存もないので、どこにでも入っているPerlで使うことができます。

##大きなスクリプトは外部読み込みを使う

はてなletのデバッグレットでも同じ仕組みを使っていますが、大きなJavaScriptプログラムをブックマークレットにしようとした場合、ブックマークレットの長さの制限に引っかかったり可搬性が低かったりする可能性があります。そういう場合にはブックマークレットから外部JavaScriptファイルを外部読み込みする方法があります。

(function(){
  var s = document.createElement("script");
  s.src = "http://example.jp/big.js"; /* あなたの書いたプログラム */
  document.body.appendChild(s);
  /* この後に追加処理を書いていく */
})()

これを一行にしたものをブックマークレットとすればよいでしょう。詳しくは「createElement ブックマークレット」などで検索してみると良いと思います。

読み込まれるJavaScriptはbody要素の内容に追加される( </body> の直前にscript要素が入る)ので、 既存のページの名前空間を汚染する ことを念頭に置くことができれば特に問題は起こらないでしょう。

##参考

135
122
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
135
122

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?