【自動化】ブラウザ操作やコード解析をワンクリックで実行可能な「ブックマークレット」の作り方と設定手順まとめ【ブロガーさんにオススメなテクニック】

What’s?

皆さんはブックマークレットをご存知でしょうか？

ブックマークレットとは、ブラウザのアドレスバーにスクリプトを直接記述したり、ブックマーク等にあらかじめ用意しておいたJavaScriptをワンクリックで実行する事が出来る仕組みの事を指します。

ブックマークレット (Bookmarklet) とは、ユーザーがウェブブラウザのブックマークなどから起動し、なんらかの処理を行う簡易的なプログラムのことである[注釈 1]。携帯電話のウェブブラウザで足りない機能を補ったり、ウェブアプリケーションの処理を起動する為に使われることが多い。
ブックマークレット – Wikipedia

ある程度の処理を自動化する事が出来る

ブックマークレットの強みは、何と言ってもブラウザ処理を自動化する事が出来るところです。

例えば筆者の場合は、引用ブロックを自動生成するブックマークレットを自作して活用しています。

本来、以下のように自分で行っていた操作が、

以下のようによりシンプルになります。

操作手順が半分になることもさることながら、開発者ツールを開く必要が無くなるだけで、めちゃくちゃ作業効率が上がります。
マジでオススメ！！

もちろん、JavaScriptで出来ることであれば基本的にはすべて組み込むことが出来ちゃいます！！

作り方が簡単

また、作り方自体もとても簡単です。
今回はシンプルなブックマークレットの作り方をまとめてみましたのでご紹介致します。

前提

今回は、現在開いているページの情報を取得してアラート表示する簡単なブックマークレットを作ってみようと思います。

JavaScriptの作成

まずは今回の要件を満たすJavaScriptのソースコードを用意しましょう。

今回は以下のようなシンプルな即時関数を記述します。

確認

試しに上記をChromeの開発者ツールのConsoleタブで実行すると期待通りの動きになります。

コンパイル

スクリプトが用意出来たらブックマークレット化をするのですが、このままだとブラウザのアドレスバーに貼る事が出来ません。

なので、Googleが提供しているgoogle closure compiler というクロージャーコンパイラを利用します。

左側のテキストエリアに先ほどのスクリプトをコピペし、Compileボタンをクリックしましょう。

すると、1行にまとめられたスクリプトが右側に表示されます。

以降の作業ではこちらを利用するのでコピーしておきましょう。

ブラウザでの動作確認

では、実際にブラウザのアドレバーにスクリプトを入力して動作確認をしてみましょう。

アドレスバーにjavascript:と入力してから、先ほどのコンパイル後のスクリプトをコピペしてEnterボタンを押してみてください。

開発者ツールのConsoleで実行した際と同じ挙動をしましたね♪

ちなみにjavascript:{コンパイル後スクリプト}をまとめてコピペすると、うまく動かないので気をつけましょう。

ブックマークに登録

動きはしましたが、毎回アドレスバーに手入力するのは大変ですよね。

そこで、アドレスバーに入力したスクリプトをブックマークに登録しておけばワンクリックで簡単に実行する事が出来るのです！

登録の仕方は簡単です。

ブックマークを作成する際のURLに、アドレスバーで実行した時と同じjavascript:{コンパイル後スクリプト}の形式で入力し保存するだけです。

確認

では、実際に確認してみましょう。

作成したブックマークをクリックすると、

期待通りの動きをしてくれましたね♪

以上のように、ブックマークレットを用いてJavaScriptをワンクリックで実行する事が可能になります。

情報収集やHTMLソース確認など、使いこなすと開発者やブロガーさんの作業スピードを圧倒的にあげる事が可能になります！

皆さんの作業負担を軽減するためにも、是非JavaScriptの勉強をしてブックマークレットを活用してみてください♪