0. この教材(きょうざい)体験(たいけん)会について

0.1 この教材(きょうざい)の一次配布(はいふ)

AI紙芝居(かみしばい)アプリおよびこの教材(きょうざい)は、久保(くぼ)裕也(ひろや)(千葉商科大学 総合(そうごう)政策(せいさく)学部 教授(きょうじゅ))による研究プロジェクトの成果(せいか)物です。 最新(さいしん)(ばん)を、https://kubohiroya.github.io/tmpose-kamishibai/配布(はいふ)します。 AI紙芝居(かみしばい)アプリも、ここから遊べます。

0.2 この体験(たいけん)会で学ぶこと

この体験(たいけん)会では、

といった技術(ぎじゅつ)を組み合わせて、

「AI技術(ぎじゅつ)応用(おうよう)して、紙芝居(かみしばい)の物語の中に参加(さんか)する仕組み」

を作ります。楽しんでください!

0.3 この体験(たいけん)会が想定する参加(さんか)

この体験(たいけん)会は、「小学生とその保護(ほご)者のペア」で参加(さんか)していただくことを想定しています。

なお、(ねん)のため、次のことを確認(かくにん)させてください。

わからないことがあっても、体験(たいけん)会を通じてスタッフがサポートしますので、安心してください。

1. はじめに

1.1 準備(じゅんび)

1.1.1 教室内の座席(ざせき)(すわ)るとき

受付(うけつけ)配布(はいふ)された名札(なふだ)には、[1] 〜 [15] の番号が書かれています。 あなたの番号は何番ですか? 下の図の中で、あなたの番号と同じ番号の「()()し」がついている座席(ざせき)(さが)してください。

教室内の座席配置図

教室内の、配置(はいち)図の丸(しるし) 黄色い丸印 黄色い丸印で指定された座席(ざせき)に、小学生と保護(ほご)者のペアで着席(ちゃくせき)してください。図の中の「()()し+番号」 番号入りの吹き出しと、自分の名札(なふだ)の番号が同じであることを確認(かくにん)してください。

  • 保護(ほご)者の方:「()()し+番号」 黄色い丸印 番号入りの吹き出しがついている(せき)(すわ)ってください(パソコンの画面の電源(でんげん)は「オフ」になっています)。

  • 小学生の方:「矢印(やじるし)黄色い丸印 右向きの矢印がついている(せき)(すわ)ってください(パソコンの画面の電源(でんげん)は「オン」になっています)。

小学生の方が(すわ)(せき)液晶(えきしょう)ディスプレイは、あらかじめ、 図中の「矢印(やじるし)」の方向に向けて設置(せっち)されています。 講師(こうし)からの指示(しじ)があるまで、そのままの方向にしておいてください。

座席に設置された液晶ディスプレイ

この体験(たいけん)会では、基本(きほん)(てき)に、小学生の方の(せき)のパソコン・液晶(えきしょう)ディスプレイ・カメラを、小学生の方と保護(ほご)者の方のペアで使用していただきます。 保護(ほご)者の方の(せき)のパソコンは、トラブルが発生した場合の予備(よび)として、必要(ひつよう)なときだけ使用します。

1.1.2 配布(はいふ)資料(しりょう)

親子ペアごとに、次のような資料(しりょう)一式が(つくえ)の上に()かれていることを確認(かくにん)してください。

  • 教材(きょうざい):AIを使って「紙芝居(かみしばい)の物語に参加(さんか)する仕組み」を作ろう!
  • A4メモ用紙(白紙)× 4(まい)
  • そのほか

1.1.3 カメラを使用するとき

液晶(えきしょう)ディスプレイの上に、カメラが()せられています。

液晶ディスプレイ上部に設置されたカメラ

この体験(たいけん)会の途中(とちゅう)で、講師(こうし)から「カメラを使用してください」と指示(しじ)される場合があります。 そのときには、小学生の方の(せき)液晶(えきしょう)ディスプレイを、台座(だいざ)から回転させて、 図中の「矢印(やじるし)右向きの矢印の方向に向けてください。 この液晶(えきしょう)ディスプレイは、台座(だいざ)の円形部分が回転するので、簡単(かんたん)に向きを()えられます。 また必要(ひつよう)(おう)じて、液晶(えきしょう)ディスプレイの上の カメラの向きや角度を()調整してください。

液晶ディスプレイを撮影方向へ回転させる様子

図中の「矢印(やじるし)」は、それぞれの撮影(さつえい)方向がなるべく交差(こうさ)しないように、基本(きほん)(てき)には中央から外側(そとがわ)へ向けて放射状(ほうしゃじょう)配置(はいち)されています。 10番と11番の(せき)については、教室中央に立てられた緑色背景(はいけい)スタンドに向けて配置(はいち)されています。

体験(たいけん)会に参加(さんか)している他の人が、カメラの撮影(さつえい)内容(ないよう)(うつ)()まないように、カメラの向きや録画(ろくが)のタイミングについて、親子ペア同士(どうし)で声を()()い、お(たが)いに配慮(はいりょ)しながら取り組んでください。

1.1.4 ポーズを取るとき

画面上部に「ポーズをとろう」という表示(ひょうじ)が出た場合には、 親子ペアの一方((れい):小学生)は、物語のキャラクターのポーズに合わせて、カメラの前でポーズを取ってください。 親子ペアのもう一方((れい)保護(ほご)者)は、必要(ひつよう)(おう)じてパソコンを操作(そうさ)してください。

ポーズを取るときには、周囲(しゅうい)の人や物にぶつからないようにし、足元にも注意して転ばないようにしてください。

1.1.5 カメラの使用を終了(しゅうりょう)するとき

この体験(たいけん)会の途中(とちゅう)で、講師(こうし)から「カメラの使用を終了(しゅうりょう)してください」 と指示(しじ)される場合があります。 そのときには、液晶(えきしょう)ディスプレイが通常(つうじょう)の向きになるように回転させて、 椅子(いす)(すわ)って画面を見て操作(そうさ)をしやすいようにしてください。

1.2 「参加(さんか)(がた)」AI紙芝居(かみしばい)をプレイしてみよう

参加(さんか)(がた)」AI紙芝居(かみしばい)アプリを、「浦島太郎(うらしまたろう)」の物語を()()んだ状態(じょうたい)で開きましょう。

https://kubohiroya.github.io/tmpose-kamishibai-samples/stories/urashima/web/

浦島太郎のサンプルを開くリンク

このURLは、パソコンでもスマートフォンでも開けるようになっていますが、 この体験(たいけん)会では、教室内のパソコンを使いましょう。

次のような画面が開いたことを確認(かくにん)したら、画面をマウスでクリックしてください。

AI紙芝居アプリのタイトル画面

物語のシーンの進行に(おう)じて、カメラがオンになり、ポーズを取るように指示(しじ)される場合があります。 そのときには、親子で交代しながらカメラの前に立ち、 物語のキャラクターのポーズに合わせてカメラの前でポーズを取ってください。

⭐️ このときにカメラが撮影する映像は、ポーズの識別のためだけに用いられるため、パソコン上にもネットワーク上にも、どこにも保存されません。

カメラの前でポーズを取ってAI紙芝居を進める様子

正しいポーズを取ると、左上の「ポーズ認識(にんしき)」のバーが「100」に近づきます。 正しいポーズをそのまま(つづ)けていると、右上の「チャージ」のバーが()えていきます。 「チャージ」が「100」になったら成功(せいこう)となり、物語が次に進みます。

1.3 「参加(さんか)(がた)」AI紙芝居(かみしばい)を作ろう

このAI紙芝居(かみしばい)アプリは、さまざまな物語を作って、()()んで、遊べるようになっています。 いま遊んでもらったアプリは、「浦島太郎(うらしまたろう)」でした。 この台本では、浦島太郎(うらしまたろう)竜宮城(りゅうぐうじょう)到着(とうちゃく)したときに、 あなたが浦島太郎(うらしまたろう)になってダンスをするようになっていましたね。

この体験(たいけん)会では、物語の台本を()()えるなどして、あなたが乙姫(おとひめ)様になってダンスをする内容(ないよう)()えてみましょう。 これから、乙姫(おとひめ)様にどんなダンスポーズをさせるかを考え、(ぼう)人間の絵を(えが)き、それをもとに乙姫(おとひめ)様の絵をAIに(えが)かせてみます。 さらに、ダンスポーズを認識(にんしき)できるようにAIをトレーニングします。 最後(さいご)に、紙芝居(かみしばい)の台本を更新(こうしん)し、AIによる成果(せいか)物をとりまとめて、作品全体を遊べるようにします。

1.4 この作品は、どんな技術(ぎじゅつ)でできているの?

AI紙芝居を構成する技術の説明図

このページも生成(せいせい)AI(ChatGPT Pro GPT-5.5)を活用して作成(さくせい)しました。AIは教材(きょうざい)づくりにも役立ちます。

2. AIに乙姫(おとひめ)様を(えが)いてもらおう

それではさっそく、乙姫(おとひめ)様にどのようなダンスを(おど)らせたいかを考えましょう。 あなたは、どんな乙姫(おとひめ)様にどんなダンスを(おど)らせたいですか? あなた自身は、どんなダンスをしたいですか?

2.1 ダンスのポーズを考えて(ぼう)人間の絵で下書きする

そのダンスの「決めポーズ」を、最低(さいてい)2つ、最大(さいだい)4つ、親子で考えてください。

2.1.1 手書きで(ぼう)人間の絵を(えが)

親子で相談・分担(ぶんたん)しながら、その「決めポーズ」の絵を、「(ぼう)人間」として(えが)いてください。

  • それぞれのポーズの絵を、配布(はいふ)されているメモ用紙に筆記用具を用いて(えが)いてください。
  • 細部をリアルに(えが)必要(ひつよう)はありません。また、絵の上手下手は関係(かんけい)ありません。
  • 大事なことは、上半身の大きな動きがわかるように(えが)くことです。
  • 下半身は認識(にんしき)しにくいため、下半身だけが(こと)なるポーズにはしないでください。
  • うまく(えが)けなかったら、(べつ)の紙に()(なお)しをしてもかまいません。
  • 最低(さいてい)2つ、最大(さいだい)4つの「(ぼう)人間」を(えが)けたら、次の作業に進みます。

(ぼう)人間」の絵を(えが)くときには、たとえば次のような感じに(えが)けば大丈夫(だいじょうぶ)です。

棒人間で描いた決めポーズの例

2.2 パソコンで(ぼう)人間の絵を(えが)

2.2.1 「配布(はいふ)資料(しりょう)」フォルダを開く

パソコンのデスクトップに、この体験(たいけん)会の「配布(はいふ)資料(しりょう)」として、 「20260801」(今日の日付(ひづけ):2026年8月1日)という名前のフォルダのアイコンが配置(はいち)されています。 これから、このフォルダを「配布(はいふ)資料(しりょう)」フォルダと()ぶことにします。

このアイコンをダブルクリックすると、その内容(ないよう)表示(ひょうじ)されます。 体験(たいけん)会で主に使う、次の4つのフォルダがあります。

配布資料フォルダ内の体験会で主に使う4つのフォルダ

フォルダ名 内容(ないよう)説明(せつめい)
drafts 白紙の画像(がぞう)が4つ入っています。アプリで編集(へんしゅう)して「(ぼう)人間」の画像(がぞう)として保存(ほぞん)します。これらは、生成(せいせい)AIで画像(がぞう)生成(せいせい)するときの素材(そざい)として使います。
generated 体験(たいけん)会の開始時には、何も入っていません。体験(たいけん)会を通じて生成(せいせい)AIで作成(さくせい)した画像(がぞう)保存(ほぞん)します。
generated-samples 乙姫(おとひめ)様のダンスポーズのサンプル画像(がぞう)があらかじめ入っています。体験(たいけん)会中に生成(せいせい)AIがうまく動作しない場合に使います。
master 浦島太郎(うらしまたろう)乙姫(おとひめ)様の立ち絵の画像(がぞう)です。これらは、生成(せいせい)AIで画像(がぞう)生成(せいせい)するときの素材(そざい)として使います。

フォルダの中を表示(ひょうじ)するときには、用途(ようと)(おう)じて、表示(ひょうじ)のしかたを(えら)べます。 フォルダ画面上部のツールバーの「表示(ひょうじ)」ボタンをクリックすると、 「特大(とくだい)アイコン」「大アイコン」「中アイコン」「小アイコン」「一覧(いちらん)」「詳細(しょうさい)」などから フォルダの内容(ないよう)表示(ひょうじ)方法(ほうほう)()()えができます。 ここでは「中アイコン」と「詳細(しょうさい)」の2つを(ため)して、表示(ひょうじ)方法(ほうほう)()()えられるように練習してください。

エクスプローラーの表示メニュー

2.2.2 「drafts」フォルダを開く

配布(はいふ)資料(しりょう)」フォルダ内の、「drafts」フォルダをダブルクリックして、その内容(ないよう)表示(ひょうじ)してください。 「pose1.png」「pose2.png」「pose3.png」「pose4.png」という4つのファイルが(なら)んでいます。 これらを「(ぼう)人間記入用ファイル」として用いることとします。

draftsフォルダ内の4つの画像ファイル

2.2.3 「ペイント」アプリで開いて「(ぼう)人間」の絵を(えが)

「drafts」フォルダの中の、(ぼう)人間記入用ファイルのうち、「pose1.png」のファイルの上で「右クリック」し、 表示(ひょうじ)されたメニューの中から「ペイントで編集(へんしゅう)する」をクリックする、あるいは「プログラムから開く」を選択(せんたく)して「ペイント」をクリックしてください。

画像ファイルをペイントで編集するメニュー

「ペイント」アプリが起動し、この「pose1.png」ファイルが()()まれます。

「pose1.png」は、編集(へんしゅう)前は白紙です。 ここに、さきほどメモ用紙に(えが)いておいた「(ぼう)人間」の絵を、白黒の簡単(かんたん)な絵で(えが)いてください。

  • 右下の虫眼鏡(むしめがね)の+/-アイコン:キャンバスを拡大(かくだい)縮小(しゅくしょう)できる。
  • 「ブラシ」アイコンと「消しゴム」アイコン:線を(えが)いたり消したりできる。
  • 画面左端(ひだりはし)のスライドコントローラー:ブラシや消しゴムの太さを()える。

ペイントで棒人間を描く画面

2.2.4 (ぼう)人間の絵を保存(ほぞん)する

(ぼう)人間の絵が(えが)けたら、画面上部のツールバーにある保存(ほぞん)アイコン(フロッピーディスクのアイコン)をクリックしてください。 これにより、この画面で(えが)いた内容(ないよう)が「pose1.png」ファイルに保存(ほぞん)されます。

ペイントの保存アイコン

2.2.5 (ぼう)人間の絵をもっと(えが)

上記の手順(てじゅん)を、「drafts」フォルダ内の「pose2.png」に対しても実施(じっし)し、2(まい)目の(ぼう)人間の絵を(えが)いて保存(ほぞん)してください。 親子で交代しながら(えが)くことをお(すす)めします。

3つ以上(いじょう)のポーズを作る場合は、「pose3.png」「pose4.png」に対しても同じ操作(そうさ)を行い、必要(ひつよう)な数だけ(ぼう)人間の画像(がぞう)(えが)いて保存(ほぞん)してください。

2.3 生成(せいせい)AIでポーズの絵を(えが)

ここからは、乙姫(おとひめ)様がダンスのポーズをする絵を(えが)きましょう。 そのために、ここでは「生成(せいせい)AI」と()ばれる技術(ぎじゅつ)を用いて、 素材(そざい)となる画像(がぞう)と文章による指示(しじ)(あた)え、目的(もくてき)とする画像(がぞう)生成(せいせい)します。

2.3.1 生成(せいせい)AIの画面を開く

この体験(たいけん)会では、生成(せいせい)AIの一(しゅ)であるMicrosoftの「M365 Copilot」を使うこととします。

  • M365 Copilotは、Microsoftの「Word」「Excel」「PowerPoint」などのアプリの中で使えるAI機能(きのう)ですが、 ここでは、WebブラウザのEdgeを使って、M365 Copilotの画面を開きます。
  • M365 Copilotは、Microsoftのアカウントでサインインして使う必要(ひつよう)がありますが、 この体験(たいけん)会では、あらかじめサインイン()みの状態(じょうたい)のEdgeのタブを用意しています。
  • M365 Copilotは、利用(りよう)対象(たいしょう)年齢(ねんれい)が13(さい)以上(いじょう)となっているため、小学生が使うことは(みと)められていません。 この体験(たいけん)会では、M365 Copilotの操作(そうさ)は、保護(ほご)者の方が行ってください。

Windows画面の一番下の中央付近(ふきん)に、次のようなアイコンが表示(ひょうじ)されています。これは、Webページを表示(ひょうじ)操作(そうさ)するアプリ「Edge」を起動するためのアイコンです。

Microsoft Edgeのアイコン

このEdgeのアイコンをクリックして、Edgeのアプリを開きます。

この体験(たいけん)会では、M365 Copilotにサインイン()みのEdgeを事前に用意しています。 Edgeのアプリ内で、次の図のような「チャット | M365 Copilot」のタブを選択(せんたく)してください。

画面中央に「こんにちは。何かお手伝(てつだ)いできることはありますか?」と表示(ひょうじ)されていることを確認(かくにん)してください。

EdgeでM365 Copilotのタブを選ぶ画面

M365 Copilotのチャット画面

2.3.2 立ち絵の画像(がぞう)をアップロードする

M365 Copilotの画面中央に、「Copilotにメッセージを送信(そうしん)する」という入力(らん)表示(ひょうじ)されていることを確認(かくにん)してください。 入力(らん)上の「+」ボタンをクリック、「画像(がぞう)とファイルのアップロード」をクリックすることで、 画像(がぞう)ファイルをCopilotにアップロードできます。

Copilotの画像とファイルのアップロードメニュー

配布(はいふ)資料(しりょう)の「master」フォルダ(立ち絵画(ぞう)フォルダ)から、乙姫(おとひめ)様の立ち絵の画像(がぞう)選択(せんたく)し、Copilotにアップロードしてください。

masterフォルダからPrincess.pngを選ぶ画面 乙姫様の立ち絵

※この乙姫(おとひめ)様の画像(がぞう)生成(せいせい)AI「ChatGPT Pro GPT-5.5」および「M365 Copilot」で作成(さくせい)しています。

2.3.3 (ぼう)人間の画像(がぞう)をアップロードする

ふたたび入力(らん)上の「+」ボタンをクリック、「画像(がぞう)とファイルのアップロード」をクリックすることで、 画像(がぞう)ファイルをもう一(まい)Copilotにアップロードできます。 「drafts」フォルダに(えが)いた(ぼう)人間画像(がぞう)のうち、いずれか1(まい)選択(せんたく)し、アップロードしてください。

draftsフォルダ内の棒人間画像 アップロードする棒人間画像の例

2.3.4 生成(せいせい)AIで立ち絵をポーズに()える

2つの画像(がぞう)ファイルがアップロードされていることを確認(かくにん)してください。 その上で、生成(せいせい)AIにしてもらいたい作業を日本語の文章にして、入力(らん)()()みます。 この体験(たいけん)会では、手順(てじゅん)簡単(かんたん)にするため、以下(いか)の「プロンプト(れい)」の文面をコピーして、入力(らん)()()けてください。

プロンプト(れい)

添付した2つの画像のうち、立ち絵の画像「Princess」を、棒人間の画像「pose」で示したポーズに変えて
描き直した画像を作成してください。画像の背景は、#00FF00 の緑一色で塗りつぶしてください。

Copilotにプロンプトを入力した画面

画面右下の「→」ボタンをクリックして、数分間待ってください。 次のように作業結果(けっか)表示(ひょうじ)されます。

Copilotが生成した乙姫様のポーズ画像

うまく動かないとき

生成(せいせい)AIは、混雑(こんざつ)やサービスの不具合(ふぐあい)で動かないことがあります。

その場合は、スタッフが(べつ)方法(ほうほう)準備(じゅんび)()みの画像(がぞう)案内(あんない)します。

失敗(しっぱい)ではありませんので、すぐにスタッフを()んでください。

2.3.5 立ち絵の背景(はいけい)透明(とうめい)にする

生成(せいせい)された画像(がぞう)背景(はいけい)は、緑色で()りつぶされています。これを、背景(はいけい)透明(とうめい)画像(がぞう)変換(へんかん)しましょう。 生成(せいせい)された画像(がぞう)をクリックすると、その右側(みぎがわ)画像(がぞう)編集(へんしゅう)画面が表示(ひょうじ)されます。

Copilotの画像編集画面

この画像(がぞう)編集(へんしゅう)画面の上部の「背景(はいけい)」ボタンをクリックすると、次のように「削除(さくじょ)」「()りつぶす」ボタンが表示(ひょうじ)されます。 ここでは、「削除(さくじょ)」ボタンを()しましょう。

画像編集画面の背景削除ボタン

しばらく待つと、緑色だった背景(はいけい)が、白と灰色(はいいろ)のチェック模様(もよう)背景(はいけい)変化(へんか)します。

背景が透明になった乙姫様の画像

2.3.6 立ち絵をポーズに()えたものをダウンロードする

画面右上の「保存(ほぞん)してコピー」ボタンをクリックしてください。

画像編集画面の保存してコピーのボタン

「名前をつけて保存(ほぞん)」というメニューが表示(ひょうじ)されるので、その中から「PNG」をクリックしてください。

これにより、ポーズを()え、背景(はいけい)透明(とうめい)にした乙姫(おとひめ)様の画像(がぞう)が、 「ダウンロード」フォルダの中に、 「Designer.png」または「Designer(数字).png」というようなファイル名の画像(がぞう)ファイルとして保存(ほぞん)されます。 「Designer(数字).png」の数字部分は、状況(じょうきょう)によって(こと)なる()になります。

2.3.7 ポーズ画像(がぞう)ファイルをもっと作成(さくせい)する

ポーズ画像(がぞう)ファイルが作成(さくせい)できたことを確認(かくにん)したら、「2.3.2 立ち絵の画像(がぞう)をアップロードする」(ふし)(もど)り、 あらかじめ計画していた、作成(さくせい)したいポーズの数だけ、作業を()(かえ)し行ってください。

次のポーズからは、「プロンプト(れい)」の文面に、 「右目をウインクして」「口を大きく開けて(わら)った表情(ひょうじょう)で」「両手でピースサインを出して」など、 細かい指定をする文を(くわ)えてみることにも、チャレンジしましょう。

2.4 ポーズ画像(がぞう)ファイルを配置(はいち)する

前の(ふし)は、親子ペアのうち保護(ほご)者に作業をしてもらいましたので、この(ふし)では、親子ペアのうち小学生に作業をしてもらいます。

2.4.1 ポーズ画像(がぞう)ファイルのファイル名を変更(へんこう)する

必要(ひつよう)な数だけポーズを作成(さくせい)したら、「ダウンロード」フォルダの中を確認(かくにん)してみましょう。 デスクトップの一番下の中央付近(ふきん)に、次のようなアイコンが表示(ひょうじ)されています。 これはフォルダやファイルを表示(ひょうじ)したり操作(そうさ)したりする「エクスプローラー」というアプリを 起動するためのものです (さきほど、デスクトップから「配布(はいふ)資料(しりょう)」フォルダをクリックしてもらったときなどにも、 この「エクスプローラー」が起動して使われていました)。

エクスプローラーのアイコン

この「エクスプローラー」のアイコンをクリックしてください。 「エクスプローラー」の画面左に表示(ひょうじ)されたフォルダの中から「ダウンロード」をクリックしてください。

エクスプローラーでダウンロードフォルダを選ぶ画面

生成(せいせい)されたポーズ画像(がぞう)ファイルが保存(ほぞん)されている様子が確認(かくにん)できます。

ダウンロードフォルダ内の生成画像

これらのファイルのひとつ((れい):Designer(31).png)を右クリックして、表示(ひょうじ)されるメニュー下端(かたん)にある「名前の変更(へんこう)」アイコン (下図参照(さんしょう))をクリックしてください。

画像ファイルの右クリックメニュー 名前の変更アイコン

すると、アイコンの下に、ファイル名を入力できる状態(じょうたい)になります。

このポーズが「1番目」であるならば、ファイル名を「p1.png」のように入力して、Enterキーを()すと、 ファイル名が変更(へんこう)されます。

変更前の画像ファイル名 p1.pngに変更した画像ファイル名

作成(さくせい)したポーズの順番(じゅんばん)(おう)じて、さらに「p2.png」「p3.png」「p4.png」というように、 それぞれのファイルがポーズの番号を(しめ)したファイル名となるように変更(へんこう)してください。

⚠️ 注意

ファイル名は半角英数字で、「p1.png」のように設定してください。「.png」という拡張子は必ず残してください。拡張子が消えると、画像ファイルとして認識されなくなります。

これで、このポーズ画像(がぞう)に「正しい名前」をつけることができました。

2.4.2 ポーズ画像(がぞう)ファイルを移動(いどう)させる

ファイル名を()け直した「p1.png」「p2.png」「p3.png」「p4.png」 のようなファイルは、 「ダウンロード」フォルダのような一時(てき)()()所ではなく、 配布(はいふ)資料(しりょう)フォルダの中の「generated」へと移動(いどう)させましょう。

  1. 「ダウンロード」フォルダを開いた画面を、デスクトップの左のほうに()きます。
  2. 配布(はいふ)資料(しりょう)フォルダの中の「generated」フォルダ(生成(せいせい)画像(がぞう)フォルダ)を開いて、デスクトップの右の方に()きます。
  3. 「ダウンロード」のフォルダから、「generated」のフォルダへ、ファイルをドラッグ&ドロップして移動(いどう)させてください。この作業を、作成(さくせい)するポーズの数だけ()(かえ)してください(ファイルの複数(ふくすう)選択(せんたく)のやり方がわかるのならば、一度に複数(ふくすう)のファイルをドラッグ&ドロップで移動(いどう)させてもよいです)。

これにより、「generated」フォルダ内は次のようになります。

generatedフォルダに移動したポーズ画像

「p3.png」や「p4.png」を作成(さくせい)している場合には、 これらのファイルも同様に「generated」フォルダ内に移動(いどう)させてください。

3. ポーズ画像(がぞう)登録(とうろく)しよう

この章も、親子ペアのうち小学生に作業をしてもらいます。 ここでは、Scratchの拡張(かくちょう)(ばん)である「TurboWarp」を使って、作成(さくせい)したポーズ画像(がぞう)登録(とうろく)していきます。

3.1 TurboWarpでの作業を開始する

WebブラウザEdgeで、TurboWarpの編集(へんしゅう)画面として、次のリンクを開いてください。

https://turbowarp.org/editor

TurboWarpのエディター画面

3.2 TurboWarpでAI紙芝居(かみしばい)アプリのプロジェクトを開く

画面左上の「ファイル」→「コンピュータから()()む」をクリックして、配布(はいふ)資料(しりょう)フォルダ内の「stories」→「my-urashima」フォルダにある「my-urashima.sb3」を開きます。

TurboWarpのコンピュータから読み込むメニュー

拡張(かくちょう)機能(きのう)セキュリティ」として、 「Asset Manager」「TMPose」「Text Lines」「Runtime Expression」「Async Input」(順番(じゅんばん)変化(へんか)することがあります) についての許可(きょか)(もと)める画面が連続(れんぞく)して計5回開きます。

これらの画面それぞれで次のような操作(そうさ)をしてください。

  1. 「サンドボックスなしで実行する」にチェックを()けてください(チェック()みの場合があります)。
  2. 許可(きょか)」ボタンをクリックしてください。

TurboWarpの拡張機能セキュリティ画面

⚠️ 注意

「サンドボックスなしで実行する」にチェックを付けずに「許可」を押した場合は、ブラウザを再読み込みしてやり直してください。

3.3 ポーズ画像(がぞう)をコスチュームとして登録(とうろく)する

画面右のスプライト一覧(いちらん)画面から、「Princess」を選択(せんたく)してください。

TurboWarpのスプライト一覧でPrincessを選ぶ画面

「Princess」を選択(せんたく)した後に、次に、画面左上の「コスチューム」を(えら)んでください。

TurboWarpのコスチュームタブ

次に、配布(はいふ)資料(しりょう)フォルダの「generated」フォルダ内に、2.3.9で整理して移動(いどう)しておいた画像(がぞう)があります。これらを既存(きそん)コスチューム「1 Princess 360x360」の下へドラッグ&ドロップして()()んでください。

Princessのコスチュームとして登録されたp1とp2

ドラッグ&ドロップ操作(そうさ)をうまく設定(せってい)できたか確認(かくにん)しましょう。2番目以降(いこう)に、「p1」「p2」(作成(さくせい)した場合は、さらに「p3」「p4」)の画像(がぞう)表示(ひょうじ)されているのが確認(かくにん)できればOKです。

背景(はいけい)が緑色の画像(がぞう)表示(ひょうじ)されているようならば、ドラッグ&ドロップしたファイルを間違(まちが)えていますので、間違(まちが)えたファイルの右上の丸(しるし)のゴミ箱ボタンをクリックして削除(さくじょ)してから、やり直してください。

3.4 (えが)いた絵を確認(かくにん)する

「Princess」のスプライトの「コスチューム」として()()まれているものをクリックすると、その絵が、TurboWarp画面上で拡大(かくだい)表示(ひょうじ)されるので、確認(かくにん)してください。

あなたの(えが)いた乙姫(おとひめ)様を、このタイミングで、近くの(せき)の人たちとお(たが)いに見せ合いましょう。

3.5 TurboWarpプロジェクトを保存(ほぞん)する

TurboWarp画面上部の「ファイル」メニューから「my-urashima.sb3に保存(ほぞん)する」をクリックして、現在(げんざい)までの編集(へんしゅう)内容(ないよう)をファイルに保存(ほぞん)してください。

TurboWarpのプロジェクト保存メニュー

4. 休憩(きゅうけい)しよう

休憩を案内するイラスト

トイレに行っておきましょう。

水分補給(ほきゅう)をしましょう。

うまくいかないこと、わからないことがあれば、講師(こうし)の先生やスタッフの人に質問(しつもん)をしましょう。

5. ポーズを認識(にんしき)するしくみを作ろう

ここからは、AIにポーズを(おぼ)えてもらいましょう。Googleが提供(ていきょう)しているWebサービス「Teachable Machine」を使います。

Teachable MachineのWebサイトを開きましょう。これが、どのような仕組みで動作しているのか、どのように利用(りよう)するのかを学ぶことができます。

https://teachablemachine.withgoogle.com/

Teachable Machineのトップページ

5.1 Teachable Machineの「ポーズ」プロジェクトを開く

WebブラウザEdgeで、次のリンクから、Teachable Machineの「ポーズ」の画面を開いてください。 https://teachablemachine.withgoogle.com/train/pose

初回(しょかい)アクセス時には画面最下(さいか)部に「OK, got it」が表示(ひょうじ)されるので、クリックしてください。 また「1. サンプルを収集(しゅうしゅう)する」の青(わく)での説明(せつめい)表示(ひょうじ)されるので、右上にある「✖️」をクリックして()じてください。

Teachable Machineのポーズプロジェクト画面

5.2 クラスを用意する

AIに、複数(ふくすう)のポーズを区別(くべつ)して(おぼ)えてもらうために、それぞれのポーズを表すための「クラス」というものを作成(さくせい)してください。 この体験(たいけん)会では、「クラス」とは、具体(てき)な一つの「ポーズ」のことだと考えることにしましょう。

まずは、クラスのラベルとして「Class 1」と書かれているものを、ポーズ名「p1」に修正(しゅうせい)してください。

Class 1という初期ラベル p1に変更したラベル

同様に、「Class 2」と書かれているものを「p2」に修正(しゅうせい)してください。

さらに、3つ以上(いじょう)のポーズを認識(にんしき)させたい場合には、画面下部の「+ クラスを追加(ついか)」をクリックしてクラスを追加(ついか)してください。 それぞれのラベルを「p3」「p4」に変更(へんこう)してください。

p1からp4までのクラスを設定した画面

⚠️注意

これらのラベルは半角英数字で、「p1」のように設定してください。

5.3 ポーズを撮影(さつえい)する

これから、カメラの前でポーズを取って、AIにポーズを(おぼ)えてもらうための画像(がぞう)撮影(さつえい)しましょう。

5.3.1 ポーズを(えら)んでその画像(がぞう)表示(ひょうじ)する

  • 先ほど作成(さくせい)した「(ぼう)人間の下書き」のメモ用紙と、デスクトップの配布(はいふ)資料(しりょう)フォルダの「generated」フォルダの中の「ポーズ画像(がぞう)」を確認(かくにん)しながら、どのようなポーズを取るのかを、親子で確認(かくにん)してください。
  • そのうちひとつのポーズを(えら)び、そのポーズ画像(がぞう)の名前が「p1」「p2」「p3」「p4」のうち、どの名前なのかを確認(かくにん)してください。
  • その「ポーズ画像(がぞう)」のアイコンをダブルクリックして表示(ひょうじ)してください。
  • そのポーズ画像(がぞう)表示(ひょうじ)ウィンドウが画面の右側(みぎがわ)配置(はいち)されるようにしてください。 タイトルバーの「□」部分にマウスを重ねると、ウィンドウのレイアウトと位置(いち)選択(せんたく)できます。

タイトルバー部分での最大化の操作画面 ポーズ画像を右側に配置する操作画面

5.3.2 作業用にデスクトップを整える

  • Teachable Machineを表示(ひょうじ)しているEdgeのウィンドウを画面の左側(ひだりがわ)配置(はいち)してください。
  • デスクトップの左側(ひだりがわ)に「Teachable Machine画面」が表示(ひょうじ)され、右側(みぎがわ)に「ポーズ画像(がぞう)」が配置(はいち)されたことを確認(かくにん)してください。

ポーズ画像を左側に配置する操作画面

左にTeachable Machine、右にポーズ画像を配置した画面

5.3.3 ポーズの撮影(さつえい)準備(じゅんび)する

  • 「5.3.1 ポーズを(えら)んでその画像(がぞう)表示(ひょうじ)する」(ふし)(えら)んだものと同じ名前のクラスを(えら)んでください((れい):「p1」)。
  • そのクラスの「ウェブカメラ」ボタンを()してください。「Webcam」という小(まど)に、カメラのプレビュー中の映像(えいぞう)表示(ひょうじ)されるのを確認(かくにん)してください。
  • 初回(しょかい)は、Edgeがカメラ利用(りよう)許可(きょか)(もと)めてくるので「許可(きょか)」ボタンをクリックしてください。

Teachable Machineでウェブカメラを選ぶ画面

許可(きょか)」の操作(そうさ)がうまくできなかった場合には、Edgeでこの画面を開き直し((さい)()()み)をしてください。 「許可(きょか)」ができた場合には、次のように、カメラのプレビュー映像(えいぞう)表示(ひょうじ)されます。

Teachable Machineのウェブカメラプレビュー

5.3.4 ポーズのサンプル画像(がぞう)撮影(さつえい)する

1つのポーズごとに、5〜10(まい)の「サンプル」画像(がぞう)撮影(さつえい)していきます。 まずは、実際(じっさい)にやってみましょう。

  • 液晶(えきしょう)ディスプレイとカメラを「1.1.1 教室内の座席(ざせき)(すわ)るとき」(ふし)の図における「矢印(やじるし)」の方向に回転させてください。
  • 小学生の方は、(せき)を立ってウェブカメラの前に移動(いどう)し、ポーズを取ってください。
  • プレビュー画像(がぞう)の中では、ポーズを取っている人の姿勢(しせい)をAIが認識(にんしき)した(さい)に、「ボーン((ほね))」と()ばれる線が表示(ひょうじ)されます。 ボーンは人体を簡略(かんりゃく)化した関節(かんせつ)のおおまかな位置(いち)を表す「丸」と(ほね)を表す「線」で構成(こうせい)されます。
  • 姿勢(しせい)が正しく認識(にんしき)されなかった箇所(かしょ)については、ボーンの「丸」や「線」の表示(ひょうじ)が消えてしまっています。

Teachable Machineのボーン表示

  • 保護(ほご)者の方は、(1) ポーズ画像(がぞう)とカメラのプレビュー映像(えいぞう)とが同じ姿勢(しせい)になっていること、(2) ボーンの「丸」や「線」が画像(がぞう)と重ね合わされて正しく表示(ひょうじ)されていることが、同時に達成(たっせい)されている瞬間(しゅんかん)を見計らって、声かけ・アドバイスをしながら「長押(なげし)しして録画(ろくが)」ボタンを()し、「サンプル」の撮影(さつえい)をしてください。
  • 撮影(さつえい)されたポーズの姿勢(しせい)(くず)れてしまっていたり、その(さい)にボーンが認識(にんしき)されていなかったりしたサンプル画像(がぞう)は、削除(さくじょ)してください。削除(さくじょ)するには、サンプル画像(がぞう)上にマウスを重ねたときに表示(ひょうじ)される「ゴミ箱」ボタンを()してください。
  • 1つのポーズごとに、微妙(びみょう)姿勢(しせい)()えながら、5〜10(まい)撮影(さつえい)して画像(がぞう)を用意してください。
  • 他の親子が画像(がぞう)に写り()んでしまった場合には、その画像(がぞう)削除(さくじょ)してください。

撮影したポーズのサンプル画像

Teachable Machineを用いて、 ポーズごとに整理された形で「サンプル」画像(がぞう)撮影(さつえい)して保存(ほぞん)することを、 「サンプルの収集(しゅうしゅう)」と()びます。 サンプルを収集(しゅうしゅう)したものをもとに、あるクラスにどんな共通(きょうつう)特徴(とくちょう)があるのか、 他のクラスとはどのような特徴(とくちょう)(ちが)いがあるのかについて、AIを「学習」させます。 このような「学習」を、ここでは「トレーニング」と()んでいます。 そうして、AIがいろいろなものを識別(しきべつ)できるように「トレーニング」した内容(ないよう)のことを、AIの「モデル」と()びます。 この「モデル」を用いることで、AIは、いろいろなポーズを識別(しきべつ)できるようになります。

「トレーニング」をするときに、1つのポーズについてのサンプル画像(がぞう)が少ない場合には、 (おぼ)える材料(ざいりょう)不足(ふそく)しているため、性能(せいのう)()いモデルが作れません。 サンプルの画像(がぞう)が、同じような画像(がぞう)ばかりでも、枚数(まいすう)()やせたことにはなりません。 (ぎゃく)に、画像(がぞう)枚数(まいすう)が多すぎると、トレーニングに時間がかかってしまいます。

どのようなサンプルを収集(しゅうしゅう)すれば、性能(せいのう)のよい「モデル」の「トレーニング」ができるでしょうか? よりよい「学習」ができるでしょうか? 工夫(くふう)しながら取り組んでください。

すべてのポーズについてサンプルの収集(しゅうしゅう)を終えたら、次の「5.4 モデルをトレーニングする」(ふし)に進んでください。

5.4 モデルをトレーニングする

サンプルを収集(しゅうしゅう)したものをもとに、AIにポーズを識別(しきべつ)できるように「トレーニング」させましょう。

画面中央付近(ふきん)の「モデルをトレーニングする」のボタンをクリックし、しばらく待ってください(数分間かかる場合があります)。

モデルをトレーニングするボタン モデルのトレーニング中の画面

5.5 モデルを確認(かくにん)する

トレーニングが完了(かんりょう)したら、AIによるポーズの識別(しきべつ)がうまく動作するかどうかを確認(かくにん)しましょう。

小学生の方は、(せき)を立ってウェブカメラの前に移動(いどう)し、ポーズを取ってください。 「プレビュー」をクリックすると、カメラが起動し、撮影(さつえい)された人物のポーズに(おう)じて、 トレーニング()みのAIが、どのポーズを認識(にんしき)したかを、(ぼう)グラフの長さで表示(ひょうじ)します。 (ぼう)グラフの長さが長いほど、AIがそのポーズを認識(にんしき)していることを意味します。

カメラの前で、わかりにくいポーズや、まぎらわしいポーズを取った場合には、AIが間違(まちが)って認識(にんしき)することがあります。 また、もともとのポーズ画像(がぞう)段階(だんかい)で、ポーズが区別(くべつ)しにくいものであった可能(かのう)(せい)もあります。 うまく認識(にんしき)できていない場合には「5.3 ポーズを撮影(さつえい)する」(ふし)(もど)ってやり直してください。

トレーニングしたモデルを確認するプレビュー画面

モデルのトレーニングはうまくいきましたか? あとで、ポーズの(さい)撮影(さつえい)やポーズの追加(ついか)がしたくなったときのために、 プロジェクトを保存(ほぞん)しておくことができます。

画面左上(たん)のTeachable Machineのタイトルの左側(ひだりがわ)にある「三」のアイコンをクリックして 表示(ひょうじ)されるメニューの中程(なかほど)の「プロジェクトをファイルとしてダウンロード」をクリックしてください。

Teachable Machineのプロジェクトダウンロードメニュー

ダウンロードしたファイルは「ダウンロード」フォルダに「project.tm」という名前で保存(ほぞん)されているので、 配布(はいふ)資料(しりょう)フォルダの中の「tmpose」フォルダに移動(いどう)させておいてください。

このメニューの「ファイルからプロジェクトを開く」をクリックして、保存(ほぞん)しておいた「project.tm」ファイルを選択(せんたく)することで、 必要(ひつよう)な場合に、TeachableMachineでの作業を再開(さいかい)することができます。

5.6 モデルをクラウドにエクスポートする

次は、トレニーニングされたモデルを、AI紙芝居(かみしばい)アプリで使えるようにしましょう。 ここでは、モデルをクラウドにエクスポートして共有(きょうゆう)可能(かのう)にします。

モデルをエクスポートするボタン

モデルのアップロード設定画面

それまで、「共有(きょうゆう)可能(かのう)なリンク:」(らん)には、灰色(はいいろ)の文字で[...]というようなダミーのリンク文字列が表示(ひょうじ)されていましたが、アップロードが完了(かんりょう)すると、ここに、あなたのモデルのリンクが表示(ひょうじ)されます。 次の図のように、緑色の文字で「✔️ クラウドモデルは最新(さいしん)です」という表示(ひょうじ)が出たら、共有(きょうゆう)可能(かのう)なリンクの作成(さくせい)完了(かんりょう)です。

モデルのアップロード完了画面

⚠️注意

  • 保存したプロジェクトの中には、AIのトレーニングに用いるためのものとして撮影したサンプル画像が含まれています。サンプル画像には、個人情報などが含まれる場合がありますので、取り扱いには十分に注意してください。
  • エクスポートしたモデルは、サンプル画像の特徴だけを抽出したものとなっており、ここからサンプル画像を復元することはできません。そのため、エクスポートしたモデルを共有しても、サンプル画像に含まれている個人情報などが漏れることはありません。

6. 台本ファイルの修正(しゅうせい)をしよう

参加(さんか)(がた)」AI紙芝居(かみしばい)アプリは、 物語を記述(きじゅつ)した「台本ファイル」をもとに動作します。 ここでは、台本ファイルの修正(しゅうせい)方法(ほうほう)について説明(せつめい)します。

6.1 台本ファイルの編集(へんしゅう)を開始する

配布(はいふ)資料(しりょう)フォルダ内の「stories」→「my-urashima」フォルダにある、紙芝居(かみしばい)の台本ファイル「my-urashima.txt」 のアイコンの上で「右クリック」し、 表示(ひょうじ)されたメニューの中から「メモ帳で編集(へんしゅう)する」をクリックする、あるいは「プログラムから開く」を選択(せんたく)して「メモ帳」をクリックしてください。

メモ帳で開いたmy-urashima.txt

台本ファイルの中では、行ごとに、台本を構成(こうせい)するさまざまな設定(せってい)記述(きじゅつ)されています。

行の1文字目に記号「#」がつけられていると、その行の設定(せってい)無効(むこう)になります。

my-urashima.txtファイルでは、さまざまな状況(じょうきょう)対応(たいおう)した設定(せってい)候補(こうほ)を、行の1文字目に記号「#」をつけて、あらかじめ無効(むこう)にした状態(じょうたい)(なら)べています。

my-urashima.txtファイルを修正(しゅうせい)する(さい)には、有効(ゆうこう)にしたい設定(せってい)行の1文字目にある「#」を削除(さくじょ)することで、設定(せってい)をカスタマイズできます。

行が「---」という内容(ないよう)の場合は、物語のシーンの区切りを表しています。最初(さいしょ)の「---」より前では、物語のすべてのシーンで共通(きょうつう)して利用(りよう)する「アセット」などを設定(せってい)します。

6.2 モデルのURLを設定(せってい)する

AI紙芝居(かみしばい)アプリでは、それぞれのシーンで、カメラ画像(がぞう)から身体のポーズを認識(にんしき)して、 それに(おう)じて物語を進めるという仕組みをつくることができます。 そのためには、5章で行ったように、事前にカメラの画像(がぞう)でポーズを撮影(さつえい)し、 Teachable Machineを使って、これを識別(しきべつ)するためのAIモデルをトレーニングし、 その成果(せいか)物であるモデルをクラウドにエクスポートして共有(きょうゆう)可能(かのう)にしたものを使います。

ここでは、シーン3「竜宮城(りゅうぐうじょう)到着(とうちゃく)」のモデルのURLを修正(しゅうせい)します。 my-urashima.txt内の「# scene 3」という行を(さが)し、その直下の「TMPoseURL=」で始まる行を見てください。 この台本では、もともとは、浦島太郎(うらしまたろう)がダンスをするポーズを認識(にんしき)するモデルのURLが設定(せってい)されています。

---
# scene 3
TMPoseURL=https://teachablemachine.withgoogle.com/models/…

それでは、これを、あなたが作った乙姫(おとひめ)様のダンスのポーズを認識(にんしき)するように修正(しゅうせい)しましょう。 先ほどまでの流れでは、5.6(せつ)でリンクをコピーした状態(じょうたい)となっているはずなので、 「TMPoseURL=」より後ろの部分にコピーした内容(ないよう)()()け、既存(きそん)内容(ないよう)を 次のように()()えてください。

---
# scene 3
TMPoseURL=https://teachablemachine.withgoogle.com/models/あなたのモデルのURLの末尾部分

確認

間違った内容を貼り付けていないか、「=」などの記号を消していないかを確認してください。

6.3 アセットを設定(せってい)する

ここでいう「アセット」とは、このAI紙芝居(かみしばい)アプリにおける、背景(はいけい)画像(がぞう)、コスチューム画像(がぞう)効果(こうか)音、BGMなどの素材(そざい)総称(そうしょう)です。 アセットを設定(せってい)する行は「asset=」で始めます。カンマ区切りの1つ目の()がアセット名、2つ目の()がアセットのアドレスを表します。

my-urashima.txtファイルでは、「Princess」という名前のScratchスプライトにあるコスチュームを、アセットとして設定(せってい)しています。

ここでは、「asset=p1,costume:Princess」という設定(せってい)について説明(せつめい)します。

asset=p1,costume:Princess

設定(せってい)行の部分 意味
asset= この行で「アセット」を設定(せってい)することを宣言(せんげん)する
p1 アセット名は「p1」であることを表します。
, 区切り文字「,」はアセット名には(ふく)むことができないルールとしており、アセット名の終端(しゅうたん)を表します。
costume: アセットのアクセス先は「costume:」であることを表します。
Princess コスチュームを(さが)(さい)には「Princess」という名前のスプライトの中から、アセット名(p1)と同じ名前のコスチュームを(さが)します。

それではここで、あなたが作成(さくせい)した乙姫(おとひめ)様の画像(がぞう)をアセットとして設定(せってい)しましょう。

アセットの設定(せってい)有効(ゆうこう)にするには、対象(たいしょう)行の行頭にある「#」を削除(さくじょ)します。これにより、「Princess」というスプライトから、アセット名と同じ名前のコスチューム画像(がぞう)登録(とうろく)できます。

確認

必要な行だけ、行頭の「#」を削除(さくじょ)してください。

#asset=p1,costume:Princess
#asset=p2,costume:Princess
#asset=p3,costume:Princess
#asset=p4,costume:Princess

以下(いか)の6.3.1、6.3.2、6.3.3(せつ)は、場合ごとの設定(せってい)内容(ないよう)(しめ)したものです。このうち、いずれか1つの形で設定(せってい)してください。

6.3.1 ポーズ2つを作成(さくせい)した場合の設定(せってい)

「p1」をアセット名として、Princessというスプライト名の「p1」という名前のコスチューム画像(がぞう)登録(とうろく)します。

「p2」をアセット名として、Princessというスプライト名の「p2」という名前のコスチューム画像(がぞう)登録(とうろく)します。

asset=p1,costume:Princess
asset=p2,costume:Princess
#asset=p3,costume:Princess
#asset=p4,costume:Princess

6.3.2 ポーズ3つを作成(さくせい)した場合の設定(せってい)

「p1」をアセット名として、Princessというスプライト名の「p1」という名前のコスチューム画像(がぞう)登録(とうろく)します。

「p2」をアセット名として、Princessというスプライト名の「p2」という名前のコスチューム画像(がぞう)登録(とうろく)します。

「p3」をアセット名として、Princessというスプライト名の「p3」という名前のコスチューム画像(がぞう)登録(とうろく)します。

asset=p1,costume:Princess
asset=p2,costume:Princess
asset=p3,costume:Princess
#asset=p4,costume:Princess

6.3.3 ポーズ4つを作成(さくせい)した場合の設定(せってい)

「p1」をアセット名として、Princessというスプライト名の「p1」という名前のコスチューム画像(がぞう)登録(とうろく)します。

「p2」をアセット名として、Princessというスプライト名の「p2」という名前のコスチューム画像(がぞう)登録(とうろく)します。

「p3」をアセット名として、Princessというスプライト名の「p3」という名前のコスチューム画像(がぞう)登録(とうろく)します。

「p4」をアセット名として、Princessというスプライト名の「p4」という名前のコスチューム画像(がぞう)登録(とうろく)します。

asset=p1,costume:Princess
asset=p2,costume:Princess
asset=p3,costume:Princess
asset=p4,costume:Princess

6.4 アクターのポーズを設定(せってい)する

ここでいう「アクター」とは、このAI紙芝居(かみしばい)表示(ひょうじ)されるキャラクターの()()です。「浦島太郎(うらしまたろう)」「(かめ)」「乙姫(おとひめ)様」などのすべてのキャラクターが「アクター」です。このAI紙芝居(かみしばい)アプリでは、Scratchの標準(ひょうじゅん)(てき)な用語・概念(がいねん)であるスプライトを直接(ちょくせつ)使わず、「Actor」という英語(えいご)名の特殊(とくしゅ)なスプライトをクローン(複製(ふくせい))し、スプライト変数(へんすう)「アクター名」で名前をつけて管理(かんり)しています。

アクターは「アクション」を実行できます。台本ファイルの中で、行頭が「action=アクター名:」で始まる設定(せってい)を「アクターアクション」と()びます。

ここでは、「Princess」という名前のアクターに「pose」というアクションをさせる設定(せってい)(れい)を見てみましょう。

action=Princess:pose:p1,p2,p1,p2:p1,p2,p1,p2:Drum Funky,Drum Funky,Drum Funky,...

設定(せってい)行の部分 意味
action= この行は「アクション」を設定(せってい)するものであることを宣言(せんげん)します
Princess: この行はアクター名「Princess」の「アクターアクション」であることを宣言(せんげん)します
pose: この行はアクターアクション「pose」を設定(せってい)することを宣言(せんげん)します
p1,p2,p1,p2 スキンのアセット名をカンマ区切りで列挙(れっきょ)します。この(れい)では「p1」「p2」「p1」「p2」の(じゅん)に、アクターの見た目を変化(へんか)させます
p1,p2,p1,p2 Teachable Machineのポーズのクラス名(ポーズ名)をカンマ区切りで列挙(れっきょ)します。この(れい)ではp1,p2,p1,p2の順番(じゅんばん)でポーズを認識(にんしき)されます
Drum Funky,Drum Funky,Drum Funky,Drum Funk 効果(こうか)音のアセット名をカンマ区切りで列挙(れっきょ)します。この(れい)では「Drum Funky」「Drum Funky」「Drum Funky」「Drum Funky」の順番(じゅんばん)効果(こうか)音が鳴らされます

それでは、my-urashima.txtファイル内に(なら)ぶ3つの「#action=Princess:pose:」行のうち、設定(せってい)有効(ゆうこう)にしたい行の行頭にある「#」を削除(さくじょ)してください。

確認

必要な行だけ、行頭の「#」を削除(さくじょ)してください。

#action=Princess:pose:p1,p2,p1,p2:p1,p2,p1,p2:Drum Funky,Drum Funky,Drum Funky,...
#action=Princess:pose:p1,p2,p3,p1,p2,p3:p1,p2,p3,p1,p2,p3:Drum Funky,Drum Funky,...
#action=Princess:pose:p1,p2,p3,p4,p1,p2,p3,p4:p1,p2,p3,p4,p1,p2,p3,p4:Drum...

以下(いか)の6.4.1、6.4.2、6.4.3(せつ)は、場合ごとの設定(せってい)内容(ないよう)(しめ)したものです。このうち、いずれか1つの形で設定(せってい)してください。

6.4.1 ポーズ2つを作成(さくせい)した場合の設定(せってい)

3行のうち1行目、アセット名部分に「p1」「p2」が書かれている行の行頭の#記号を削除(さくじょ)してください。ここでは、p1,p2のポーズ2つが2回()(かえ)されます。

action=Princess:pose:p1,p2,p1,p2:p1,p2,p1,p2:Drum Funky,Drum Funky,Drum Funky,...
#action=Princess:pose:p1,p2,p3,p1,p2,p3:p1,p2,p3,p1,p2,p3:Drum Funky,Drum Funky,...
#action=Princess:pose:p1,p2,p3,p4,p1,p2,p3,p4:p1,p2,p3,p4,p1,p2,p3,p4:Drum...

6.4.2 ポーズ3つを作成(さくせい)した場合の設定(せってい)

3行のうち2行目、アセット名部分に「p1」「p2」「p3」が書かれている行の行頭の#記号を削除(さくじょ)してください。ここでは、p1,p2,p3のポーズ3つが2回()(かえ)されます。

#action=Princess:pose:p1,p2,p1,p2:p1,p2,p1,p2:Drum Funky,Drum Funky,Drum Funky,...
action=Princess:pose:p1,p2,p3,p1,p2,p3:p1,p2,p3,p1,p2,p3:Drum Funky,Drum Funky,...
#action=Princess:pose:p1,p2,p3,p4,p1,p2,p3,p4:p1,p2,p3,p4,p1,p2,p3,p4:Drum...

6.4.3 ポーズ4つを作成(さくせい)した場合の設定(せってい)

3行のうち3行目、アセット名部分に「p1」「p2」「p3」「p4」が書かれている行の行頭の#記号を削除(さくじょ)してください。ここでは、p1,p2,p3,p4のポーズ4つが2回()(かえ)されます。

#action=Princess:pose:p1,p2,p1,p2:p1,p2,p1,p2:Drum Funky,Drum Funky,Drum Funky,...
#action=Princess:pose:p1,p2,p3,p1,p2,p3:p1,p2,p3,p1,p2,p3:Drum Funky,Drum Funky,...
action=Princess:pose:p1,p2,p3,p4,p1,p2,p3,p4:p1,p2,p3,p4,p1,p2,p3,p4:Drum...

6.5 台本ファイルを保存(ほぞん)する

メモ帳のメニューから「ファイル」→「保存(ほぞん)」を実行し、my-urashima.txtファイルを保存(ほぞん)してください。

メモ帳の保存メニュー

6.6 動作に必要(ひつよう)なファイルを確認(かくにん)する

  1. WebブラウザEdgeを用いて、TurboWarpのエディターで、my-urashima.sb3ファイルが開かれていることを確認(かくにん)してください。
  2. 配布(はいふ)資料(しりょう)フォルダ内の「stories」→「my-urashima」フォルダにある、紙芝居(かみしばい)の台本ファイル「my-urashima.txt」を()()えて存在(そんざい)したことを確認(かくにん)してください。

6.7 台本ファイルはプログラムだということを理解(りかい)する

もし余裕(よゆう)があれば、この my-urashima.txt ファイルがどのような内容(ないよう)になっているか、 今回編集(へんしゅう)をした前後の部分などを(くわ)しく調べてみてください。 こうした台本ファイルが、物語の流れに沿()って、そのシーンごとの内容(ないよう)制御(せいぎょ)する「プログラム」になっていることが読み取れるでしょう。 この「参加(さんか)(がた)」AI紙芝居(かみしばい)アプリは、いろいろな台本ファイルを開くことで、そこに書かれたさまざまな物語を実行することができる、いわば「プログラム実行環境(かんきょう)」なのです。

7. 動作確認(かくにん)しよう

ここまでで、AI紙芝居(かみしばい)アプリの動作に必要(ひつよう)なファイルの準備(じゅんび)が整いました。実際(じっさい)にAI紙芝居(かみしばい)アプリが正しく動作するかどうかを確認(かくにん)しましょう。

7.1 緑色の(はた)()して開始する

  1. WebブラウザEdgeで、TurboWarpのエディターを開いているタブを表示(ひょうじ)してください。もし()じてしまっている場合には、もういちど開いてください。
  2. このTurboWarpにおいて、my-urashima.sb3ファイルが開かれた状態(じょうたい)であることを確認(かくにん)してください。
  3. 画面右上の、緑色の(はた)()して、この「参加(さんか)(がた)」AI紙芝居(かみしばい)アプリを実行してください。
  4. 画面右上の「フルスクリーン」ボタン フルスクリーンボタン()すと、全画面表示(ひょうじ)でアプリを実行できます。

AI紙芝居アプリのタイトル画面

7.2 台本ファイルを開く

  1. AI紙芝居(かみしばい)アプリの実行が開始されたら、タイトル画面をクリックして次へ進んでください。
  2. カメラの利用(りよう)許可(きょか)(もと)められた場合には「許可(きょか)」をクリックしてください。
  3. 「ファイルをひらく」をクリックするとファイル選択(せんたく)画面が開きます。
  4. 配布(はいふ)資料(しりょう)フォルダ内の「stories」→「my-urashima」フォルダにある、紙芝居(かみしばい)の台本ファイル「my-urashima.txt」を選択(せんたく)して()()んでください。
  5. 物語がスタートします。

7.3 早送りする

「スペースキー」や「右矢印(やじるし)キー」を()すと、物語を早送りできます。 物語を「シーン3:竜宮城(りゅうぐうじょう)到着(とうちゃく)」まで進めてください。

7.4 ポーズを認識(にんしき)させて物語を進める

ダンスのポーズに反応(はんのう)して乙姫(おとひめ)様を(おど)らせることができるかどうかを確認(かくにん)してください。

7.5 物語の実行を停止(ていし)再開(さいかい)する

緑色の(はた)右側(みぎがわ)にある黄色い(たて)(ぼう)2本は「一時停止(ていし)」ボタンです。その右側(みぎがわ)にある赤い丸が「停止(ていし)」ボタンです。 「停止(ていし)」ボタンを()すと、アプリの実行が停止(ていし)します。最初(さいしょ)からやり直すためには、緑色の(はた)()してください。

8. まとめ

8.1 みんなでプレイしよう

近くの(せき)(すわ)っている親子と交流して、それぞれが作った乙姫(おとひめ)様のポーズでのダンスをプレイしてみてください。 どんなポーズを作ったのか、どんな動きになったのか、ぜひお(たが)いに見せ合ってください。

親子でAI紙芝居をプレイする様子

8.2 今日の体験(たいけん)会でみなさんが達成(たっせい)したこと

今日の体験(たいけん)会を通じて、みなさんは次のことを達成(たっせい)しました。

□ AIに絵を(えが)いてもらった

□ AIにポーズを(おぼ)えさせた

□ 物語の台本(プログラム)を()()えた

□ 自分だけの「参加(さんか)(がた)」AI紙芝居(かみしばい)完成(かんせい)させた

8.3 この体験(たいけん)会に参加(さんか)してくれたみなさんへ

この体験(たいけん)会に参加(さんか)してくれたみなさんは、 AIと人間が力を合わせて人を楽しませる作品をつくっていけるという未来(みらい)が、 もう今ここまで来ているということを、感じたのではないでしょうか。

AIは日々(ひび)急激(きゅうげき)に進化をしています。 これからも新しい技術(ぎじゅつ)がどんどん登場してきます。 AIを使いこなすためには、みなさん自身が、AIの進化に合わせて、学び(つづ)ける必要(ひつよう)があります。

ちなみに、この「参加(さんか)(がた)」AI紙芝居(かみしばい)アプリには、本当は、もっと多くの機能(きのう)があります。 今日の体験(たいけん)会で()れてもらったのは、そのうちの、ほんの一部だけなのです。 もしよかったら、家に帰ってからも、いろいろな機能(きのう)(ため)してみてください。

そして、あなた自身で、新しい物語の台本ファイルを作り、それを他の人に(わた)して、あなたの物語に人々(ひとびと)を「参加(さんか)」してもらってみてください。

これからの、みなさんのチャレンジを、心から応援(おうえん)したいと思います。

8.4 お帰りになる前に

8.4.1 作成(さくせい)したファイルのお持ち帰り

今日の体験(たいけん)会で作成(さくせい)したファイルは、デスクトップの配布(はいふ)資料(しりょう)フォルダ「20260801」にまとめられています。 USBメモリを持参(じさん)されている場合は、このフォルダごとコピーしてお持ち帰りください。

8.4.2 教室を出るとき

パソコンの中身やパソコンの周囲(しゅうい)は、スタッフが片付(かたづ)けますので、そのままでOKです。

(わす)れものがないか、(つくえ)の上や下をよく確認(かくにん)してから、お帰りください。

8.5 アンケートのお(ねが)

今日の体験(たいけん)会について、アンケートにご協力(きょうりょく)ください。

保護(ほご)者アンケート

https://forms.gle/XsFyFndZs4wAreGe6

保護者アンケート

小学生用アンケート

https://forms.gle/TDjzfb7tgDKVdYnG6

小学生用アンケート