ブックマークレットを作るときの注意点など

ブックマークレットを作るときに気をつけるべき点とかメモ。

スコープ

スコープを汚さないために、(function(){})()で囲います。
- 例えば、alert("hoge")を実行したいなら、javascript:(function(){alert("hoge")})()と書きます。
さらに万全を期すならjavascript:void((function(){alert("hoge")})())という風に、void()で囲って書きます。
- void()で囲う理由は、ブックマークレットを実行した際に何かしらの値を返してしまうと、それに応じてページ遷移してしまうのを防ぐためです。

ブログなどでブックマークレットを配布する場合、

<a href='javascript:alert("hoge")'>ブックマークレット</a>

みたいな感じで、aタグのhref属性の中に、埋め込む形になると思いますが

以下のように

<a href="javascript:alert("hoge")">ブックマークレット</a>

などをすると動きません。

ブックマークレット　←動かないサンプルです（デベロッパーツールでソースコードを見てみてください）

これを防ぐには、以下の2通りの方法があります。

同じクォーテーションを入れ子にしない
- 例えば、aタグでダブルクォーテーションを使う場合は中ではシングルクォーテーションを使い、aタグでダブルクォーテーションを使う場合は中ではシングルクォーテーションを使う
クォーテーションをURLエンコードする
- 例えば、alert("hoge")ならalert(%22hoge%22)みたいな感じで、ダブルクォーテーションを%22という形に変換する。

ブックマークレットへの変換ツールはググれば色々出てきますが、ツールによっては