aula-interativa

インタラクティブなレッスン

簡単な入力から、完全なレッスンを制作します。受講者が進んで取り組み、常に何を見て、何を読み、どこをクリックすればよいかが分かり、最後には概念を応用できるレッスンです。内容の正確さと決定性は必須ですが、それだけでは不十分です。見た目が悪い、テキストが多すぎる、または分かりにくい画面も、事実誤認と同じ優先度の欠陥です。

入力：質問は3つだけ

依頼や会話ですでに明示された回答を再利用してください。回答済みの内容を再度尋ねてはいけません。言語が不明な場合は、ほかの質問より先に尋ね、残りの質問は選択された言語に翻訳してください。

1. どの言語ですか？ / Which language? ポルトガル語、英語、スペイン語、またはその他。
2. 今日は何を学びたいですか？ テーマ、問題、質問、ツール、資料を受け付けます。
3. どの程度の深さですか？ 1 — 少なめ、2 — 中程度、3 — 多め。画面数を具体的に指定することもできます。

選択	範囲	短い画面の目安
1	中心となる仕組み1つ、実例1つ、応用1つ	10–14
2	仕組み、バリエーション、実例の解決、練習2つ	18–26
3	内部の仕組み、限界、運用、応用	30–40

各画面で扱うのは1つのアイデアです。深さは画面数とステップ数を増やすことで生み出し、テーマに応じて、構成の整った掘り下げブロックを加えます。雑然とした画面で深さを出してはいけません。画面数が具体的に指定されている場合は、それに従ってください。深さは事前知識を意味するものではありません。ユーザーから委任された場合は、2を選んでください。見た目、プラットフォーム、音声に関する質問を追加してはいけません。このスキルの編集がタスクの場合は、入力の質問を実行してはいけません。

始める前に読む

タイミング	リソース	内容
必ず最初に	受講者の体験	ナビゲーションの指針、落ち着いた文章（タイポグラフィは1種類）、画面の種類、構成
必ずブリーフの前に	レッスンの流れ	完成度の高いレッスンを作るための7つの判断と8つの展開
必ず台本の前に	文章作成	タイトル、ステップ文、用語、フィードバック
各品質ゲートで必ず	品質とゲート	1〜5の評価基準、P1〜P5のゲート、モデルにありがちな失敗
コードを書く前に必ず	examples/exemplar-dns/ と examples/mecanismo.html	実例はプロセス全体（ブリーフ、台本、ソース、レッスン）を示し、仕組みの例は最小限のAPIを示します。形式を参考にし、テーマをコピーしてはいけません
入力の後	教授法	目標、前提条件、段階的な進行
調査時	ソースとインターフェース	根拠、バージョン、誠実なモック
台本作成時	画面台本	話す内容・画像・種類の表、ステップ
デザイン時	ビジュアルディレクション	トークン、キットのブロック、幾何学
アニメーション作成時	モーション と レシピ	時間、イージング、カメラ、アニメーション付きモック
実装時	ランタイムとHTML	プレーヤー、キット、キャプチャAPI
提出前	キャプチャとレビュー	ストーリーボード、フレーム、テスト、修正
評価時	失敗と基準	受け入れ基準

制作パイプライン

1. 準備する。 node scripts/check_env.mjs --channel chrome。Playwright と Sharp が入った既存の node_modules（find ~ -maxdepth 4 -type d -path '*node_modules/playwright'）を LESSON_NODE_MODULES 経由で再利用してください。存在しない場合に限り、$WORK/tooling にインストールします。
2. 調査して決定する（ゲート P1）。 templates/brief.md をもとに $WORK/brief.md を記入します。構成の7つの決定事項を、単一の事例と計算済みの結果を使って定めます。観察可能な目標、前提条件のマップ、一次資料も記載します。ソフトウェアについては、モックに表示するコマンド、名前、出力形式を確認します（可能なら実行してください）。brief.md と sources.json は作業ディレクトリ $WORK に保存します。これはレッスン専用のフォルダーであり、スキルのフォルダーの外に置きます。
3. 構成を書く（ゲート P2）。 templates/roteiro.md をもとに $WORK/roteiro.md を作成します。ステップごとに、構成上の動き、種類、セリフ、画像を1行にまとめ、チェック項目を埋めます。執筆の音読テストも行います。描き始める前に、各用語を使う前に定義していること、各概念にモックか図があること、発展内容がある場合は1つのブロックに収まること、事例に関する説明を一般則にしないこと、種類が交互に切り替わることを確認します。レッスンの出来を左右するのはここです。
4. 組み立てる。 templates/ フォルダーを $WORK/source/templates/ に、レッスンを $WORK/source/lesson.html にコピーし、<script src="templates/…"> と <link href="templates/player.css"> を使います（例ではスキル内に置かれているため、../templates/ を使っています）。examples/mecanismo.html を土台にします。各画面はキット（LessonKit.diagram、split、hero、terminal、app、quiz、cards）と、render 内の計算済みモデルを使って組み立てます。:root のトークンで題材に合ったパレットを選び、プレーヤーを書き換えないでください。
5. 第一印象（ゲート P3）。 画面を2〜3枚作成したらキャプチャしてストーリーボードを確認し、残りを作る前にタイポグラフィ、パレット、図を調整します。
6. アニメーションを付ける。 templates/motion.js の enter、stagger、spring、pulse、camera、typed を使います。動きで仕組みを示し、表示は落ち着いたものにします。各ステップは静止した状態で終わるようにします。
7. サイクルごとにレビューする（ゲート P4）。 1440x900,390x844 でキーフレームをキャプチャし、モーションを30 fpsでキャプチャします。ストーリーボード（デスクトップ、モバイル、エラーのシナリオ）を生成し、体験のチェックリストに沿って画面を1枚ずつ確認します。問題がありそうなステップは実寸で開きます。キャプチャとレビューのサンプリング方法でコンタクトシートを使ってモーションをレビューします。レッスン独自のテスト（計算、各選択肢へのフィードバック、ナビゲーション）を $WORK/test_aula.mjs に記述し、audit.mjs を実行します。3つの役割で自己批評し、品質のルーブリックに基づく評価を $WORK/qualidade.md に記載します。修正、再キャプチャ、再確認を繰り返し、すべての項目が4以上、ストーリーボードがチェックリストに合格し、キャプチャに問題がなくなるまで続けます。
8. パッケージ化して納品する（ゲート P5）。 pack.mjs でHTMLを1つにまとめます。特に指定がなければ、ユーザーのブラウザーで開きます。納品するのはHTMLのみです。構成、キャプチャ、レポートは $WORK に保管し、スキルのフォルダーや納品物と同じ場所には置きません。最後に、キャプチャは削除してよいことを伝えます。

構成やキーフレームの承認を求めないでください。一般的な美的判断は自分で行います。音声、動画、3Dは、目標達成に役立つ場合にのみ使用します。レッスンは音声なしでも機能するようにします。

不変条件

体験

• 単一の事例を通した完結したストーリー構成：フック、種明かし、語彙、モデル、仕組み、実例、実践、締めくくり。
• 主な操作は「続ける」の1つだけで、常に同じ場所に配置します。学習者が一時停止、再生、再起動する必要はありません。
• 1画面につき1つのアイデア、各ステップに1つのガイド文を設けます。長文は掘り下げブロック内で使用できますが、視覚的に煩雑にしてはいけません。フォントは1種類、画面ごとのテキストサイズは最大4種類、役割を持たせた色を少数使い、テキスト領域は1つにします。画面には出典、引用、バージョン注記を表示しません。出典は sources に記載し、「出典」パネルに表示します。
• 技術用語はすべて、使用前に（図解とともに）定義します。
• 図が画面の主役となるようにします。デスクトップでは、スクロールせずに1440×900の画面内に収めます。確認したすべてのビューポートで、描画後のテキストサイズを11 px以上にします。
• モックには検証済みの形式を使用し、「シミュレーション」のラベルを付けます。

実行

• 同じスライド、ステップ、時刻、入力からは、順不同でシークした場合も含め、常に同じフレームが生成されます。シーン内で時計、ネットワーク、シードのない乱数、CSSトランジションを使用しません。
• フォント、画像、リソースは lesson.ready の前に読み込みます。リソースの読み込みに失敗した場合は、その旨を通知します。
• モデルがテキスト、色、状態、フィードバックを決定します。ステップのガイド文は、図の同じ状態から導きます。
• インタラクションには結果と因果関係のあるフィードバックを設けます。誤答には、その理由の説明を返します。
• 実データ、モック、再構成、例示値には、それぞれ正しいラベルを付けます。

コマンド

$SKILL はこのスキルのフォルダー、$WORK はこのスキルの外にあるレッスンのフォルダーです。絶対パスを使用してください。

node $SKILL/scripts/check_env.mjs --channel chrome
node $SKILL/scripts/pack.mjs $WORK/source/lesson.html --out $WORK/out/lesson.html
node $SKILL/scripts/capture.mjs $WORK/out/lesson.html --out $WORK/qa/kf --mode keyframes --viewports 1440x900,390x844 --channel chrome
node $SKILL/scripts/storyboard.mjs $WORK/qa/kf/manifest.json                      # desktop
node $SKILL/scripts/storyboard.mjs $WORK/qa/kf/manifest.json --viewport 390x844   # celular
node $SKILL/scripts/storyboard.mjs $WORK/qa/kf/manifest.json --scenario errada    # feedback de erro
node $SKILL/scripts/capture.mjs $WORK/out/lesson.html --out $WORK/qa/motion --mode motion --fps 30 --channel chrome
node $SKILL/scripts/contact_sheet.mjs $WORK/qa/motion/manifest.json --stride 3
node $SKILL/scripts/audit.mjs $WORK/out/lesson.html --capture $WORK/qa/motion/manifest.json --out $WORK/qa/audit.json --channel chrome

PDF教材（ユーザーから依頼された場合、またはレッスンを印刷用もしくはオフライン閲覧用に配布する場合）： node $SKILL/scripts/pdf.mjs $WORK/out/lesson.html --out $WORK/out/lesson.pdf --channel chrome を実行すると、A4横向きのPDFが生成されます。内容は、表紙、画面ごとの1ページ（シーンの最終状態と、すべてのステップの文を順番に掲載）、回答なしの練習問題、最後にフィードバックを付けた解答、リンク付きの出典です。提出前にPDFのページを数ページ開いて確認してください。

レッスン動画（ユーザーから依頼された場合のみ）： node $SKILL/scripts/video.mjs $WORK/out/lesson.html --out $WORK/video --channel chrome を実行すると、レッスンの利用時の様子を、1920×1080、1080×1080、1080×1350、1080×1920の各ネイティブ解像度で録画します（各ステップでアニメーションし、カーソルが「続ける」をクリックし、練習問題には正解が入力されます）。形式は --formats で選択し、一時停止時間は --hold と --read で調整します。提出前に各形式のフレームを1つずつ視聴してください。

test_player.mjs と test_tools.mjs は、付属の例を使ってプレーヤーとツールをテストします。スキルを編集する際に実行し、レッスンの検証には使用しないでください。

--channel を指定しない場合は、PlaywrightのChromiumを使用します。失敗を黙殺したり、実際に確認していないのに目視確認済みとしたりしないでください。

完了

完了とする条件：P1～P5のゲートに合格していること、ルーブリックのすべての項目で4以上の評価を得ていること、ストーリーボードがデスクトップとモバイルの体験チェックリストに合格していること、キャプチャに問題がないこと、アニメーションを確認済みであること、練習問題にフィードバックがあること、最終HTMLを開いてテスト済みであること。確認できない項目がある場合は、どの項目かを明記してください。

最終回答には、レッスンの場所（実際に開くこと）、1行での操作方法（「続ける」または「→」）、依頼があった場合はPDFまたは動画、重大な制約を記載してください。このスキルを編集した場合は、スクリプトと付属の例を検証し、test_player.mjs と test_tools.mjs を実行してください。また、work/ の生成物をリポジトリに残さないでください。