Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

名前空間を汚染しない

//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要素が入る)ので、 既存のページの名前空間を汚染する ことを念頭に置くことができれば特に問題は起こらないでしょう。

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした