stack-chan

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="../assets/stackchan-favicon-32.png" type="image/png" />
    <link rel="apple-touch-icon" href="../assets/stackchan-apple-touch-icon.png" />
    <title>ブロックエディタ チュートリアル | ｽﾀｯｸﾁｬﾝ</title>
    <link rel="stylesheet" href="../global.css" />
    <link rel="stylesheet" href="./tutorial.css" />
    <script
      src="https://unpkg.com/lucide@1.24.0/dist/umd/lucide.min.js"
      integrity="sha384-mooE85Luwgx+AyykX7e90VcN8/QCFTSIwPuHLmvcsLVoA0en7lKYb9XlOzn5G2co"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <header class="topbar">
      <a class="brand-link" href="../"><img src="../assets/stackchan-symbol.png" alt="" /><span>ｽﾀｯｸﾁｬﾝ</span></a>
      <strong>ブロックエディタ チュートリアル</strong>
    </header>
    <main class="tutorial-shell">
      <header class="tutorial-hero">
        <p class="eyebrow">Visual Programming</p>
        <h1>作って、動かして、少しずつ広げる</h1>
        <p>実機へ書き込む前に、ブラウザのシミュレーターで表情と動きを確かめられます。</p>
        <a class="button primary-button" href="./"><i data-lucide="blocks"></i>エディタを開く</a>
      </header>

      <nav class="lesson-nav" aria-label="学習コース">
        <a href="#five">5分：表情</a>
        <a href="#fifteen">15分：入力</a>
        <a href="#thirty">30分：顔アセット</a>
      </nav>

      <section id="five" class="lesson-card">
        <div class="lesson-time">5分</div>
        <div>
          <h2>シミュレーターで表情を動かす</h2>
          <ol>
            <li>エディタのサンプルボタンから「1. あいさつと表情」を選びます。</li>
            <li>「スタートしたとき」の内側にある表情や吹き出しを変更します。</li>
            <li>診断が0件であることを確認して「ビルド」を押します。</li>
            <li>「シミュレーターで実行」を押し、顔と吹き出しの変化を確認します。</li>
          </ol>
        </div>
      </section>

      <section id="fifteen" class="lesson-card">
        <div class="lesson-time">15分</div>
        <div>
          <h2>ボタンやセンサーに反応させる</h2>
          <ol>
            <li>「2. ボタンでリアクション」か「4. センサーとLED」を読み込みます。</li>
            <li>イベントの内側へ発話、表情、姿勢のブロックを接続します。</li>
            <li>対象機種を選び、未対応能力の診断がないことを確認します。</li>
            <li>シミュレーターダイアログのA、B、Cボタンで入力を試します。</li>
            <li>条件やくり返しを追加し、停止しない処理がないことを確かめます。</li>
          </ol>
        </div>
      </section>

      <section id="thirty" class="lesson-card">
        <div class="lesson-time">30分</div>
        <div>
          <h2>自分のShape型Faceを組み込む</h2>
          <ol>
            <li><a href="../face-editor/">Shape顔エディタ</a>でFace領域、左右の目、まぶた、口を調整します。</li>
            <li>プレビュー上で目と口をドラッグし、配置を確認します。</li>
            <li>「ブロックエディタで使う」を押し、アセット欄の「使用中」を確認します。</li>
            <li>生成コードに`FaceBase.template`と`robot.ui.setFace`が含まれることを確認します。</li>
            <li>ビルドしてシミュレーターでShape型Faceの表示を確認します。</li>
            <li>保存ボタンから編集用の`.stackchan-blocks.json`を保存します。</li>
            <li>必要に応じて実行用の`.xsa`も保存し、二つの成果物を分けて管理します。</li>
          </ol>
        </div>
      </section>

      <section class="next-step">
        <h2>コードによるMOD開発へ移る</h2>
        <p>生成コードタブの`mod.js`は、通常のMODと同じ`onContextCreated(robot)`を公開します。</p>
        <p>生成コードを直接変更してもBlocklyへは逆変換されないため、元のプロジェクトファイルも保持してください。</p>
      </section>

      <section class="recovery-note">
        <h2><i data-lucide="life-buoy"></i>失敗から戻す</h2>
        <p>破損したプロジェクトはヘッダーの警告ボタンから退避データを保存できます。</p>
        <p>実機書き込みは互換性を自動検証し、書き込み後の内容を読み戻して確認します。</p>
        <p>書き込んだMODを起動したくない場合は、ブロックエディタの「実機のMODを削除」を使います。</p>
      </section>
    </main>
    <script type="module" src="../tool-navigation.mjs"></script>
    <script>
      globalThis.lucide?.createIcons()
    </script>
  </body>
</html>