Webサイトで「ブックマークレットをブックマークバーへドラッグしてください」と書かれているのを見たことはありませんか？
初めて見る方の中には、
- 「普通のブックマークと何が違うの？」
- 「JavaScriptって書いてあるけど危険じゃないの？」
- 「ウイルスじゃないの？」
と思う方もいるかもしれません。
実はブックマークレットは、昔から多くの開発者やデザイナーに利用されている便利な仕組みです。
この記事では、ブックマークレットの仕組みや安全性、利用するメリットを初心者向けにわかりやすく解説します。
※この記事では、FANELABの「Font & Color Checker」で利用しているブックマークレットも例として紹介します。
ブックマークレットとは？
ブックマークレットとは、ブックマークにJavaScriptを登録して実行する仕組みのことです。
普段のブックマークは、
https://example.comのようにWebページのURLが登録されています。
一方、ブックマークレットは、
javascript:(function(){ ... })();というJavaScriptが登録されています。
そのブックマークをクリックすると、現在開いているページ上でJavaScriptが実行されます。
つまり、「お気に入り」をクリックするだけで便利な機能を追加できる仕組みです。
（ここに通常のブックマークとブックマークレットの比較画像）
ブックマークレットで何ができるの？
ブックマークレットは、現在開いているページを便利にするためによく利用されています。
例えば、
- Webサイトの書体を調べる
- カラーコードを取得する
- ページ内の画像を一覧表示する
- 不要な広告を一時的に消す
- 入力フォームを自動入力する
- 開発者向けの情報を表示する
など、さまざまな用途があります。
Chrome拡張機能と似ていますが、インストール不要で使えるのが大きな特徴です。
ブックマークレットはどういう仕組み？
「どうして他のWebサイトの情報を取得できるの？」と疑問に思う方もいるでしょう。
ポイントは、現在開いているページの中で動作するという点です。
例えば、あなたがニュースサイトを開いているとします。
その状態でブックマークレットをクリックすると、
ニュースサイト
↓
ブックマークレット実行
↓
そのページ上でJavaScriptが動くという流れになります。
つまり、別のサイトへアクセスして情報を取得しているわけではありません。
今まさに表示しているページの情報を読み取っているだけなのです。
この仕組みを利用して、
- フォント名
- CSS
- 色
- HTML
などを取得できます。
なぜ普通のWebページではできないの？
実は、通常のWebページから別のサイトの情報を勝手に取得することはできません。
これはCORS（Cross-Origin Resource Sharing）というブラウザのセキュリティ機能があるためです。
例えば、
example.comから
google.comのHTMLを自由に取得できてしまうと、大きなセキュリティ問題になります。
そのため、ブラウザには他のサイトへのアクセスを制限する仕組みがあります。
しかし、ブックマークレットは現在表示中のページそのもので実行されるため、この制限に引っかかりません。
つまり、
「他のサイトを読みに行く」のではなく、
「今見ているページを調べる」
という仕組みなのです。
Font & Color Checkerでブックマークレットを採用した理由
FANELABの「Font & Color Checker」では、サイトの書体を調べる機能にブックマークレットを採用しています。
理由は、とてもシンプルです。
実際にブラウザが表示しているCSS情報を、そのまま取得できるからです。
取得できる情報は、
- フォント名
- フォントサイズ
- フォントの太さ
- 行間
- 字間
- 文字色
- 背景色
などです。
これらはブラウザが実際に表示している値なので、非常に正確です。
もし画像からAIでフォントを推測する方式にすると、「似ている候補」を表示することしかできません。
ブックマークレットなら、推測ではなく実際のCSS情報を取得できます。
ブックマークレットは安全？
結論から言うと、
信頼できるサイトのブックマークレットであれば、安全に利用できます。
ただし、ブックマークレットはJavaScriptを実行する仕組みなので、内容によってはさまざまな処理が可能です。
例えば、
- ページを書き換える
- 入力内容を取得する
- ボタンをクリックする
といった処理も技術的にはできます。
そのため、
どこの誰が作ったかわからないブックマークレットは実行しないことが大切です。
これは、知らないソフトウェアをインストールしないのと同じ考え方です。
FANELABのブックマークレットは、書体情報を取得するためだけに利用しており、個人情報を収集したり外部へ送信したりする処理は行っていません。
ブックマークレットと拡張機能の違い
よく比較されるのがChromeやEdgeの拡張機能です。
| 比較項目 | ブックマークレット | ブラウザ拡張機能 |
|---|---|---|
| インストール | 不要 | 必要 |
| 利用開始 | すぐ使える | ストアから追加 |
| 更新 | 不要（再登録時を除く） | 自動更新されることが多い |
| 機能 | 比較的シンプル | 高機能 |
| 動作範囲 | 現在のページ | ブラウザ全体でも動作可能 |
簡単な機能であれば、ブックマークレットの方が手軽に使えます。
スマートフォンでも使える？
「ドラッグできないからスマートフォンでは使えない」と思われがちですが、実は利用できます。
一般的な手順は次のとおりです。
- 対象ページを通常どおりブックマークする
- ブックマークを編集する
- URLをJavaScriptコードへ変更する
- 保存する
これで、ブックマークを開くだけでブックマークレットを実行できます。
SafariやChromeなど、多くのブラウザで利用可能です。
ブックマークレットのメリット・デメリット
メリット
- インストール不要
- 無料で利用できるものが多い
- ブラウザがあればすぐ使える
- 現在のページの情報を正確に取得できる
- 拡張機能を増やさなくて済む
デメリット
- 初回設定が少しわかりにくい
- ブラウザによって設定方法が異なる
- 高度な機能は拡張機能の方が得意
よくある質問
ブックマークレットは無料ですか？
ほとんどのブックマークレットは無料で利用できます。
ウイルスではありませんか？
ブックマークレット自体がウイルスというわけではありません。
ただし、JavaScriptを実行する仕組みなので、信頼できる提供元のものだけを利用することが大切です。
削除したくなったら？
通常のブックマークと同じように削除するだけです。
パソコンにソフトウェアがインストールされるわけではありません。
まとめ
ブックマークレットは、ブックマークにJavaScriptを登録して実行する便利な仕組みです。
現在開いているページ上で動作するため、Webサイトの書体やCSS情報を正確に取得できるなど、開発者やデザイナー向けのツールとして長年利用されてきました。
一方で、JavaScriptを実行するという特性上、信頼できる提供元のものを利用することも大切です。
FANELABの「Font & Color Checker」でも、この仕組みを活用して、拡張機能を使わずにWebサイトの書体や色を調べられる機能を提供しています。
使い方については別ページに記載しています！
Web制作やデザインの参考にしたいサイトがある方は、ぜひ一度試してみてください。