毎日の決まった入力、ボタン1つでおわらせませんか？コードが書けない私がAIと作った「ブックマークレット」の作り方
はじめに：
同じ画面に、同じ値を入れる毎日
毎日のように同じ画面を開いて、
同じ項目に、同じ値を入れていませんか。
1つの画面の中で終わる入力なら、
ブラウザのブックマークに登録しておく
小さなプログラムで、
ボタン1つにまとめられます。
コードが書けない私も、
AIと一緒に作りました。
この小さなプログラムは、
「ブックマークレット」と呼ばれています。
この記事では、私がAIと一緒にブックマーク
レットを作ってきたやり方を書きます。
ブックマークレットとは何か。
AIにどう頼めば、動くものが返ってくるのか。1本目を作る手順と、動かないときの直し方。そして、使う前に気をつけること。
専門用語は、できるだけ使わずに書きます。
前回の記事では、AIに渡す「引き継ぎ書」の
作り方について書きました。
今回は、その最後に予告した
「ブックマークレット」の話です。
前回を読んでいなくても分かるように
書いています。
https://note.com/takumi_ai_tools/n/na87cc3f48d78
困っていたこと：
判断はいらないのに、時間はかかる
私の仕事には、担当しているシステムの
初期設定があります。データの取り込みの
設定、登録情報の入力、項目の設定など、
決まった項目に、決まった値を入れていく
作業です。
体感で、1人あたり約15分かかっていました。
別の初期設定の作業もありました。
こちらも体感ですが、量が多いと60分以上
かかり、しかも複数の画面を見比べながら
進める作業でした。
どちらの作業も、その場で判断することは、
ほとんどありません。入れる場所も、
入れる値も、あらかじめ決まっています。
考えなくていいはずの作業に、
毎回それだけの時間がかかっていました。
この2つの作業のことは、
以前の記事でも書いています。
https://note.com/takumi_ai_tools/n/n1408da6a8d03
ブックマークレットを知ったのは、
社内の別の部署の人が、ブックマークレットについて発信しているのを見たときです。
こんなことができるのかと、驚きました。
AIと会話しながらプログラムを作ること
（バイブコーディングと呼ばれます）は、
それまでもしていました。だから、
これなら自分にもできそうだと思えました。
ブックマークレットとは：
押すと、今開いているページで動く
ブックマーク
ブックマークレットは、
ブラウザのブックマークに登録しておく、
小さなプログラムです。
ふつうのブックマークは、押すと、
登録しておいたページを開きます。
ブックマークレットは、押すと、
今開いているページの上で、
決まった操作をしてくれます。
仕組みは、ブックマークのURLの欄に、
ページのアドレスの代わりに、短いプログラム（JavaScriptという、Webページを動かすための言葉で書いたもの）を入れておくだけです。
アプリや拡張機能のインストールは
要りません。ブックマークに登録すれば、
自分のブラウザの中で、
開いているページに対して動きます。
向いている作業、向いていない作業
ブックマークレットには、向いている作業と、向いていない作業があります。
向いているのは、同じ画面で、同じ入力や
同じ操作を繰り返す作業です。
私が作ったものの中で、特に効果を感じたのは、入力の作業でした。
入力のほかに、Webページにある表を
コピーするものも作りました。
向いていないのは、次の3つです。
1. 途中でページが読み込み直される作業：
ブックマークレットは、押したときに
開いているページの上で動きます。
別のページに移って、ページ全体が読み込み
直されると、
動いていた処理はそこで消えてしまいます。
2. 毎回、判断が必要な作業：
ブックマークレットは、
決めておいたとおりにしか動きません。
画面の中身を見て、
そのつど人が決める作業には向きません。
3. パスワードや個人情報を扱う操作：
パスワードをブックマークレットの中に
書いておくと、ブックマークの編集画面を
開けば、だれでも読めてしまいます。
個人情報を扱う画面も、思いどおりに
動かなかったときの影響が大きいので、
避けたほうが安心です。
1つ目は、私が使ってきた中で感じている
限界です。ただし、画面が切り替わっても、
ページ全体は読み込み直さないサイトも
あります。そういうサイトなら、
画面をまたいで動き続けることもあります。
先ほど書いた、量が多いと60分以上かかっていた初期設定の作業も、
このタイプのサイトで、ブックマークレットが画面をまたいで動く作業でした。
ページの読み込み直しをはさむ作業まで
自動にしたいなら、次のステップは、
ブラウザの拡張機能を自分で作ることです。
2つ目と3つ目は、私の経験というより、
自動にするときの一般的な注意です。
AIへの頼み方：
画面を説明するより、コードを見せる
ここからが、
この記事でいちばん伝えたいところです。
最初の私は、Chromeに組み込まれた
GoogleのAI「Gemini in Chrome」に、
言葉だけで頼んでいました。
「この画面の、ここの入力欄に、
この値を入れてほしい」
という頼み方です。ある程度は、
動くものが返ってきました。
ただ、動かないこともありました。
いろいろ調べて見つけたのが、
操作したい場所のコードを、
そのままAIに見せるやり方です。
Webページの画面は、裏側でコードによって
作られています。入力欄にもボタンにも、
それぞれを表すコードがあります。
ブラウザに入っている
「開発者ツール」を使うと、
そのコードをコピーできます。
コピーしたコードをAIに渡し、
そのうえで「これをどうしたいのか」を
具体的に書く。そうするようにしてから、
返ってくるものの質が一気に上がったと
感じています。
このとき、使うAIは変えませんでした。
それからもGemini in Chromeを使いながら、
コードを添えて頼むようにしました。
Geminiのチャットで作ることもありました。
変えたのは、AIではなく、
AIに渡すものでした。
なぜ、コードを見せるとうまくいくのでしょうか。
ブックマークレットが入力欄に値を入れるには、どの入力欄なのかを見分ける目印が
要ります。その目印は、
画面の見た目ではなく、コードの中に
書かれています。言葉だけで頼むと、
AIはその目印を推測して書くことになりがちです。コードを見せれば、推測しなくて済みます。
開発者ツールを開くと、コードがずらりと
並びます。ただ、開いて見るだけなら、
ページには何も起きません。
閉じれば元の画面に戻ります。
コードのコピーのしかたは、次のとおりです。
Chromeの場合で書きます。
1. 操作したい入力欄（またはボタン）の上で
右クリックして、「検証」を選びます。
2. 開発者ツールが開きます。右クリックした
場所を表すコードの行に、色がついています。
3. 色のついた行を右クリックして、
「コピー」→「outerHTML をコピー」を選びます。
「outerHTML」は、選んだ場所のコードをまるごと、という意味だと思っておけば十分です。Edgeでも、同じ流れでコピーできます。
メニューの名前が「検査」などと少し違って
出ることもありますが、
その項目を選べば同じです。
頼むときは、次の4つを書きます。
1. どの画面で：
どのページの、どの部分で使うのか
2. 何を：何を入れたいのか、何を押したいのか
3. どの順番で：操作が2つ以上あるときの順番
4. どうなれば成功か：押したあと、
画面がどうなっていれば成功なのか
これに、コピーしたコードを添えます。
そのまま使えるように、記事用に整えた
ひな形を載せます。〇〇のところを、
自分の仕事に合わせて書きかえてください。
ブックマークレットを作ってください。
私はプログラミングができません。
・使う画面：〇〇のページの、
〇〇の部分です。ブラウザは〇〇を使います。
・やりたいこと：〇〇の入力欄に、
〇〇と入れたいです。
・順番：①〇〇 ②〇〇 ③〇〇
・成功の目安：押したあと、〇〇の入力欄に
〇〇と入っていれば成功です。
・操作したい場所のコード：下に貼ります。
（ここに、開発者ツールでコピーしたコードを貼る。お客さまの名前や金額は、仮のものに置きかえる）
あわせて、次のこともお願いします。
・ほかのサイトにデータを送ったり、
外からファイルを読み込んだりする処理は入れないでください。
・ブックマークのURL欄にそのまま貼れる形（javascript: で始まる形）で、
コードをコードブロックで出してください。
「あわせて」の1つ目は、安全のためのお願いです。理由は、「使う前に気をつけること」の章で書きます。
1本目を作ってみる：タイトルとURLを、
1行でコピーする
ここからは、実際に1本作ってみます。
見本は、今開いているページのタイトルと
URLを、1行にまとめてコピーする
ブックマークレットです。ふつうのWebページなら、どのページでも使えます。押しても、
ページの中身を書きかえることはありません。頼むところから、押して確かめるところまでの流れをつかむための、練習用の1本です。
この記事のために、
Geminiで新しく作りました。
流れは、次の4つです。
1. Geminiに頼む
2. コードを受け取る
3. ブックマークに登録する
4. 押して確かめる
手順1 Geminiに頼む
Geminiに送った文面は、次のとおりです。
先ほどの「頼むときの4つ」に、
そのまま当てはめています。
ブックマークレットを作ってください。
私はプログラミングができません。
・使う画面：
どのWebページでも使えるようにしたいです。Google ChromeとMicrosoft Edgeで使います。
・やりたいこと：
今開いているページのタイトルとURLを、
間に半角スペースを1つ入れて1行にまとめ、
コピーしたいです。
・順番：ブックマークを押したら、
すぐにコピーされるようにしてください。
・成功の目安：コピーできたら
「コピーしました」と表示してください。
コピーできなかったときは、その1行を画面に出して、手でコピーできるようにしてください。
あわせて、次のこともお願いします。
・ほかのサイトにデータを送ったり、
外からファイルを読み込んだりする処理は
入れないでください。
・ブックマークのURL欄にそのまま貼れる形（javascript: で始まる形）で、
コードを出してください。
・ブックマークへの登録のしかたも、
ChromeとEdgeに分けて、
手順で教えてください。
ひな形との違いは、2つです。1つ目は、
コードを添えていないことです。今回は、
決まった画面の入力欄やボタンを操作するわけではありません。ページのタイトルとURLは、どのページにもあるので、
目印を教えなくても済みます。
2つ目は、「あわせて」の最後に、登録のしかたを教えてもらうお願いを足したことです。
手順2 コードを受け取る
Geminiからは、次のコードが返ってきました。ChromeとEdgeに分けて、
登録のしかたも手順で教えてくれました。
javascript:(function(){var t=document.title+' '+location.href;if(navigator.clipboard&&navigator.clipboard.writeText){navigator.clipboard.writeText(t).then(function(){alert('コピーしました');}).catch(function(){prompt('コピーできなかったため、以下の文字列を手動でコピーしてください：',t);});}else{prompt('コピーできなかったため、以下の文字列を手動でコピーしてください：',t);}})();
このコードがしていることを言葉にすると、
次の3つです。
1. 開いているページのタイトルとURLを、
半角スペースでつないで1行にする
2. その1行をコピーして、「コピーしました」と表示する
3. コピーできなかったときは、
その1行が入った入力欄を出して、
手でコピーできるようにする
読むのは、ページのタイトルとURLだけです。ほかのサイトにデータを送る処理や、外から
ファイルを読み込む処理は入っていません。
手順3 ブックマークに登録する
登録は、Geminiが教えてくれた手順のとおりに進めました。
Chromeの場合は、次のとおりです。
1. ブックマークバーが出ていないときは、
Ctrl＋Shift＋B
（Macでは Command＋Shift＋B）を押して、画面の上のほうに出します。
2. ブックマークバーの空いている場所を
右クリックして、「ページを追加...」を選びます。
3. 名前の欄に、「タイトルとURLをコピー」の
ような分かりやすい名前を入れます。
URLの欄には、上のコードを、
「javascript:」から最後まで、
まるごと貼り付けます。
4. 「保存」を押します。
Edgeでは、ブックマークバーのことを
「お気に入りバー」と呼びます。お気に入りバーが出ていないときは、同じキーで出します。
空いている場所を右クリックして
「ページを追加」を選んだら、
あとはChromeと同じです。
貼り付けたあとは、URLの欄が「javascript:」で始まっているかを確かめてください。
私は、Geminiの返事をまとめてコピーした
とき、コードの前に「javascript」という文字がもう1つ付いてきたことがありました。
前に余計な文字が付いていると、
ブックマークレットとして動きません。
手順4 押して確かめる
ふつうのWebページを開いて、
登録したブックマークを押します。
「コピーしました」と出たら、
メモ帳などに貼り付けてみてください。
ページのタイトルとURLが1行で出てくれば、成功です。
ブラウザの設定画面や、
新しいタブを開いたばかりの画面などでは、
ブックマークレットが動かないことが
あります。押しても何も起きないときは、
ふつうのWebページを開いてから、
もう一度押してみてください。
この見本は、ChromeとEdgeに登録して、
動くことを確かめています。
かかる時間も、私の体感で書いておきます。
作り始めたころは、1本目が動くまでに
20〜30分かかりました。慣れてからは、
最初の頼み方を、コードを添えてていねいに
作りこめば、頼む文面を考える時間を入れても、5分ほどで終わるようになりました。
動かないときの直し方：
何が起きたかを伝えて、前後のコードも渡す
作ったブックマークレットが、
いつも1回で思いどおりに動くとは限りません。
私の場合、動かないときに、
エラーの文面が画面に出ることは、
ほとんどありませんでした。多かったのは、
押しても、画面が思ったように動かないこと
です。そんなときにしていたことは、2つです。
1つ目：
何が起きたのかを、見たとおりに伝える
押したら画面がどうなったのかを、
見たとおりに言葉でAIに伝えます。
たとえば、
「押しても、入力欄に何も入りませんでした」「押したら、別の入力欄に入りました」
のような伝え方です。
何が起きたのかが分かれば、
AIが直す場所を探す手がかりになります。
2つ目：前後のコードも、あわせて渡す
動かないときは、渡したコードが、
操作したい場所のものと違っていることが
多くありました。そういうときは、
渡したコードの前後のコードも、
あわせて渡します。まわりのコードまで
見せると、AIが操作したい場所を見分けるための手がかりが増えます。
前後のコードは、たとえば次のようにして
取れます。開発者ツールで、
色のついた行より上のほうを見ると、
その行より1段左から始まっている行が
あります。それが、その場所を包んでいる、
1つ外側のコードです。
その行を右クリックして、同じように
「コピー」→「outerHTML をコピー」を選ぶと、中にあるコードもまとめてコピーできます。
1つ外側のコードは、そのぶん範囲が広いので、画面に出ているお客さまの名前や金額なども
入りやすくなります。渡す前に中身を見て、
仮のものに置きかえてください。
画面が新しくなったときは
使っているサイトの画面が新しくなると、
それまで動いていたブックマークレットが、
動かなくなることも考えられます。私は今の
ところ、そうなったことはありません。
そうなったときは、新しい画面で、
もう一度コードをコピーして、AIに渡します。「画面が新しくなってから、動かなくなりました」と、何が変わったのかも書き添えます。
入力の場所がずれて、
違う欄に値が入ってしまうことも
ありえるので、
直るまでは使わないほうが安心です。
結果：
考えなくていい作業を、
ボタンに任せられるようになった
はじめのほうで書いた、
2つの初期設定の作業は、
次のように変わりました。
どちらも、私の体感です。
• 1人あたり約15分かかっていた初期設定：
すべて終わるまで、2〜3分に
• 量が多いと60分以上かかっていた、
別の初期設定：おおよそ10分以内に。
しかも、
自分ではほとんど操作しなくてよくなりました
60分以上かかっていたほうも、
「向いている作業、向いていない作業」
で書いたとおり、ページの読み込み直しを
はさまずに動く作業でした。
これまでに作ったブックマークレットは、
だいたい15本です。大きな直しはそれほど
多くありませんが、使いながら気になるところが出てきたら、そのつど直してきました。
1本あたり、平均で2〜3回くらいです。
作ったものは、同僚にも配って、
使ってもらいました。
配るときに気をつけたことは、
次の章で書きます。
使う前に気をつけること
便利な道具ですが、使う前に気をつけてほしいことが、3つあります。
1つ目：会社のPCで使う前に、
社内のルールを確かめる
会社によっては、ブラウザで自分でプログラムを動かすことについて、ルールを決めているところもあると思います。会社のPCや、
仕事で使っている画面でブックマークレットを使う前に、社内のルールを確かめてください。
AIに画面やコードを見せる前にも、
気をつけてください。仕事の画面のコードには、画面に出ているお客さまの名前や金額などが、そのまま入っていることがあります。
AIに仕事の情報を入れてよいかどうかも、
社内のルールで決まっていることがあるので、あわせて確かめてください。
貼る前にコードの中身を見て、
名前や金額は「お客さまA」「1,000」のような
仮のものに置きかえてから渡すと安心です。
2つ目：中身の分からない
ブックマークレットは使わない
ブックマークレットは、開いているページの上で動きます。書き方しだいでは、そのページに表示されている中身を、
ほかのサイトに送ることもできてしまいます。外からファイルを読み込む形だと、
あとからそのファイルの中身が変わっても、
手元のコードを見ただけでは分かりません。
他人が作ったものを、中身が分からないまま
使うのは避けてください。
「AIへの頼み方」の章で載せたひな形の
「あわせて」に、ほかのサイトにデータを
送ったり、外からファイルを読み込んだりする処理は入れないでほしい、と書いたのは、
このためです。AIに作ってもらったコードでも、何をしているのか分からないときは、
作ったAIとは別のAI
（新しいチャットでもかまいません）に
コードを貼って、
「このコードは何をしていますか。
ほかのサイトにデータを送ったり、
外からファイルを読み込んだりする処理は
入っていますか」と聞いてみるのも、
1つの方法です。
3つ目：人に配るときは、使い方も一緒に渡す
私は、作ったブックマークレットを同僚に配るとき、最初に、登録のしかたと、
どの画面でどう動くのかを説明しました。
あわせて、内容を資料にまとめて、
だれが読んでも分かる形にしました。
受け取る人にとっても、
何をするものなのかが分かっているほうが、
安心して使えるはずです。
非エンジニアがブックマークレットを作る
3つのコツ
最後に、ここまでの話を3つにまとめます。
1.画面を言葉で説明するより、コードを見せる。
操作したい場所のコードを、
開発者ツールでコピーして渡します。
AIが、目印を推測しなくて済みます。
2. 動かないときは、前後のコードも
あわせて渡す。
何が起きたのかを見たとおりに伝え、
まわりのコードも渡します。
3. 1つの画面の中で終わる入力から始める。
途中でページが読み込み直されない作業なら、ブックマークレットの処理が途中で
消えることもありません。
1本目に作るなら、まず、この記事の見本を
登録して、押すところまでやってみてください。登録してから押すまでの流れに慣れたら、
次は、自分の仕事から
「1つの画面の中で、
毎回同じ値を入れている入力」
を1つ選んで、作ってみてください。
おわりに：
コードが書けなくても、頼み方は変えられる
コードが書けない私でも、
ブックマークレットを作ることができました。
最初は言葉だけで頼んでいて、
動くものもあれば、動かないものも
ありました。画面を言葉で説明するのを
やめて、操作したい場所のコードを見せる。
そのうえで、どうしたいのかを具体的に書く。私の作り方が変わったのは、そこからでした。コードは書けないままでも、
AIへの頼み方は変えられます。
毎日の決まった入力は、判断がいらないのに、時間だけはかかります。あなたの毎日にも、
そういう入力があるなら、まずは見本の1本を登録して、押してみてください。
それが、毎日の決まった入力をボタン1つで
終わらせる、最初の一歩です。
AIに渡す「引き継ぎ書」の作り方は、
前回の記事に書いています。
AIに何を渡すかで、返ってくるものが変わる、という点では、
今回の話ともつながっていると思います。
https://note.com/takumi_ai_tools/n/na87cc3f48d78
これからも、AIと作った仕事の道具と、
その作り方を発信していきます。
よければフォローしてください。
