Javascript ナカノ

【超便利】ブックマークレットの作り方【更新方法も紹介】

「ブックマークレットの作り方を知りたい。」「ブックマークレットでJQuery使いたい。」「ブックマークレットの便利な更新方法を知りたい。」こんな悩みに答えます。

本記事の内容

  • 基本形のブックマークレットの作り方
  • ブックマークレットでJQueryを使う方法
  • 外部ファイル化して更新を便利にする方法

こんな流れで書いていきます。この記事を書いている僕は、プログラマーとしての歴は7年ほどです。

自分専用や取引先企業専用のブックマークレットを約5年ほど前からコツコツ作っています。フォーム入力などの自分で作っていないWEBページ上での作業を効率化するのに使っています。

それでは、早速本題に入っていきたいと思います。

基本形のブックマークレットの作り方

基本形


まずは、何事も基本から。ブックマークレットの超基本形は下記の形です。jsさえ書ければ超簡単です。

javascript:ここに処理を書く

これを発動させるにはどうすればいいのか、少し丁寧に説明します。

ブラウザのアドレスバーに直接打ち込む

ブックマークレットを起動させるにはブラウザのアドレスバーにコードを打ち込む必要があります。それでは早速、下記のコードをブラウザのアドレスに入力してみてください。

javascript:alert('Hello World!');

「Hello World!」とアラートが出れば大成功です。一部のブラウザではセキュリティー強化のためにアドレスバーに直接打込んだスクリプトは弾くこともあります。またChromeなどでは、javascript:の部分がコピペでは貼れない仕様になっていたりします。

ブックマークする

いつでもボタン１つで呼び出せるように、コードをブックマークに登録します。
その手順を簡単に解説します。下記の画像を参考にしてください。

bookmarktejun.gif
  1. 何かしらのページをブックマーク
  2. ブックマークを編集で名前は好きに決める
  3. URLに先ほどのコードを貼り付け

これで登録完了です。登録したブックマークを押したら「Hello World!」と出るかと思います。

ブックマークレットでJQueryを使う方法

jQuery


ブックマークレットの登録方法はわかった。でも素のJavascriptを使うのは、めんどいっていう方も多いかと思います。

ちなみに僕も素のJavascriptでゴリゴリ書くより、JQueryを使った方がコード量を減らせるのでいいかなと思っている方の人間です。それでは使っていきましょうブックマークレットでJQueryを。

ブックマークレットを使いたいページ内にJQueryが読み込まれているかどうかで違ってきますので、まずはそこを調べてみてください。ソースコード内に「jquery」の記載が発見できたら、おそらく読み込まれています。

ページ内にJQueryが有る場合

jQuery有り

朗報です。すでにJQueryが読み込まれているので、ブックマークレットでも普通にJQuery使えます。

ただし、WP系のJQueryはカプセル化しないと使えないので注意してください。試しに下記のコードをブックマークレットとして登録してみて下さい。

javascript:(function($){alert($('title').text());})(jQuery);

ページのタイトルがアラートされれば大成功です。

ページ内にJQueryが無い場合

jQuery無し

この場合は、先にjQueryファイルを読み込む必要があります。例えばCDNのjQueryを読みこむなら下記のような感じ。

javascript:
 var script = document.createElement('script');
 script.src = '//code.jquery.com/jquery-3.4.1.min.js';
 document.body.appendChild(script);
 alert($('title').text());

jQueryを読み込んだら、あとは、好きにJQueryを使えます。上記のCDNのjQueryならカプセル化も不要です。カプセル化についてはここでは詳しく説明しません。

外部ファイル化して更新を便利にする方法

外部ファイル化

ここが、今回記事のメインと言っても過言ではないくらいの部分です。ブックマークレットって便利なんですけど、ここまでの説明のように馬鹿真面目に作ってしまうと、手軽なんですが管理がめちゃくちゃ大変になります。

具体的に説明すると、複数台のPCで同じブックマークレットを利用する場合などは、少し更新するのに全てのPCのブックマークレットを１つ１つ更新する必要が出てきます。

便利にするためのブックマークレットを更新するのが便利ではないという何とも本末転倒な感じです。そこで、この問題に有効なのがブックマークレットの外部ファイル化です。

外部ファイル化すればブックマークレット自体の変更が不要

ブックマークレット自体は、「外部ファイルを読みこむ」ということ以外させません。そして更新する時はサーバー上の外部ファイルを更新します。

こうすることで、複数台のPCで同じブックマークレットを使っても、サーバー上の１つのファイルさえ更新すれば更新できることになります。あ〜便利！

サーバーに読み込み用のjsファイル作成して読みこむ

それでは、実際にサーバー上のjsファイルをブックマークレットで読み込むコードを書いてみましょう。先ほどのJQueryの読み込みと同様にするだけです。

javascript:
 var script = document.createElement('script');
 script.src = 'ここに外部ファイルのURL’;
 script.charset = 'utf-8';
 document.body.appendChild(script);

これで、サーバー上のjsファイルを読み込むことができます。

ドメインごとにファイルを変更して読みこむ

こちらは、さらに応用版です。実際に様々なページで使うブックマークレットを１つにまとめて作る場合は、ドメインごとに読み込むファイルを変えればエラーも少なく抑えられます。

例えば、ドメイン名.jsのようなファイルを、サーバー上に作るように決めれば、現在のドメインから読み込むファイルを分岐できます。コードは下記の通り。

var script = document.createElement('script');
 script.src = 'ブックマークレットを入れるディレクトリURL'+location.host+'.js';
 script.charset = 'utf-8';
 document.body.appendChild(script);

このようなブックマークレットを作っておけば、機能をドメイン名で分岐できるので管理も非常に楽です。今回は以上です。

Recommend関連記事

関連記事は見つかりませんでした。