ブックマークレットで作業効率化

ブックマークレットとは

ブックマークレット（Bookmarklet）は、ブラウザのブックマーク（お気に入り）機能を使って動作する小さなJavaScriptプログラムのことです。通常のウェブサイトへのリンクではなく、Webページ上で特定の作業を自動化するためのスクリプトがブックマークに保存されます。

特徴

カスタマイズができる！
自由に内容を変更したり新しいものを作ったりできます。

簡単に実行ができる！
ブックマークをクリックするだけで実行されます。

インストールも不要！
普通のブックマークと同じように使えるため、特別なアプリや拡張機能は必要ありません。

ブックマークレットの使い方

例として、「ページ内のリンクをまとめてコピーする」ブックマークレットを追加してみます。
このブックマークレットを使用すると、今開いているページ内に存在する<a href=""></a>で設定されているURL一覧をコピーすることが出来ます。

１．コードを準備する

実現したい動作のJavaScriptコードを用意します。
インターネット上で探してみてください。
今回使用するコードは下記になります。

javascript:(function(){ var links = document.getElementsByTagName('a'); var result = []; for (var i = 0; i < links.length; i++) { if (links[i].href) { result.push(links[i].href); } } var textToCopy = result.join('\n'); navigator.clipboard.writeText(textToCopy).then(function() { alert('ページ内のリンクをコピーしました！\nリンク数: ' + result.length); }).catch(function(err) { alert('リンクのコピーに失敗しました: ' + err); }); })();

２.ブックマークを作成

ブラウザのブックマークバーを右クリックし、「ページを追加」を押します。
すると、下記の画面になります。

・名前：分かりやすいものを入力
・URL：JavaScriptコードを入力

両方入力できたら保存してください。

テストして実行

作成したブックマークレットをクリックして動作を確認します。
下記のようにポップアップが表示されればコピー成功です！
あとはメモ帳やExcelなど、任意のエディターに貼り付けて確認してください。

おすすめブックマークレット

コピペするだけですぐに使える、便利なブックマークレットをご紹介します。

表示崩れが起きた時に便利！divの構造が見れるブックマークレット

divの構造がなんとなくわかるブックマークレット · GitHub

下記のように、divの部分に赤い線を表示してくれるので、サイトの表示崩れが起きた際にどこのdivが原因なのか、すぐに分かります。