# 03 機能追加テンプレ

生成したアプリに機能を1つ足すときの指示の文例集です。演習 06「機能追加」で使います。

生成されたHTMLの中には「// 拡張ポイント: 〜」というコメントが6箇所と、「// 発展課題: AIに投げる版へ発展させる場合の差し込み位置」が1箇所あります。コードの末尾には、拡張ポイントの名前と関数名の対応表がコメントで置いてあります。まずそこを開いて、自分が足したい機能に近いものを探してください。

---

## 指示の型

```
output/meeting-organizer.html の「// 拡張ポイント: ○○」のコメント位置に、
（何をする機能か）を実装してください。
（仕様を箇条書きで2〜4行）
既存の表示・保存の動きは変えないでください。
```

末尾の「既存の表示・保存の動きは変えないでください」は毎回必ず入れてください。この一文がないと、機能追加のついでに既存の画面を作り直されることがあります。作り直された結果が良くなっていることもありますが、どこが変わったか分からなくなり、次の指示が出せなくなります。

追加は1つずつ進めてください。1回の指示で3つ足すと、どれが原因で壊れたのか切り分けられません。1つ足す、ブラウザで確認する、次を足す、の順で進めます。

---

## 難易度の目安

| 表記 | 意味 |
| --- | --- |
| すぐできる | 1回の指示で通ることが多い。既存の処理をほとんど触らない |
| 少し考える | 2〜3箇所に手が入る。指示に仕様を書き足さないと期待と違うものが出る |
| 発展 | 前提そのものが変わる。時間が余った人、または研修後に自分で進める人向け |

---

## すぐできる

### 1. CSV出力（拡張ポイント: CSV出力）

```
output/meeting-organizer.html の「// 拡張ポイント: CSV出力」のコメント位置に、
タスク一覧をCSVでダウンロードする機能を実装してください。

出力ブロックに「CSVをダウンロード」ボタンを1つ足してください。
列は 担当者 / 内容 / 期日 / 状態 の4列、1行目はヘッダー行です。
文字コードはUTF-8 BOM付きにしてください。BOMがないとExcelで日本語が崩れます。
本文にカンマや改行が含まれる場合は、値全体をダブルクォートで囲んでください。
ファイル名は tasks.csv にしてください。
既存の表示・保存の動きは変えないでください。
```

確認: ダウンロードしたファイルを Excel で開き、日本語が読めることと、列が4つに分かれていることを見てください。

### 2. 分類辞書の切り替え（拡張ポイント: テンプレ切替）

```
output/meeting-organizer.html の「// 拡張ポイント: テンプレ切替」のコメント位置に、
分類キーワードの辞書を切り替える機能を実装してください。

既存の辞書に「社内定例」という名前を付けてください。
「商談」という2つ目の辞書を足してください。中身は次のとおりです。
  決定事項: 発注 / 内示 / 稟議通過 / 契約締結
  課題: 予算未確定 / 与件不明 / 競合 / 稼働未定
  ToDo: 見積提出 / 提案書送付 / 訪問 / 折り返し
入力ブロックに辞書を選ぶセレクトを置き、選んだ辞書で解析するようにしてください。
選んだ辞書は localStorage に保存し、次に開いたときも維持してください。
既存の表示・保存の動きは変えないでください。
```

確認: 辞書を切り替えて同じ議事録を解析し直し、分類の件数が変わることを見てください。

### 3. 担当者ごとの件数を集計バーに出す

```
output/meeting-organizer.html の集計バーに、担当者の人数を表示する項目を1つ足してください。

項目名は「担当者」、値は ToDo に登場する担当者の人数（未割当を除く）です。
既存の6項目の並び順は変えないでください。新しい項目は末尾に足してください。
既存の表示・保存の動きは変えないでください。
```

確認: `docs/議事録_20260710_定例.md` を読み込み、タスクボードのレーンの数と一致するかを見てください。

### 4. 未着手だけを一発で絞り込む

```
output/meeting-organizer.html のタスクボードのフィルタ行に、
「未着手だけ表示」ボタンを1つ足してください。

押すと状態フィルタが「未着手」になり、もう一度押すと「すべて」に戻ります。
現在どちらの状態かがボタンの見た目で分かるようにしてください。色は増やさず、枠線の濃さで表してください。
既存の3つのフィルタは残してください。
既存の表示・保存の動きは変えないでください。
```

確認: ボタンを押した状態でページを再読み込みし、絞り込みが維持されることを見てください。

---

## 少し考える

### 5. 優先度（拡張ポイント: 優先度）

```
output/meeting-organizer.html の「// 拡張ポイント: 優先度」のコメント位置に、
タスクの優先度を実装してください。

1件分のデータに priority という項目を足し、初期値は「中」にしてください。
値は 高 / 中 / 低 の3つです。カードの編集フォームにセレクトを1つ足して変更できるようにしてください。
タスクボードのレーン内は、高 / 中 / 低 の順に並べてください。同じ優先度の中は元の順序を保ってください。
優先度はカードのタグとして表示し、「高」のときだけタグの枠線を濃くしてください。色は増やさないでください。
優先度も localStorage に保存してください。
既存の表示・保存の動きは変えないでください。
```

確認: 優先度を変えたあとに再読み込みし、並び順と値が保たれることを見てください。

### 6. BPMN図のレーン並べ替え（拡張ポイント: レーン並べ替え）

```
output/meeting-organizer.html の「// 拡張ポイント: レーン並べ替え」のコメント位置に、
BPMN図のレーンの並び順を変える機能を実装してください。

BPMN図ブロックの上部に、レーン名を並べたリストを置いてください。
各レーンに「上へ」「下へ」のボタンを付け、押すと図のレーンの順序が入れ替わるようにしてください。
ドラッグでの並べ替えは実装しないでください。ボタンだけにしてください。
並び順は localStorage に保存し、次に開いたときも維持してください。
議事録を解析し直したときに、保存した並び順に存在しない担当者が出てきた場合は末尾に足してください。
既存の表示・保存の動きは変えないでください。
```

確認: 並べ替えたあとに「図を再生成」を押し、レーンの縦の並びとフローの折れ曲がりが崩れていないかを見てください。

### 7. 期日カレンダー（拡張ポイント: 期日カレンダー）

```
output/meeting-organizer.html の「// 拡張ポイント: 期日カレンダー」のコメント位置を参考に、
期日のあるタスクを月表示のカレンダーに並べる機能を実装してください。

BPMN図ブロックの下に、新しく「期日カレンダー」ブロックを追加してください。
表示するのは1か月ぶんです。前月・翌月へ移動するボタンを付けてください。
期日が M/D 形式のタスクだけを日付のセルに載せてください。年は今年として扱ってください。
「来週」「月末」のような相対表現のタスクは、カレンダーの下に「日付が確定していないタスク」としてまとめて並べてください。
セルに載せるのは本文の先頭12文字までにしてください。
カレンダーはSVGではなくHTMLの表で描いてください。
既存の表示・保存の動きは変えないでください。
```

確認: 期日が未定のタスクがカレンダーの中に紛れ込んでいないかを見てください。

### 8. 自社の議事録の書式に合わせる（拡張ポイント: 抽出ルールの追加）

```
output/meeting-organizer.html の「// 拡張ポイント: 抽出ルールの追加」のコメント位置に、
担当者の判定ルールを足してください。

追加したい書き方: （ここに自分の職場の議事録での担当者の書き方を1つ書く）
例が必要なら、次の行が正しく判定されることをゴールにしてください。
（ここに実際の行を1行、氏名を架空のものに置き換えて貼る）

既存の4つのルールの順序は変えないでください。新しいルールは配列の最後に足してください。
追加後に docs/議事録_20260724_社内共有.txt を読み込み、担当未設定の件数がどう変わったかを教えてください。
既存の表示・保存の動きは変えないでください。
```

確認: 追加したルールが、既存のルールで拾えていた行の判定を壊していないかを見てください。担当未設定の件数が減っていれば成功です。

---

## 発展

### 9. AIに要約させる版へ広げる（発展課題: AIに投げる版）

このアプリは、いまAIを呼んでいません。整理はキーワードのルールだけで動いています。AIに要約させる版へ広げると、辞書に載っていない書き方も拾えるようになりますが、その瞬間に前提が2つ増えます。APIキーをどこに置くかと、議事録の中身を外部へ送ってよいかです。`docs/` の「AI入力可否ルール」を先に確認してください。

研修中は実際にAPIを呼ばず、差し込む場所と必要な準備を洗い出すところまでにしてください。

```
output/meeting-organizer.html の「// 発展課題: AIに投げる版へ発展させる場合の差し込み位置」の
コメント位置について、実装はせずに設計だけを教えてください。

1. 分類の関数を外部のAI APIへの問い合わせに差し替える場合、どの関数のどこを変える必要があるか
2. その変更で、いま同期処理になっている箇所のうち非同期に変わるのはどこか
3. APIキーをHTMLに直接書いた場合、誰にキーが渡ることになるか
4. 議事録の中身を外部へ送る前に、社内で確認が必要になる項目は何か

コードは書かず、上の4点への回答をコメントとして該当箇所に書き足してください。
既存の表示・保存の動きは変えないでください。
```

確認: 回答の3番と4番が、S03 で扱った内容とつながっているかを見てください。ここが顧客に説明する場面でそのまま使えます。

### 10. 議事録2本の差分を出す

```
output/meeting-organizer.html に、2回ぶんの議事録を比較する機能を追加してください。

現在の解析結果を「前回」として名前を付けて保存できるボタンを1つ足してください。
保存した「前回」がある状態で新しい議事録を解析すると、
  前回にあって今回にないToDo、今回に新しく出たToDo、両方にあるToDo
の3つに分けて一覧を表示してください。
本文の完全一致で突き合わせてください。表記ゆれの吸収はしないでください。
保存できる「前回」は1件だけにしてください。
既存の表示・保存の動きは変えないでください。
```

確認: `docs/` の議事録2本を順に読み込んで、3つの区分に妥当な件数が入るかを見てください。

### 11. 週次の報告文を組み立てる

```
output/meeting-organizer.html の出力ブロックに、
「週次報告文をコピー」ボタンを1つ足してください。

コピーされる文章の構成は次のとおりです。
  1行目: 今週の決定事項の件数と、未完了のToDoの件数
  2行目以降: 担当者ごとに「担当者名: 未完了のタスク本文（期日）」を1行ずつ
  末尾: 期日が未定のタスクの件数
Markdownの記号は使わず、そのままメールに貼れる平文にしてください。
完了のタスクは含めないでください。
既存の表示・保存の動きは変えないでください。
```

確認: 生成された文章をそのままメール本文に貼って、読める日本語になっているかを見てください。

---

## 追加したあとに書くこと

`output/追加した機能.md` に、次の3点を書いてください。演習 07 の相互デモで使います。

1. 何を足したか
2. なぜそれを選んだか（S02-3 で書き出した「自分の議事録整理にかかっている時間」との関係）
3. 次に足すなら何か

---

## うまくいかない場合

- 指示どおりの機能が付いたが既存の画面が壊れた場合は、`output/meeting-organizer_bk.html` に戻してから、仕様を1行足して送り直してください。
- 拡張ポイントのコメントが生成物に入っていない場合は、まず「// 拡張ポイント: 〜 のコメントを6箇所に入れてください」と指示して足させてから、機能追加に進んでください。
- 実行の枠が尽きた場合は `hints/残量が少なくなったとき.md` を開いてください。
