dnjiro’s 9VAe blog

誰でもアニメが作れる無料ソフト9VAeきゅうべえ開発者のブログ

DXライブラリをつかって、Android版9VAeきゅうべえを作りはじめた

PEAS motch!がひと段落してきたので、9VAeきゅうべえアンドロイド版の作成を再開。

 

開発環境は、Visual Studio、DXライブラリ置き場にサンプルがあり、それをそのままビルドすると、ちゃんと動いたので、できそうな気がしてきた。

DXライブラリ置き場 HOME

 

DXライブラリは、構造がすごく簡単。イベントループは自分でもつようだ。タッチイベント(マウスイベント)は、マウスボタンの状態を取得して自分で作成する。

 

 

画面表示は、9VAeのデザイン画像から矩形転送で行う。画像は assets の中にいれる。

DXライブラリ置き場 Androidアプリ開発の注意点など

 

これで、以下のような画面表示ができるようになった。

あとは、少しずつ関数を増やしていくだけだ。アンドロイド版できそう。

f:id:dnjiro:20180226112654p:plain

 

PEAS motch!とビジュアルプログラミングとプログラミング学習

キッズプラザ大阪でのワークショップ用に、PEAS motch!を開発した。

このソフトは、小学校低学年や幼稚園の子供たちでも、楽しくコンピュータを使って創作活動ができるように、キッズプラザの担当者といっしょに作り上げたソフトだ。

 

このソフトがプログラミング学習の役に立つとよいと思い、このジャンルでどういう位置づけになるのか、調べていると、どうも、ビジュアルプログラミングと関係ありそうなことがわかってきた。

 

ビジュアルプログラミングは、スクラッチのようなブロックを組み立てるもののことをいうと思いがちだが、スクラッチはテキストをブロックで置き換えただけなので、テキスト言語に近い。ビジュアルプログラミングはもっと広い概念で、テキストでは考えられない自由な発想でプログラムを考えてみようというものらしい。

 

その代表が「ビスケット」で、これがつくられたときは、結構、いろんな研究があったらしい。ところが、ビスケット以外は下火になって、ブロック型言語ばっかりになってしまった。

 

ブロック型言語は、テキスト言語よりも覚えやすいので、プログラム学習に適している。ところが、小学校低学年や幼稚園児には、まだむずかしい。それで「アンプラグド」というコンピュータを使わない方法が提唱されている。

 

「アンプラグド」はもともとは、コンピュータに興味をもった人がコンピュータの中身を勉強するために考えられたもので、本来コンピュータをよく知らない人にコンピュータを教えるためのものではない。コンピュータを知らずに「アンプラグド」をやると、コンピュータとは思わず、単なるゲームで終わってしまうおそれがある。

 

この問題を解決するのに、ビジュアルプログラミングが役にたちそうだ。そういえば、過去、大ヒットした「インクレジブルマシン」もビジュアルプログラミングなのではないか。スクラッチのようなブロックではなくて、ねずみとか、チーズとか、風船とか、画面上にいろんなものがおいてあって、うまくその配置をかえると、ねずみはチーズに向かって走っていく、風船は上にのぼっていく、それをうまく組み合わせて課題を解決するというものだった。

 

PEAS motch! が、インクレジブルマシンなみのプログラム要素をもっているとは思えないが、それでも、絵を書く順番でアニメーションができる。太い白い線で絵を消すことができ、絵を消して、また描くといったことを繰り返せば、ものを動かしていくことができる。といった、いくつかのルールがあり、それを利用して、自分の考えたとおりのアニメーションを作る。といった学習ができる。これは、現在のレベルであり、今後、もっと楽しいプログラミング要素を付け加えていけるかもしれない。ちなみに、PEAS motch!には「すすんだメニュー」というのが背後に隠れており、そこにすすむと、ループ、サブルーチン、グラフを用いた動きの制御、再起呼び出しといったプログラム要素が使える。

 

ブロック型言語はだいぶ充実してきた。小学校高学年はこれでよいと思うので、これからは、ビジュアルプログラミングに力をいれて、低学年、幼稚園児でも創造活動ができるコンピュータアプリを開発し、アンプラグドをつかわなくてもすむ状況にしていく必要があるのではないだろうか。

 

ラズベリーパイ版 PEAS motch! 開発開始

ラズベリーパイ版 PEAS motch! の開発を始めることにした。

PEAS motch! は、9VAeきゅうべえをベースに開発しているので、ラズベリーパイ版もすぐできそうだ。

 

特長は、ラズベリーパイ用、480x320 ペンタッチディスプレイに収まること。

ラズベリーパイ色のかっこいい画面デザインがあがってきたので、そこに、9VAeきゅうべえの各機能をわりあてていく作業を行う。

キッズプラザ大阪「1コマアニメーションワークショップ」平日版、レポート

キッズプラザ大阪、コンピュータ工房で、1/25から3/31まで、「へ・ん・し・んアニメーション」というタイトルで、PEAS motch! を使った1コマアニメーションを作成するワークショップを行っている。土日祝日は、1回40分の入れ替え制で、平日は自由入場となっている。ここでは、ワークショップが始まった1週間後の平日の様子をレポートする。

ようこそキッズプラザ大阪へ 〜遊んで学べるこどものための博物館〜

 

1コマアニメーションとは

米国では、ホワイトボードアニメーションと呼ばれ、動画の注目度を高める手法として注目されている。

アメリカで爆発的な人気!ホワイトボードアニメーション5つの動画実例 | MOBERCIAL

 

1コマアニメーションでワークショップ機材を説明するとこんな感じ

f:id:dnjiro:20180204131629g:plain

ワークショップ時間、人数

  • 平日は自由入退出で行われている。参加者がばらばらくるので、全員まとめて説明することができず、操作方法を一人ずつ短い時間で説明できないとなりたたない。Scratchなどのワークショップでは子供一人にメンターひとりついてブロックの使い方などをサポートするが、指導者1名、ボランティアスタッフ1名では難しい。その点、PEAS motch!は、お絵かきソフトと同じなので、2分程度の説明で終わり、あとは各自が熱心に絵を描いていた。最初の名前、年齢、性別の入力は、ボランティアスタッフが手伝っていたが、そのあと手伝う場面はなかった。

    f:id:dnjiro:20180205012257g:plain

    PEAS motch!の使い方
  • 参加者は海外(主に中国)が多かった。午前中は子供7名、大人9名(子2+親2(海外) 、子2+親2(国内)、大人2(海外)、子1+親1(海外)、幼稚園2+親2(国内))
  • 午後は、子供25名、大人12名(子1+親2(海外 幼児)、子2(海外)、子1+親1(海外)、子2+親2(海外)、子2(海外)、子1+親1(海外)、子1+親1(国内)、子1(海外)、子1+親1(海外)、子1+親1(海外)、子1+親1(国内)、子1+親1(海外)、子1+親1(国内))
  • 制作時間は自由。30分程度続けていた人もおれば、10分程度で退出した人もいた。もう一度やりに来たリピーターが2組いた。

ワークショップ内容

  • 内容は、日曜日版レポートと同じ

    http://dnjiro.hatenablog.com/entry/2018/02/04/155245

  • 各自、ばらばらに作品が完成するので、その都度、共有サーバーに保存し、プロジェクタで上映していた。データの保存方法がすばらしかったが、その方法と作品上映方法については、日曜日版レポートにまとめた。

プログラミング学習観点での感想

  • まず幼稚園児が PEAS motch! をどう理解しているか観察。(1)自分がアニメーションを作成しており、前のプロジェクタで上映することはすぐ理解できる。(2)新しくページを作る機能をすぐマスターし、自分が何枚作っているか理解。自分の作品が保存ボタンの押し忘れで上映されない場合に不満を述べるなど、コンピュータを使ってアニメーション制作している感覚は持っている。
  • 画面にぐちゃぐちゃな線を引くだけでも、アニメーションになると驚きが感じられる。線を太くし、色を適宜変えると画面の変化が美しい。
  • 白い線でいったん描いた絵を消し、その上に新しい絵を描くようにすれば、1枚の絵でも絵の変化を表現できる。
  • リピータが2組いたのは、このワークショップが単に与えられたパズルを解くようなものではなく、自己表現を主体にしたもので、次はあれを試してみようといった、工夫ができる魅力があるからだろう。
  • 海外の人でも問題なく参加できていた。完成した作品をスマホで撮影して持ち帰っていた。これは作業が簡単で、かつ、魅力があることを示している。
  • 文部科学省の「小学校学習指導要領」にはプログラミング学習が「コンピュータに意図した処理を行わせるために必要な論理的思考力を身につけるための学習活動」とあるが、ブロック言語を覚えるのが難しい低学年には、このような方法が適しているのではないかと感じる。

キッズプラザ大阪「1コマアニメーションワークショップ」日曜日、レポート

キッズプラザ大阪、コンピュータ工房で、1/25から3/31まで、「へ・ん・し・んアニメーション」というタイトルで、PEAS motch! を使った1コマアニメーションを作成するワークショップを行っている。土日祝日は、1回40分の入れ替え制で、平日は自由入場となっている。ここでは、ワークショップが始まった日曜日の様子をレポートする。

ようこそキッズプラザ大阪へ 〜遊んで学べるこどものための博物館〜

 

1コマアニメーションとは

1コマアニメーションでワークショップの機材を説明すると

f:id:dnjiro:20180204131629g:plain

ワークショップ時間、人数

  • 1回40分、定員10名
    10:30~11:10/11:20~12:00/1:15~1:55/2:05~2:45/2:55~3:35
  • 指導員1名、ボランティアスタッフ1名
  • 参加者(1回目6名、2回目8名、3回目子供4名大人4名、4回目7名、5回目9名、幼稚園から小学校低学年)

ワークショップの内容

  1. 名前(ニックネーム  作品の区別に使用)、年齢、男女をソフトキーボードで入力。ペンタブレットの使い方の練習も兼ねている。ひらがな・英語キーボードが切り替えできる。英語キーボードに中国語の表記あり。(5分)
  2. ペンで自由に書く。色の替え方、太さの替え方を教える。(2分)

    f:id:dnjiro:20180205012257g:plain

    PEAS motch!の使い方
  3. 鉛筆ボタンを押せば、書いた順番にアニメになることを教える(3分)
  4. 練習制作(5分)
  5. みんなの作品を見てみよう(2分)。ペンタブレットのボタンに「上書き保存」が割り当ててあり、黄色いシールが張り付けられている。このボタンを押すとサーバー(教師用PC)にデータが保存される。保存されたフォルダを、プレーヤー「9View」にドラッグすれば、全員の作品が上映される。このアニメをみて、くすくすと笑いが起これば成功。
  6. 自由制作(15分)
  7. できた人から作品上映(残りの時間)

感想

  • 今回のワークショップでは、幼稚園児でも、絵を描く段階にすすむと、操作につまずく子供は一人もいなかった。昨年実施したアニメ制作ワークショップでは、図形選択や変形作業ができない子供たちが多く、ボランティアスタッフのサポートが必要だったが、今回はみな絵を描くのに熱中していた。
  • 自分の描いた絵が動くとなると、より楽しさが増す。完成したアニメーションを連続上映すると、静止画を順番に見るよりはるかに迫力がある。
  • 書き順アニメの線のスピードの自動生成について、単純な線はゆっくり動き、塗りつぶす線は高速に動くようになっており、テンポよいアニメーションができていた。ただ、点を打つ速さがはやすぎるように感じた。線の長さが0なので時間が0になっているようだ。

プログラミング学習との関係

  • プログラミング学習として利用するには、アニメーションの順番を考えて作成したストーリー性のある作品がでてくればよいと思ったが、実際にはどうだったか。1回目は絵を書いたら動いたのでおもしろかったといった程度でプログラミングとの関連はあまり見えなかった。2回目は、会場から大笑いがおこっていた。建物など、大きなものが順番にできあがっていき、最後におもしろい絵が描かれるというパターンが、笑いをさそうようであった。3回目は、みなストーリーのある作品を作っていた。年齢をたずねると小学校3年生とのこと。1コマの絵をつかって十分ストーリー性のあるアニメーションが作れることがわかった。4回目、5回目とも個性ある1コマアニメーションが作られていた。
  • 上の図面2枚「PEAS motch!」で作成した。Windowsペンタブレットで指入力した線を、あとからマウスで修正。おおまかな線入力は指でできるが、細かい修正はマウスが便利。この作業はプログラムのデバッグと同じでコンピュータを道具として使いこなす力を習得できる。アニメGIF出力して、レポートにはりつけたが、PowerPointの資料作成にも使えそうである。

 

データ保存と上映の仕組みがすばらしい

  • 今回、生徒全員のデータの保存、収集、上映の流れが非常にスムーズだった点は特筆に値する。データ保存は生徒がタブレットの黄色いボタンを押すだけである。このボタンに「Ctrl+S 上書き保存」が割り当てられており、それだけで生徒の作品が教師用PCのフォルダに振り分けられて自動的に保存されていた。従来こういった作業は、ファイル開くから、保存先フォルダを指定する操作が必要で、ボランティアスタッフのサポートが必要な場合が多いが、その操作が一切不要になっていた。
  • その仕組みを述べると、(1)生徒用PCの  PEAS motch! の設定ファイル setpath.ini に保存先(教師用PC共有サーバーのアドレス)が記入されている。
  • (2)setpath.ini ファイルには保存時刻によって、保存先フォルダ名が記入されており、この設定により、ワークショップごとに、別のフォルダにふりわけて保存される。
  • (3)最初に名前、年齢、男女の入力から初める。この段階でファイル名が作成される。そのため、あとは「上書き保存」だけでよい。
  • (4)生徒用PCの各プログラム「peasmotch.exe」は、「peasmotch-01.exe」「peasmotch-02.exe」...のようにリネームされている。このEXE名の後ろの番号が保存ファイル名の先頭につけられる。それによって、どのPCから保存されたものか、教師側でわかるようになっている。
  • 作業をはじめると、保存フォルダの中に「_とちゅう」という自動バックアップファイルができる。これは上書き保存すると削除されるので「_とちゅう」というファイルがある人は、まだ保存がすんでいないということがわかる。

再生プログラム「9view-full」

  • 「PEAS motch!」には、アニメを再生するプログラム「9view-full」が付属している。このプレーヤーに保存フォルダをドラッグするとその中のアニメをファイル名の順番に再生する。「_とちゅう」という自動バックアップファイルは読み飛ばす機能がついている。
  • 「9view-full」でアニメーションを再生中に、データを編集することができる。ペンタブレットの保存ボタンを適宜押すことによって、上映中の作品がどんどん更新されていく。

 

アプリ改善アイデア

  • コントロールパネルのボタンに「プレイ」「もどす」「アニメ」の説明があるとわかりやすいという意見があった。

キッズプラザ大阪の「書き順アニメ(1コマアニメーション)ワークショップ」

1月25日から、キッズプラザ大阪のコンピュータ工房で、幼稚園から小学校低学年向けに「書き順アニメ(1コマアニメーション)」を作るワークショップを行なっている。

ようこそキッズプラザ大阪へ 〜遊んで学べるこどものための博物館〜

 

 

使っているソフトは、「PEAS motsh!」という 9VAEきゅうべえを改良したソフトだ。

http://peasmotch.jpn.org

1週間たったので、その経過とプログラミング学習との関連について感想など紹介したい。

 

ワークショップの内容

  • 対象:4歳以上  
  • 機材:Windowsパソコン+ワコムペンタブレット 10セット
  • ソフト:「PEAS motch!」
  • 内容:書き順アニメーションを作る
  • f:id:dnjiro:20180129232140g:plain

  • 「PEAS motch!」は今回のワークショップ用に開発したソフトで、絵を描くだけで書き順アニメーションができる。

 

小学校低学年の子供達に教えることは相当難しい。

 

当初、アニメ作成方法を、1。絵を描く、2。アニメ作成ボタンを押す

の2ステップにした。アニメ作成ボタンだけで、誰でもできると考えた。ところが、複数ページ作成できるようにすると、各ページで、アニメ作成ボタンを押し忘れる子供達が続出した。

 

(対策)アニメ作成ボタンを押し忘れても、自動的にアニメになるようにした。

 

(教訓)

  • 小学校3年生ぐらいになると、最初の説明でちゃんと理解できるが、小学校1年生程度だと、ある作業に熱中すると、自分の知らなかったことは忘れてしまいがちである。
  • たった一つのボタンを覚えるのに時間がかかるという状態なら、ブロックを使ったプログラミング学習でも、相当手間がかかるのではと予想する。
  • 昨年9VAeを利用したワークショップでは、サンプルの顔を読み込むところから始めた。この場合、よくわからずに適当に操作していると、意識せずに顔の形を変形したり、移動したりすることになり、それが面白いので、繰り返しているうちに、仕組みがわかってくる、という手法を用いた。
  • 今回は、絵を描くことは問題ないが、「アニメ作成」ボタンは新しいことなので、何回も忘れてしまう。ソフト側で押し忘れに対処することにした。

 

絵の書き方と「書き順アニメ」の自動生成

  • 書き順アニメは、絵を描く順番が再生の順番になるという簡単なルールを子供達に与える。
  • このルールを利用すれば、ストーリーを持ったアニメを作ることができる。
  • 書いた順番に再生させるのは簡単に見えるが、どういうスピードで再生するかは結構調整が難しい。
  • 線の長さに対応した時間を割り当てるだけでは塗りつぶしを行なっている線に一番長い時間を割り当ててしまい、絵が止まったようになってしまう。

(対策)

  • 単なる線と、塗りつぶしの線は速度を変える必要がある。
  • このためには子供達描いたデータを集めて、速度調整ルールを開発する必要がある。今回キッズプラザ大阪の5日間の実施で、260個のデータが得られた。そのデータを元に時間割り当てプログラムを調整した。
  • f:id:dnjiro:20180129232542g:plain←調整前 

    f:id:dnjiro:20180129232750g:plain←調整後

(教訓)

  • 「書き順アニメ」は原理は単純だが、ノウハウが必要である。キッズプラザ大阪で実施しながら改良する手法は大変有意義である。

 

プログラミング学習との関係

  • 書き順アニメーションは、描く順番に物事が起こっていくので、言語もブロックも使わずに手順を記述することができる。
  • 描いた絵は後から自由に修正できる。絵がアニメを作成するプログラムであると考えれば、デバッグ作業を体験できる。「PEAS motch!」は、最も簡単なプログラミング開発環境と言える。
  • 「PEAS motch!」画面。白紙に絵を書き、鉛筆ボタンを押せば書き順アニメができる。左側の矢印をタッチすれば、選択モードになり、書いた線の属性(色、太さ、種類、形など・・)を変更できる(デバッグ作業)。

    f:id:dnjiro:20180203145418p:plain

 

 

 

 

9VAeは、ホワイトボードアニメーションが超簡単に作れるひとコマアニメ作成ツール

2018/1/25 からキッズプラザ大阪でワークショップをやることになった。

今回は、ワークショップ用に画面デザインを大幅に変更し、きれいで、わかりやすくした。できたソフトは、PEAS motch! という名前になった。

 

 

 

ワークショップの内容は「書き順アニメ」なのだが、もっと適当な言葉がないか探してみたところ「ホワイトボードアニメーション」という言葉が近いようだ

Whiteboard animation - Wikipedia

 

ホワイトボードアニメーションとは

  • ホワイトボードにイラストを書く様子を撮影し、早送り再生したもの

アメリカで専門の制作会社もあるらしい。

アメリカで爆発的な人気!ホワイトボードアニメーション5つの動画実例 | MOBERCIAL

 

 

日本ではまだ新しい言葉で、重要な点は、

  1. ホワイトボードアニメーションは、単純な動画よりも人を引き付ける効果が高い
  2. ホワイトボードアニメーションを使うと理解がより深まる

という効果が 心理学者によって確かめられている点だ。

  • 1つ1つの情報を順番に取り込める
  • イラストが小出しに現れるワクワク感がある
  • ストーリーがあって飽きない

といった要素が動画より人を引き付ける。

 

ホワイトボードアニメーションが簡単に作れるようになれば、急速に、広まっていくだろう。

 

 フリーソフトで簡単につくれるホワイトボードアニメーション=「ひとコマアニメーション」

f:id:dnjiro:20190821012305g:plain


 

PEAS motch! は、ホワイトボードアニメーションを簡単に作れる革命的なフリーソフトだ。2018年キッズプラザ大阪では、このアニメーションのことを「ひとコマアニメーション」と呼ぶことになった。

PEASmotch!

 

下のアニメは、夏休みに子供たちが 9VAeでつくったアニメーションだが、まさにホワイトボードアニメーションだ。この制作時間は1人5分以下で、リアルタイムで1本の動画に結合し、プロジェクタで上映した。

www.youtube.com

作り方はこちら

青少年のための科学の祭典で行った100名の連作アニメの作り方 - Qiita

 

キッズプラザ大阪では、PEAS motch! を使って、1/25から3/31までワークショップを行った。4歳から中学生、親の作品も含めて、合計3000本程度のひとコマアニメーションが制作された 

 

「ホワイトボードアニメーション」を作る4つの方法

1.ビデオ撮影し、動画編集する(今までの方法)

  • ホワイトボードにイラストを書いていき、ビデオで撮影
  • 動画ソフトで取り込み、早送り処理、不要な部分をカット
  • ナレーションを入れる。
  • 動画編集を行うので、性能の高いパソコンと大容量のハードディスクが必要。

 従来はこの方法で作っていた。動画編集を行うため、専門的な知識が必要で、制作時間もかかるが、質の高いアニメーションが作れる。

 

2.PEAS motch! で作る(新しい方法1)

 

 

f:id:dnjiro:20190326112925j:plain

PEAS motch!を使った1コマアニメーション制作コーナー:タブレット2台で作成したアニメをプロジェクタで上映

 

3.9VAeきゅうべえを使う(新しい方法2)

 

4.PicsArt を使う

  • PicsArt はスマホ用アプリ。絵を描く様子を記録する機能がある。
  • ペイントボタンから、上のカメラボタンをタッチしてから描画すると、書いた手順が記録される。iPhone/iPad用 PicsArt では、線がのびていく過程も記録される。
  • ペンの種類が豊富。
  • 一度記録すると、あとから修正することはできない。

 

 

キッズプラザ大阪に設置した「PEAS motch! one

f:id:dnjiro:20190821012907g:plain