stack-chan

import{Bn as e,Er as t,Tr as n,d as r,f as i,kr as a,lr as o,o as s,s as c,t as l,u,ur as d,wr as f}from"./globals-CtHxcH0F.js";import{n as p,r as m,t as h}from"./alert-J77GIzJP.js";var g=n(`life-buoy`,[[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}],[`path`,{d:`m4.93 4.93 4.24 4.24`,key:`1ymg45`}],[`path`,{d:`m14.83 9.17 4.24-4.24`,key:`1cb5xl`}],[`path`,{d:`m14.83 14.83 4.24 4.24`,key:`q42g0n`}],[`path`,{d:`m9.17 14.83-4.24 4.24`,key:`bqpfvv`}],[`circle`,{cx:`12`,cy:`12`,r:`4`,key:`4exip2`}]]),_=a(t(),1),v=d(),y=[{id:`five`,time:`5分`,title:`シミュレーターで表情を動かす`,steps:[`エディタのサンプルボタンから「1. あいさつと表情」を選びます。`,`「スタートしたとき」の内側にある表情や吹き出しを変更します。`,`診断が0件であることを確認して「ビルド」を押します。`,`「シミュレーターで実行」を押し、顔と吹き出しの変化を確認します。`]},{id:`fifteen`,time:`15分`,title:`ボタンやセンサーに反応させる`,steps:[`「2. ボタンでリアクション」か「4. センサーとLED」を読み込みます。`,`イベントの内側へ発話、表情、姿勢のブロックを接続します。`,`対象機種を選び、未対応能力の診断がないことを確認します。`,`シミュレーターダイアログのA、B、Cボタンで入力を試します。`,`条件やくり返しを追加し、停止しない処理がないことを確かめます。`]}];function b(){let{t}=o();return(0,v.jsxs)(`div`,{className:`page-container max-w-4xl space-y-6 py-10`,children:[(0,v.jsxs)(`header`,{className:`space-y-4`,children:[(0,v.jsx)(`p`,{className:`text-xs font-semibold tracking-widest text-primary uppercase`,children:`Visual Programming`}),(0,v.jsx)(`h1`,{className:`page-heading`,children:t(`作って、動かして、少しずつ広げる`)}),(0,v.jsx)(`p`,{className:`page-lead`,children:t(`実機へ書き込む前に、ブラウザのシミュレーターで表情と動きを確かめられます。`)}),(0,v.jsxs)(e,{render:(0,v.jsx)(`a`,{href:`./`}),children:[(0,v.jsx)(f,{"data-icon":`inline-start`}),t(`エディタを開く`)]})]}),(0,v.jsxs)(`nav`,{className:`flex flex-wrap gap-2`,"aria-label":t(`学習コース`),children:[(0,v.jsx)(e,{variant:`outline`,size:`sm`,render:(0,v.jsx)(`a`,{href:`#five`}),children:t(`5分：表情`)}),(0,v.jsx)(e,{variant:`outline`,size:`sm`,render:(0,v.jsx)(`a`,{href:`#fifteen`}),children:t(`15分：入力`)}),(0,v.jsx)(e,{variant:`outline`,size:`sm`,render:(0,v.jsx)(`a`,{href:`#thirty`}),children:t(`30分：顔アセット`)})]}),y.map(e=>(0,v.jsxs)(s,{id:e.id,className:`scroll-mt-20`,children:[(0,v.jsxs)(u,{className:`sm:grid sm:grid-cols-[5rem_1fr] sm:items-center`,children:[(0,v.jsx)(`p`,{className:`text-lg font-semibold text-primary`,children:t(e.time)}),(0,v.jsx)(r,{children:t(e.title)})]}),(0,v.jsx)(c,{className:`sm:pl-[7rem]`,children:(0,v.jsx)(`ol`,{className:`list-decimal space-y-2 pl-5 text-sm leading-6 text-muted-foreground`,children:e.steps.map(e=>(0,v.jsx)(`li`,{children:t(e)},e))})})]},e.id)),(0,v.jsxs)(s,{id:`thirty`,className:`scroll-mt-20`,children:[(0,v.jsxs)(u,{className:`sm:grid sm:grid-cols-[5rem_1fr] sm:items-center`,children:[(0,v.jsx)(`p`,{className:`text-lg font-semibold text-primary`,children:t(`30分`)}),(0,v.jsx)(r,{children:t(`自分のShape型Faceを組み込む`)})]}),(0,v.jsx)(c,{className:`sm:pl-[7rem]`,children:(0,v.jsxs)(`ol`,{className:`list-decimal space-y-2 pl-5 text-sm leading-6 text-muted-foreground`,children:[(0,v.jsxs)(`li`,{children:[(0,v.jsx)(`a`,{className:`text-primary underline`,href:`../face-editor/`,children:t(`Shape顔エディタ`)}),t(`でFace領域、左右の目、まぶた、口を調整します。`)]}),(0,v.jsx)(`li`,{children:t(`プレビュー上で目と口をドラッグし、配置を確認します。`)}),(0,v.jsx)(`li`,{children:t(`「MODで使う」または「変更を反映」を押し、アセット欄の「使用中」を確認します。`)}),(0,v.jsxs)(`li`,{children:[t(`生成コードに`),(0,v.jsx)(`code`,{children:`FaceBase.template`}),t(`と`),(0,v.jsx)(`code`,{children:`robot.ui.setFace`}),t(`が含まれることを確認します。`)]}),(0,v.jsx)(`li`,{children:t(`ビルドしてシミュレーターでShape型Faceの表示を確認します。`)}),(0,v.jsxs)(`li`,{children:[t(`保存ボタンから編集用の`),(0,v.jsx)(`code`,{children:`.stackchan-blocks.json`}),t(`を保存します。`)]}),(0,v.jsxs)(`li`,{children:[t(`必要に応じて実行用の`),(0,v.jsx)(`code`,{children:`.xsa`}),t(`も保存し、二つの成果物を分けて管理します。`)]})]})})]}),(0,v.jsxs)(h,{children:[(0,v.jsx)(g,{}),(0,v.jsx)(m,{children:t(`失敗から戻す`)}),(0,v.jsxs)(p,{className:`space-y-2`,children:[(0,v.jsx)(`p`,{children:t(`プロジェクトは編集のたびにブラウザーへ自動保存されます。`)}),(0,v.jsx)(`p`,{children:t(`実機書き込みは互換性を検証し、書き込み後の内容を読み戻して確認します。`)}),(0,v.jsx)(`p`,{children:t(`書き込んだMODを起動したくない場合は「実機のMODを削除」を使います。`)})]})]}),(0,v.jsxs)(`section`,{className:`rounded-xl border-l-4 border-primary bg-card p-5`,children:[(0,v.jsx)(`h2`,{className:`font-semibold`,children:t(`コードによるMOD開発へ移る`)}),(0,v.jsxs)(`p`,{className:`mt-2 text-sm leading-6 text-muted-foreground`,children:[t(`生成コードタブの`),(0,v.jsx)(`code`,{children:`mod.js`}),t(`は、通常のMODと同じ`),(0,v.jsx)(`code`,{children:`onContextCreated(robot)`}),t(`を公開します。`)]}),(0,v.jsx)(`p`,{className:`mt-2 text-sm leading-6 text-muted-foreground`,children:t(`生成コードを直接変更してもBlocklyへは逆変換されないため、元のプロジェクトファイルも保持してください。`)})]})]})}function x(){let{t:e}=o();return(0,_.useEffect)(()=>{document.title=`${e(`ブロックエディタ チュートリアル`)} | ｽﾀｯｸﾁｬﾝ`},[e]),(0,v.jsx)(i,{current:`tutorial`,surfaceName:`ブロックエディタ チュートリアル`,rootHref:`../`,children:(0,v.jsx)(b,{})})}l((0,v.jsx)(x,{}));