この記事では、Webページ上でブックマークからJavaScriptを実行する方法、通称「ブックマークレット」について説明します。
ブックマークレットとは
Webページ上でJavaScriptで書いたスクリプトを実行することで、例えばフォームの内容を自動で入力するなど、様々なことができます。
そして、ブックマークにスクリプトを登録しておくことで、そのスクリプトをブックマークから走らせることができます。
この方法をブックマークレット(bookmarklet)といい、普段ブラウザ上でよく行う処理について使うと効果的です。
そもそもブラウザでJavaScriptを実行するには
ブックマークレットを理解するには、ブラウザのURL入力からJavaScriptを実行する方法を理解する必要があります。
実は、ブラウザのURL欄に「javascript:{スクリプトの内容}」と書いてエンターキーを押すと、スクリプトを実行することができます。
試しに、以下のようにURL欄に入力してからエンターキーを押すと、
以下のようにポップアップが表示されます。
ブックマークレットの登録方法
上記の方法を応用し、このURLをブックマークに登録するのがブックマークレットという手法です。
つまり、ブックマークというと普通は「https://www.yahoo.co.jp/」のようなURLを登録しますが、「javascript:alert(123);」をブックマークに登録してしまうということです。
こうすると、ブックマークをクリックするだけで、スクリプトを実行することができます。
スクリプトが長い場合の注意点
先ほどのスクリプトはポップアップを出すだけの簡単なスクリプトでしたが、このような簡単なスクリプトを登録することは少ないでしょう。
たとえば、ログインフォームに値を打ち込んでログインボタンを押す、といったような、それなりに行数のあるスクリプトを実行したいことが多いと思います。
その場合、「javascript:{スクリプトの内容}」をそのままブックマークに登録しても、うまく動きません。なぜなら、スクリプトに空白や改行などが含まれており、ブラウザが解釈できないからです。
この問題を回避するため、スクリプトのコンパイルを行いましょう。私はGoogleが開発した以下のサイトをいつも利用しています。
使い方は、スクリプトを貼り付けて、「Compile」ボタンを押すだけです。そうすると、空白や改行がない状態に変換されますので、「javascript:{変換済みのスクリプトの内容}」をブックマークに登録すれば良いです。
