拡張機能より簡単・便利！ブックマークレット解説 #PC仕事術

一歩｜ツールと知恵で仕事の面倒を減らすSE

2025年2月11日 10:03

こんにちは！xxIPPOxx(いっぽ)です！（自己紹介はこちら）

今回は、ブックマークレットについて解説します。

ブックマークレットって聞いたこと無い人が多いと思います（エンジニアでも、知らない人は意外と多い）

個人的には凄い便利で活用していたのですが、最近AIが生成するJavascriptの品質が高く、エンジニア以外の方も活用出来ると思いましたので、解説したいと思います！

前置き長くなりましたが本題です。↓

本題：ブックマークレットとは

ブックマークレットとは、ブラウザのブックマークに保存された小さなJavaScriptプログラムです。

通常のブックマークが特定のウェブページを開くだけなのに対し、ブックマークレットは表示中のページに対して様々な操作を行うことができます。

主な特徴と利点

導入が簡単：インストール不要で、ブックマークとして保存するだけで使えます
軽量性：ブラウザの動作を重くすることがありません
高い互換性：異なるブラウザやデバイスでも利用可能です
カスタマイズ性：自分のニーズに合わせた機能を追加できます

作成手順

JavaScriptコードを用意

alert('Hello!');

ブラウザのブックマークに"仮"登録

まず、仮のブックマークを追加します。
普段どおり、どこかのWEBページを一旦ブックマークしてください。

※以下の赤丸部分をドラッグし、ブックマークバーへドロップでも追加可能。

ブックマーク編集

ブックマーク編集で、名前はわかりやすいものに変更し、
URL部分にスクリプトを入力します。

※「javascript:」を先頭に付けることで、ブックマークレットとして認識されます。

※Javascriptのコードは1行で記入します。改行付きのコードをそのまま貼り付ければ、一応勝手に改行除去されますが、
　「// コメント」などのコメントブロックがあると、その後のコードが全て無効になってしまうため、注意してください！

例：

javascript:alert('Hello!');

必要な時にクリックして実行

普段ブックマークをクリックするのと同じように、クリックするだけ！

例：サンプルコードの実行イメージ

補足

AIに作成してもらう際は、
「Javascriptで〇〇がしたい。」
といってまず作成し、その後、
「ブックマークレットで実行したい」
ということで、1行にしてくれます！

注意点

セキュリティ制限: 一部のウェブサイトでは、Content Security Policy（CSP）によりブックマークレットの実行が制限される場合があります。
コードの最適化: 長いコードは圧縮すると少し読み込みが早くなります（圧縮は、AIに任せましょう）。

便利なブックマークレットの例

ページのタイトルとURLをMarkdown形式でクリップボードにコピー:

javascript:(()=>{const e=`[${document.title}](${location.href})`,t=document.createElement("textarea");t.textContent=e,document.body.appendChild(t),t.select(),document.execCommand("copy"),document.body.removeChild(t),console.log(`Copied: ${e}`)})();

元コード

javascript: (() => {
  // Markdownフォーマットでタイトルとリンクを組み立て
  const markdownText = `[${document.title}](${location.href})`;

  // 一時的なテキストエリア要素を作成
  const tempTextArea = document.createElement("textarea");
  
  // テキストエリアに作成したMarkdownテキストを設定
  tempTextArea.textContent = markdownText;
  
  // テキストエリアを画面に追加（非表示）
  document.body.appendChild(tempTextArea);
  
  // テキストエリアの内容を選択状態に
  tempTextArea.select();
  
  // クリップボードにコピー
  document.execCommand("copy");
  
  // 一時的なテキストエリアを削除
  document.body.removeChild(tempTextArea);
  
  // コピーした内容をコンソールに表示（確認用）
  console.log(`Copied: ${markdownText}`);
})();

ご不明な点等ございましたら、コメント欄でお気軽にご質問ください！

最後までお読みいただき、ありがとうございます！

何か1つでも参考になれば幸いです！
あなたの人生がより良くなることを心から願っています。(-人-)
共に学びながら毎日をより良くしていきましょう！

人気記事はこちら！

人生を豊かにするおすすめ書籍はこちら！

#PC仕事術 #xxIPPOxx_PC仕事術

#ブックマークレット #JavaScript #プログラミング #Web開発 #エンジニア #IT #技術 #便利ツール #効率化 #ライフハック #生産性向上 #時短術 #Note #note #ノート #ウェブ制作 #クリエイティブ #Markdown #コピーアンドペースト #AI