AIエージェントことはじめ — LAB 011
— 台帳を1つ作り、画面はそこから作る —
道具が3つ、4つと増えてくると、次に困るのは「どれが、どこにあって、どう動かすんだっけ」です。 作るより、探して思い出すほうに時間を取られ始めます。 この記事では、道具の情報を1か所の一覧表(台帳)に集め、画面をそこから作る形にします。
この記事を読むとできること
想定している使い方
LAB 009 までに、自分用の道具が2〜3個できている Mac で、その道具の一覧画面を作ります。 AI エージェント(AI があなたの Mac を直接さわれる形)に頼んで進め、ターミナル(文字で Mac に命令を打ち込むためのアプリ)に短い命令を打つ場面も出てきます。 説明はすべて Mac を前提にしています。
※ LAB 001〜 LAB 010 を終えている前提です。特にLAB 009 で作った道具が2〜3個あること、 LAB 010 の「合否を終了コード(プログラムが終わるときに返す番号)で決める」を使います。
読む目安:約13分 ・ 手を動かす目安:約50分(STEP 1〜5)・ 図6枚
INTRO
LAB 009 では「最初の道具を1つ」作りました。 AI に頼めば2つ目、3つ目はすぐできます。 ところが、ある数を超えると作ることより、見つけることが大変になります。
困り方は大体3つです。名前を忘れた・ 動かし方を忘れた・ いま動いているのか分からない。 どれも、道具の情報が「フォルダの奥」「メモ帳の端」「頭の中」に散らばっていることが原因です。
対策は、道具の情報を1か所に集めることと、 見るための画面をその1か所から作ること。この2つだけです。 画面を手で書き足していくと、道具を増やしたのに画面へ載せ忘れる、という食い違いがいつか必ず起きるからです。
図の見方:上の段は、情報があちこちに散らばっていて、探して思い出す作業が要る状態です。 下の段は、名前・何をするか・動かし方が1枚の画面にまとまっていて、探して見つけて押すだけの状態です。
筆者の体験メモ
筆者は、道具の一覧を載せたサーバーパネル(自作の道具を一覧で見て開ける、自分用の1枚の画面)を使っています。 道具が40を超えたころに、一覧を分類で分け直しました。 この記事は、その作りを「小さく真似できる形」に直したものです。
STEP 1 — 目安 5分
いきなり画面を作る前に、いま何があるかを1回、文字にします。 1つの道具につき、名前・何をするか・どう動かすかの3つが分かれば十分です。 「どう動かすか」は、ターミナルに打ち込む命令(コマンド)のことです。
書き出しは AI に頼めます。道具のファイルが入っているフォルダで AI を開いて、下の文を貼ります。 ただし、分からない欄を AI が想像で埋めることがあるので、 「不明と書いて」と先に釘を刺します。ここで嘘が混ざると、台帳全体が信用できなくなります。
いまのフォルダにある道具を、1つ1行で一覧にして。
各行に「名前」「何をするか(1文)」「動かし方(コマンド)」を書いて。
ファイルの中身を読んでも分からない項目は、想像で埋めずに「不明」と書いて。
ファイルは変更しないで、画面に表示するだけにして。
なぜ「変更しないで」と付けるのか: 一覧を作るだけの頼み事でも、AI は気を利かせてファイルを整理し始めることがあります。 まず読むだけに絞ると、取り返しのつかないことが起きません(LAB 005 の備えがあっても、起きないに越したことはありません)。
✓ ここまでの確認: 道具の数だけ行が並び、「不明」が残っている行があれば、そのまま残してある(自分で思い出せたら直す)。 一覧を見て「これ、まだ使っているかな」と迷う道具も出てくるはずです。それも今は消さずに置きます。
STEP 2 — 目安 10分
書き出した一覧を、1つのファイルに移します。これが台帳(道具の名簿)です。 ルールは1つだけ——道具の情報は、ここにしか書かない。
台帳が1つあると、画面も、動かし方の案内も、あとで作る検査も、全部そこを読むだけになります。 情報が2か所にあると、片方だけ直して食い違います。台帳は、その食い違いを起こさないための置き場です。
台帳といっても、特別なものではありません。Python(コードを書くための言語の1つ)のリスト(並べて入れる箱)に、
道具1つぶんの情報を { } でひとまとめにして並べるだけです
(この { } の形を Python では辞書と呼びます)。次が最小の見本です。
# tools.py — 台帳。道具の情報は、ここ1か所にだけ書く
GROUPS = ["お金", "メモ"] # 画面で使う分類の名前(STEP 3 で使う)
TOOLS = [
{"key": "receipt", "name": "レシート整理", "group": "お金",
"desc": "レシートを月ごとに集計する", "how": "python3 receipt.py"},
{"key": "memo", "name": "メモ整形", "group": "メモ",
"desc": "話したメモを文章に直す", "how": "python3 memo.py"},
]
key は道具の識別用の短い名前(重ならないようにする)、
how は動かすコマンドです。
項目を増やしたくなっても、最初はこの5つで足ります。
最初は、分類も台帳の行の中に書いて構いません。 分類だけを別の表に分けるのは、台帳の1行1行を読む別の道具があって、列を増やすとその道具が壊れかねないときの工夫です。
筆者の体験メモ
筆者の台帳は「フォルダ名・説明・種別・ポート番号(接続を受け付ける差込口の番号)・動かし方」などの列を持っています。 分類(グループ)だけは別の表に分けてあり、 それは台帳の1行1行を読む別の道具があって、列を増やすとその道具が壊れかねないからです。
STEP 1 と同じフォルダで開いた AI に、その一覧を見本の形に直してもらいます。「不明」の行は、不明のまま台帳に入れて構いません。
さっきの一覧を、次の形の Python ファイル tools.py にして。
GROUPS(分類の名前のリスト)と、TOOLS(道具ごとに key / name / group / desc / how を持つ辞書のリスト)。
key は道具ごとに重ならないようにして。
「不明」だった欄は「不明」のまま入れて、想像で埋めないで。
既存のファイルは変更しないで、tools.py を新しく作るだけにして。
✓ ここまでの確認: tools.py が1つできていて、道具の数だけ行がある。 動かし方が書いてある行を1つ選び、そのコマンドをターミナルに貼って、実際に動くか確かめた(LAB 001 の「動いた ≠ 正しい」の確認と同じです)。
STEP 3 — 目安 15分
台帳ができたら、それを読んで1枚の HTML(ブラウザで開けるページのファイル)を作る小さなプログラムを頼みます。 サーバー(常に動かしておく裏方のプログラム)も要りません。できた HTML をブラウザで開くだけです。
ここで大事なのは、画面の中身を手で書かないことです。 手で書いた画面は、道具を足したときに更新を忘れた瞬間から、台帳と食い違い始めます。
tools.py があるフォルダで AI を開き、次の文を貼ります。文中の「走らせる」は、プログラムを実行することです。
tools.py の台帳を読んで、tools.html を作る make_page.py を書いて。
・GROUPS の順に見出しを出し、その下にその分類の道具を並べる
・各道具は「名前」「何をするか」「動かし方」を出し、動かし方にはコピー用のボタンを付ける
・GROUPS に無い分類の道具は、画面の末尾に「未分類」の見出しで必ず出す(画面から消さない)
・道具の情報は make_page.py に直接書かず、必ず tools.py から読む
・文字は12px未満にしない。色はライト/ダークの両方で読めるようにする
make_page.py を走らせて tools.html ができるところまでやって。
できた tools.html を、ブラウザで開いてください(Finder(Mac でファイルを見るためのアプリ)でダブルクリックすれば開きます)。
道具が分類ごとに並び、動かし方をコピーできれば成功です。
道具が増えたら、台帳に1行足して make_page.py を走らせ直す
(tools.py と同じフォルダで、ターミナルに python3 make_page.py と打つ。打ち方が分からなければ AI に「走らせて」と頼めば足ります)だけで画面が更新されます。
上の頼み事で、1行だけ地味な指示を入れました。「分類に入れ忘れた道具は、未分類として必ず出す」です。
台帳に道具を足して、分類を決め忘れたとします。受け皿が無いと、その道具は画面から静かに消えます。 消えたことに気づく手段が無いので、「作ったはずなのに見つからない」という元の困りごとに戻ってしまいます。
筆者の体験メモ
筆者のパネルも、分類の表に入れ忘れた道具は「未分類」にまとめて出す作りです。
✓ ここまでの確認: tools.html に道具が分類ごとに並んでいる。次に、tools.py の1行だけ、group をわざと「テスト」に書き換えて make_page.py を走らせ直し、その道具が「未分類」に出ることを見る(見たら元に戻す)。
STEP 4 — 目安 10分
ここまでの画面は見るだけです。何度開いても、何も変わりません。 これだけでも、探す時間はかなり減ります。最初はここで止めて構いません。
そのうち「画面から直接、道具を起動したい」「公開サイトへ送りたい」と思うかもしれません。 ボタンを付けるのは便利ですが、押すと中身が変わるボタンは、押し間違いが事故になります。 付けるなら、守りを先に決めてからにします。
なお、STEP 3 の HTML 1枚だけでは、ボタンで道具を動かすことはできません。 ボタンからの命令を受け取って実行する「サーバー」が別に要ります。 この STEP は、そこまで進めたくなったときの心得として読んでください。
筆者の体験メモ
筆者のパネルの「公開サイトへ送る」ボタンは、1回目は下見だけで、内容を読んでから2回目を押したときに初めて送ります。 サーバーのファイルを消す操作は画面のボタンには付けておらず、ターミナルから確認の言葉を打たないと通りません。 命令が自分の画面から来たかも確かめて、違えば断っています。
ボタンを付けるときの頼み方は、上の3つをそのまま書けば足ります。 「この操作は何が変わるか」を先に AI に説明させると、見落としていた思わぬ影響が見つかることがあります。
✓ ここまでの確認: いま付けたいボタンを1つ選び、「見るだけ/中身が変わる/取り返しがつかない」のどれかを言えた。 付けないと決めたなら、それも立派な結論です(見るだけの画面で十分なことは多いです)。
STEP 5 — 目安 10分
台帳の価値は抜けが無いことです。道具を作ったのに台帳へ書き忘れたら、画面にも出ません。 「書き忘れないように気をつける」は、疲れた日に守れません。 LAB 010 で作った終了コードで決めるテスト(終了コード=プログラムが終わるときに返す番号。0なら合格)の出番です。
見張らせるのは、次の3つです。どれも台帳と画面を突き合わせるだけなので、数秒で終わります。
頼み方は LAB 010 と同じです。 本物の画面を上書きしないことと、確かめる項目が 0 個にならないことを、先に伝えます。
tools.py と make_page.py を確かめる _selftest.py を作って。
確かめること:
1. 台帳の key が重複していない
2. 台帳の全部の道具が、できた HTML の中に名前で載っている(数を比べるだけにしない)
3. GROUPS に無い分類を持つ偽の道具を1つ足して作ると、「未分類」の下に出る
条件:
・HTML は一時フォルダに作って確かめる。本物の tools.html は上書きしない
・全部合えば終了コード 0、1つでも違えば 1 で終わる
・確かめる項目が 0 個のときは失敗にする
・合格・不合格のどちらも、画面に項目名を出す
作ったら「python3 _selftest.py; echo $?」を実際に走らせて、出力を省略せずに見せて。
頼み事の最後の echo $? は、直前に走らせたものの終了コードを画面に出す命令です。
これで「合格の0だったか」を自分の目で確かめられます。
筆者の体験メモ
筆者のパネルにも同じ検査があります。台帳の key が重ならないこと、分類の表が台帳に無い名前を含まないこと、 そして台帳の全部の道具がどれかの分類に入っていて、未分類が空であることを、終了コードで決めています。 道具を足して分類を忘れると、画面に出る前にこの検査が赤くなります。
✓ ここまでの確認: テストが ✅ で終わり、終了コードが 0 だった。さらに、台帳に key が同じ行をわざと1つ足して走らせ、 ❌ と 0 以外になった(LAB 010 の STEP 5 の「わざと壊す」と同じです。見たら元に戻す)。
TROUBLE
| 起きていること | 原因 | どうするか |
|---|---|---|
| 道具を足したのに、画面に出ない | 台帳に書き忘れた、または make_page.py を走らせ直していない | 台帳に1行足して、make_page.py を走らせ直す。STEP 5 の検査が赤になっていたら、その❌の行が答え |
| 「未分類」がどんどん増える | 道具を足すとき、分類(group)を決めていない | 台帳の group を直す。分類が足りないなら、GROUPS に新しい分類を足す |
| 画面に出ている動かし方を貼っても、動かない | 台帳の how が古い、または STEP 1 で想像で埋められていた | 実際に1回走らせて確かめ、台帳の how を直す。直すのは台帳だけ(画面を直接直さない) |
| AI が台帳を無視して、画面に道具を直接書き足した | 「台帳から読む」という条件が頼み事に入っていなかった | STEP 3 の頼み方(道具の情報は make_page.py に直接書かない)を入れ直す。STEP 5 の検査が見つけることもある |
| 台帳が長くなって、目当ての道具が探しにくい | 分類が粗い、または並びが見づらい | 分類を細かくする。画面に検索欄を足してもらう(見るだけの機能なので安全) |
| ボタンを押したら、思っていないことが起きた | 押すと何が変わるかを決めずにボタンを付けた | STEP 4:そのボタンを外し、「見るだけ/中身が変わる/取り返しがつかない」を決め直す。変わった分は LAB 006の手順で戻す |
FAQ
急ぎません。3つなら、頭の中や1枚のメモで足ります。「名前や動かし方を探して手が止まった」と1回でも感じたら、それが作りどきです。先に作り込むより、困ってから作るほうが、必要な項目が分かります。
いいえ、最初は HTML を1枚作るだけで十分です。サーバーにすると、公開の範囲・待ち受けの番号(ポート番号。外からの接続を受け付ける差込口の番号)・押し間違いの守りまで考えることが増えます(STEP 4)。見るだけで困らない間は、増やさないでください。
書かないでください。台帳は画面になり、AI にも読ませる文書です。書くのは「名前・説明・動かし方」まで。値そのものは、別の安全な置き場に分けます。
台帳と make_page.py を LAB 008 の同期の仕組みの中に置いておけば、どの端末でも同じ台帳から画面を作り直せます。サーバーを公開するかどうかは、まず「見るだけの画面で足りるか」から考えてください。
消す前に、「使っていない」と書き添えるだけにするか、本当に消すかを決めます。フォルダ自体を消すのは、取り返しがつかない操作です。ここでもまず読むだけ・まず印を付けるだけから入れば安全です。
NEXT
まず、いまある道具を3つだけ台帳に書いてみてください。 目的は完璧な画面ではなく、「探さなくても着ける」という感覚を1回体験することです。
※ この記事は、実際に使っているサーバーパネル(道具の台帳・分類・未分類の受け皿・2段階のボタン・台帳の検査)の作りをもとにしていますが、結果を保証するものではありません。 AI の振る舞いは製品やバージョンで変わるので、「情報を1か所に集めて、画面はそこから作る」という考え方の方を持ち帰ってください。