FRL 自由研究ラボ

AIエージェントことはじめ — LAB 011

増えた道具を1枚の画面にまとめる

— 台帳を1つ作り、画面はそこから作る —

道具が3つ、4つと増えてくると、次に困るのは「どれが、どこにあって、どう動かすんだっけ」です。 作るより、探して思い出すほうに時間を取られ始めます。 この記事では、道具の情報を1か所の一覧表(台帳)に集め、画面をそこから作る形にします。

この記事を読むとできること

  • 増えた道具の情報を、1か所の一覧表(台帳)に集める考え方が分かります
  • 台帳から、道具の一覧画面を自動で作れます
  • 押すと何かが起きるボタンを付けるときの守り方と、台帳の抜けを機械に見張らせる方法が分かります

想定している使い方

LAB 009 までに、自分用の道具が2〜3個できている Mac で、その道具の一覧画面を作ります。 AI エージェント(AI があなたの Mac を直接さわれる形)に頼んで進め、ターミナル(文字で Mac に命令を打ち込むためのアプリ)に短い命令を打つ場面も出てきます。 説明はすべて Mac を前提にしています。

この記事の道順

  1. はじめに — 道具が増えると、探す時間が増える
  2. STEP 1 — いまある道具を、1行ずつ書き出す
  3. STEP 2 — 台帳(1か所の一覧表)を作る
  4. STEP 3 — 画面は台帳から作る(グループと未分類)
  5. STEP 4 — 押すと何かが起きるボタンは、守りを先に決める
  6. STEP 5 — 台帳の抜けを、機械に見張らせる
  7. つまずき集(症状から引く)
  8. よくある質問
  9. 次の一歩

※ 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枚の画面にまとまっていて、探して見つけて押すだけの状態です。

筆者の体験メモ

筆者は、道具の一覧を載せたサーバーパネル(自作の道具を一覧で見て開ける、自分用の1枚の画面)を使っています。 道具が40を超えたころに、一覧を分類で分け直しました。 この記事は、その作りを「小さく真似できる形」に直したものです。

01

STEP 1 — 目安 5分

いまある道具を、1行ずつ書き出す

いきなり画面を作る前に、いま何があるかを1回、文字にします。 1つの道具につき、名前・何をするか・どう動かすかの3つが分かれば十分です。 「どう動かすか」は、ターミナルに打ち込む命令(コマンド)のことです。

書き出しは AI に頼めます。道具のファイルが入っているフォルダで AI を開いて、下の文を貼ります。 ただし、分からない欄を AI が想像で埋めることがあるので、 「不明と書いて」と先に釘を刺します。ここで嘘が混ざると、台帳全体が信用できなくなります。

いまのフォルダにある道具を、1つ1行で一覧にして。
各行に「名前」「何をするか(1文)」「動かし方(コマンド)」を書いて。
ファイルの中身を読んでも分からない項目は、想像で埋めずに「不明」と書いて。
ファイルは変更しないで、画面に表示するだけにして。

なぜ「変更しないで」と付けるのか: 一覧を作るだけの頼み事でも、AI は気を利かせてファイルを整理し始めることがあります。 まず読むだけに絞ると、取り返しのつかないことが起きません(LAB 005 の備えがあっても、起きないに越したことはありません)。

✓ ここまでの確認: 道具の数だけ行が並び、「不明」が残っている行があれば、そのまま残してある(自分で思い出せたら直す)。 一覧を見て「これ、まだ使っているかな」と迷う道具も出てくるはずです。それも今は消さずに置きます。

02

STEP 2 — 目安 10分

台帳(1か所の一覧表)を作る

書き出した一覧を、1つのファイルに移します。これが台帳(道具の名簿)です。 ルールは1つだけ——道具の情報は、ここにしか書かない。

台帳が1つあると、画面も、動かし方の案内も、あとで作る検査も、全部そこを読むだけになります。 情報が2か所にあると、片方だけ直して食い違います。台帳は、その食い違いを起こさないための置き場です。

台帳(1か所) 直すのはここだけ 画面の一覧(台帳から自動で作る) 動かし方の案内(台帳の「動かし方」の列を読む) 抜けの検査(台帳の中身を数えて突き合わせる) 画面・案内・検査は台帳を読むだけ。だから食い違いようがない

2-1 台帳の形を見る

台帳といっても、特別なものではありません。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行を読む別の道具があって、列を増やすとその道具が壊れかねないからです。

2-2 STEP 1 の一覧を台帳にする

STEP 1 と同じフォルダで開いた AI に、その一覧を見本の形に直してもらいます。「不明」の行は、不明のまま台帳に入れて構いません。

さっきの一覧を、次の形の Python ファイル tools.py にして。
GROUPS(分類の名前のリスト)と、TOOLS(道具ごとに key / name / group / desc / how を持つ辞書のリスト)。
key は道具ごとに重ならないようにして。
「不明」だった欄は「不明」のまま入れて、想像で埋めないで。
既存のファイルは変更しないで、tools.py を新しく作るだけにして。

✓ ここまでの確認: tools.py が1つできていて、道具の数だけ行がある。 動かし方が書いてある行を1つ選び、そのコマンドをターミナルに貼って、実際に動くか確かめた(LAB 001 の「動いた ≠ 正しい」の確認と同じです)。

03

STEP 3 — 目安 15分

画面は台帳から作る(グループと未分類)

台帳ができたら、それを読んで1枚の HTML(ブラウザで開けるページのファイル)を作る小さなプログラムを頼みます。 サーバー(常に動かしておく裏方のプログラム)も要りません。できた HTML をブラウザで開くだけです。

ここで大事なのは、画面の中身を手で書かないことです。 手で書いた画面は、道具を足したときに更新を忘れた瞬間から、台帳と食い違い始めます。

台帳の1行 name : レシート整理 group : お金 desc : レシートを月ごとに集計する how : python3 receipt.py 画面の1行 【お金】 ← group が見出しになる レシート整理 ← name レシートを月ごとに集計する ← desc python3 receipt.py ← how(コピー用) 画面に出る項目は、台帳に書いてあるものだけ

3-1 画面を作ってもらう

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 に「走らせて」と頼めば足ります)だけで画面が更新されます。

3-2 「未分類」の受け皿が、いちばん効く

上の頼み事で、1行だけ地味な指示を入れました。「分類に入れ忘れた道具は、未分類として必ず出す」です。

台帳に道具を足して、分類を決め忘れたとします。受け皿が無いと、その道具は画面から静かに消えます。 消えたことに気づく手段が無いので、「作ったはずなのに見つからない」という元の困りごとに戻ってしまいます。

筆者の体験メモ

筆者のパネルも、分類の表に入れ忘れた道具は「未分類」にまとめて出す作りです。

台帳の道具 分類の表に その分類があるか? ある → その分類の下に出す ない → 「未分類」に出す どちらでも画面から消えない。未分類が増えたら、分類を直す合図

✓ ここまでの確認: tools.html に道具が分類ごとに並んでいる。次に、tools.py の1行だけ、group をわざと「テスト」に書き換えて make_page.py を走らせ直し、その道具が「未分類」に出ることを見る(見たら元に戻す)。

04

STEP 4 — 目安 10分

押すと何かが起きるボタンは、守りを先に決める

ここまでの画面は見るだけです。何度開いても、何も変わりません。 これだけでも、探す時間はかなり減ります。最初はここで止めて構いません。

そのうち「画面から直接、道具を起動したい」「公開サイトへ送りたい」と思うかもしれません。 ボタンを付けるのは便利ですが、押すと中身が変わるボタンは、押し間違いが事故になります。 付けるなら、守りを先に決めてからにします。

なお、STEP 3 の HTML 1枚だけでは、ボタンで道具を動かすことはできません。 ボタンからの命令を受け取って実行する「サーバー」が別に要ります。 この STEP は、そこまで進めたくなったときの心得として読んでください。

見るだけ・開くだけ 何も変わらない。そのまま押せる 押すと中身が変わる 1回目:下見だけ 2回目:内容を読んでから実行 取り返しがつかない ボタンにしない。ターミナルで、確認を打って実行する

守りの3つ

  1. 中身が変わる操作は2段階にする。 たとえば「公開サイトへ送る」ボタンなら、1回目は下見だけ(何をどう送るかを表示するだけ)にして、 内容を読んでから2回目を押したときに初めて送る形にします。
  2. 取り返しのつかない操作は、ボタンにしない。 たとえばサーバーのファイルを消す操作は、画面のボタンには付けず、ターミナルから、わざわざ確認の言葉を打たないと通らない形にします。 ボタンは手が滑るものだからです。
  3. 押した元が、自分の画面かを確かめる。 ボタンの正体は「サーバーへ送る単純な命令」です。無関係なサイトを開いているだけで、その命令を勝手に送られてしまう危険があります。 命令が自分の画面から来たかを確かめて、違えば断る作りにします。 待ち受けを自分の Mac の中に限る作り(自分の Mac の外から直接はつなげない作り。LAB 007 の「入口を作らない」)に加えて付ける、二重の守りです。

筆者の体験メモ

筆者のパネルの「公開サイトへ送る」ボタンは、1回目は下見だけで、内容を読んでから2回目を押したときに初めて送ります。 サーバーのファイルを消す操作は画面のボタンには付けておらず、ターミナルから確認の言葉を打たないと通りません。 命令が自分の画面から来たかも確かめて、違えば断っています。

ボタンを付けるときの頼み方は、上の3つをそのまま書けば足ります。 「この操作は何が変わるか」を先に AI に説明させると、見落としていた思わぬ影響が見つかることがあります。

✓ ここまでの確認: いま付けたいボタンを1つ選び、「見るだけ/中身が変わる/取り返しがつかない」のどれかを言えた。 付けないと決めたなら、それも立派な結論です(見るだけの画面で十分なことは多いです)。

05

STEP 5 — 目安 10分

台帳の抜けを、機械に見張らせる

台帳の価値は抜けが無いことです。道具を作ったのに台帳へ書き忘れたら、画面にも出ません。 「書き忘れないように気をつける」は、疲れた日に守れません。 LAB 010 で作った終了コードで決めるテスト(終了コード=プログラムが終わるときに返す番号。0なら合格)の出番です。

見張らせるのは、次の3つです。どれも台帳と画面を突き合わせるだけなので、数秒で終わります。

台帳にある道具 画面に実際に出た道具 突き合わせる 過不足を数える 同じ → 0(合格) ずれ → 0 以外(不合格) 数だけでなく「名前が実際に載っているか」まで見るのがコツ
  1. key の重なりが無い(同じ名前が2つあると、片方が隠れる)
  2. 台帳の全部の道具が、作った画面に実際に載っている
  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つ程度でも、台帳は要りますか?

急ぎません。3つなら、頭の中や1枚のメモで足ります。「名前や動かし方を探して手が止まった」と1回でも感じたら、それが作りどきです。先に作り込むより、困ってから作るほうが、必要な項目が分かります。

Web サーバーにして、ボタンで起動できるようにすべきですか?

いいえ、最初は HTML を1枚作るだけで十分です。サーバーにすると、公開の範囲・待ち受けの番号(ポート番号。外からの接続を受け付ける差込口の番号)・押し間違いの守りまで考えることが増えます(STEP 4)。見るだけで困らない間は、増やさないでください。

台帳に、パスワードや鍵の値を書いてもいいですか?

書かないでください。台帳は画面になり、AI にも読ませる文書です。書くのは「名前・説明・動かし方」まで。値そのものは、別の安全な置き場に分けます。

他の端末(別の Mac や iPhone)からも見たいときは?

台帳と make_page.py を LAB 008 の同期の仕組みの中に置いておけば、どの端末でも同じ台帳から画面を作り直せます。サーバーを公開するかどうかは、まず「見るだけの画面で足りるか」から考えてください。

道具をやめたときは、台帳から消しますか?

消す前に、「使っていない」と書き添えるだけにするか、本当に消すかを決めます。フォルダ自体を消すのは、取り返しがつかない操作です。ここでもまず読むだけ・まず印を付けるだけから入れば安全です。

NEXT

次の一歩

まず、いまある道具を3つだけ台帳に書いてみてください。 目的は完璧な画面ではなく、「探さなくても着ける」という感覚を1回体験することです。

  • 道具の情報は台帳の1か所にだけ書く
  • 画面は台帳から作り、手で書き足さない
  • 分類に入れ忘れた道具は、未分類に出して消さない
  • 押すと中身が変わるボタンは、2段階にする。取り返しのつかないものはボタンにしない
  • 台帳の抜けは、終了コードで決めるテストに見張らせる

LAB 012

AIに勝手をさせない壁を、3層で作る

道具と画面が整うと、次は「AI に、どこまで勝手にやらせるか」が問題になります。 お願いではなく、仕組みで止める話です。

※ この記事は、実際に使っているサーバーパネル(道具の台帳・分類・未分類の受け皿・2段階のボタン・台帳の検査)の作りをもとにしていますが、結果を保証するものではありません。 AI の振る舞いは製品やバージョンで変わるので、「情報を1か所に集めて、画面はそこから作る」という考え方の方を持ち帰ってください。