TMPose紙芝居

紙芝居アプリ 概要説明書 大人向け

Copyright © 2026 Hiroya Kubo. この文書はCC BY-SA 4.0で提供します。

対象アプリ／DSL: kamishibai=3.1

概要

この紙芝居アプリは、TurboWarp上で動作する、参加型デジタル紙芝居プレイヤーです。紙芝居の内容は .txt の台本ファイルを正本として作成し、画像、音声、登場人物、セリフ、移動、ポーズ認識を台本から制御できます。汎用SB3と編集用SB3では台本を外部ファイルとして読み込み、再生用SB3とWeb版では同じ台本を作品内へ組み込んで配布します。

従来の紙芝居が「読み手が見せ、聞き手が見る」形式であるのに対し、このアプリは、参加者がカメラの前でポーズを取ることで物語の進行に関われる点が特徴です。教材、発表、ワークショップ、創作活動に向いた、紙芝居とプログラミング的表現の中間にあるツールです。

このアプリの価値

このアプリの価値は、次の3点に集約できます。

  1. 物語をデータとして作れること
    背景、登場人物、音声、セリフ、動きがテキスト台本として記述されます。アプリ本体を改造しなくても、新しい紙芝居を作れます。

  2. 身体参加型の表現ができること
    TMPoseによるポーズ認識を使い、参加者の動作を物語進行の条件にできます。見るだけの教材ではなく、身体を使って関わる教材になります。

  3. 授業やワークショップで展開しやすいこと
    テキスト編集、画像作成、音声選択、シーン設計、ポーズ設計を分担できます。国語、情報、総合学習、表現活動を横断できます。

主な機能

分類 機能
台本実行 kamishibai=3.1 の外部TXT、または再生用SB3／Web版へ組み込んだ同じ台本を実行する
再実行 前回読み込んだ台本をブラウザのlocalStorageから再生する
アセット管理 画像・音声をURLまたはSB3内から読み込んで利用する
用途別成果物 汎用SB3、編集用SB3、再生用SB3、Web版を用途に応じて使い分ける
表紙 表紙背景と表紙音声を指定する
シーン制御 --- で区切られたシーンを順番に実行する
背景制御 ステージ背景を台本から切り替える
アクター制御 登場人物の表示、非表示、移動、サイズ、スキンを制御する
テキスト表示 テキストアセットを画面に表示し、内容を台本から更新する
UI文言 ポーズ案内はscene 0で変更し、タイトル・エラー・メニューはアプリ側で日本語／英語を切り替える
アニメーション 複数の画像・音をループまたは一回だけ連続再生する
セリフ セリフ吹き出しと思考吹き出しを表示する
音声 待たずに鳴らす音と、終了まで待つ音を使い分ける
画面切り替え 明るさを使ったフェードアウト／フェードアップを行う
シーン分岐 シーンラベル、条件式、キー入力、タッチ入力で移動先を変える
状態管理 ランタイム変数へ値を設定し、条件分岐に利用する
ポーズ認識 TMPoseモデルを読み込み、指定ポーズの成功で物語を進める
読込表示 Loading用背景と画像を先に読み込み、通常アセットの進捗と切替画像を表示する
エラー表示 不正な台本を検出して通知する
リハーサル ポーズ、アクション、シーンをスキップするキー操作を持つ

典型的な利用シナリオ

授業での利用

教師または児童生徒が紙芝居台本を作成し、教室の大型画面で再生します。物語の節目で代表者が前に出てポーズを取り、全員で応援しながら物語を進めます。

適した活動:

  • 物語文の再構成
  • 昔話のリメイク
  • 地域紹介のデジタル紙芝居
  • 英語や日本語の発話練習
  • 情報科・プログラミング的思考の導入
  • 演劇的表現とICTの組み合わせ

ワークショップでの利用

参加者がグループに分かれて、短い物語、背景、登場人物、音、ポーズを設計します。最後に各グループが作品を発表します。

この形式では、プログラムを書き換える代わりに台本DSLを編集するため、プログラミング未経験者でも構造化されたデジタル表現に参加できます。

研究・教材開発での利用

身体動作を含むインタラクティブ教材、物語理解、共同創作、創作支援、STEAM教育などの題材として利用できます。台本がテキスト形式で残るため、作品分析や教材改善の履歴管理にも向いています。

仕組みの概要

このアプリは、以下のような構成で動作します。

紙芝居DSLファイル (.txt)
        ↓
外部TXTとして読み込む、または再生用SB3／Web版へ組み込む
        ↓
TurboWarp紙芝居アプリ／Web版
        ↓
アセット読込 URLまたはSB3内の画像・音声
        ↓
シーン実行 背景、登場人物、セリフ、音、移動
        ↓
必要に応じてTMPoseモデルを読込
        ↓
参加者のポーズ成功で次へ進む

アプリ側では、asset、setLoadingBackdrop、setLoadingCostume、setPoseRecognitionSound、actor、cover、setRuntimeVariable、registerBranch、sceneLabel、TMPoseURL、text、action といったコマンドを解釈します。シーンは --- で区切られ、通常は順番に、分岐が指定された場合は対応するラベルへ移動して実行されます。

setLoadingBackdropで指定した背景とsetLoadingCostumeで指定した画像アセットは、通常アセットより先に読み込まれます。その後、組み込みスプライトLoadingが通常アセットだけを対象とした完了数 / 総数を吹き出しに表示し、指定画像を読込番号に応じて循環表示します。背景未指定時は真っ黒な組み込み背景を使うため、タイトル画面を残しません。

用途別成果物のうち、genericは汎用の作成・再生用雛形、editorはアセット組み込み済み・台本外部読込の編集用SB3、playerは台本とアセットを組み込んだ再生用SB3です。Web版はplayerから生成します。

urashima.txt の位置づけ

公開中のurashima.txtは、浦島太郎を題材にしたサンプル台本です。浦島太郎の公開ページでは、Web版、再生用SB3、編集用SB3も利用できます。次の要素を含んでいるため、教材・デモ・テンプレートとして有用です。

特に、カメを助ける、カメに乗る、踊る、玉手箱を開ける、絶望する、といった身体動作が物語上の意味と結びついている点が重要です。

運用上の要件

項目 要件
実行環境 Web版、またはTurboWarpが動作するブラウザ
ネットワーク TMPoseのライブラリとモデルの取得に必要。汎用SB3では、台本が外部URLを参照する画像・音声の取得にも必要
カメラ ポーズ認識を使う場合は必要
照明 明るい場所を推奨
アセット管理 汎用SB3では公開URL、編集用・再生用SB3ではSB3内に配置すること
事前確認 発表前に必ず通し再生を行うこと

制作フロー

  1. 物語をシーンに分ける
  2. 各シーンの背景、登場人物、セリフ、音を決める
  3. 参加者に取ってほしいポーズを決める
  4. 必要な画像・音声・TMPoseモデルを用意する
  5. asset と actor を定義する
  6. 必要ならLoading用画像をsetLoadingCostumeで指定する
  7. シーンに sceneLabel を付け、シーンごとに action を書く
  8. 必要なら変数、条件分岐、キー・タッチ入力による遷移を加える
  9. アプリで読み込んで再生確認する
  10. 認識しにくいポーズや長すぎる待機時間、分岐先を調整する

教育的な意義

このアプリは、単なる再生ツールではなく、物語を構造化して設計する活動を支援します。

学習者は、物語を「シーン」「登場人物」「アクション」「条件」「反応」に分解します。これは、プログラミング的思考、メディア表現、物語理解、協働制作を自然に結びつけます。

また、ポーズ認識により、画面内の出来事と身体動作が結びつきます。これにより、受け身の鑑賞ではなく、参加型の発表や共同体験を作れます。

現時点での注意点

関連ドキュメント