TM紙芝居 3.2 アプリ・教材・ツールチェインガイド
Copyright © 2026 Hiroya Kubo. この文書はCC BY-SA 4.0で提供します。
DSL 3.2のアプリ、物語、体験会教材、台本、SB3開発を8ページでつなぐ
1 / 8 アプリ概要
TM紙芝居は、TurboWarpで作られた紙芝居にカメラ映像を重ね、
参加者のポーズやキー入力・タッチ入力で物語を進める「参加型」AI紙芝居アプリです。
作品はテキストのkamishibai=3.2台本として記述し、絵・音・動き・分岐を組み合わせます。3.2.xは既存のkamishibai=3.1台本も読み込めます。
中心となる考え: AIはポーズを認識し、プログラムは判定結果を物語のシーンへ接続します。参加者自身の動きが、次の場面を開く入力になります。
出典: TM紙芝居 公式サイト、tm-kamishibai README
一つの台本を四つの形で届ける
2 / 8 アプリ概要
アプリ本体は汎用のSB3です。作品固有のkamishibai=3.1またはkamishibai=3.2台本と素材を読み込み、
事前検査、Loading、シーン実行、入力待ち、画面更新を共通の流れで扱います。
共通ランタイム
- Asset Managerがローカル素材とURL素材を名前で管理
- Kamishibai Runtimeが実行前に台本を検査
- TurboWarp TMとAsync Inputが入力をシーン遷移へ渡す
- 不正な台本は行番号付きSVG診断として画面表示
四つの成果物
generic- 起動後に台本を選ぶ汎用版
editor- TurboWarpで編集できる版
player- 作品を埋め込んだ実行専用版
- Web版
- ブラウザーから直接開く公開版
設計上の利点: 物語を替えてもランタイムを作り直す必要がありません。作品と実行基盤を分離するため、体験会では素材と台本の編集に集中できます。
出典: 操作説明書、内部仕様書。過去版との差分はhistory.mdを参照してください。
浦島太郎を「参加する物語」にする
3 / 8 浦島太郎による具体例
公開サンプル「浦島太郎」では、観客がカメラの前で物語に合うポーズを取り、 主人公や登場人物の行動に参加します。画面の「ポーズをとろう！」が、見る時間から動く時間への合図です。
具体例の役割: 昔話の順序は保ちながら、要所をポーズ入力に置き換えます。物語を知っている人にも、アプリが「何を認識し、何を変えるか」が伝わります。
ポーズをシーンの出来事へ変換する
4 / 8 浦島太郎による具体例
台本は、表示する素材、待つ入力、次のシーンを順に宣言します。TurboWarp TMの認識結果は 単なる分類名ではなく、物語のランタイムが待っている入力イベントとして扱われます。
台本側の指定
kamishibai=3.2
sceneLabel=ride-turtle
TMPoseURL=https://…/model.json
action=pose:ride,0.8
action=scene:dragon-palaceシーン、ポーズ名、信頼度、遷移先を作品の言葉で記述します。
ランタイム側の処理
- シーンの背景とアクターを表示
- 指定モデルを読み込んで認識開始
- ポーズが閾値を超えるまで待機
- 認識を止め、次のアクションへ進む
- スキップ時も同じ終了処理で片付ける
演出の要点: 一つのポーズを長く待つ場面では、案内表示や効果音で「今何をすればよいか」を伝えます。キー入力・タッチ入力も併設できるため、会場条件に合わせた代替操作を用意できます。
体験会教材が結ぶ三つの技術
5 / 8 体験会教材説明
2026年8月1日版の親子AIプログラミング体験会は、画像生成AI、ポーズ認識AI、 AIではないプログラムを一つの作品へ組み合わせます。何を人が決め、どこをAIが助け、 どこをプログラムが確実に実行するかを、制作とプレイの両方から学ぶ教材です。
絵からプレイまでを一周する
6 / 8 体験会教材説明
教材は完成品を眺めるだけではなく、下絵、画像生成、認識モデルの学習、TurboWarpへの登録、 台本編集、プレイ確認までを一つの制作の循環として体験させます。
教材としての狙い: 入力画像、学習データ、判定閾値、台本の指定を変えると結果も変わります。うまく動かない理由を一つずつ切り分けること自体が、AIとプログラムの違いを理解する学習になります。
出典: 体験会参加者用教材、体験会スタッフ向け資料
紙芝居DSL 3.2が物語をデータにする
7 / 8 DSL 3.2説明
紙芝居DSL 3.2は、一行をcommand=valueとして記述する人間可読の台本形式です。
画像や音声を素材名へ登録し、シーンごとにアクター、テキスト、入力、分岐、画面効果を並べます。旧Text Assetを互換維持しながら、相対サイズと複数行に対応するSVG Textを併用できます。
宣言するもの
asset: URLやSB3内のコスチューム・音sceneLabel: 分岐先を表すシーン名actor: 表示位置、コスチューム、アニメーションsvgTextStyle: テキストの共通スタイルaction: テキスト、ポーズ、入力待ち、遷移
3.2の実行手順
- 3.1／3.2宣言とコマンド構造を事前検査
- 参照先・アドレス・条件式を検査
- Loading用の素材を先に登録
- 通常の素材を登録して進捗表示
- シーンとアクションを順に実行
kamishibai=3.2
asset=Hero,costume:Actor:hero1
actor=Hero,hero1
svgTextStyle=title:#112233:#fff:Noto Sans JP:150:center:up
setLoadingBackdrop=loadingBackground
sceneLabel=start
text=ui.prompt:Pose!
action=Hero:setText:Title:title
action=pose:rescue,0.8
transition=fadeToWhite安全な失敗: 不明なコマンド、存在しない素材、壊れた条件式は、カメラや音声を開始する前に検出します。問題のコード、行・列、ソース抜粋をSVG文字で示し、台本を実行しません。
出典: DSL作成マニュアル、コマンドリファレンス。2.0からの変更はhistory.mdを参照してください。
sb3-toolchainがSB3を検証可能なソースへ変える
8 / 8 sb3-toolchain説明
@kubohiroya/sb3-toolchainは、バイナリのZIPであるSB3をGitで差分確認できるソースへ展開し、
検証済みの同一入力から決定的なSB3を再構築するNode.jsのツールチェインです。このリポジトリでは
検証したコミットを開発時依存へ固定し、手元の開発とCIの両方で同じツールチェインを使います。
pnpm sb3:import→app/の展開ソース→check・テスト・ビルド→配布SB3日常の作業手順
pnpm sb3:check- 素材参照、ハッシュ、拡張の対応付けをオフライン検証
pnpm sb3:build- 固定順・タイムスタンプ・圧縮でSB3を再生成
pnpm sb3:extensions:status- 固定したGitHub／npm由来を確認
機能拡張の管理
- コミットまたはnpmの版とSHA-256で由来を固定
syncは導入済みの固定ソースから復元updateは更新を一括の変更として適用- 複数拡張の束は元のopcodeを変換し、一つの登録単位へまとめられる
再現性の境界: リリースのビルド中にネットワークに依存するsyncやupdateを暗黙実行しません。更新は別のレビュー可能な変更として行い、固定ソースをコミットしてからビルドします。
出典: sb3-toolchain 固定コミット b3f4b9a、推奨する作業手順、展開ソース形式
DSLとアプリの版ごとの差分はhistory.mdを参照してください。