ウェブサイトを見ている時、「この作業、いつも同じことの繰り返しだな」と感じることはありませんか。例えば、ページのタイトルとURLをコピーしたり、選択した言葉を翻訳サイトで調べたりといった作業です。
この記事では、そんな日々の定型作業をワンクリックで自動化できる「ブックマークレット」という仕組みについて、初心者の方にも分かりやすく解説します。
ブックマークレットの基本的な使い方から、簡単なサンプルの作成体験、さらにはコピペしてすぐに使える便利なサンプル集まで、具体的に紹介していきます。この記事を読み終える頃には、あなたも自分だけの便利なツールを作り、実行できるようになっているはずです。
ブックマークレットとは？拡張機能との違いも解説
ブックマークレットとは、一言でいうと「クリックすると特定の処理を実行できる、特殊なブックマーク」のことです。
通常のブックマークはウェブサイトのURLを保存しますが、ブックマークレットはURLの代わりにJavaScriptというプログラミング言語のコードを保存します。そして、ブックマークをクリックすると、そのコードが今開いているページ上で実行される仕組みになっています。
この仕組みは、ブラウザに備わっているjavascript:プロトコルという機能を利用しています。これにより、表示しているページの情報を抜き出したり（URLコピーなど）、外部のサービスと連携したり（選択範囲を翻訳するなど）といった、様々な定型作業を自動化できるのです。
拡張機能（アドオン）との違い
ブラウザの機能を便利にするものとして「拡張機能（アドオン）」もありますが、ブックマークレットとは明確な違いがあります。簡単に言うと「手軽さのブックマークレット、高機能・高権限の拡張機能」と分けられます。
ブックマークレットは、実体としては単なるテキストデータのため、ブラウザへのインストールは不要です。ブックマークとして登録するだけですぐに利用できます。
一方、拡張機能は複数のファイルから構成されるプログラムであり、利用するにはブラウザへのインストールが必要です。その際、ブラウザの履歴や閲覧データへのアクセスなど、より広範な権限を許可しなくてはなりません。その分、バックグラウンドで動作したり、ブラウザ自体を大きく変更したりと、ブックマークレットより高度な機能を実現できます。
| 項目 | ブックマークレット | ブラウザ拡張機能（アドオン） |
|---|---|---|
| 実装形式 | テキストデータ（javascript: URL） | プログラムファイル群 |
| インストール | 不要（ブックマークに登録） | 必要（ストア経由など） |
| アクセス権限 | 限定的（表示中のページ内のみ） | 広範（ブラウザ全体に及ぶことも） |
| 実行タイミング | ユーザーによるクリック時のみ | ブラウザ起動時など（常時動作も可能） |
| セキュリティ | 利用者の自己責任 | ブラウザの審査・権限モデル |
ブックマークレットの使い方・登録方法を3ステップで解説
ブックマークレットを使うには、まずブラウザのブックマークバーに登録する必要があります。ここでは主要なブラウザごとに、その登録方法を解説します。
【PCブラウザ】Google Chrome / Edge / Firefox の場合
これらのブラウザでは、登録方法はとても簡単です。
まず、ブックマークバーが常に表示されるように設定します。ショートカットキー Ctrl+Shift+B（Macの場合は Cmd+Shift+B）を押すと、表示・非表示を切り替えられます。
【方法A】ドラッグ＆ドロップで登録
ウェブサイト上で「このリンクをブックマークバーにドラッグ」のように案内されているブックマークレットは、そのリンクをマウスで掴み、そのままブックマークバーの上まで持っていって離すだけで登録が完了します。
【方法B】手動で登録
自作したコードなどを登録する場合は、手動で行います。ブックマークバーの何もないところを右クリックし、「ブックマークを追加」を選びます。「名前」には分かりやすい名前を、「URL」の欄に javascript: から始まるコード全体を貼り付けて保存してください。
【PCブラウザ】Safari の場合
MacのSafariでは、他のブラウザと少し手順が異なります。ドラッグ＆ドロップでの登録がうまく機能しないことがあるため、以下の手順が確実です。
- まず、どのウェブページでも構わないので、一旦ブックマークとして普通に追加します。
- 次に追加したブックマークを右クリック（または
controlキーを押しながらクリック）し、「アドレスを編集」を選択します。 - アドレス（URL）が入力されている部分をすべて削除し、そこに登録したい
javascript:から始まるコード全体を貼り付けて保存します。これで登録は完了です。
【スマートフォン】iPhone (Safari) / Android (Chrome) の場合
スマートフォンでブックマークレットを直接登録するのは、PCに比べて手順が複雑になります。そのため、最も確実で簡単な方法は「PCのブラウザでブックマークレットを登録し、アカウントの同期機能を使ってスマートフォンに反映させる」ことです。
もしスマートフォン単体で登録したい場合は、以下の方法があります。
iPhone (Safari) の場合:
PCのSafariと同じ手順で登録できます。一度、適当なページをブックマークに追加し、そのブックマークの編集画面を開いて、URL部分をコピーしたjavascript:コードに貼り替えます。
Android (Chrome) の場合:
モバイル版のChromeでは、ブックマークのURLを直接編集することが非常に難しくなっています。そのため、前述の通り、PCのChromeで作成してGoogleアカウントで同期する方法が現実的な解決策となります。
初心者でも簡単！ブックマークレットの基本的な作り方
ここからは、実際にブックマークレットを自作するための基本的な3つのステップを解説します。
ステップ1：JavaScriptでコードを書く
まずは、ブックマークレットで動かしたい処理を、通常のJavaScriptコードとして書いてみます。この段階では、改行やコメントを入れて、自分が分かりやすいように書くのがコツです。
難しく考える必要はありません。例えば、以下のような単純なコードから始めてみましょう。これは、実行すると「ブックマークレットのテスト」という小さなウィンドウを表示するだけのコードです。
alert('ブックマークレットのテスト');
このような簡単なコードを、Chromeのデベロッパーツール（F12キーで起動）の「Console」タブに貼り付けてエンターキーを押せば、すぐに動作を試せます。この方法で、少しずつコードを書き足しながらテストしていくと、効率よく開発を進められます。
ステップ2：コードをブックマークレット用に変換する
コードが完成したら、ブックマークに登録できる「1行のURL形式」に変換します。作業は大きく分けて3つです。
- 一行化する: コード中の改行やコメントをすべて削除し、全体を一行の文字列にします。手作業で行うとミスが起きやすいため、「JavaScript Minifier」などのオンラインツールを使うのがおすすめです。
javascript:を追加する: 一行化したコードの先頭に、javascript:という文字列を追加します。- 【重要】即時関数で囲む: コード全体を
(function(){ ... })();という記法で囲みます。これは、ブックマークレットがウェブページ本体のプログラムと衝突するのを防ぐための、非常に重要なお作法です。
この「即時関数」については、後の「ブックマークレット作成で知っておくべき注意点」で詳しく解説します。
ステップ3：ブックマークに登録してテストする
変換が完了したら、いよいよ最後のステップです。
前のセクション「2. ブックマークレットの使い方・登録方法」で解説した手順に従って、変換後のコードをブラウザのブックマークに登録します。新しいブックマークを作成し、URL欄に javascript: から始まる一行化されたコードを貼り付けましょう。
登録が完了したら、実際にブックマークレットを試したいウェブページを開き、作成したブックマークをクリックします。コードが意図した通りに動けば、オリジナルのブックマークレットの完成です。
【体験】簡単なブックマークレットを3つのサンプルで作ってみよう
理屈がわかったところで、次は実際に簡単なブックマークレットを作成してみましょう。ここでは3つのサンプルを用意しました。ぜひ、ご自身のブラウザに登録して動きを試してみてください。
サンプル1：表示しているページのタイトルとURLをコピーする
ブログやSNSでページを紹介する際に便利な、ページのタイトルとURLをクリップボードにコピーするブックマークレットです。
使用する主なJavaScript API
document.title: ページのタイトルを取得します。location.href: ページのURLを取得します。navigator.clipboard.writeText(): テキストをクリップボードに書き込みます。
完成コード（これをブックマークのURL欄に登録）
javascript:(function(){const title=document.title;const url=location.href;const text=${title}\n${url};navigator.clipboard.writeText(text).then(()=>alert("タイトルとURLをコピーしました"),()=>alert("コピーに失敗しました"))})();解説
ページのタイトルとURLを取得して、改行を挟んで一つの文字列にまとめています。navigator.clipboard.writeText()は非同期で動作するため、処理の成功時と失敗時にそれぞれメッセージが表示されるようになっています。
サンプル2：選択したテキストをGoogle検索する
ウェブページを読んでいて気になった単語を、マウスで選択してすぐにGoogle検索できるブックマークレットです。
※右クリックメニューに“Googleで「選択テキスト」を検索する”があるので、参考程度に
使用する主なJavaScript API
- window.getSelection().toString(): マウスで選択している文字列を取得します。
- encodeURIComponent(): 取得した文字列をURLで安全に使えるように変換します。
- window.open(): 新しいタブでURLを開きます。
完成コード
javascript:(function(){const sel=window.getSelection().toString();if(sel){window.open('https://www.google.com/search?q='+encodeURIComponent(sel))}})();解説
window.getSelection()で選択中の文字列を取得し、もし文字列があれば処理を実行します。検索キーワードに記号などが含まれていても問題が起きないように encodeURIComponent で変換し、Googleの検索用URLに埋め込んで新しいタブで開いています。
サンプル3：入力したキーワードで特定のサイト内を検索する
特定のウェブサイト内で情報を探したい時に役立つブックマークレットです。ここでは例として、フリー百科事典「Wikipedia」内を検索します。
※ポップアップを表示するため、許可をしてください
使用する主なJavaScript API
window.prompt(): テキスト入力用のポップアップウィンドウを表示します。encodeURIComponent(): 入力されたキーワードをURL用に変換します。window.open(): 新しいタブでURLを開きます。
完成コード（Wikipedia内検索）
javascript:(function(){const keyword=prompt("Wikipedia内で検索するキーワードを入力してください:");if(keyword){window.open('https://ja.wikipedia.org/w/index.php?search='+encodeURIComponent(keyword))}})();解説
prompt を使ってユーザーにキーワードを入力してもらい、入力があれば処理を実行します。入力されたキーワードをWikipediaのサイト内検索用URLに組み込み、新しいタブで検索結果ページを開く仕組みです。キャンセルボタンが押されたり、何も入力されなかったりした場合は何も起きません。
【コピペで使える】便利なブックマークレットサンプル集
ここからは、コピー＆ペーストしてすぐに使える、便利なブックマークレットのサンプルを目的別に紹介します。気になったものがあれば、ぜひ登録して試してみてください。
サイト制作・分析が捗るサンプル
PageSpeed Insightsで表示速度を計測する
現在開いているページの表示速度を、Googleの「PageSpeed Insights」で計測します。
javascript:(function(){window.open('https://pagespeed.web.dev/report?url='+encodeURIComponent(location.href),'_blank');})();横スクロールの原因を特定する
ページ内のすべての要素に赤い枠線を表示します。レイアウトが崩れて横スクロールが発生している原因を探すのに役立ちます。もう一度クリックすると枠線は消えます。
javascript:(function(){var id='_outline_style_';var style=document.getElementById(id);if(style){document.head.removeChild(style);}else{var newStyle=document.createElement('style');newStyle.id=id;newStyle.innerHTML='*{outline:1px solid red;}';document.head.appendChild(newStyle);}})();ページのOGP情報を確認する
SNSでシェアされた際に表示されるタイトルや画像などのOGP情報を抽出し、デベロッパーツール（F12）のコンソールに見やすく一覧表示します。
javascript:(function(){var metas=document.querySelectorAll('meta[property^="og:"]');var data=[];for(var i=0;i<metas.length;i++){var prop=metas[i].getAttribute('property');var cont=metas[i].getAttribute('content');data.push({Property:prop,Content:cont});}console.table(data);alert('OGP情報をコンソールに表示しました。');})();情報収集・テキスト作業が捗るサンプル
選択したテキストをGoogle翻訳で開く
選択したテキストを、使い慣れた「Google翻訳」で開きたい場合も同様に作成できます。
javascript:(function(){var s=window.getSelection().toString();if(s){window.open('https://translate.google.com/?sl=auto&tl=ja&text='+encodeURIComponent(s),'_blank');}})();表示中のサイトをGoogleで「site:」検索する
今見ているサイト内に限定して、キーワード検索を行いたい時に便利です。
javascript:(function(){var keyword=prompt('このサイト内('+location.hostname+')で検索するキーワードを入力:');if(keyword){window.open('https://www.google.com/search?q=site:'+location.hostname+' '+encodeURIComponent(keyword));}})();ブックマークレット作成で知っておくべき注意点
ブックマークレットは手軽で便利ですが、作成・利用する上でいくつか知っておくべき重要な注意点があります。
即時関数 (function(){ ... })() で囲む
自作したブックマークレットのコードは、必ず (function(){ ... })(); の形で囲むようにしてください。これは「即時関数」と呼ばれる書き方で、ブックマークレットを安全に動かすための必須の作法です。
もしこれを忘れると、ブックマークレット内で使った変数名が、たまたま表示中のウェブページで使われている変数名と同じだった場合に、ページの機能を壊してしまう可能性があります。即時関数でコードを囲むことで、自分の書いたコードを安全なカプセルの中に入れるような効果があり、そのような衝突を確実に防ぐことができます。
コンテンツセキュリティポリシー（CSP）による制限
セキュリティを非常に重視しているウェブサイトでは、ブックマークレットが全く動かないことがあります。これは「CSP（コンテンツセキュリティポリシー）」という仕組みが原因です。
CSPは、ウェブサイトが意図しないスクリプトの実行を防ぐためのセキュリティ機能です。
この設定が厳格なサイト（例えば、GitHubやFacebookなど）では、ブックマークレットの実行も安全でない「インラインスクリプト」とみなされ、ブラウザによってブロックされてしまいます。これはサイト側の設定なので、利用者側で解決するのは困難です。もしブックマークレットが動かない場合は、DevToolsのコンソールにCSP違反のエラーが出ていないか確認してみてください。
https/httpの混在によるエラー
ブックマークレットから外部のJavaScriptファイルを読み込んだり、APIを利用したりする場合、その通信がブロックされることがあります。これは「混合コンテンツ（Mixed Content）」エラーと呼ばれるものです。
現在、ほとんどのウェブサイトは https:// から始まる安全な接続で表示されています。この安全なページ上で、ブックマークレットが http:// から始まる安全でない接続のリソースを読み込もうとすると、ブラウザはセキュリティリスクと判断して通信をブロックします。
外部のファイルやAPIを利用する場合は、そのURLが必ず https:// で始まっていることを確認しましょう。
コード内の空白文字や特殊文字の扱い
ブックマークレットはブックマークのURL欄に保存されるため、その実体はURLとして扱われます。そのため、コード内の半角スペースは %20 に、" (ダブルクォーテーション) は %22 のように、URLで特別な意味を持つ文字は自動的に変換（エンコード）されます。
通常はブラウザが自動で処理してくれるため、あまり意識する必要はありません。しかし、非常に長いコードを登録した場合などに稀に問題が起きることがあります。これを避けるためにも、作成ステップで解説したように、「JavaScript Minifier」を使ってあらかじめ不要な空白や改行を削除しておくのが最も安全で確実な方法です。
ブックマークレット作成の応用テクニック
基本的な作り方をマスターしたら、次はもう少し高度なテクニックに挑戦してみましょう。
外部のJavaScriptファイルを読み込んで使う
ブックマークレットのコードが非常に長くなると、ブックマークのURL欄で管理するのが大変になります。そんな時は、コード本体を外部のJavaScriptファイル（.js）としてサーバーなどに置き、ブックマークレットからはそのファイルを読み込むだけの短いコードを実行するという方法があります。
具体的には、document.createElement('script') でscriptタグを動的に生成し、そのsrc属性に外部ファイルのURLを設定、そして document.body.appendChild() でページに追加する、という流れになります。
ただし、外部ファイルの読み込みは非同期で行われるため、読み込みが完了してからメインの処理を実行するには script.onload というイベントを使う必要があります。また、前述の通り、読み込むファイルのURLは必ずhttps://で始まるものを用意してください。
jQueryを読み込んで使う
jQueryは、ウェブページの要素を操作する（DOM操作）ための便利なライブラリです。もし表示中のページでjQueryが使われていなくても、ブックマークレットから動的に読み込むことで、複雑な処理をより短いコードで記述できます。
手順は外部JSファイルの読み込みと同じで、Google Hosted Librariesのような信頼できるCDN（コンテンツデリバリーネットワーク）上のjQueryのURLを指定します。
さらに応用として、if(!window.jQuery) のような条件分岐を加えることで、ページに既にjQueryが読み込まれているかをチェックし、無駄な二重読み込みやバージョンの衝突を避ける、より丁寧なブックマークレットを作ることも可能です。
作成したコードが動かない時のデバッグ方法（Chrome DevTools）
ブックマークレットが思ったように動かない時、原因を特定するための最も基本的な方法は、ブラウザのデベロッパーツール（DevTools）を使うことです。
- まず、
F12キー（Macの場合はCmd+Opt+I）を押してDevToolsを開き、「Console」タブを表示させます。 - その状態で、問題のブックマークレットをクリックして実行します。
- もしコードにエラーがあれば、コンソールに赤色でエラーメッセージが表示されます。エラーの種類（
ReferenceErrorなど）や、CSP違反の通知など、問題解決のヒントがここに示されます。
コードが一行にまとまっているためエラー箇所が特定しにくい場合は、console.log('ステップ1完了'); のようなログ出力コードを処理の節目節目に挿入する方法が有効です。どこまで処理が進んで、どこで止まっているのかを追跡することで、問題の箇所を絞り込めます。
まとめ
この記事では、ブックマークレットの基本的な仕組みから、具体的な作り方、すぐに使えるサンプル、そして安全に利用するための注意点までを解説しました。
ブックマークレットは、少しのJavaScriptの知識があれば日々のブラウザ作業を劇的に効率化できる、とても便利なツールです。拡張機能のようにインストールも不要で、手軽に自分だけのオリジナルツールを作成できます。
まずは、この記事で紹介したサンプル集の中から気になるものをコピー＆ペーストして、その便利さを体感してみてください。そして、使い方に慣れてきたら、ぜひ自分の作業に合わせたオリジナルブックマークレットの作成に挑戦してみましょう。
ただしその手軽さの一方で、信頼できないコードを実行しないなど、セキュリティへの意識を常に持つことも忘れないでください。この記事が、あなたの作業効率を上げる一助となれば幸いです。