ブックマークレットとは

最近あんまり聞かなくなりましたが
昔から「ブックマークレット」というツールをよく使っていました。
使っていた当時、どういう仕組みなのかはよくわかっていなかったのですが、
当時の認識は、

"ブラウザのブックマーク（お気に入り）に登録しておいて、必要な時にそのブックマークを実行すると便利な機能が呼び出せる"

というものでした。
あれからはや十数年、IT関係の仕事に就き一時期はWeb開発にも携わっていたことで、当時謎だったブックマークレットが何だったのかが理解できました。今日は、当時の自分に向けてここに「ブックマークレットとは何か」を書いておきます。 ※JavaScriptやHTMLを理解している人向けの説明になると思います。

今開いているページに対して閲覧側が作成・実行できるJavaScript
こういう理解で間違いないかなと思います。 JavaScriptって何よ、という方はどこかで調べてほしいんですが、簡単に言うと Webページを操作するプログラムのことです。
本来、JavaScriptのプログラムはページ提供側のサーバから送られてきて、閲覧者である我々はそれを実行させられるしかないのですが、ブックマークレットでは、閲覧者である我々が、今見ているページに対して行いたい操作を「JavaScript」を使って記述できます。記述したプログラムはブックマークとして保存することで、あとから簡単に実行できるというわけですね。

作り方

この画像は、Firefoxでブックマークレットを作った例です（Chrome Edgeなどでもほぼ同じかと）。手順としては適当なブックマークを選び右クリック→プロパティと進むと上記の画面が出てきます。最初は[URL]の部分に、WebサイトのURLが記述されていますがここに

javascript: //ここに任意の処理

というようにソースコードを書いていきます。上記の例では、

javascript:alert("hello bookmarklet");

と書いて、アラートメッセージを表示させるプログラムになっています。
書き終わったら保存して完成です。 ※[名前]もわかりやすいものを付けておいた方が、実行する際にブックマーク一覧から探しやすいでしょう。

ソースコード作成時の注意点としては、ブックマークレットのソースコードは必ず1行にしなければなりません。もし、vscodeなどのエディタで作成した場合は、ツールなどで改行を削除し1行にまとめてから保存しましょう。

使い方

作成したブックマークレットは、ブックマークの一覧から選べば実行されます。実行したJavaScriptプログラムは「今ブラウザで開いているWebページ」に対して実行されます。プログラムを作成する際に、「どんなページでも実行できる便利機能」を実装してもいいですし「ある特定のページで実行することで便利になる機能」を実装するのもよいですね。

簡単な活用例

例えば、入力が面倒なフォーム画面があった時にブックマークレットを使えば値を自動入力させることができます。私自身、会社のとある業務システムでいつも固定値を入力する部分はブックマークレットであらかじめ実装しておくことで、入力の手間を省いたりしています。
その他、アイディア次第では、もっと便利な機能や素晴らしい業務ツールなども実装、実現できるはずです。

まとめ

ブックマークレットは今開いているWebページで実行できるJavaScriptを「閲覧者が作成し実行できる」仕組みとなります。便利に使いこなすことで、Webページに自分なりの機能を実装して利便性を高めてみてはどうでしょう。

それでは、また('ω')