Bookmarklet（ブックマークレット）って何？ 作り方と使い方をやさしく解説

Bookmarklet（ブックマークレット）とは？　作り方と使い方

Bookmarklet（ブックマークレット）って何？

この作業、毎回手動でやるの面倒だな…

そんなときにこっそり活躍してくれるのが Bookmarklet（ブックマークレット） です。

実はこれ、ブラウザのブックマークに登録するだけで使える『ちっちゃなプログラム』。
しかも『インストール不要』『無料』『一瞬で使える』という三拍子そろった便利ツール。

例えば『ページ内の画像を一括でダウンロード』『表示中のページを整形して印刷用に変換』など、ちょっとめんどくさいをクリックひとつで一発実行できるようにしてくれます。

この記事では、そのブックマークレットの『作り方』と『使い方』を、詳しめに解説します。

ブックマークレット（Bookmarklet）の作り方（登録方法）

『めんどくさがりの雑手順』と『しっかり手順』好きな方を使ってね

めんどくさがりの雑手順

ブラウザのブックマークを作り方と同じで、適当なページでURL入力する場所にある『☆』を押して、適当な名前（例：「タイトル表示」）をつけて保存。

ブックマークバーから、作ったブックマークを右クリックして『編集』
『URL』にこんな感じ↓で書かれているJavaScriptを入れて保存。

javascript:(function(){
  alert(document.title);
})();

これで完成です。

しっかり手順

1. ブラウザの「ブックマークバー」を表示する
   （Chromeなら Ctrl + Shift + B、Safariなら「表示」→「お気に入りバーを表示」）
2. 新しいブックマークを追加
   右クリック → 「ページを追加」または「ブックマークを追加」
3. 名前をつける（例：「タイトル表示」）
4. URL欄に以下のようなコードを貼り付ける
   ※例：今見てるサイトのタイトルを出すBookmarklet

javascript:(function(){
  alert(document.title);
})();

5. 保存して完了です。

補足

URLは1行だけど、コードに改行があるよ？

改行含まれてても、勝手に消してくれるので、そのまま貼って大丈夫です。

javascript:(function(){
  alert(document.title);
})();

を貼っても、こうなります⇩

javascript:(function(){  alert(document.title);})();

もらったコード、反応がないー

JavaScriptのエラーが出ている可能性があります。
基本的なものだとコメントです。

例えば

javascript:(function(){
  alert(document.title); // アラートが出る
})();

だとエラーだけど、⇩こう直せば動きます。

javascript:(function(){
  alert(document.title); /* アラートが出る */
})();

ブックマークレット（Bookmarklet）の使い方

1. 作った作業をしてほしい対象のページを開く
2. Bookmarkletをクリック
3. 自動で処理が実行され、結果がコピーされたり表示されたりします！

いつものように『ブックマークを開く感じ』で使えばOK

注意点

• スマホでは動作しないことが多い（PC・タブレット推奨）
• JavaScriptが無効な環境では使えません
• サイトによっては動作しない場合もあります（DOM構造が違うなど）

昔はAndroid端末でも使えたらしいけど、今の端末は大概ムリ
諦めてPC使ってね