第8章 自分仕様に増築しよう
最後の章です。
ここまでのダッシュボードは、僕が設計した「型」です。
ここからは、あなたの仕事に合わせて増築してください。
と言っても、設計図を書く必要はありません。
増築も、プロンプトを貼るだけです。
あなたは、このダッシュボードへ機能を1つ増築するAIアシスタントです。次の手順を番号順に実行してください。
1. 使う人に「新しいタブ、新しいカード、新しい項目のどれを、何のために1つ追加したいですか」と聞き、追加したいことを1つに絞る。答えを受け取るまで実装を始めない。
1.5. 先に使い道を聞く: 「それはいま、どうやって管理していますか。できあがったら何に使いますか」を1問だけ聞く（中身の細部は使い道から決まる）。そのうえで、項目の名前・種類の一覧・集計のしかたなど使う人の好みで変わることは、使い道から組んだ叩き台を「こちらの案です。このままでよいですか、直したい所はありますか」の形で見せてよい。禁じるのは、案を見せずに仮決めの値で作り始めることと、選択肢に紛れ込ませて同意済み扱いにすること。質問は合計3問まで。3問で決まらない残りは、叩き台の既定値として次の設計のまとめに明記する。
1.6. 疑問が消えたら、作る前に設計のまとめ（何がどの画面に増え・何を記録し・どう集計するか、5行以内）を見せ、「この内容で作ってよいですか。作らない選択も、あとからこのガイドで外してもらうこともできます」の同意をもらってから実装する。同意までコードを書かない。
2. README_dev.md、index.html、assets/app.js を読み、現在のタブ構成、画面の作り方、API、データ契約を調べる。関係するthemes/とassets/base.cssも確認する。
3. 変更するファイルと、既存機能への影響を短く整理してから実装する。
4. 見た目の掟を守る。色、フォント、角丸、影などの見た目は themes/ のCSS変数だけで付け、assets/base.css に色の値を直接書かない。
5. データの掟を守る。既存データは data/ の契約と型を保ち、JSONは一時ファイルへ書いて検証してから置換する。
6. 新しいJSONを data/ に増やした場合は、名前、キー、型、使い方を README_dev.md のデータ契約へ追記する。APIで扱う必要がある場合は、許可対象と読み書き処理も整合させる。
7. 既存タブを壊さない。追加前からあるタブ（増築前に `index.html` の `data-tab` を数えて控えた数）が開け、保存、再読込、主要操作が続けて使える状態を保つ。
8. テストの前に、自分がこの作業のために起動したままのサーバー・監視スクリプトがあれば止める（結果が実行のたびに変わる原因になる。比較は同じ条件で2回流してから判断する）。そのうえで、ダッシュボードのフォルダで python3 -m unittest discover -s tests を実行し（Windowsでは py -m unittest discover -s tests。どちらも無ければ python で試す）、自分が増築で書き換えた範囲を修正して全テストPASSにする。配布時からあるテスト本文は書き換えない（一部が「スキップ」と表示されるのは正常）。
9. ダッシュボードを起動し、追加した機能を実際に操作する。ブラウザの開発者コンソールを確認し、エラーが0件であることを確かめる。
10. 追加機能、全テスト、既存タブ、画面コンソールを確認する。成功条件は、依頼された1機能が動き、テストが全PASSし、既存タブ（増築前に `index.html` の `data-tab` を数えて控えた数）が壊れず、コンソールエラーが0件であること。追加した新しいタブがタブ列の最後（既定タブの後ろ）に表示されること。先頭に出たら失敗。この条件がそろった場合だけ成功とする。
11. 最後に、次の行を持つ表で結果を報告する。結果欄は各行をOKまたはNGにし、根拠欄には確認した値を書く。
| 確認項目 | OKにする条件 | 結果 | 根拠 |
|---|---|---|---|
| 要望 | 追加するものと目的を1つに絞った | OK/NG | 決めた内容 |
| 追加機能 | 使う人の要望どおり実際に操作できる | OK/NG | 操作結果 |
| 見た目の掟 | 見た目をthemes/のCSS変数で管理している | OK/NG | 確認ファイル |
| データの掟 | 既存契約を守り、新規JSONの契約も記載した | OK/NG | 契約と保存結果 |
| 自動テスト | 指定コマンドの全テストがPASSした | OK/NG | テスト件数 |
| 既存タブ | 既存タブがすべて開き主要操作が動く（増築前に数えた数） | OK/NG | 確認結果 |
| コンソール | 画面のコンソールエラーが0件 | OK/NG | エラー件数 |このプロンプトには「壊さないための掟」が焼き込んであります。
自動テストと画面確認まで通ってから完成になるので、増築で本体が壊れにくい作りです。
増築アイデア、置いていきます
- ✅ 習慣トラッカーのタブ（筋トレ・読書・散歩のチェック表）
- ✅ 家計・売上のカードをタスクタブに追加
- ✅ よく開く外部サイトへのボタン（別の管理画面やカレンダーへワンクリック）
- ✅ AI社員の5人目（例: 「経理係」を雇って、レシートのメモを月次の表に）
やり方は決まっていません。あなたのAIに「ai/staff/ にいる4人の定義を参考に、5人目を作って」と頼んでみてください。ここから先は、あなたの増築です。
見た目も、着せ替えできる
色やフォントなどの見た目は、themes フォルダに分離してあります。
AIにこう頼めば、着せ替えられます。
themes/light を複製して、落ち着いた緑基調のテーマを作って。config.json の theme を切り替えて。構造と見た目を分けて作ってあるので、着せ替えても機能は壊れにくい作りです。
定番の指示文は、プロンプトタブへ
この教材で使ったプロンプトや、あなたがよく使う指示文は「プロンプト」タブに貯めてください。
左にカテゴリの棚（文章・画像・セットアップ…）があり、プロンプトを棚分けできます。カテゴリの名前はあなたの言葉で増やせて、カテゴリも中のプロンプトも、掴んで上下に並び替えできます（行の⠿を左の棚へドラッグすると、棚の引っ越しです）。
追加は右上の「新しく追加」から。
カードは題名や本文のどこを押してもコピーになっていて、押すとクローバーが舞って「コピーしました」と出ます。
次からはプロンプトタブを開いて貼るだけです。
パソコンを点けたら、自動で立ち上がるように（自動起動）
自動起動は、最初のセットアップが自動で設定しています。
パソコンを立ち上げるだけで、ダッシュボードが動いている状態になります。
外したい時・入れ直したい時は、あなたのAIに「自動起動を外して」「自動起動を設定して」と頼むだけです。
（あなたのAIに「自動起動を設定して」と言うか、同梱の prompts_kit/05_自動起動セットアップ.md を自分で貼ってやり直すこともできます）
あなたのパソコンの環境（WindowsかMacか、Pythonの呼び出し方）をAIが調べて、環境に合った方法で設定し、解除のしかたまで案内してくれます。
最初のセットアップの時に、環境の都合で設定できなかった方も、あとから同じ頼み方でやり直せます。
スマホからも開けるように（スマホ対応・任意）
外出先でも、同じダッシュボードをスマホから開けるようにできます。
仕組みはTailscale（テイルスケール）という無料アプリ。あなたのPCとスマホだけの専用トンネルを作るので、インターネットに公開するのではありません。
始め方は、設定画面から2手です。
- サイドバー下の「⚙ 設定」を開き、「スマホ連携」のところにある「セットアップ用プロンプトをコピー」ボタンを押す
- コピーされたプロンプトを、あなたのAIに貼る
あとはAIが案内してくれます。
あなたがやるのは、Tailscaleアプリを入れてログインすること（PCとスマホ）と、最後にスマホのホーム画面へ追加することだけ。設定の書き込みはAIが代行します。
ホーム画面のアイコンから開けば、アプリのように全画面で、PCと同じ画面がそのまま使えます。閲覧専用ではありません。タスクの完了もメモも、外出先から全部できます。
使えるのはPCが起動している間です。万一Tailscaleが使えなくなっても、手帳本体はPCで変わらず動きます。
スマホからも使いたい人は、こちらのガイドをどうぞ。
外出先から頼みごと（Discord連携・任意）
Discordの自分専用チャンネルから、手帳に話しかけられるようにもできます。
- 「今日」と送ると、今日のタスクが返ってくる
- 「完了 タスク名」で、そのタスクが完了になる
- 「メモ 内容」で、メモが画面に入る
- 設定画面（⚙）でオンにすれば、「ai: 〇〇して」の自由な頼みごとも送れる
これも「⚙ 設定」→「Discord」の「セットアップ用プロンプトをコピー」を貼るだけ（同梱の prompts_kit/08_Discord連携セットアップ.md と同じもの）。この手帳専用のBot（ロボット窓口）を新しく作る手順を、AIが1画面ずつ案内します。
動くのはPCが起動している間だけですが、PCを閉じている間に送った頼みごとは消えません。次にPCを起動した時に、まとめて処理されます（留守番電話と同じです）。
「ai:」の頼みごとをオンにする時の注意は、設定画面のトグルの横に常時書いてあります。自分だけのサーバー・自分だけのチャンネルで使ってください。
LINEに朝夕の予定を届ける（任意）
任意で設定すると、朝夕のダイジェストがLINEに届きます。
push送信のみなので、LINEから話しかけても返事は来ません。
話しかける系のやり取りをしたい場合は、Discord連携を使ってください。
無料枠は月200通です。朝夕2通を30日受け取っても、2通×30日＝60通なので無料枠の中に収まります。
設定は、「⚙ 設定」→「LINE通知」の「セットアップ用プロンプトをコピー」を貼るだけです（あなたのAIに「LINE通知をセットアップして」と言っても同じ。
AIが ai/line_setup.md を読んで、設定を代行してくれます）。
途中であなたの出番になるのは、LINEのログインと画像認証（ロボットではないことの確認）くらいです。
通知をやめるときは、あなたのAIに「LINE通知を止めて」と頼んでください（設定ファイル line/settings.json を外すだけなので、AIがその場でやってくれます）。
パソコンの通知でお知らせ（デスクトップ通知・任意）
設定画面（⚙）でオンにすると、ダッシュボードの画面を開いていない時に限って、パソコンの通知が届きます。
届くのは2種類だけ——新しい決裁・提案が来た時の「新しいお知らせが◯件あります」と、その日はじめて開いた時の「今日の予定は◯件です」。
最初からはオフです。オンにした時に、ブラウザが標準の許可ダイアログを1回だけ聞いてきます。画面を見ている間は通知しません（画面の中のお知らせが担当します）。
オンにしたのに通知が見えない時は、アプリよりも先にパソコン側の状態を疑ってください。
Macは「システム設定 → 通知」でお使いのブラウザが許可されているか、集中モード（おやすみモード）や画面共有・ミラーリング中でないか（この間はバナーが出ず、通知センターにだけたまります）。
Windowsは「設定 → システム → 通知」で同じ項目（応答不要モード）を確認できます。
（許可ダイアログで間違えて「ブロック」を押してしまった時は、アドレスバーの鍵アイコン（または通知ベルのアイコン）から通知の許可をやり直せます。）
手持ちのWebツールを手帳の隣に並べる（外部アプリ連携・任意）
設定画面（⚙）の「外部アプリ連携」に、ブラウザで動くツールのURLを登録すると、サイドバーの上部にそのアプリのボタンが並びます。
押すと画面ごと切り替わって、ボタン1つで手帳とツールを行き来できます（登録は8件まで。埋め込みを断るツールは、新しいタブで開きます）。
登録しなければボタンは現れず、動きも今までどおりです。
僕がいま並べているのは、この2つです。
周りに持っている方が多いので、連携しやすくしています。
ひとつは『AIスキル図鑑』。
Claude Codeに覚えさせたスキルが、図鑑のように一覧になるツールです。どのスキルを何回使ったかまで見えるので、手帳の隣に置いて「今日はどの技が働いたか」を眺めています。
もうひとつは『Rondo』。
メルマガやLINEの配信をまとめて管理するツールで、配信の様子をこの画面の中からそのまま見ています。
つなぎ方は、どちらも設定画面から2手です。
- サイドバー下の「⚙ 設定」を開き、「外部アプリ連携」にある「AIスキル図鑑をつなぐ」または「Rondoをつなぐ」ボタンを押す
- 開いたフォームで「追加する」を押す（AIスキル図鑑はURLも自動で入ります）
これだけで、サイドバーの上部にそのアプリのボタンが現れます。
上の2つ以外のツールは、隣の「その他のアプリ」ボタンから。
名前とURLを入れるだけで、同じように並びます。
お引っ越しとバックアップ
データも設定もGoogle連携の鍵も、ぜんぶこのフォルダの中に、ふつうのファイルとして入っています。
だから壊れにくいし、逃がすのも簡単です。
バックアップは、もう自動で動いています。
週に1回、記録と設定がZIPになって backups/ フォルダに残ります（新しい5本だけ残して、古い分は勝手に片付きます）。
今すぐ欲しい時は、設定画面の「バックアップ」で「バックアップZIPを作る」を押すだけ。最終作成日時もそこに出ます。
できたZIPを外付けディスクや自分のクラウドの置き場へたまにコピーしておけば、PCごと壊れても安心です。
PCの買い替え・お引っ越しも、AIに任せられます。
設定画面の「お引っ越しプロンプトをコピー」を押して、新しいPCのAIに貼るだけ。ZIPの中身の配置から起動、検証チェックリストまでAIが代行します（手順の正本は同梱の ai/hikkoshi_guide.md）。
手でやりたい人は、昔ながらの「フォルダをまるごとコピー」でも大丈夫です。3手で終わります。
- 新しいPCへ、フォルダをまるごとコピーする（置き場所はどこでもOK）
- 新しいPCにClaude Codeを入れる（第2章「2-0」と同じ手順）。Pythonは、新しいPCのAIに「Pythonを入れて」と頼めば入れ方を案内してくれます
- 新しいPCのAIに「このフォルダのクローバーを起動して、自動起動も設定して」と頼む（自分で起動したい人は、フォルダへ移動して
python3 serve.py。Windowsはpy serve.py）
これだけで、メモも知識もタスクも、続きからそのまま使えます。
Google連携も作り直し不要です。連携の設定（google/ の中）はフォルダと一緒に引っ越しますし、Google側の仕組みはあなたのGoogleアカウントの中にあるので、PCを替えても消えません。
起動していつものメモが見えたら、お引っ越し成功です。
（同じPCの中で復元して、元のダッシュボードと2つ同時に動かす時だけ、コピー側の config.json の port を空いている番号に変えてください。）
セキュリティ設計シート（同梱）
フォルダの中に「セキュリティ設計シート」というファイルを同梱してあります。
このダッシュボードが何を受け付け、何を受け付けないか。
どこまでが製品の対策で、どこからがあなたの管理か。
対策の全リストを、1枚にまとめたものです。
置き場所は、デスクトップに展開したクローバーのフォルダの直下。セキュリティ設計シート.md という名前のファイルです。
中身を見たくなったら、読み方は3つあります。
- ✅ AIに読ませる … あなたのAIに「セキュリティ設計シートを読んで、要点を教えて」と頼む。分からない項目は、そのまま質問すればかみ砕いて説明してくれます
- ✅ AIに開かせる … 「セキュリティ設計シートをブラウザで開いて」と頼めば、読みやすい形で画面に開いてくれます
- ✅ 自分で開く … フォルダの中のファイルをダブルクリック。ふつうのテキストなので、メモ帳でもそのまま読めます
いちばんのおすすめは、こう頼むことです。
「セキュリティ設計シートを読んで、実際のコードと突き合わせて」
コードは全部あなたの手元にあるので、書いてあることが本当かどうか、その場で確かめられます。
ここまで来たら、この画面はもう僕の型ではなく、あなたの仕事場です。
遠慮なく増築してください(^～^)
次へ
このアプリにかけた想いと、「クローバー」という名前の失敗談です。