Zenn
🗂

生成 AI の時代だからこそ、ブックマークレットのススメ

に公開
JavaScript
frontend
ブックマークレット
生成 AI
tech

皆さん、ブックマークレットという古から伝わる技術をご存じでしょうか？

https://ja.wikipedia.org/wiki/ブックマークレット

https://qiita.com/aqril_1132/items/b5f9040ccb8cbc705d04

生成 AI の時代に入り、このブックマークレットという技術がまた熱くなってきた！と巷で話題なので、僭越ながら筆を取らせて頂きました。

なぜ熱いのか

ブックマークレットの以下の特徴が生成 AI にぴったりだと考えています。

  • とても枯れている
  • コード生成に必要な情報を AI に食わせることができる

ブックマークレットでできること

  • フォームの自動入力
  • ブラウザ画面に表示されている情報をクリップボードにコピー
  • etc…

必要なもの

  • Cursor などのプログラムを生成できる AI コードエディタ(重要)
    • ChatGPT でもできるかも…？

やり方

以下の情報を AI コードエディタに教えてあげると、後はいい感じのコードをエディタ君が頑張って作ってくれます

  • どこから情報を取ってくるか
  • どこに情報を貼り付けるか

例: URL のパラメータから情報を取ってきてフォームに貼り付けるような場合

まずは、 どこに情報を貼り付けるかを指定するために画面の HTML をクリップボードにコピーします。

画面の HTML をクリップボードにコピーするブックマークレット(AI エディタ作)
javascript: (function () {
  const html = document.documentElement.outerHTML;
  navigator.clipboard
    .writeText(html)
    .then(() => {
      const notification = document.createElement("div");
      notification.textContent = "HTMLをクリップボードにコピーしました";
      notification.style.cssText = `
                position: fixed;
                top: 20px;
                left: 50%;
                transform: translateX(-50%);
                background: #333;
                color: white;
                padding: 12px 24px;
                border-radius: 4px;
                z-index: 9999;
                font-family: -apple-system, BlinkMacSystemFont, sans-serif;
            `;
      document.body.appendChild(notification);
      setTimeout(() => notification.remove(), 3000);
    })
    .catch((err) => {
      alert("クリップボードへのコピーに失敗しました: " + err);
    });
})();

続けて ↑ で取得した情報と、どこから情報を取ってくるかとして URL のパラメータの情報を AI コードエディタに与えプログラムの作成を依頼します。

この html に対し、`/settings/profile?user-name=t0yohei&user-github-username=t0yohei&user-twitter-username=t0yohei&user-website-url=https://blog-no-name.com` 
というパラメータでアクセスした際、user-name, user-github-username, user-twitter-username, user-website-url の input に対し、
パラメータで渡された値を入力するブックマークレットを作成してください。
作成したブックマークレット内にコメントは不要です。

あとはこのプログラムをもとに AI エディタ君と多少の試行錯誤を行うことで、ブックマークレットを使ったフォームの自動入力が実現できます。

参考: ブックマークレット登録手順(Chrome の場合)

  1. ブラウザ右上の ︙ から、ブックマークとリスト > ブックマークマネージャ を開きます

  2. ブラウザ右上の ︙ から 新しいブックマークを追加を選択します

  3. ブックマークの名前を任意のものに設定し（例：「プロフィール入力」）、URLの部分に上記のコードを貼り付け保存します

  1. ブックマークレットを使いたい画面でブックマークを押す

ブックマークレット生成の注意点

  • 簡単に壊れる
    • 誰もブックマークレットの存在を考慮して画面を修正してくれません
  • 生成 AI に食わせる情報に個人情報などは含めないようにする

業務効率化をお考えの際は是非ブックマークレットを活用してみてください！

Discussion