kintone プラグインの紹介記事を書くとき、手間がかかるのはスクリーンショットです。画面を開いて、撮って、記事に合う範囲に切り取って、ファイルに名前を付けて……。
今回は、Claude Code（VS Code の拡張機能）と Claude in Chrome（Chrome の拡張機能） を組み合わせて、スクリーンショットを撮るところから記事の原稿までを AI に任せてみました。できたのは、印刷屋プラグインで組織図を PDF にする入門の記事 rex0220 印刷屋プラグイン - 組織図を PDF にする（詳細画面の手順と設定画面の紹介）（以下、組織図の記事）です。
下は、Claude が Chrome で組織図のプレビューを開いて撮った画像です（組織図の記事の先頭に使いました）。
本記事では、頼んだ順に、何を頼んで Claude が何をしたか、どこでつまずいたかを紹介します。
仕組みの構成
- Claude in Chrome は、利用者がふだん使っている Chrome で動きます。kintone にログインしたままの Chrome を使うので、Claude にパスワードを渡す必要はありません
- VS Code の Claude Code で、最初の依頼の文に
@browserを付けて頼みました（以後は付けなくても Chrome を使い続けました） - Claude は、ページを開く、クリックする、スクリーンショットを撮る、範囲を拡大して撮る、ページで JavaScript を動かす、ができます
- Qiita への画像のアップロードと公開は、自分で行いました
1. スクリーンショットを撮る
最初は、ポータルを開いて撮るだけです。
@browser kintone のポータルを開いて、スクリーンショットを保存して
Claude は、環境変数にある kintone のドメインでポータルを開き、スクリーンショットを撮りました。
撮った画像は、まず拡張機能が決めた一時フォルダーに保存されます。この保存先は変えられないので、残す場所を決めて、Claude に覚えさせました。
~/Projects/claude_out のフォルダーを作って、そこに出力先に設定して
Claude はフォルダーを作り、プロジェクトの規則のファイル（CLAUDE.md）に「git に入れない出力（スクリーンショットなど）は ~/Projects/claude_out/ に置く」と書き足しました。以後は、撮るたびにそこへ写します。
git に入れない場所にしたのは、ポータルのお知らせに開発環境の URL（ホスト名）が写っていたためです。Claude Code のメモリに「開発環境のホスト名は記録に書かない」と残してあったので、Claude は作業の記録用のリポジトリには置きませんでした。
2. 記事用に切り取る
次は、印刷屋の設定画面です。URL を渡して撮ってもらい、続けて切り取りを頼みました。
https://（サブドメイン）.cybozu.com/k/admin/app/4326/plugin/config?pluginId=lcapkanpjdabgphknkabojmcfhonhkhp のスクリーンショットを作成
qiita 記事用にプラグイン設定の部分を切り取って
ここで Claude は、撮った画像を切り取らずに、ページを開き直して、設定の部分だけを拡大して撮り直しました。スクリーンショットは画面全体を 1413×840 の JPEG に縮めたもので、切り取ると文字が粗くなるためです。
撮り直した画像は 1512×793 の PNG です。kintone の上の帯（ログイン中の名前）やパンくずは外し、マウスのカーソルが写らないように、カーソルを画面の端に動かしてから撮っています。
画面全体のスクリーンショット（1413×840、JPEG）
設定の部分を撮り直したもの（1512×793、PNG）
3. 画面を操作して撮る
ダイアログのように、操作しないと出ない画面も撮れます。
1行目のHTML欄をクリックして、編集ダイアログを表示してスクリーンショット
Claude は HTML 欄をクリックしてダイアログを開き、ページの JavaScript でダイアログの要素の位置と大きさ（getBoundingClientRect）を測ってから、その範囲だけを撮りました。目で見て範囲を決めるより、枠にぴったり合います。
下は、組織図の記事のために、同じ範囲で撮ったダイアログです。
ダイアログでは何も変えず、保存も押していません。
4. 記事を頼む
ここまでで撮り方がわかったので、記事そのものを頼みました。渡したのは、テーマ、書いてほしいこと、原稿の置き場所、画面の URL 4 つです。
印刷屋プラグインで組織図を作るというテーマで qiita 記事を作成して
詳細画面からPDF作成する簡単な手順と、プラグイン設定画面の紹介
出力先：print-craft/docs/qiita
https://（サブドメイン）.cybozu.com/k/4285/
https://（サブドメイン）.cybozu.com/k/4285/show#record=3&l.view=20&l.q&l.next=2&l.prev=0
https://（サブドメイン）.cybozu.com/k/admin/app/4285/plugin/#/
https://（サブドメイン）.cybozu.com/k/admin/app/4285/plugin/config?pluginId=lcapkanpjdabgphknkabojmcfhonhkhp
Claude がしたことを、順に並べます。
| 順 | Claude がしたこと |
|---|---|
| 1 | 同じフォルダーの既存の記事を読み、原稿の形（先頭のコメントに題とタグ、画像は Qiita の URL）に合わせる |
| 2 | 組織図の記事がすでに 1 本あるのを見つけて読み、中身が重ならないように「AI で設計した話」はそちらへのリンクにする |
| 3 | 4 つの画面を開いて、7 枚撮る（一覧、詳細画面、プラグインの一覧、設定画面、HTML 設定、プレビュー 2 枚） |
| 4 | 詳細画面のボタンを押す前に、設定画面で「ボタンを押したとき」が「プレビューを表示する」、PDF の保存先が「---」（ダウンロード）であることを確かめる |
| 5 | 設定画面の各部の名前と説明は、プラグインのソースにある説明の文（設定画面の「?」の中身）に合わせる |
| 6 | 原稿を書き、画像はいったん手元のファイルを指しておく |
3 の途中で、Claude は「組織図」のプレビューで右端の経理部が用紙からはみ出ているのに気付きました。
同じアプリには、箱が縮む版の「組織図 (2)」ボタンもあったので、両方のプレビューを撮って、「プレビューで端まで入っているかを確かめる」という節を記事に足しました。画面を実際に見ているからこそ入った節です。
もう 1 つ、Claude はプレビューの「組織図」ボタン（PDF のダウンロード）を押しませんでした。ファイルのダウンロードは、利用者の許可を取ってからにする決まりがあるためです。原稿の先頭のメモにその手順を「未確認」として書き、報告でも押してよいかを聞いてきました。確かめていないことを、確かめたように書かないのは助かります。
5. 画像を Qiita に上げて差し替える
Qiita への画像のアップロードは、今回は手で行いました。
- Qiita の「ファイルのアップロード」画面で、
~/Projects/claude_out/の画像 7 枚をアップロードする（ドラッグ&ドロップ、ペースト、「画像を選択」のどれでも） - 「画像アドレスを一括コピー」を押す。アップロードした画像の Markdown が、
の形でまとめてコピーされる - Claude Code に貼る
Qiita 画像アップロード
（ここに 7 行を貼る）
Claude は、ファイル名で突き合わせて、原稿の 7 か所を Qiita の URL に差し替えました。画像を上げる順番がばらばらでも、ファイル名に番号を付けておいたので迷いません。
できた記事
組織図の記事 の見出しは次のとおりです。
- 使うアプリ（項目の表）
- 詳細画面から PDF を作る（手順、「組織図」と「組織図 (2)」の違い）
- プラグイン設定画面（開き方、画面の全体、HTML 設定、設定を変えるとき）
- まとめ
7 枚の画像は、どれも Claude in Chrome で撮ったものです。下は、そのうちの設定画面です。
つまずいたところ
| つまずき | 起きたこと | どうしたか |
|---|---|---|
| クリックの位置がずれる | 開いたばかりのタブで、「スクリーンショット → クリック」を 1 回の呼び出しにまとめると、クリックが狙った所から外れた（3 回） | 一括の呼び出しの中の座標は、その呼び出しの前に撮ったスクリーンショットに合わせて読まれる。先にスクリーンショットだけを撮り、次の呼び出しでクリックすると当たった |
| カーソルが写る | 撮った画像にマウスのカーソルが入った | 撮る前にカーソルを画面の端へ動かす |
| ダイアログが Escape で閉じない | 印刷屋の設定画面のダイアログが閉じず、続くクリックがダイアログの中の欄に当たって編集の状態になった | 文字は変えずに、JavaScript でダイアログを閉じた（保存は押していない） |
| JavaScript の結果が止められる | 計算式の文（& や = が多い）を返そうとすると、拡張機能に「Cookie/query string data」として止められた |
& と = を別の文字に置き換えて返した |
| タブが外れる | 新しいタブを作ってから元のタブを閉じたら、Claude の作業用のタブのグループが消え、新しいタブがグループの外に残った | グループを作り直した。外れた空のタブは手で閉じる |
| 開発環境のホスト名 | ポータルのお知らせや URL にホスト名が入る | 記事の URL は「（サブドメイン）」に伏せ、ホスト名が写る画像は git に入れない場所に置く |
人がすること、任せられること
| 任せられたこと | 人がしたこと |
|---|---|
| 画面を開く、ボタンを押す、ダイアログを開く | 何の記事にするか、どの画面を使うかを決める |
| 撮る範囲を決めて撮る、カーソルを外す | Qiita への画像のアップロード |
| 既存の記事の形に合わせる、重なりを避ける | 未確認の所（ダウンロード）を確かめるかを決める |
| 設定画面の名前を、プラグインの説明の文に合わせる | 公開 |
| 画像の URL の差し替え |
スクリーンショットは「撮る」より「記事に合うように撮る」ほうが手間です。範囲、カーソル、ファイル名、置き場所まで任せられたのが一番の収穫でした。
セキュリティの観点
Claude in Chrome は、ログイン済みの自分の Chrome を AI が操作する仕組みです。便利な分、AI ができることは、自分がその画面でできることと同じになります。今回の作業で気を付けたこと、気付いたことをまとめます。
権限は自分と同じ
- Claude は利用者の Chrome のログインをそのまま使います。今回の kintone のユーザーはアプリの管理者なので、プラグインの設定画面も開けました。設定の保存やレコードの変更も、押せばできてしまいます
- 今回の作業は、開発環境で行いました。本番の環境で試すなら、権限の小さいユーザーで、見るだけの画面から始めるのが安全です
- Claude はページで JavaScript を動かせます。JavaScript も利用者のログインのまま動きます。今回は、要素の位置や文字を読むのと、ダイアログを閉じるのにだけ使いました
変える操作の前で止まる
- 今回、Claude は設定画面の「保存」を一度も押していません。ファイルのダウンロードは押してよいかを聞いてから、プラグインのリポジトリへの commit・push と、記事の中身を変える出し直しも、確かめてから行いました。作業の記録用のリポジトリへの commit と、先頭のコメントを外すだけの出し直しは、前もって許してある決まりに沿って、確かめずに行いました（どちらの決まりも、プロジェクトの規則のファイル CLAUDE.md や Claude Code のメモリに書いてあります）
- 見るだけのつもりでも、画面の状態は変わります。つまずいたところの表のとおり、クリックがダイアログの中の欄に当たって編集の状態になりました。印刷屋の設定は「保存する」を押すまで保存されないので、保存せずに閉じて元のままにしました
秘密の値
- Claude にパスワードは渡していません。ログイン済みの Chrome を使うので、ログインの操作が要りません
- シェルの環境変数には、kintone の接続に使うパスワードやトークンも入っていました。Claude は変数の名前だけを値を伏せて確かめ、読んだのはドメインだけでした。ただ、Claude Code はシェルの環境変数を読める立場にあります。AI に見せたくない値は環境変数に置かない、置くなら使うときだけにするのが安心です
- 拡張機能には、Cookie やクエリ文字列に見える値を Claude に返さない仕組みがあります。今回は計算式の文（
&や=が多い）がそう見えて止められました（つまずいたところの表）
記事と画像に写るもの
- ホスト名: 開発環境の URL は記事では「（サブドメイン）」に伏せ、ホスト名が写った画像は git に入れない場所に置きました。この決まりは Claude Code のメモリに残してあるので、Claude が自分で守ります
- 撮る範囲: kintone の上の帯（ログイン中の名前）などは外して撮りました。画面全体を撮ってから切るより、写したい範囲だけを撮るほうが、余計なものが入りません
- 原稿の先頭のメモ: 原稿の先頭の HTML コメントに、作業のメモ（未確認の所、手元のファイルのパス、アプリの番号）を書いていました。Web の編集画面に原稿をそのまま貼って公開したら、コメントごと公開されました。コメントは記事の表示には出ませんが、本文の Markdown には残ります。CLI で外して出し直しましたが、公開する文章とメモは分けておくのが確実です
- アップロードした画像: Qiita にアップロードした画像は、記事を公開する前でも URL で開けます（今回、記事の公開前に、Claude が貼られた URL から画像を開いて中身を確かめました）。見せたくないものが写った画像は上げないようにします
開くページ
- Claude はページの文を読んで、次の操作を決めます。ページの中に AI への指示を紛れ込ませる攻撃（プロンプトインジェクション）があるので、Claude に開かせるのは、自分の環境と信頼できるページにとどめます。今回開いたのは、自分の kintone の開発環境と、自分がアップロードした Qiita の画像だけです
- Claude が開いたタブは作業用のグループにまとまり、作業が終わると Claude が閉じます。グループから外れたタブ（つまずいたところの表）は手で閉じます
まとめ
- Claude Code に
@browserを付けて頼むと、ログイン済みの Chrome で kintone の画面を開き、スクリーンショットを撮れる - 記事用の画像は、撮った画像を切り取るより、範囲を指定して撮り直すほうがきれい
- ダイアログは JavaScript で位置を測ると、枠にぴったり合わせて撮れる
- ダウンロードや保存のような操作は、Claude が許可を求めて止まる。確かめていない所は、原稿にも「未確認」と残る
- 画像のアップロードは手で行い、貼った Markdown を Claude に渡すと差し替えまで済む
- Claude ができることは、自分がその画面でできることと同じ。開発環境で行い、変える操作の前で止め、記事や画像に写るものを確かめる