ステップ4 · クリック可能なプロトタイプ
プロトタイプにより、利害関係者はエンジニアリング開始前にビヘイビアツリーを体感できます。これは設計仕様ではなく、契約のデモンストレーションです。ハッピーパスだけでなく、エラーやエッジケースを含むすべての分岐を示さなければなりません。
最初に、承認されたツリー（work/<item>/03-trees/）、コンセプト、context/product.md、context/writing-style.mdを読んでください。以下の構造のリファレンス実装として../../examples/price-alerts/04-prototype/index.html（このスキルからの相対パス）を参照してください。
要件
-
自己完結型の1ファイル:
work/<item>/04-prototype/index.html。すべてのCSSとJSをインライン化します。ビルドステップ不要、オプションのWebフォントを除き外部リクエストなし。これにより、ディスクから開いたり、チケットに添付したり、リンクとして公開したりできます。 -
画面: それぞれの異なる状態は
data-screen="<id>"を持つ要素です。一度に表示されるのは1つだけです。ナビゲーションは、実際の製品と同様にプロトタイプ自身のボタンを介して行われます。 -
シナリオコントロール: 製品UIから明確に分離されたサイドパネル。ツリー内のすべての
while状態とif条件のトグル（検証済み/未検証、制限到達、通知オフ、価格変動のシミュレーションなど）を備えます。トグルの変更は製品UIの動作を変え、すべての分岐に到達可能でなければなりません。 -
カバレッジマップ:
<script type="application/json" id="tree-coverage">ブロック。すべてのツリーのすべてのthenおよびand行を、それをデモンストレーションする画面にマッピングします:{ "trees": { "functional/price-alert-creation": [ { "line": "then the alert is saved as active", "screen": "alerts" }, { "line": "and the alert's direction is set to above or below the current price", "screen": "alerts" } ], "functional/price-alert-trigger": [ { "line": "then no further notification is sent", "screen": null, "reason": "Not visible: absence of a notification" } ] } }screen: nullはreason（バックエンドのみ、または「何も起こらない」結果）がある場合のみ許可されます。 -
可視のカバレッジパネル: サイドパネルにカバレッジマップをツリー行のチェックリストとして表示します。行をクリックすると、適切なシナリオが設定された該当画面にジャンプします。これによりプロトタイプがレビューツールとして機能します。
-
リアルなコピー: ツリーからの正確なメッセージを使用します。サンプルデータはサンプルデータとしてマークします。
-
ブランド:
context/product.mdのデザイントークンに従ってください。それ以外の場合は、ニュートラルでアクセシブルなスタイルを使用します。電話画面幅で動作します。キーボードフォーカスが可視であること。
チェック
python3 .pm-harness/pm_check.py prototype work/<item>/03-trees work/<item>/04-prototype/index.html を実行します。ツリー行がカバレッジマップから欠落しているか、存在しない画面を指している場合、失敗します。合格するまで修正します。
ゲート
PMをプロトタイプのJourneyツリーに沿って案内し、次に任意の分岐を選んでもらいます。フィードバックを収集します。フィードバックが振る舞いを変更する場合は、最初にツリーを更新し、ツリーチェックを再実行してからプロトタイプを更新します。PMが承認したら、01-idea.md に stage: prototype を設定し、/pm-harness:create-eng-tickets を提供します。PMのチームが最終デザインにFigmaを使用している場合は、デザイナーがどの画面を引き継ぐべきかを伝えます。