【必見】ブックマークレットの使い方・作り方と便利なおすすめ13選を解説

ブックマークレットを活用すると、Webブラウザがより便利になります。

そんななか、

「ブックマークレットってどういうもの？」
「ブックマークレットの使い方が知りたい！」
「おすすめのブックマークレットは？」

と疑問に思っている方もいるでしょう。

今回は、

などについてご紹介します。

この記事を読めば、自分のパソコンのWebブラウザで便利な機能をワンクリックで使えるようになるでしょう。

「ブックマークレットの使い方を知り、活用したい！」という方は、ぜひ最後まで読み進めてください。

ブックマークレットとは

まずは、ブックマークレットがどういうものかについてご説明します。

さっそく詳しく見ていきましょう。

ブックマークレットはWebブラウザに機能を追加するツール

ブックマークレットは、Webブラウザに機能を追加してブックマークできるものです。

ブックマークボタンからワンクリックで簡単に便利な機能を呼び出せます。

プログラミング言語のJavaScriptで作られたプログラムをブックマークのURLに追加することで利用可能です。

ブックマークレットを使えば、Webページの見た目を変えたり、選択したテキストをキーワード検索したり、ページ翻訳したりなど、さまざまな機能を簡単に実行できます。

ブックマークレットを活用することで、Webブラウザをより便利で効率的に使いこなせるようになるでしょう。
Webブラウザの拡張機能が使えないスマートフォンでも活躍します。

ブックマークレットと拡張機能の違い

ブックマークレットと似ている機能に、拡張機能があります。

どちらもWebブラウザで使える便利な機能です。
「ブックマークレットは使ったことがないけど、拡張機能はよく使う」という方も多いのではないでしょうか。

ブックマークレットと拡張機能、それぞれにどのような違いがあるのかを理解しておきましょう。

拡張機能と比較して、ブックマークレットには次のような違いがあります。

ブックマークレットは、ブックマークバーに表示され、いつでもワンクリックで実行できるのが特徴です。

また、Webブラウザやデバイスなどの環境を選びません。
基本的に拡張機能はブラウザに依存するため、大きな違いといえますね。

ブックマークレットは便利な機能をブックマークとして管理できることも特徴です。
任意の名前をつけられ、管理しやすい点が嬉しいポイントですね。

さらに、ブックマークレットはJavaScriptのソースコードをURLに入力することで登録します。
プログラミングに興味がある方は、実用的にソースコードに触れられる機会となるでしょう。

自分もプログラミングを学習してみたい！と思った方には、初心者でも確実にプログラミングスキルが身に付く【DMM WEBCAMP】がおすすめです。

97%以上の受講生がプログラミング初心者からのスタートで、ライフコーチによる手厚い学習サポートが受けられます。

また、プログラミングの基礎知識からしっかり身につけられるコースも用意されており、安心して学習を進められます。

ブックマークレットの基本的な使い方

ブックマークレットの概要についてお伝えしました。
拡張機能と使い分け、よりWebブラウザの利用を便利にする機能として活用したいですね。

「さっそくブックマークレットを使ってみたい！」という方もいるでしょう。

ここでは、ブックマークレットの基本的な使い方について詳しくご説明します。

順番に見ていきましょう。

1.Webブラウザのブックマークバーを表示させる

まずは、Webブラウザのブックマークバーを表示させます。

すでにブックマークバーが表示されている場合は、次のステップに進んで問題ありません。

もしブックマークバーが表示されていない場合、次の手順で表示させましょう。

Webブラウザによっては、ブックマークバーの表示方法が多少異なりますが、基本的には設定画面から表示させられます。

また、キーボードの「Ctrl」+「Shift」+「B」キーを押すことで、「ブックマークバー」を表示することも可能です。

2.ブックマークレットをWebブラウザのブックマークに登録する

次に、ブックマークレットをWebブラウザのブックマークに登録します。

基本的な登録方法として、ドラッグ＆ドロップによる登録方法や、手入力による登録方法などがあります。

詳しい登録方法はのちほどご説明しますので、参考にしてみてください。

3.ブックマークレットを登録したブックマークをクリックして起動する

登録が完了すると、ブックマークバーにブックマークレットを登録したブックマークが表示されます。

機能を使いたいときは、ブックマークレットを登録したブックマークをクリックするだけ。

ブックマークバーからいつでも機能をワンクリックで使えます。

必要に応じてブックマークレットを登録し、活用しましょう。

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

ブックマークレットの基本的な使い方についてお伝えしました。
プログラミングができない人でも、手順を守れば簡単にブックマークレットを使えます。

ブックマークレットの登録方法には、いくつか方法があるとご説明しました。

ここでは、ブックマークレットの登録方法についてご紹介します。

あなたのケースに合った登録方法を選び、ブックマークレットを使ってみてください。

それでは、詳しく見ていきましょう。

1.ドラッグ＆ドロップによる登録方法

ブックマークレットの登録方法で最も簡単なのが、ドラッグ＆ドロップによる登録です。

ドラッグ&ドロップによる登録は、ブックマークレットを左クリックで選択し、GoogleChromeのブックマークバーにドラッグ&ドロップするだけ。

カーソル操作のみで登録できるので、シンプルでわかりやすい登録方法といえます。

あらかじめブックマークバーを表示させるのを忘れないようにしましょう。

2.手入力による登録方法

ブックマークレットの基本的な登録方法として、手入力による登録があります。

手入力による登録は、ブックマークレットのソースコードを手入力でGoogleChromeに登録する方法です。

次の手順で登録できます。

入力するソースコードをコピーして、URLの欄にペーストすると簡単に入力できます。

ブックマークレットにはさまざまな機能があるので、自分が使いたいブックマークレットのソースコードを見つけましょう。

3.iPhoneでの登録方法

基本的な登録方法は、手入力による方法と同じになります。

ただし、スマートフォンでブックマークレットを登録する場合、仮のブックマークを作成して編集により書き換えることが必須です。

iPhoneの標準Webブラウザは「Safari」のため、Safariでブックマークレットを登録する方法をご説明します。

上記の手順で、iPhoneのWebブラウザでブックマークレットの登録が可能です。

4.Androidでの登録方法

Androidの場合、Google Chromeでブックマークレットを登録するには、次の手順になります。

基本的な流れはiPhone、Androidで同じです。

仮のWebページをブックマークした後に、ブックマークの編集によってブックマークレットを登録するという流れを覚えておきましょう。

スキマ時間に効率よくプログラミングを学習したいという方には、プログラミングスクールがおすすめです。
受講料はかかるものの、最大の魅力は短期間で効率よくプログラミングスキルを習得できること。

【DMM WEBCAMP】なら、初心者向けに開発された独自のカリキュラムと充実した学習サポートで、挫折することなくプログラミング学習を進められます。

学習を進めていく中で分からないことが出てきたときは、 チャットもしくはビデオ通話でメンター（講師）に好きなだけ質問が可能です。

あなたのライフスタイルに合わせて好きなコースを選択できます。

---

プログラミングやパソコンを使って働きたい！

そのように考え、成長しているIT業界への転職を考えている方も増えてきました。

『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』

反対にこのような声も聞く事があります。

そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください！

ブックマークレットの作り方4ステップ

ブックマークレットにはさまざまな機能がありますが、「使いたい機能のブックマークレットが見つからない」といこともあります。

求める機能を持つブックマークレットがないときは、自分で作成してみましょう。

ブックマークレットの作成方法のなかでも、JavaScriptを記述しない初心者向けの方法をお伝えするので、安心してチャレンジしてみてください。

ここでは、プログラミング初心者でもできるブックマークレットの作り方を4ステップでご紹介します。

ステップごとに詳しく見ていきましょう。

1.必要なツールを用意する

まずは、ブックマークレットを自作するために必要なツールを用意します。

次のようなツールを用意すると、スムーズに作成を進められるでしょう。

テキストエディタとは、コードを入力してプログラムを作成するためのツールです。
プログラミングでは欠かせないものですね。

そのほか、JavaScriptをブックマークレットに変換するツール、コードを整えるツールが必要です。

デバッグとは、プログラムのバグを手直しすること。
簡単にデバッグをするためのツール、デバッガーも活用しましょう。

上記は最低限必要なツールなので、初心者の方はまず揃えたいものです。
さらに必要なツールがあるときは、適宜用意しましょう。

2.やりたいことに近いコードやブックマークレットを探す

必要なツールを揃えたら、次はやりたいことに近いコードやブックマークレットを探します。

あらかじめ、自分がやりたいことを明確にしておきましょう。

上記のようにやりたいことをはっきりさせたら、近い機能を持つコードやブックマークレットを探します。
すでにあるコードやブックマークレットを参考に作成するためです。

コードやブックマークレットを探すときは、「JAVASCRIPT::BOOKMARKLET」や「Bookmarkletサンプル集」などのWebサイトが役立ちます。

近い機能を持つコードやブックマークレットを活用することで、プログラミング初心者でも時間や手間をそれほどかけずに新しいブックマークレットを作成できるでしょう。

3.JavaScriptをブックマークレットに変換する

ブックマークレットに登録するには、ソースコードを1行で記述し、長さの制限におさめる必要があります。

そのため、JavaScriptのソースコードをそのまま使用するのではなく、ブックマークレットに登録できるように変換しなければなりません。

手順は次のとおりです。

これで、ブックマークレットに使用できるソースコードになります。

4.ブックマークレットのテストとデバッグをする

ブックマークレットのプログラム（ソースコード）ができたら、テストとデバッグをします。

想定通りに動作するかをテストして確認し、バグがあれば修正（デバッグ）をおこないましょう。

テストとデバッグが完了し、正常に動作するプログラムができれば完成です。

作成したブックマークレットをブックマークに登録して使ってみましょう。

【YouTube】おすすめのブックマークレット

ブックマークレットの作り方についてお伝えしました。
自分で使いたいブックマークレットを作れば、好きな機能をワンクリックで使えます。

ブックマークレットにはさまざまな種類があり、便利な機能のブックマークレットは数多いです。

「どんなブックマークレットがあるのか知りたい！」「おすすめのブックマークレットは？」という方のために、便利なブックマークレットをまとめました。

「YouTube」「SNS」「Web」の分野別におすすめのブックマークレットを見ていきましょう。
あなたに役立つブックマークレットを見つけてみてください。

ここでは、YouTubeで便利なおすすめのブックマークレットを4つご紹介します。

さっそく見ていきます。

1.Listen On Repeat

「Listen On Repeat」は、YouTubeの動画をリピート再生できるブックマークレットです。

Listen On Repeatのブックマークレットのソースコードは次になります。

javascript:(() => { if(location.host.includes('youtube')) location.href = location.href.replace('youtube', 'listenonrepeat'); })();

同じ動画を何度もループして見たいとき、音楽を繰り返し聴きたいときに便利です。

Listen On Repeatについて詳しく知りたい方は、公式サイトをご覧ください。

2.y2mate.com

「y2mate.com」は、YouTubeなどの動画サイトにある動画や音声をダウンロードできるブックマークレットです。

あらゆる画質の動画をダウンロード可能で、音声のみをMP3に抜き出すこともできます。

y2mate.comのブックマークレットは次のとおりです。

javascript:(() => { if(location.host.includes('youtube')) location.href = location.href.replace('youtube', 'youtubepp'); })();

「YouTubeの動画や音声をオフラインで無料で楽しみたい！」という方は、使ってみてはいかがでしょうか。

y2mate.comについて詳しく知りたい方は、公式サイトをご覧ください。

3.Wadsworth Constant

「Wadsworth Constant」は、YouTube動画の最初の30％をスキップできるブックマークレットです。

Wadsworth Constant（ワズワース定数）という、「多くのYouTube動画は最初の30％をスキップしても問題ない」という説にもとづいて作られました。

Wadsworth Constantのブックマークレットは次のとおりです。

javascript:location.search+=(location.search?'&':'?')+'wadsworth=1'

「動画の最初の部分がいらないなあ」「すぐに本題を見たい」と感じることが多い方は、ぜひ活用してみてください。

YouTube動画のページでクリックすれば、動画の頭部分をスキップできます。

なお、ブックマークレットを使わなくても、動画を一時停止した状態で数字の「3」を押せば最初の30％をスキップ可能です。

どちらでもお好みの方法で使ってみてください。

4.動画ダウンロード用リンク追加処理

「動画ダウンロード用リンク追加処理」は、ダウンロードボタンを出現させて動画をダウンロードできるブックマークレットです。

YouTubeの動画ページで使用すれば、ダウンロードボタンが出現します。
ダウンロードボタンをクリックし、ファイル形式を選んでダウンロードが可能です。

動画ダウンロード用リンク追加処理のブックマークレットは次になります。

javascript:var d=document,s=d.createElement('script');s.charset='UTF-8';s.src='https://ciao-jjworkshop.ssl-lolipop.jp/scripts/youtube_downloadable_links_ex.js';d.body.appendChild(s);void(0);

動画ダウンロード用リンク追加処理について詳しく知りたい方は、公式サイトをご覧ください。

【SNS】おすすめのブックマークレット

YouTubeでおすすめのブックマークレットについてお伝えしました。
動画サイトをよく利用する方は、ぜひ取り入れてみてください。

次に、SNSで便利なブックマークレットについて見ていきましょう。

TwitterやInstagramなど、プライベートから仕事までSNSを使う機会は多いです。
ブックマークレットを使って便利に使いたいですね。

ここでは、SNSで便利なおすすめのブックマークレットを3つご紹介します。

1つずつご説明していきます。

1.Twitterのハッシュタグ挿入ブックマークレット

Twitterのハッシュタグ挿入ブックマークレットは、ツイートにあらかじめ登録したハッシュタグを挿入できるブックマークレットです。

事前に「｢HootSuite」「ついっぷる」などのサイトでハッシュタグを登録しておき、ブックマークレット化しておきます。

使いたいときは、ツイートの入力画面を開いた状態で起動させるだけで、ハッシュタグを挿入できる仕組みです。

イベントやスポーツ観戦など、同じハッシュタグをつけてたくさんツイートしたいときに便利なブックマークレットといえます。

2.Encipher.it

「Encipher.it」は、個人情報などの機密を含むメールを簡単に暗号化できるブックマークレットです。

メールのテキストそのものにパスワードをかけられるので、個人情報を記載したメールを送るときも安心できます。

メールだけではなく、SNSのDMやFacebookのメッセージでも利用可能です。

ただし、Encipher.itで暗号化したテキストをやりとりするには、送信者と受信者のどちらもがEncipher.itを使える必要があります。

Encipher.itについて詳しく知りたい方は、公式サイトをご覧ください。

3.Facebookにリンクをシェアするブックマークレット

Facebookにリンクをシェアするブックマークレットを使えば、簡単にWebページをFacebookに投稿できます。

ブックマークレットは次のとおりです。

javascript:var d=document,f=’http://www.facebook.com/share’,l=d.location,e=encodeURIComponent,p=’.php?src=bm&v=4&i=1338200799&u=’+e(l.href)+’&t=’+e(d.title);1;try{if (!/^(.*.)?facebook.[^.]*$/.test(l.host))throw(0);share_internal_bookmarklet(p)}catch(z) {a=function() {if (!window.open(f+’r’+p,’sharer’,’toolbar=0,status=0,resizable=1,width=626,height=436′))l.href=f+p};if (/Firefox/.test(navigator.userAgent))setTimeout(a,0);else{a()}}void(0)

FacebookでWebページをシェアする機械が多い方なら、ワンクリックで投稿できるので便利ですよね。

「閲覧しているWebページのURLをコピーして、Facebookを開いて…」という動作をせずに済み、効率的にシェアできます。

【Web】おすすめのブックマークレット

SNSでおすすめのブックマークレットについてお伝えしました。
普段からSNSをよく使う方は、参考にしてみてください。

次は、Webサイトを閲覧するときに便利なブックマークレットについて見ていきましょう。

ここでは、Webサイトで便利なおすすめのブックマークレットを5つご紹介します。

それぞれについて詳しく見ていきます。

1.Readability

「Readability」は、不要なサイドバーを削除して、テキストを読みやすく拡大するブックマークレットです。

ブックマークレットは次になります。

javascript: (  function () {  console.log('start');  var jsCode = document.createElement('script');  jsCode.setAttribute('src', 'https://cdn.rawgit.com/mozilla/readability/8525c6af/Readability.js');  window.cleanHtml = (function() {    var loc = document.location;    var uri = {      spec: loc.href,      host: loc.host,      prePath: loc.protocol + '//' + loc.host,      scheme: loc.protocol.substr(0, loc.protocol.indexOf(':')),      pathBase: loc.protocol + '//' + loc.host + loc.pathname.substr(0, loc.pathname.lastIndexOf('/') + 1)    };    var article = new Readability(uri, document).parse();    document.children[0].innerHTML = article.content;    var cleanStyle=  document.createElement('link');    cleanStyle.setAttribute('href','https://readability.now.sh/clean.css');    cleanStyle.setAttribute('rel','stylesheet');    document.head.appendChild(cleanStyle);  });  jsCode.onload = cleanHtml;  document.body.appendChild(jsCode);}());

テキストのフォントやサイズの変更なども可能で、あらゆる設定ができます。

「Webページを自分が見やすいスタイルに変更したい」という方におすすめです。

Readabilityについて詳しく知りたい方は、公式サイトをご覧ください。

2.Scrible

「Scrible」は、Webページに書き込み・保存・書き出しができるブックマークレットです。

Webページのテキストにハイライトをひいたり、コメントを追加したりと、Webページを本のように使えます。

さらに、ファイルに書き出してオフラインで見ることも可能です。

Web上にある論文や資料を使うときに役立つでしょう。

Scribleについて詳しく知りたい方は、公式サイトをご覧ください。

3.Google Personalized Off

「Google Personalized Off」は、Googleアカウントからログインせずにパーソナライズ検索を無効にできるブックマークレットです。

ブックマークレットは次になります。

javascript:(function(){location.href=location.href+'&pws=0'})();

通常、Googleアカウントにログインした状態で検索すると、過去の閲覧情報などから個人に最適化されたWebページが上位にくる「パーソナライズ検索」がされます。

しかし、ブログやWebメディアなどを運営している場合、本来の検索結果を見ることが大切です。

使い方は簡単で、キーワードを入力して検索した画面でGoogle Personalized Offを動作させるだけ。

パーソナライズ検索を無効にすることで、「本当はどんな検索順位で表示されるのか」がわかります。

まとめ：ブックマークレットはプログラミング学習にも最適

今回は、ブックマークレットについてご紹介しました。

ブックマークレットは、Webブラウザのブックマークバーからワンクリックで実行できる便利な機能です。

Webブラウザをよく使用する方なら、ブックマークレットと活用することでより操作が便利になります。
機能をすぐに実行できるので、使い方次第では作業効率のアップも可能です。

ブックマークレットの登録は、JavaScriptのソースコードを使用するため、初心者のプログラミング学習にも役立ちます。

プログラミングに触れたい方はもちろん、Webブラウザをより便利に使いたい方は、ぜひブックマークレットを活用してみてください。