【ブックマークレットとは】仕組みと使い方から自作する方法まで解説

皆さんは「ブックマークレット」と呼ばれる、便利な仕組みの存在は知っていますか？

ブックマークレットを上手く使えば、ブラウザ上で行う面倒な入力作業を省いたりして、情報収集を早めたり、単調な作業を効率化したい時などに役立てることができます。

ブックマークレットはネットで頻繁に調べ物をしたり、いつも行う決まった作業がある人であれば、恩恵を受けられることは、ほぼ間違いないので導入を検討しても良いかもしれません。

そこで今回は、あまりインターネットに詳しくない人でも分かるようにブックマークレットの仕組みと使い方から、作る方法までを詳しく解説していきたいと思います。

コーディングお役立ちツール

• HTML整形ツール
• CSS整形ツール
• JavaScript整形ツール
• JSON整形ツール
• WebP相互変換ツール
• アスペクト比計算ツール

ブックマークレットとは何か

ブックマークレットとは、簡易的なプログラムによって実行されるブックマーク機能のことでして、主要なブラウザである「Google Chrome」や「Microsoft Edge」「Safari」「Firefox」などのブックマークバーから手軽に実行できるという特徴があります。

ブックマークレットは「JavaScript」と呼ばれるブラウザ上で動くプログラミング言語を記述することによって、実行することができ、テキストエディタやメモ帳などで簡単に作ることができます。

また、「”ブックマークレットとは”なんて情報はどうでもいいから、すぐに使いたい！」という人もいるかと思いますので、そういう方は、便利なブックマークレットを先人の方達が無料で配布されているので、そういうプログラムをコピーして使うのも良い方法です。

一応、JavaScriptの使い方の参考になる情報を貼っておきますので、興味のある人はご覧ください。

ブックマークレットの使い方

それでは早速、ブックマークレットを使ってみたいと思います。

ちなみに、今回の解説では「Google Chrome」を使用していますので、環境を揃えていただければスムーズに読み進めることができますよ！

step
1ブックマークの作成

まず、現在開いているページをブックマーク登録する必要がありますので、ブラウザの「お気に入り」ボタンを押して、サイトを登録しましょう。

その時に、「名前」の欄に登録したプログラムが何のブックマークレットか分かるように名称を書いておくと後から見ても分かりやすいので、機能別にしっかりと分けて管理を行うようにしておきましょう。

step
2ブックマークレットの登録

追加が終わったら、以下のブックマークレットに使うプログラムをコピーして、先ほどブックマークしたページを編集して、「URL」の欄にプログラムをペーストしましょう。

javascript:alert('ブックマークレット');

step
4ブックマークレットの実行

登録がしっかり終わっていれば、クリックするだけでプログラムが実行することができます。

今回の場合、ブラウザ上にダイアログが表示されるだけのサンプルになりますが、実行できましたか？

もしも動かない場合は、きちんとペーストできているかを確認してみましょう。

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

ここまでは、パソコンでブックマークレットを扱う方法について解説してきましたが、スマホでも同じように実行することができます。

OSごとに使用方法が異なるため、少し混乱してしまうかもしれませんが、慣れてしまえば簡単です。

それでは、早速見ていきましょう。

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

ここでは、iPhoneのデフォルトブラウザである「Safari」を使い、ブックマークレットを実行してみます。

少し、手順が複雑なため、画像が多めになりますが、ご了承ください。

step
1Webページを開いておく

step
2ブックマークを追加

step
3ブックマークの名前を変更

step
4ブックマークを再編集

step
5JavaScriptを記述

step
6ブックマークレットを実行

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

Androidでブックマークレットを実行したい場合は、先ほどPC版で解説した「Google Chrome」のスマホアプリ版を使っていきます。

ここでは、PC版とアカウントが同期しているという想定で解説を行っていきます。

step
1Webページを開いておく

step
2検索ボックスに入力

step
3ブックマークレットを実行

ブックマークレットの仕組みと作り方

ブックマークレットの仕組みについて解説していきます。

ブックマークレットはJavaScriptで動作しており「javascript:実行したいプログラム」の形で記述することによって、作ることができます。

また、「document.createElements('script')」という風にscript要素を作成して、外部ソースを読み込むことも可能ですので、開発の幅を大幅に広げることも可能です。

それでは、肝心のブックマークレットに作り方について見ていきましょう。

step
1テキストエディタのダウンロード

まずは、プログラムを記述するためのテキストエディタをダウンロードしましょう。

筆者としては、「Sublime Text」と言うテキストエディタがWindows版やMac版もあって、軽量で使いやすいのでオススメです。

step
2JavaScriptを書く

テキストエディタのダウンロードが終わったら、早速JavaScriptを書いていきます。

JavaScriptを書く際の注意点として、プログラムに色付けされるシンタックスハイライトが表示された方が読みやすいので、一旦文書ファイルを保存して、名前を「bookmarklet.js」としておきましょう。

また、ブックマークレットを開発する際のデバッグは、ブラウザの「Console」で行うのが良いでしょう。

試しに、以下のJavaScriptをコピーして実行してみてみると分かるのですが、ページがリロードされます。

たったこれだけのプログラムでブックマークレットの完成です。

javascript:location.reload();

おすすめブックマークレットのサンプル集

ここでは、筆者自作のオススメブックマークレット集を紹介していきます。

ソースコード(プログラム)が読みやすいように、改行やタブなどはそのままにしていますので、「プログラムソースかんたん変換」などのプログラム編集ツールを使って「改行・半角スペース・タブ」などの削除を行なってから、ブックマーク登録をすることをオススメします。

和英翻訳するブックマークレット

javascript:
(function() {
let keyword = prompt('日本語を入力してください。');
if(keyword) {
    let translate_ja_to_en_url = `https://translate.google.co.jp/?hl=ja&sl=ja&tl=en&text=${keyword}&op=translate`;
    location.href = translate_ja_to_en_url;
}
})();

英和翻訳するブックマークレット

javascript:
(function() {
let keyword = prompt('英語を入力してください。');
if(keyword) {
    let translate_en_to_ja_url = `https://translate.google.co.jp/?sl=en&tl=ja&text=${keyword}&op=translate`;
    location.href = translate_en_to_ja_url;
}
})();

Amazonの本を横断検索するブックマークレット

javascript:
(function() {
function product_asin(url) { 
    let result = null;
    let asin_match = /\/dp\/.{10}/;
    let match_array = url.match(asin_match);

    if(match_array !== null) {
        let asin = match_array[0].replace(/dp/g, '').replace(/\//g, '');
        result = asin;
    } 
    return result;
}
let asin = product_asin(location.href);
if(asin == null) {
    alert('ASINコードが取得できませんでした。');
} else {
    location.href = `http://book.tsuhankensaku.com/hon/index.php?t=booksearch&q=${asin}`;
}
})();

Amazon商品のサクラ度をチェックするブックマークレット

javascript:
(function() {
function product_asin(url) { 
    let result = null;
    let asin_match = /\/dp\/.{10}/;
    let match_array = url.match(asin_match);

    if(match_array !== null) {
        let asin = match_array[0].replace(/dp/g, '').replace(/\//g, '');
        result = asin;
    } 
    return result;
}
let asin = product_asin(location.href);
if(asin == null) {
    alert('ASINコードが取得できませんでした。');
} else {
    location.href = `https://sakura-checker.jp/search/${asin}`;
}
})();

Amazon商品と比較して最安値の商品を探すブックマークレット

javascript:
(function() {
function product_asin(url) { 
    let result = null;
    let asin_match = /\/dp\/.{10}/;
    let match_array = url.match(asin_match);

    if(match_array !== null) {
        let asin = match_array[0].replace(/dp/g, '').replace(/\//g, '');
        result = asin;
    } 
    return result;
}
let asin = product_asin(location.href);
if(asin == null) {
    alert('ASINコードが取得できませんでした。');
} else {
    location.href = `https://www.saiyasune.com/sc.php?sik=&ik_kw=${asin}`;
}
})();

見ているサイトをQRコードとして表示するブックマークレット

javascript:
(function() {
location.href = `http://chart.apis.google.com/chart?chs=480x480&cht=qr&chl=${encodeURIComponent(location.href)}`;
})();

まとめ

今回はブラウザのお気に入り機能を活用したブックマークレットの仕組みと作り方について解説してきましたが、いかがでしたでしょうか？

プログラムを初めて触る人にとっては、少し難しい内容だったかもしれませんが、インターネット上に作成済みの、便利なブックマークレットもありますので、ひとまずコピーして使い始めるのが初心者にとっては良いかもしれません。

ブックマークレットは短いコードでも、それなりに動くものが作れますので、コーディング(プログラミング)をやってみたい方や、JavaScriptを勉強してみたい方の、ちょうど良い教材になることでしょう。

それでは、皆さん良いブックマークレットを作ってみてくださいね！