Claude Codeでブックマークレットを開発する環境をローカルに作る

BML BookmarkletJavaScriptGitNodeJS

ブックマークレットをAIに作らせるのは簡単。困るのはそのあと。直したくなったとき、もう1本ほしくなったとき、半年後に「これ何だっけ」となったとき。そのたびにふりだしへ戻る作り方をしていると効率が悪い。

この記事で扱うのはブックマークレットの作り方だけでなく、ブックマークレットを作り続けるための場所。この記事の主題は、AIエージェントによるブックマークレット開発。チャットと違い、エージェントは手元のファイルを自分で読み書きし、コマンドも実行する。だから「環境」の話になる。作業フォルダを1つ用意し、ブックマークレットのコードを1つ1ファイルで置き、そこから登録用のページを生成する。この形にすると、直すのも増やすのも、AIに任せるのも楽になる。

1. ブックマークレットとは

ブックマークは、一般的に「あとで見たいWebページ」を登録しておくものだが、javascript: で始まるプログラム（コード）も登録できる。これがブックマークレットと呼ばれる。

ブックマークレットを起動すると、いま表示しているページに対してそのプログラムが動く。どこかへ移動するのではなく、開いたままのページの上で処理が動く。

例えばこんなことができる。

情報を抜き出す。 ページの中から必要なものを集めて、コピーできる形にする
表示を変える。 読みやすくする、色を変える、隠れているものを出す
別のページへ飛ぶ。 いま見ているページに関係する検索結果や関連ページを開く

インストールも審査も要らない。ブックマークを1つ登録するだけで、どのページの上でも使えるようになる（一部使えないページもある）。

2. ブックマークレットの登録方法

先にブックマークバーを出しておく。Chrome ならメニューバーの表示から ブックマークバーを常に表示 にチェックを入れる。

方法1: ブックマークの登録画面から入れる

Chrome ならこの手順になる。

ブックマークマネージャを開く（⌘ + option + B）
右上の縦三点リーダーから 新しいブックマークを追加 を選ぶ
ブックマークを追加 のダイアログで名前を決める
URL 欄にコードを貼り付けて保存

URL 欄にプログラムを貼り付けて登録する

ブックマークバーの空いているところを右クリックしてページを追加でもいい。こちらはブックマークを編集というダイアログが出て、名前とURLに開いているページのものが入っているので、両方とも書き換える。

URLを入れる欄に、コードの文字列を貼る。貼り付けに失敗しても使うときまで分からない。一部だけコピーしていた、先頭の javascript: が欠けていた、改行が落ちて // のコメントが次の行まで飲み込んだ。どれも同じように無反応になる。

方法2: ページの上のリンクをブックマークバーへドラッグする

javascript: を持つリンクがページにあれば、それをブックマークバーへドラッグするだけで登録できる。バーが出ていなければ、メニューバーの表示から ブックマークバーを常に表示 にチェックを入れる。リンクをそのまま運ぶので、手軽なうえ貼り付けミスもない。

ページのボタンをブックマークバーへ運ぶだけで登録できる

多くの配布ページがドラッグ用のボタンを置いているのはこのため。この記事で作る環境も、こちらの方式を使う。

3. ブックマークレットの作成方法

作ること自体は、いまはAIに頼めばよい。ただし頼む相手によって、できあがったあとが変わる。この章ではチャットとブラウザの中のAIを見る。この記事の主題であるAIエージェントは4章から扱う。

3-1. チャットで作る

Claude や ChatGPT にチャットで頼むと、コードがテキストで返ってくる。それをコピーして、2章の方法1で登録する。

ブラウザで開いているページのタイトルとURLをまとめてコピーするブックマークレットを作って

返ってくるのは1行のコードと、URL欄に貼る手順

コードは枠に収まらず、横に伸びており、若干コピーしにくい。

動作確認のたびに往復する。 登録して、別のページを開いて、押して、直したければチャットへ戻る。直したら登録し直しなので、そのたびにブックマークマネージャを開くことになる。

コードはチャットの中にしか無い。 直したければ会話を遡る。2本目を作れば、どちらがどの会話だったか分からなくなる。ファイルとして手元に無いので、次にAIへ渡すこともできない。

3-2. ブラウザの中でAIを使う

ブラウザ拡張機能としてAIを動かすと、ここが変わる。3-1と同じ依頼に、登録の仕方だけ足してみる。

ブラウザで開いているページのタイトルとURLをまとめてコピーするブックマークレットを作って。
ドラッグしてブックマークバーに登録したいので、いま表示しているページにモーダルで
クリッカブルなリンク形式を表示できる？

左が読んでいるページ、右がAI。ページの上にドラッグできるボタンが出る。上の帯は、AIがこのブラウザを操作している間ずっと出ている

結果はコピー用のコード文字列ではなく、ドラッグできるリンク（見た目がボタンなことも）。1文足しただけで、渡され方が変わる。

⚠️ 拡張によって出し方が違う。 上は Claude in Chrome の例で、ページの上にモーダルが出る。ChatGPT for Chrome ではページに出せず（ページへの書き換えができず読み取りだけ）、代わりに登録用のHTMLを別ページとして生成して開く。どちらもドラッグで登録するところは同じ。

⚠️ ページを操作させるには許可が要る。モーダルを出すのはページを書き換える操作にあたるため、新しい権限が必要ですというダイアログが出るので許可する。

その場で対話しながら確認できる。 AIが同じページを見ているので、動かした結果について話が通じる
いま開いているページの上に、ブックマークレットのリンクを出させることができる。 そこからドラッグすれば、2章の方法2で登録できる。チャットの返信の中に置くことはできない（javascript: のリンクは表示されるときに行き先を消される）ので、ページの上に出すという形になる

登録の事故も、確認の往復も、ほぼ解決。

3-3. 足りないのは管理

共通の問題はコードがファイルとして残らないこと。

違いは、AIが何を操作できるかにある。チャットは何も操作せず、テキストを返すだけ。ブラウザの中のAIはブラウザを操作する。そしてAIエージェントは、手元のファイルとコマンドも動かせる。ブラウザの中のAIもエージェントではあるが、届く先が違う。

	チャットで作る	ブラウザの中のAI	AIエージェント
登録の事故	起きる	起きない	起きない
動作確認の往復	多い	少ない	少ない
コードが手元に残る	残らない	残っても使い捨て	ファイルとして残る（git管理可能）

作ったものを持ち続けられるかどうかが、その後を決める。ここを埋めるのが、次の章から使うAIエージェント。

4. ブックマークレットの開発環境

AIエージェントによる開発環境を用意する。ブックマークレットのプログラムをファイルとして管理し、それをリンクの形にしたHTMLも同時に作る。リンクにしておけばドラッグで登録できる。ファイルで持つので1本に限らず何本でも扱え、前に作ったものを参照しながら派生版を作るのもやりやすい。この章で環境を用意し、5章から先は実際にこの環境でブックマークレットを作っていく。

4-1. 作業フォルダを作る

Finder でホームフォルダ直下の claude フォルダ（なければ作る）の中に、ブックマークレット用のフォルダを作る。この記事では my-bml を使う。

Claudeデスクトップアプリを起動。Code（Claude Code）を選択 → 新規をクリック → 作業フォルダを指定（~/claude/my-bml）。

そこで頼む。

ブックマークレットを作るための作業フォルダを用意して。
js フォルダに1本1ファイルで JavaScript を置き、それを読んで
ブックマークバーへドラッグ登録できる HTML を public/index.html として書き出してほしい。
生成した HTML は git の管理から外して。

こんな感じになる。

~/claude/my-bml/
├── js/                  ここが正本。1本1ファイル
├── build.mjs            js の中身を読んで public/index.html を書き出す
├── .gitignore           public/index.html
└── public/
    └── index.html       生成物。ここをブラウザで開いてドラッグする

ファイル名や置き場所は多少変わる（生成スクリプトが scripts/ の下に置かれるなど）。役割が同じなら気にしなくていい。

書き出し先を public にしておく。あとで人に配りたくなったとき、このフォルダごとアップロードすればよい（7章）。

⚠️ 途中でgit リポジトリにするか聞かれたら、するほうを選ぶ。聞かれないまま進んだときは、あとで「git で管理して」と頼めばよい。差分を見るのに使う。

4-2. 原本は js、HTML は生成物

ブックマークレットの実体は「javascript: で始まる1本のURL」で、改行もコメントも入れられない。一方、書いたり直したりするには、改行とコメントがあって、1機能ごとにファイルが分かれているほうがいい。

そこで2つに分ける。js/ に置くふつうのJavaScriptが原本、それをリンク形式で埋め込んだ HTML ファイル（public/index.html）が生成物。原本を直して作り直せば、HTMLはいつでも同じものができる。

機械的に生成されるものなので、public/index.html は .gitignore に入れておく（Gitで管理しない）。gitの基本は GBA にある。

5. AIエージェントへの頼み方

まずブックマークレットを一つ作ってみる。確認用なので、実行結果がその場でわかり、どのページでも変化がわかり、トグルで戻せるものが良い。

ここではページ全体の色を反転するものを作る。白い背景が黒くなるので、どんなページでも一目で分かる。

5-1. 頼む

ページ全体の色を反転させるブックマークレットを作って。
もう一度動かすと元に戻るようにして、js フォルダに1ファイルで置いて。

登録して押すと、こうなる。

白い背景が黒くなる。どのページで押しても一目で分かる

このようなコードでブックマークレットが作られる。

// 表示名: 反転
// 説明: ページ全体の色を反転する。もう一度動かすと戻る。
(function () {
  'use strict';
  var el = document.documentElement;
  el.style.filter = el.style.filter ? '' : 'invert(1)';
})();

先頭の2行のコメントは、生成スクリプトが読んでボタンの名前と説明にする。メタ情報を別のファイルに持たせないので、js/ にファイルを置けばそれだけで一覧に並ぶ。

全体を (function () { ... })() で囲んであるのは、相手のページに変数を残さないため。ブックマークレットは他人が作ったページの上で動くので、名前がぶつかると相手を壊しかねない。この形にしておけば、中で作ったものは外から見えない。

5-2. 登録する

登録用のHTMLを生成して、ブラウザで開いて

生成スクリプトが実行されて public/index.html ができ、ブラウザに一覧が出る。前の依頼のときに生成まで済んでいることもあり、その場合は開くだけになる。

生成された一覧ページ。名前と説明は js の先頭コメントから拾われる

作業フォルダを作った時点でサンプルが入っていることもある。その場合は2本並ぶ。

青いボタンをブックマークバーへドラッグする。 2章の方法2にあたる。クリックではなくドラッグ。クリックすると、その場、つまりこの一覧ページの上で動いてしまって、何も起きていないように見える。

登録できたら、適当なページを開いてブックマークを押す。色が反転すれば成功。もう一度押すと戻る。

直したときは、生成し直して登録し直す。 ブックマークレットは、登録した瞬間のコードが href に焼き込まれる。js/ を直しても、登録済みのブックマークには届かない。古いほうを消してから、もう一度ドラッグする。 同じ名前が2つ並ぶと、どちらが新しいか分からなくなる。

6. 2本目を足す

2つめのブックマークレットとして、いま開いているページのタイトルとURLを取り出すものを作る。1本目が見た目を変えるものだったのに対し、こちらは情報を取り出すもの。

ただし取り出してクリップボードに入れるだけにはしない（実行結果の確認に一手間かかるので）。画面に出して、その場で直せるようにする。 ページのタイトルにはサイト名がくっついていることが多く、どこかに貼る前に削りたくなるため。

6-1. 頼む

いま開いているページのタイトルとURLを、ページの上に出すブックマークレットを作って。
出したものはその場で書き換えられて、コピーボタンでコピーできるようにして。
コピーできたかどうかも分かるようにしてほしい。

ブックマークレットのプログラムは1つめのものよりもかなり長いが、読者が書くわけではないので、長さは問題にならない。中身は、相手のページから見た目を隔離する仕組み、書き換え可能な入力欄、コピーボタン、成功したかどうかの表示、といったもの。

読んでいるページの上に出る。欄の中はそのまま書き換えられる

依頼文にはやりたいことしか書いていない点に注目してほしい。どう隔離するか、入力欄を何で作るか、コピーが失敗したときどうするかは、こちらが決めていない。やりたいことを伝えると、実現の仕方はAIが選ぶ。

6-2. 登録する

登録用のHTMLを生成し直して

一覧に足したぶんが並ぶ。名前と説明は、それぞれのファイルの先頭コメントから拾われる。3本目も4本目も同じ手順で増える。

5-2 の一覧に、2本目が下に足された

あとは5-2と同じで、増えたほうをブックマークバーへドラッグする。

gitで見ると、変わったのは足したファイル1つだけ。1本目には一切手を入れていないことが差分で分かる。

7. 公開する

ここまでは自分ひとりで使う話。人に渡したくなったら、選択肢が増える。

生成したHTMLは、そのままインターネットに公開しても動く。 リンクが並んだだけの静的なファイルなので、public フォルダを SUP の手順でアップロードするだけ。

5-2で見たとおり、登録した瞬間のコードが href に焼き込まれる。手元なら登録し直せばよいが、配ったあとは、こちらが直しても、すでに登録した人のブックマークは古いまま動き続ける。 更新時は、削除して再登録するようアナウンスする必要がある。

2026-08-25 (last updated: Wed Sep 02 2026 00:00:00 GMT+0000 (Coordinated Universal Time)) タツヲ (yto)

☕️ Vibecoding Notes を応援