# 01 生成プロンプト

Gemini ブラウザ版に貼り付けて、アプリ本体を1回で生成させるためのプロンプトです。演習 03「Geminiで生成する」で使います。

---

## 使い方

1. 下の「貼り付けるプロンプト」の枠の中身を、先頭から末尾まですべてコピーします。
2. Gemini ブラウザ版のチャット欄に貼り付けて送信します。
3. 返ってきたHTMLをコピーし、`output/meeting-organizer.html` という名前で保存します。
4. 保存したファイルをダブルクリックして、ブラウザで画面が表示されることを確認します。

最初は1文字も変えずに貼ってください。書き換えは、動くものが手元に1つできてからにします。変えてから失敗すると、プロンプトが悪いのかコピーの仕方が悪いのか切り分けられなくなります。

---

## 先に知っておくこと

このプロンプトで作るアプリは、AIを呼びません。議事録の整理は、キーワードの一覧と正規表現による判定だけで行います。同じ議事録を入れれば、何度やっても同じ結果が出ます。

AIはアプリの中にはいません。アプリを作る側にいます。今日みなさんが使う生成AIは、アプリの部品ではなく、アプリを書く相手です。この区別は顧客に説明するときにも効きます。「AIで議事録を要約するツール」と「AIに書かせた、議事録を整理するツール」は、必要なコストも、預けるデータの範囲も、動作の安定性もまったく違います。

AIに要約させる版へ広げる余地は、生成されたコードの中にコメントとして残させます。演習 06 の発展課題で扱います。

---

## 貼り付けるプロンプト

```
この指示は最後まで読んでから作業を始めてください。

■ 1. 作るもの

打ち合わせの議事録を貼り付けると、決定事項・課題・ToDo に整理し、タスクボードとBPMN図を表示する、単一HTMLのブラウザアプリを作ってください。アプリ名は「議事録オーガナイザー」です。

■ 2. 動作環境の制約

- 1つのHTMLファイルだけで完結させてください。CSSは style タグ、JavaScriptは script タグとして、同じファイルの中に書いてください。
- CDNからライブラリを読み込まないでください。図が必要な箇所は、SVGのタグを自分で組み立てて描いてください。
- Webフォントを読み込まないでください。font-family には system-ui, -apple-system, "Segoe UI", "Noto Sans JP", sans-serif を指定してください。
- 外部のAPIを呼ばないでください。分類はキーワード辞書による判定だけで行ってください。
- 画像ファイルを参照しないでください。記号が必要な場合は、インラインSVGか記号文字で表現してください。
- fetch、XMLHttpRequest、import によるネットワークアクセスを書かないでください。ネットワークが切れている状態でも全機能が動くようにしてください。
- HTMLファイルをダブルクリックしてブラウザで開いただけで動く状態にしてください。ビルドやサーバーの起動を必要としないでください。
- 表示言語は日本語です。ボタン、見出し、説明文、エラーメッセージをすべて日本語にしてください。
- 絵文字を使わないでください。
- 起動直後は、データを1件も持たない空の状態にしてください。サンプルの議事録をコードの中に埋め込まないでください。

■ 3. 配色と文字

- 配色は2系統に限定してください。アクセント色は #E60027 です。それ以外は、次のウォームグレーの濃淡だけを使ってください。背景 #F7F5F4、罫線 #E5E1DE、補助文字 #8A817C、本文 #3A3532、パネル #FFFFFF。
- 赤と緑を対にした表現、水色・黄色・緑を並べた3色のバッジは使わないでください。状態の違いは、色相ではなく濃淡と枠線で表してください。
- 本文の文字サイズは 14px、行間は 1.7 にしてください。

■ 4. 画面構成

上から縦に次の順で積んでください。横並びの2カラムにはしないでください。

1. ヘッダー。左にアプリ名「議事録オーガナイザー」、その右に説明文「このアプリはブラウザ内だけで動作し、入力した内容は外部に送信されません。整理はキーワードのルールで行っており、AIは使っていません。」、右端に「初期化」ボタン。
2. 入力ブロック。議事録を貼り付けるテキストエリア（高さ 220px 以上）、「解析する」ボタン、「ファイルを読み込む」ボタン。ファイルは .txt / .md / .csv を受け付け、FileReader で読み込んでテキストエリアに入れ、そのまま解析まで実行してください。読み込みはブラウザの中だけで行い、どこにも送信しないでください。
3. 整理結果ブロック。決定事項 / 課題 / ToDo の3カラム。画面幅 860px 以下では縦積みにしてください。ブロックの上部に集計バーを置き、抽出した行、決定事項、課題、ToDo、担当未設定、未分類の6項目の件数を出してください。
4. タスクボードブロック。ToDo を担当者ごとのレーンに並べます。上部にフィルタを3つ（担当者セレクト、状態セレクト、キーワード入力）と「条件をクリア」ボタンを置いてください。
5. BPMN図ブロック。SVGで描画します。右上に「図を再生成」ボタン、図の下に記号の凡例を置いてください。
6. 出力ブロック。「Markdownをコピー」ボタンと「印刷」ボタンを置いてください。コピー成功時は画面下部にトーストを3秒表示してください。

■ 5. 抽出のルール

入力テキストを改行で分割し、空行を除いた行ごとに処理してください。

担当者の判定は、次の正規表現を上から順に試し、最初に妥当な候補が見つかったものを採用してください。どれにも当たらない場合は「未割当」としてください。議事録は「加藤より、」「宮本様からは、」のような地の文（箇条書きではない段落）が中心になるため、行頭の記号だけを見る規則だけでは担当者をほとんど拾えません。地の文の中から拾うための規則まで含めて、省略せず実装してください。

- /^@([^\s：:]+)/
- /^【([^】]+)】/
- /^([^\s：:]{1,10})\s*[：:]/
- /[（(]\s*担当\s*[：:]?\s*([^）)、]+)[）)]/
- /([\u4E00-\u9FFF]{2,4})(?:さん|様)?\s*担当/
- /([\u4E00-\u9FFF\u30A1-\u30FA\u30FC]{2,4})(?:さん|様)?の宿題/
- /([\u4E00-\u9FFF\u30A1-\u30FA\u30FC]{2,4})(?:さん|様)?(?:が|より|は)[^。]{0,36}?(?:担当|対応|確認|報告|送付|作成|連絡|提出|準備|調整|実施|処理|催促|回答|着手)/
- /([\u4E00-\u9FFF\u30A1-\u30FA\u30FC]{2,4})(?:さん|様)?対応/
- /[（(]([^）)]{1,14})[）)]\s*$/

同じ規則の中で複数の候補が見つかった場合は、氏名の直後にある助詞や動詞との距離が最も近いものを採用してください。「次回以降は……高橋が対応する」のような文で、話題の主語ではなく実際に動く人を拾うためです。

取り出した担当者名は、まず全角括弧で囲まれた補足（例:「田中様（発注元企業名）」のような括弧部分）を取り除いてから、末尾の「様」「さん」「氏」「部長」「課長」「主任」「リーダー」「チームリーダー」を取り除いてください。2文字未満または6文字を超えるもの、数字や英字を含むもの、ひらがなを含むものは担当者として採用しないでください。「今回」「前回」「次回」「全員」「各自」「資料」「議事録」「予算」「契約」「課題」「決定」のような一般語も採用しないでください。

期日の判定は、次の順で探し、最初に当たったものを採用してください。どれにも当たらない場合は「未定」としてください。CSVの期日列には `2026/07/17` のような西暦4桁つきの表記が来ます。西暦つきの規則を先に試さないと、西暦の下2桁を月、月を日と誤読します（例: `2026/07/17` を `6/7` と誤読する）。必ず西暦つきの規則を1番目に置いてください。

- /(\d{4})\s*[\/\-年]\s*(\d{1,2})\s*[\/\-月]\s*(\d{1,2})\s*日?/ に当たったら、西暦を無視して月/日を M/D 形式へ正規化する
- /(\d{1,2})\s*[\/月]\s*(\d{1,2})\s*日?/ に当たったら M/D 形式へ正規化する
- /(\d{1,2})\s*月\s*(上旬|中旬|下旬|末|中)/ に当たったら「M月上旬」のように文字列のまま保持し、そのカードに「相対表現」の印を付ける
- /(今週中|来週|今月中|月末|来月)/ に当たったら文字列のまま保持し、そのカードに「相対表現」の印を付ける

同じ行に日付が複数ある場合は、直後 24 文字以内に「まで」または「期限」がある日付を優先してください。締切として書かれた日付を、経緯として書かれた日付より先に拾うためです。

分類の判定は、次のキーワード辞書で行ってください。単語は省略せず、すべてコードに書いてください。

- 決定事項: 決定 / 決まった / 確定 / 承認 / 合意 / 了承 / とする / で進める / とします
- 課題: 課題 / 懸念 / リスク / 問題 / 未定 / 要検討 / 不明 / 保留 / ペンディング / 遅延 / 遅れ / 相違 / 差異 / 不足
- ToDo: ToDo / TODO / タスク / 対応する / 作成する / 確認する / 連絡する / 依頼 / まで / までに / 宿題 / やること / 提出 / 催促

複数の辞書に当たった場合は、ToDo、決定事項、課題 の順で確定してください。行動に移せるものを先に拾うためです。どれにも当たらない行は「未分類」として内部データには残し、整理結果には表示しないでください。整理結果ブロックの右上に「未分類も表示する」チェックボックスを置き、オンのときだけ未分類の一覧を出してください。

見出し行の扱い: # で始まる行、■ ▼ ◆ ◇ ● で始まり 30 文字以内の行を見出しとみなしてください。加えて、箇条書きの記号や数字で始まらず、句点「。」を含まず、24 文字以内で「決定事項」「合意事項」「ToDoまとめ」「ToDo一覧」「ToDo」「TODO」「やること」「宿題」「課題」「アクション」のいずれかを含む行も見出しとみなしてください（記号のない「来週やること（清水メモ）」のような行を拾うためです）。見出しに「決定」「合意」が含まれていればそれ以降の行を決定事項寄り、「課題」「懸念」「リスク」なら課題寄り、「ToDo」「TODO」「タスク」「やること」「宿題」「アクション」なら ToDo 寄りに判定してください。空行が来たら見出しの効果を打ち切ってください。

表の扱い: 行が縦棒で始まる Markdown の表と、カンマ区切りのCSVを表として読んでください。ヘッダー行のセルに「担当」「内容」「タスク」「期限」「期日」「状態」が含まれていれば、その列を担当者・本文・期日・状態として使ってください。区切り行（ハイフンだけの行）は読み飛ばしてください。

読み飛ばす行: 「日時:」「場所:」で始まる行、「出席者」「参加者」で始まる行とその直後の箇条書き、ハイフンや等号だけの罫線、「以上」だけの行。

■ 6. タスクボードの仕様

- ToDo に分類された項目だけを表示してください。
- 担当者ごとにレーンを作り、レーンの見出しに担当者名と件数を出してください。
- 状態は 未着手 / 対応中 / 完了 の3つです。各カードにセレクトを付け、その場で変更できるようにしてください。完了にしたカードは、本文に打ち消し線を引いて薄く表示してください。
- 本文に「完了」「済み」「提出済」があれば初期状態を完了、「対応中」「確認中」「調整中」「進行中」「検討中」があれば対応中、それ以外は未着手としてください。
- フィルタは担当者・状態・キーワードの3つを同時に効かせてください。キーワードは本文・担当者・期日を対象に部分一致で検索してください。

■ 7. 整理結果の編集

- カードの本文をクリックすると、その場に編集フォームを開いてください。編集できるのは、本文、分類、状態、担当者、期日の5項目です。
- 編集フォームには「保存」「取消」「この行を削除」の3つのボタンを置いてください。
- 保存すると、整理結果・タスクボード・BPMN図のすべてに即座に反映してください。
- 手で直したカードには「手修正」の印を付けてください。

■ 8. BPMN図の描画仕様

SVGを自前で組み立ててください。ライブラリを使わないでください。数値は次のとおりです。

- プールを1つ描きます。外枠の矩形と、左端の縦帯（幅 30px）に縦書きのラベル「打ち合わせで決まった流れ」を置いてください。
- レーンはプール内の横帯です。担当者ごとに1レーンを割り当ててください。レーンの高さは 120px 固定、レーン左端のラベル帯は幅 120px です。レーンの並び順は、議事録に担当者が最初に登場した順にしてください。
- 開始イベントは円、半径 18、線の太さ 2、塗りなし。
- タスクは角丸矩形、幅 160、高さ 64、角丸 8。中の文言は全角 10 文字で折り返し、3行を超える場合は末尾を三点リーダーで省略してください。期日が「未定」でない場合は、矩形の下端に小さく期日を添えてください。
- ゲートウェイは菱形、対角 44。中央に線2本で X を描いてください。排他ゲートウェイだけを扱ってください。
- 終了イベントは円、半径 18、線の太さ 5、塗りなし。
- シーケンスフローは実線のパスで描いてください。矢印は defs の中に marker を1つだけ定義し、すべてのパスから marker-end で共用してください。marker には orient="auto" を指定してください。点線は使わないでください。
- レーンをまたぐフローは、始点と終点の中間で直角に折り曲げてください。斜めの直線にしないでください。
- ノードの中心のX座標は、レーンのラベル帯の右端から 120px の位置を1つ目とし、以降は 200px 間隔で右へ並べてください。Y座標は そのノードが属するレーンの上端 + 60 です。ノードがラベル帯に重ならないようにしてください。
- SVG全体に viewBox を設定し、横幅が親要素を超える場合は横スクロールできるようにしてください。
- 図に載せるのは ToDo と決定事項だけです。課題はノードにしないでください。図が読めなくなるためです。
- 行に「もし」「場合」「なら」「次第」のいずれかが含まれるときは、その行のタスクの直前にゲートウェイを1つ挿入し、そこから伸びるフローに条件ラベルを添えてください。ラベルは該当する節を 14 文字で切り詰めてください。並列ゲートウェイは実装しないでください。
- 図の先頭に開始イベント、末尾に終了イベントを必ず1つずつ置いてください。
- ノードが 24 件を超える場合は先頭から 24 件までを描き、打ち切った旨を図の下に1行注記してください。
- ノードが1件も作れない場合は、図の代わりに「タスクが抽出できませんでした。議事録に担当者と行動が書かれている行があるか確認してください。」と表示してください。
- 図の下に「自動生成は叩き台です。図の正しさは保証されません。図が違っていたら、整理結果ブロックで分類と担当者を直してから「図を再生成」を押してください。」と1行注記してください。

■ 9. 保存と初期化

- localStorage のキーは geechs-mtg-organizer-v1 の1つだけ使ってください。
- 保存する内容は、入力した生テキスト、抽出結果の配列（本文・分類・担当者・期日・状態・元の行番号）、フィルタの選択状態、未分類の表示切替の状態です。
- 保存するタイミングは、解析の実行時、カードの編集時、状態の変更時、フィルタの変更時です。
- ページを読み込んだときに自動で復元してください。
- 「初期化」ボタンは確認ダイアログを1回出してから localStorage を削除し、画面を初期状態へ戻してください。
- localStorage が使えない環境ではエラーで止めず、画面にその旨を知らせて処理を続けてください。

■ 10. 出力

- 「Markdownをコピー」は、決定事項 / 課題 / ToDo の3セクションを見出し付きで出力してください。決定事項と課題は箇条書き、ToDo は 担当者 / 内容 / 期日 / 状態 の4列の表にしてください。
- クリップボードへの書き込みは navigator.clipboard.writeText を使い、失敗した場合は画面外のテキストエリア経由の document.execCommand("copy") にフォールバックしてください。
- 「印刷」は window.print を呼ぶだけにしてください。@media print で、入力ブロック、ボタン類、フィルタ、編集フォームを非表示にし、整理結果・タスクボード・BPMN図だけを出してください。SVGには max-width: 100% を指定して用紙幅に収めてください。

■ 11. 空の状態の案内

- 起動直後や解析結果が0件のときは、空白のままにせず、次に何をすればよいかを画面に書いてください。整理結果ブロックには入力の手順を3つの番号付きで、タスクボードには「ToDo が1件も抽出されていません」という見出しと、分類を手で変える方法を書いてください。

■ 12. コードに残すコメント

JavaScript のコメントとして、次の6点を必ず残してください。書式は「// 拡張ポイント: 〜」で統一し、該当する処理の直上に置いてください。それぞれ、どこをどう変えると何が変わるかを2〜3行で書いてください。

1. 拡張ポイント: テンプレ切替 … 分類のキーワード辞書の直上。辞書を複数持たせて商談用・社内定例用で切り替える。
2. 拡張ポイント: 抽出ルールの追加 … 担当者判定の正規表現の配列の直上。配列の順序が優先順位であることを書く。
3. 拡張ポイント: 期日カレンダー … 期日を取り出す関数の直上。月表示のカレンダーに載せる場合、年をどこで決めるかを先に決める必要があることを書く。
4. 拡張ポイント: 優先度 … 1件分のデータを組み立てる箇所の直上。高 / 中 / 低 を持たせてボードの並び順に反映する。
5. 拡張ポイント: レーン並べ替え … BPMN図のレーン配列を作る箇所の直上。配列の順序を変えれば図のレーン順が変わることを書く。
6. 拡張ポイント: CSV出力 … Markdown を組み立てる関数の直上。列は 担当者 / 内容 / 期日 / 状態 の4列、文字コードはUTF-8 BOM付きであることを書く。

加えて、分類を判定する関数の直上に、次の内容のコメントを「// 発展課題: AIに投げる版へ発展させる場合の差し込み位置」という見出しで残してください。この関数を外部のAI APIへ投げる処理に差し替えれば、辞書に載っていない書き方も拾えるようになること。ただしその時点で前提が2つ増えること。1つはAPIキーの置き場所で、HTMLに直接書くと配布先の全員に渡ってしまうこと。もう1つは議事録の中身を外部へ送ってよいかの線引きが必要になること。

コードの末尾に、手を入れる場所の早見表をコメントで置いてください。拡張ポイントの名前と、対応する関数名または変数名を並べた一覧にしてください。

■ 13. 出力形式

HTMLコードだけを1つのコードブロックで出力してください。前置きと後書きは不要です。コードブロックの中に説明文を混ぜないでください。

出力が途中で切れた場合は、続きを最初から出し直さず、切れたところから続けてください。
```

---

## このプロンプトのどこが効いているか

**1. 禁止に必ず代替を添えている**

「CDNを使わないでください」だけを書くと、モデルは別の外部依存を探してきます。画像URLを埋めたり、Googleフォントを読み込んだりします。禁止のすぐ後ろに「SVGを自分で組み立ててください」という逃げ道を書くと、その方向へ進みます。第2ブロックの禁止事項は、すべて「〜しないでください。代わりに〜してください」の形で書いてあります。

**2. 数値を全部書いている**

「見やすい図を描いてください」と書くと、生成のたびに違う図が出ます。半径 18、幅 160、レーン高さ 120、間隔 200 のように数値で指定すると、誰が生成しても同じ寸法になります。研修で全員の画面をそろえたいときにも効きますが、それ以上に、顧客に見せる試作を2回目も同じ品質で出せるかどうかが変わります。

**3. 辞書の単語を省略していない**

第5ブロックの分類キーワードは「など」で省略していません。省略すると、モデルが勝手に単語を足したり減らしたりします。判定の結果が説明できなくなると、顧客に「なぜこの行が課題に入ったのか」を答えられません。

**4. 空の状態の指示を独立させている**

第11ブロックは、機能ではなく「何も起きていないときに何を出すか」の指示です。ここを書かないと、起動直後に真っ白な画面が出るアプリになります。試作を人に見せる場面で、最初の3秒がいちばん効きます。

**5. 出力形式を最後に固定している**

第13ブロックの「コードブロック1つだけ」がないと、コードの前後に解説文が付いてきます。コピーするときに説明文を巻き込んで、ブラウザで開けないHTMLになります。

---

## 自分の言葉に変えるとどうなるか

動くものが手に入ったら、次の箇所を変えてもう一度生成してみてください。何が変わるかが分かります。

| 変える場所 | 変えた結果 |
| --- | --- |
| 第1ブロックのアプリ名と1文の説明 | 画面の見出しと、生成される全体の雰囲気が変わります。ここが最も影響範囲が広い1行です |
| 第5ブロックの分類キーワード | 拾われる行が変わります。自社の議事録でよく使う言い回し（「持ち帰り」「差し戻し」など）を足すと、抽出の精度が目に見えて上がります |
| 第5ブロックの担当者の正規表現 | 「氏名:」形式ではなく「[氏名]」形式で書いている職場なら、ここを足します |
| 第8ブロックのレーンの高さと間隔 | 図の縦横の広がりが変わります。画面共有で見せるなら、間隔を詰めたほうが読めます |
| 第4ブロックのブロックの順番 | 画面の上から何が見えるかが変わります。BPMN図を先に見せたい相手なら、順番を入れ替えます |

変えないほうがよい箇所もあります。第2ブロックの動作環境の制約と、第13ブロックの出力形式です。ここを緩めると、生成物がブラウザで開けなくなったり、顧客先のネットワークで動かなくなったりします。

---

## うまくいかない場合

- 出力が途中で止まった場合は、続けて「続きを出力してください。最初からやり直さず、切れたところから続けてください。」と送ってください。
- HTML・CSS・JavaScript が別々のブロックに分かれて出てきた場合は、「3つのブロックを1つのHTMLファイルにまとめて、コードブロック1つで出し直してください。」と送ってください。
- 生成物に外部のURLが混ざっている場合は、`02_修正依頼テンプレ.md` の書式で1回だけ直させてください。
- 開始から [20min] 経っても動くHTMLが手に入らない場合は、`answer/prototype.html` を `output/meeting-organizer.html` としてコピーし、次の演習へ進んでください。手順は `hints/残量が少なくなったとき.md` にあります。
