LAB1 - 初期開発
このラボでは、IBM Bobを使って、手元で開けるシンプルなFAQサイトを作ることを目指します。
| 項目 | 内容 |
|---|---|
| サイトの動き方 | すべて1つのページの中で動作する |
| 実装する機能 | ・検索窓でキーワード検索 ・カテゴリ絞り込み ・FAQの一覧表示（日本語翻訳済み） ・質問をクリックすると答えが開く（アコーディオン） |
| 技術スタック | ・ローカル環境で動く（ブラウザで直接開く仕様） ・HTML / CSS / JavaScript だけで作成 |
Promptの入力&サブタスクの計画
1. Promptのコピー& 実行
PROMPT.mdを開き、中の文章をコピーします。
ユーザーのアクション:
- PROMPT.mdファイルを開く
- 内容をコピー
PROMPT.mdをチャットに貼り付け、Orchestratorモードを選択し、右下の実行ボタンを押します。
2. サブタスクの計画
promptの内容をもとにBobがサブタスクの計画を作成しますので、承認します。
Bobのアクション:
- Promptを解析
- サブタスクを生成
- 承認を求める
ユーザーのアクション:
- サブタスクの内容を確認
- 「承認」をクリック
仕様書の作成
1. 読み取りの許可
仕様書を作成するためにBobはファイルの読み取り許可を求めますので、「承認」をクリックします。
Bobのアクション:
- qa.mdファイルの読み取り要求
- FAQデータの解析
ユーザーのアクション:
- 「承認」をクリック
2. 要件の指示
設計フェーズでは、Bobが細かな要件を尋ねてくれるので、初期開発の要件を参考にクリックしていきます。
FAQサイトのイメージについての要件定義の例:
注意: 生成AIの生成結果によって尋ねられる要件の内容は変わることがあります。
3. 設計用タスクの承認
要件の定義後、Bobがユーザーの指示した要件に応じて、設計用のTODOリストを生成します。その内容に問題がなければ、「承認」を押します。
承認後は生成されたTODOリストに従い、段階的にタスクが実行されていきます。
注意: 生成AIの生成結果によってTODOリストの内容は変わることがあります。
4. 仕様書の生成
TODOリストを承認するとBobはFAQサイトの仕様書を生成します。
5. 仕様書の確認
仕様書の生成には時間がかかるので、その間に生成されている仕様書の内容を確認します。必要な要件が仕様書に反映されているかを確認してください。
6. 仕様書の保存
作成された仕様書を保存するために許可を求められるので、「保存」をクリックします。
7. 仕様書作成タスクの完了
仕様書の生成後に、TODOリストの更新をBobが行うので「承認」を押します。
設計フェーズの完了
1. 設計フェーズの完了
設計フェーズが終わると、左のようなサマリーをBobが出力します。
サマリーの内容:
- 完了したタスク
- 生成されたファイル
- 次のステップ
2. サブタスクの完了
サマリーを下にスクロールすると、サブタスクの完了指示があるので、「サブタスクを完了して戻る」ボタンをクリックします。
実装計画の作成
1. 設計タスクの総括
先ほどまでのサブタスクの結果が親タスクに返されますので承認をクリックします。
2. ファイルの読み取りの許可
セッションが切り替わりファイルの読み取りの許可を求められるので「すべて承認」をクリックします。
3. 実装計画の方針定義
下にスクロールすると、実装計画の方針についてBobがユーザに尋ねてきます。
方針の例:
- 段階的な実装
- 優先機能の選択
- テスト戦略
4. 実装計画の承認
方針決定後に、実装計画をBobが提示するため、問題がなければ「承認」をクリックします。
コードの生成
1. ディレクトリの作成
実装するためのディレクトリ構造のためにBobがコマンドを提案するので、「コマンド」ボタンをクリックします。
2. コードの生成
ディレクトリ構造作成後、Bobはコードファイルを生成します。
生成されるファイル:
- index.html
- styles.css
- script.js
- その他必要なファイル
3. コードの書き込みの承認
ファイルが生成されるたびに、保存の承認を依頼されるため、ユーザーは、「承認」をクリックします。
この時、適宜、自動承認モードを活用し、書き込み承認の自動設定を行います。
4. 生成されたコードの確認
生成されたコードを確認します。
確認ポイント:
- HTML構造
- CSSスタイル
- JavaScript機能
- 仕様書との整合性
5. タスクの完了
コーディングが完了したら、「承認」をクリックし、コード生成タスクを完了します。
6. README.mdの作成
コード作成後、BobはREADME.mdを作成します。
注意: 生成AIの生成結果によってREADME.mdの作成のタイミングは変わることがあります。
サイトのテスト
1. 作成したサイトを開く
Bobが open ~.html というコマンドの実行を提案してくるので、コマンドを実行し、サイトを開き、作成されたサイトを確認します。
注意: Bobからの提案がない場合は、Bobに「作成したサイトをブラウザで確認したい」と伝えてください。
2. サイト機能の確認
UIの確認をし、予定機能が動くかを確認してみてください。
確認項目:
| 確認項目 | 内容 |
|---|---|
| テスト例 | 1. MCPと検索枠に入れてみてください 2. クリックし、アコーディオン機能の確認をしてみてください |
テスト例:
- MCPと検索枠に入れてみてください
- クリックし、アコーディオン機能の確認をしてみてください
注意: 問題がある場合は、Bobにエラーを伝えてください。
LAB1タスクの完了
LAB1の完了
サイトが正常に動作していることを確認し、ToDoリストがすべて完了してサマリーが出力されたら、LAB1は完了です！
完了条件:
- FAQサイトが正常に表示される
- 検索機能が動作する
- カテゴリ絞り込みが動作する
- アコーディオン機能が動作する
- 日本語翻訳が正しく表示される
すべての項目が完了したら、LAB2に進んでください。
前へ: IBM Bobの画面構成と基本操作 | 次へ: LAB2 - 機能開発