JavaScript ライフスタイル

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

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

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

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

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

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

 

 

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

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

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

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

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

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

Javascriptとは?変数、配列、連想配列の基本的な使い方教えます
【初心者でも理解できる】JavaScriptの『変数』『配列』『連想配列』『関数』の使い方入門

WEBの勉強をしている方であれば、何度も『JavaScript』という言葉を聞いたことがあるのではないでしょうか? 『いつか勉強しよう』『たぶん理解できないし』など何となく諦めていたり、勉強を先延ばし ...

続きを見る

 

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

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

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

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

 

step
1
ブックマークの作成

ブックマークの作成

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

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

 

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

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

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

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

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

 

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

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

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

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

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

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

 

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

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

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

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

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

 

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

iPhoneでブックマークレットを使う場合

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

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

 

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

Webページを開いておく

まずは、最終的にブックマークレットを実行したいサイトを開いておきましょう。

その次に、下にある共有ボタンを押して、ブックマーク登録を行います。

 

step
2
ブックマークを追加

ブックマークを追加

「ブックマークを追加」のボタンを押しましょう。

 

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

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

ブックマークの名前を、実行時の機能が分かるように変更しましょう。

ちなみに、この時点ではURLの欄を編集することはできないので、一旦名前のみを変更しています。

 

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

ブックマークを再編集

先ほど、お気に入り登録した「ブックマークレット」と名前をしたブックマークを編集しましょう。

 

step
5
JavaScriptを記述

JavaScriptを記述

編集画面で、URLの欄に「javascript:alert('ブックマークレット');」と記述しましょう。

 

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

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

先ほどJavaScriptを記述したブックマークをタップすると、画面にアラートが表示されます。

これで、iOSでもブックマークレットが実行できることの確認が取れました。

 

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

Androidでブックマークレットを使う場合

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

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

 

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

Webページを開いておく

まずは、事前にブックマークレットを実行したいWebページを開いておきましょう。

 

step
2
検索ボックスに入力

検索ボックスに入力

検索ボックスに登録しておいたブックマークレットの名前で検索をかけましょう。

 

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

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

先ほど、検索候補に表示されたブックマークレットをタップすると画面にアラートが表示されます。

これで、Androidでもブックマークレットが使えることの確認が取れました。

 

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

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

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

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

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

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

 

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

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

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

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

 

step
2
JavaScriptを書く

JavaScriptを書く

テキストエディタのダウンロードが終わったら、早速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の本を横断検索するブックマークレット

このブックマークレットはAmazonの商品ページ(本に限る)で使うことができ、他サイトでの販売価格を調べたり、JANコードを確認する際に使えます。

また、マーケットプライスの業者が定価以上の価格で販売している場合があるので、本来の価格を確認したい場合にも効力を発揮します。

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商品のサクラ度をチェックするブックマークレット

こちらも同じくAmazonで使えるブックマークレットなのですが、商品ページでレビューが「サクラ」かをチェックしたい場合に使うことができます。

昨今、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商品と比較して最安値の商品を探すブックマークレット

こちらも、またまたAmazon用のブックマークレットなのですが、商品ページでこのJavaScriptを実行すると、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コードとして表示するブックマークレット

こちらのブックマークレットは、ブラウザで開いているWebサイトをQRコードとして画面に表示することができるJavaScriptです。

利用シーンは、そんなに多くないかもしれませんが、応用次第で色々と使えるブックマークレットですので、一応ブックマークしておくことをオススメします。

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

 

まとめ

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

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

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

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

 

【31日間無料】U-NEXTで話題の映画、アニメ、漫画を見まくろう!

無料トライアル実施中!<U-NEXT>

  • この記事を書いた人

ゲンキ

物作りと情報発信が好きなWEBエンジニア。
高卒で肉体労働や不安定な職を転々とする生活の中、一念発起し独学でプログラミングの学習を開始。
低学歴・学習能力ゼロ・貯金ゼロ・人脈ゼロ・語彙力ゼロ・コミュ力無し・PCスキル無し・うつ病・HSP・発達障害(ASD / ADHD)という極限状態に絶望するも、自力でスキルを身に付ける努力を続ける。
プログラミング習得後はWEB制作(フロントエンド / バックエンドの実装)の仕事をして、休みの日は、趣味でアプリの開発をしたり、日々学んだことをブログとして、まとめる生活をしています。

-JavaScript, ライフスタイル

Copyright© Webサイトで稼ぐ技術 , 2021 All Rights Reserved Powered by AFFINGER5.