こんばんは、すずしんです。
今回の記事では、ブックマークレットの作り方について簡単に紹介したいと思います。 ここでは、最も基本的なブックマークレットを実際に説明しながら作っていきます。 そして、作成したブックマークレットの使い方についても説明します。
ブックマークレットとは？
ブックマークレットというのは、ブックマークとして置いておける小さなプログラムのことを言います。 ブックマークからそのブックマークレットを起動することで、あらゆる動作をさせることができます。 これを利用することで、面倒な一連の動作を自動化したり、便利な機能を追加したりすることなどが可能です。 もう発想次第で使い方も無限に広がりますね！
ブックマークレットの作成方法
JavaScriptプログラムを作成
まずは、通常のJavaScriptのプログラムを書く要領でプログラムを記述していきます。 ここでは、非常に単純な例として「Hello!」という文字のアラートを表示するプログラムを書いてみます。
<script type="text/javascript"> window.alert('Hello!'); </script>
ブックマークレットの形に整える
プログラムが書けたら、今度はブックマークレットとして動作するように形を整えます。 ブックマークレットの雛形は以下のようになります。
javascript:(function(){ （プログラムの中身） })();
このプログラムの中身の部分に、さきほど記述したプログラムを入れていきます。 ここで注意ですが、scriptタグの部分は取り除いて下さいね。 つまり、この例では以下のようになります。
javascript:(function(){ window.alert('Hello!'); })();
そうしたら、今度はこのプログラムの改行と余分なインデントを除去して1行にします。 また、プログラム中の半角スペース（空白文字）は「%20」に、ダブルクォーテーションは「%22」に置換して下さい。 すると、以下のようになりますね。
javascript:(function(){window.alert('Hello!');})();
ここまで来たらもう一息です。 aタグのhref要素の部分にさきほどのプログラムを記述します。 最終的には以下のようになりますね。 後は、その作成されたリンクを公開したいブログ上の記事などに貼るだけです。
<a href="javascript:(function(){window.alert('Hello!');})();">Hello!</a>
ブックマークレットの登録方法
ブックマークレットの登録は、さきほど作成したリンクを右クリックしてブックマークに登録するか、リンクを直接ブックマークバーにドラッグアンドドロップするだけです。 試しに、ブックマークレットのリンクを貼っておきますので実際に試してみてください。
ブックマークレットの実行方法
ブックマークレットを実行するには、そのブックマークとして登録したブックマークレットをクリックするだけです。 この例では「Hello!」という文字が表示されるアラートが出ます。
最後に
ここでは、簡単な例として「Hello!」という文字が書かれたアラートを表示するブックマークレットを作成してみました。 いかかだったでしょうか？ 手順が分かってしまえば、意外に簡単に作れるんだということがお分かりになったと思います。
これらを踏まえて、今度はもっと便利な動作をするブックマークレットを皆さんもぜひ作ってみてください。 私も何かちょっとしたブックマークレットをいつか作ってみたいと思います。 実際に私がブックマークレットを作成した時には、このブログの記事にして公開しますので楽しみに待っていて下さいね。
