Bookmarklet（ブックマークレット）とは？ 作り方と使い方
Bookmarklet（ブックマークレット）って何？
そんなときに活躍してくれるのが Bookmarklet（ブックマークレット） です。
ブラウザの「お気に入り（ブックマーク）」に登録して使う、
インストール不要のミニツールのようなものです。
実体は「ブックマークに保存されたJavaScript」で、クリックするだけでその場で処理を実行できます。
『インストール不要』『無料』『すぐ使える』という手軽さが魅力です。
たとえば「ページの表示を整える」「必要な情報だけ抜き出す」など、
ちょっと面倒な作業をワンクリックで実行できるようにしてくれます。
この記事では、そんなブックマークレットの『作り方』と『使い方』を解説しますね。
ブックマークレット（Bookmarklet）の作り方（登録方法）
ブックマークレットの作り方は、大きく分けて2つあります。
【事前準備】ブックマークバーがない場合、表示しておく
作成時は、ブックマークバー（お気に入り）を表示しておくと、作業しやすく便利です。
Chromeの場合は、右上『…(縦)』➔『☆ ブックマークとリスト』➔『ブックマーク バーを表示』をクリックします。
これでブックマークバーがブラウザの上部にでるようになります。
他にも
『Brave』なら、右上『≡』➔『ブックマークとリスト』➔『ブックマークバーを表示』
『Firefox』なら、右上『≡』➔『ブックマーク』➔『ブックマークツールバーを表示』
など、どのブラウザでも、それっぽいの書いてあるので、やってみてください。
常に表示していなくとも使えるので、
ブックマークレットを作り終えた後はまた隠してしまっても問題ありません。
簡易版：ブックマークレット作り方
これは用意されているときだけ使える方法です。
このようにコードが書かれているリンク・ボタン⇩があります。
サイト名をアラート
これを、掴んで（左クリックしたまま）離すこと無く、ブックマークバー（お気に入りバー）に持っていきます。
これでブックマークレット完成です。
試しに、作ったブックマークレットを押してみてください。
サイト名が、アラートで出てきます。
通常版：ブックマークレット作り方
今回は『Chrome』で説明しますが、Firefox、Opera、Safariも、ほぼ同じです。
1️⃣いつも通りブックマーク（お気に入り）を作成する
今見ているページなどで、URL入力する場所にある『☆』を押してブックマークを作成します。
2️⃣ブックマークレット用コードを入手
ブックマークレット用コードをお持ちの方は、コピーしてきてください。
お持ちでない場合、
サンプルコードとして、⇩こちらをコピーしてください。
javascript:(function(){
alert(document.title);
})();
3️⃣ブックマークの編集
ブックマークバーにある『今作成したブックマーク』を右クリックして『編集』
『名前』をわかりやすい名前にし
『URL』にブックマークレット用コードを貼り付け。
『保存』ボタンを押して、ブックマークレット完成です。
ブックマークレットの使い方
先ほど作成した『ブックマークレット』を
普通にブックマークを使うように、ポチッと押してみてください。
これだけで、プログラムが動きます。
先程のサンプルコードの場合、サイトのタイトルがメッセージとして表示されます。
色々なページで試してみてくださいね。
動作環境
PC版の Chrome / Edge / Safari での利用を推奨
- JavaScriptが無効な環境では動作しません
- スマートフォンでは、ブックマークレットの実行に制限があるため、正常に動作しない場合があります（PC・タブレット推奨）
- Safariではセキュリティ設定によっては動作しないことがあります
- サイトの構造（DOM）によっては、正しく動作しない場合があります
よくある疑問への回答
質問受付中です。いただき次第、ここの項目に追加します。
Q. ブックマークレットは無料で使える？
使えます。
ブラウザのお気に入りに入れるだけです。
Q. ブックマークレット用コードは複数行だけど、URL欄にそのまま貼ってもいいの？
そのまま貼って大丈夫です。
ちゃんと動きます。
Q. スマホでは動かないの？
iPhone/iPadならば、使える場合があります。
昔は動くものもあったそうですが、今のAndroidスマートフォンでは、動かないと見てよいです。
コメント