dnjiro’s 9VAe blog

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

9VAeきゅうべえ Ver.0.6 はアニメーションの文字を差替えできるようになる

きゅうべえVer.0.6 をつくっている。

DXライブラリとか、Webアニメコンテストとか、いろいろやって、なかなかすすまないが、とりあえず、Ver.0.6 が出せそうだ。

 

次の目玉は、

  • 検索機能
  • 再生中の文字の差し替え

だ。この2つは関係があって、これを組み合わせて、チュートリアルアニメーションのフランス語バージョンができるようにする。

 

今、9VAeきゅうべえはフランス人ボランティアの努力によって、プログラムがフランス語化されている。ところが、ソフトの操作方法を説明したチュートリアルアニメーションがフランス語されていない。

 

これをフランス語にするためには、アニメーションと文字を分離する必要がある。プログラムは、テキスト文字がリソースに分離されているため、その部分だけ対訳をつくればよい。それと同じことがアニメーションでもできるようにする。

 

ドラマの字幕の差し替えのようなものだが、9VAeきゅうべえのチュートリアルアニメは、ボタン操作ができる対話的なアニメーションなので、もっと複雑だ。

 

これを実現するためには、チュートリアルアニメーションに含まれる文字列を検索し、タグに置き換え、対訳リストと結び付けなければならない。そういった作業が完成し、リリースに近づいている。

 

検索はアニメキャストの中まで検索できるので、かなり便利である。

 

キッズプラザ大阪「1コマアニメーション」カリキュラム

 キッズプラザ大阪・コンピュータ工房で、フリーソフト PEAS motch! を使ったワークショップが 2018/1/25-4/8 にかけて行われました。

PEASmotch!

 

キッズプラザ大阪では、1枚の絵を描くだけ作れるコンピュータアニメーションを「1コマアニメーション」と呼びます。

 

1コマアニメーションは

  • 1コマ絵を描くだけで作ることができます。

    f:id:dnjiro:20180330122316g:plain

    キッズプラザ大阪の指導員が作成した1コマアニメーション
  • 4歳児から作れるコンピュータアニメーションです。
  • 動くので、何を描いても楽しいです。ほかの人に見せたくなります。
  • 時間の経過、ものごとの順番、論理展開などを、静止画よりわかりやすく表現できます。
  • 米国ではホワイトボードアニメションと呼ばれ、理解度を高める動画の手法として注目されています。

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

  • 写真やテキスト文字も入れられます。

 

1コマアニメーションは、絵を書きうつすだけでも楽しいです。自分で書くと理解が深まるので、様々な学習用途で使えます。

  • 正しい書き順で書けるようになる(国語)
  • 実験の手順、反応の進み方、自然現象の説明(理科)
  • なぜこの事件がおこったのか、背景の説明(社会)
  • 主人公の気持ちの変化(国語)
  • 筆算のやり方、三角形の面積の求め方(算数)
  • プログラムの流れ図、データの受け渡しの説明(プログラミング学習)
  • 黒板に書けることはすべて1コマアニメーションにできます。
  • 学習したことを1コマアニメーションにまとめていけば、楽しく勉強できるでしょう。

 

1コマアニメーションワークショップのカリキュラム

キッズプラザ大阪で行われたワークショップカリキュラムを紹介します。操作が単純なので、4歳児からできます。

 

1.作品情報入力(2分)省略してもよい

ソフトキーボードをタッチして、下の名前を入力します。複数のパソコンを使用する場合、PEAS motch!のプログラム名に、peasmtch-01 のようにパソコン番号を追加しておけば、作品名の先頭と最後に、パソコン番号、年齢、性別が追加されます。

  • 下の名前、年齢、性別の入力(2分)

 

2.操作説明(10分)

  • サンプルの絵をかき、鉛筆ボタンを押してアニメにして見せる。何を書いてもよいが、よく知っているキャラクタだと興味を引く。(1分)
  • 線の種類、太さ、色の切り替えを教える(下図参照)(2分)
  • 最初のページは練習用にして、自由に描かせる。(3分)
  • まわりを囲んで消す「消しゴム」、作業を取り消す「戻す」を教える。(1分)
  • 消しゴムの練習、いろんなボタンを試させる。(2分)
  • 「新しいページ」を作る方法を教える(1分)

f:id:dnjiro:20180404142249g:plain

  • 戻すは作業自体が取り消され、何も残らないため、最初は、消しゴムを使うほうがよいでしょう。
  • 消しゴムを使えば、絵の内容が変わっていくアニメが作れます。
  • 茶色を書きたい場合、虹色パレットの上の四角をタッチすれば多くの色が選べます。
  • 消しゴムの下の「選ぶ」を使えば、線の場所や大きさ、色など変更できますが、ワークショップでは使いません。

 

3.自由制作(10分ー20分)

  • 2ページ以降、自分の作品を自由に制作する。
  • 自由制作時間の途中で、みんなの作品を共有サーバーにいったん保存。プロジェクタで互いの作品を見る。新しい表現方法など、発想の刺激になる。
  • 練習ページを削除したい場合、ページ番号をタッチし「ページをきりとる」で削除する。

 

4.上映会(5-10分)

  • みんなの作品を共有サーバーに保存し、順番に上映する
  • 時間があれば、何を描いたか説明してもらう。

 

  • 作品を保存する場所は、プログラムフォルダ「9va_data」の中の「setpath.ini」ファイルで指定できます。ここに共有ドライブのパスを設定しておけば、複数のパソコンの作品を1つのフォルダに集められます。
  • 作品フォルダを再生プレーヤー 9view-full にドラッグすれば、中の作品を順番に再生できます。左右キーで作品の切り替え、スペースキーで停止、再開、上下キーで再生スピード調整ができます。
  • ワコムタブレットを使う場合、ファンクションボタンに、上書き保存(Ctrl+S)を割り当てておくと保存が簡単になります。

 

 子供たちが自分で発見できること

PEAS motch! はボタンの数が少なく、機能が単純なので、何も説明せずに、自分でボタンを押しながら操作を発見していくことができます。実際に子供たちが自分で発見したことをあげてみます。

  • 画面全体を塗りつぶす場合、線を太くしてから塗りつぶした方が早く塗りつぶせる。
  • 消しゴムはまわりを囲んで消すと早い。
  • 虹色パレットの上の四角をタッチすると、茶色などもっとたくさんの色が使える。
  • 線の種類で、ぶれを選ぶと、線がびよびよ動く。
  • 線の種類で、かげを選ぶと、立体的な線がかける。
  • 線を書いた中に色を塗ったあと、もう一度線を書くと、きれいに中を塗ったようになる。
  • 上のページの右側の「+」を押すと、新しいページができる。
  • リンゴを描いて、外側から消しゴムですこしずつ消していくと、リンゴを食べていくように見える。

自分で使い方を見つけることは、とても楽しいことです。時間があるなら、あまり説明せずに自由に使わせてみましょう。

 

文字、写真の入れ方

  • PEAS motch! のファイル>「すすんだメニュー」をクリックすれば、文字、写真を入れたり、アニメGIF、APNG出力ができるようになります。

    f:id:dnjiro:20180406091408g:plain

アニメGIF、APNG出力

  • 「すすんだメニュー」の「ファイル」から「アニメGIF出力」を選べば、任意のサイズ、任意のコマ数のアニメGIFを作成できます。このブログの説明図は、みな1コマアニメーションです。PEAS motch! を使い、1コマ絵を作るだけで作成しました。

ひとコマアニメーションはアニメーションの革命か?!

ひとコマアニメーションは、2018年キッズプラザ大阪コンピュータ工房のワークショップでうまれた言葉だ。どんなものか体験できる「うるさいえほん」がこちら

 

キッズプラザ大阪では、フリーソフト PEAS motch! を使ったアニメ制作ワークショップが行われ、 3か月で、3000点近いアニメ作品が制作された。その期間中の3月3日、あるボランティアスタッフTが「夢のある「ひとコマ」マンガです。」と感想欄に書いた。それをプランナーSが「ひとコマでアニメーション」とは面白いとミーティングで紹介した。アプリを開発した大和団次郎はこの言葉に驚いた。

 

アニメーションは何コマも絵を書く必要があり、「2コマアニメーション」は存在するが、「ひとコマアニメーション」は存在しないと思われる。ところが、線を書く途中をアニメーションにすれば1コマでもアニメができる。いわれてみれば当たり前だが、実は、画期的なアニメーションだとわかってきた。下がキッズプラザの指導員が作成したひとコマアニメーションのサンプルだ。

f:id:dnjiro:20180330122316g:plain

 

1.ひとコマアニメーションは制作コストが圧倒的に低い

今まで手軽に作れるアニメーションといえば、任天堂DSの「うごくメモ帳」のような、絵を何枚か書いて再生する、というものだった。線を描くだけなので相当簡単なのだが、それでも、数枚絵を描く必要がある。ところが、

 

  • ひとコマアニメーションは、1コマ描くだけである。

 

これは制作コストが静止画と同じということだ。WebページやPowerPoint など、 静止画はいろんな場面で使われている。アニメーションを作ったことがない人でも、静止画を作ったことはあるだろう。

 

  • ひとコマアニメーションは、制作コストが静止画と同じ。

 

例を示そう。下は、 PEAS motch! 画面の説明図で、上はひとコマアニメーション、下が静止画である。

f:id:dnjiro:20210202173758g:plain

f:id:dnjiro:20210202173928g:plain

 

 上のアニメーションは、下の静止画を作成したあと、ボタンを1つ押すだけ。文字や矢印にアニメーション効果が自動的に追加される。アニメ化の時間は0.1秒。制作コストが同じなら、どちらを使いたいだろうか? データサイズも小さい。上のアニメは62KB。変化部分だけ記録するので静止画よりすこし大きい程度である。

 

今までのアニメーションは何コマか作成するので、静止画より必ず制作コストが高くなるわけだが、ひとコマアニメーションは、同じなのである。

 

  • ひとコマアニメーションは静止画より優れている。

 

ひとコマアニメーションが静止画よりすぐれていることは、心理学的に検証されている。ひとコマアニメーションは、米国ではホワイトボードアニメーションといい、このような線を順番に書いていくアニメーションは単純な動画よりも一目をひき、理解度も高いことが実証されている。その制作コストが静止画と同じなら、つかわない理由はない。世の中の多くの静止画が、ひとコマアニメーションに置き換えられてもおかしくない。相当インパクトがあることがわかるだろう。

 

 

2.ひとコマアニメーションの定義

ひとコマアニメーションを次のように定義した。

  • 1コマのデータで作られるコンピュータアニメーション
  • 書いた順番に線や文字が書かれていく

さらに、次のような機能があってもよい。

  • 消しゴムがあり、一部を消して書き換えることができる。その書き換えも再生時に再現される。
  • 背景に絵や写真が入れられる。
  • 制作過程の単なる録画ではなく、線の形や色、再生時間、再生の順番など、後から自由に修正できる。

 

ひとコマアニメーションらしきアニメーションは昔からあった。

  • 絵描き歌
  • 絵を描く漫談
  • ホワイトボードアニメーション
  • 絵の制作過程を録画した動画

 

 

3.ひとコマアニメーションはアニメーションか?

上の例で、「絵の制作過程を録画した動画」はアニメーションと呼ぶには抵抗があるかもしれない。絵をかく様子を撮影した実写だからだ。

 

これについて、静止画制作が目的で途中の様子を撮影したものなら単なる動画かもしれないが、アニメーション制作を目的に作られたもので、書いた時間と異なる時間で再生されたら、アニメーションだと考える。

 

アニメーションは、従来の2次元アニメーション(セルアニメ人形アニメ・・)とコンピュータグラフィックスで作成する3次元アニメーションに分類されていた。ひとコマアニメーションはそのどちらにも属さない新しいジャンルと考えられる。

 

f:id:dnjiro:20190821012305g:plain

 

ひとコマアニメーションの絵は、従来のアニメーションのコマとは異なった作り方になりそうだ。車のアニメーションを例に説明してみる。

 

 

従来のアニメーションでは、1コマめに車を描いたあと、次のコマでは、その車を少し移動、変化させ、車の動きを表現するだろう。

 

ひとコマアニメーションは、違う考え方をすべきだ。

 

ひとコマアニメーションでは、車を描いたあと、その余白に、車以外の情報を書き加えていく。どんな人が乗っているのか、何を運んでいるのか、どんな道なのか、どこに行くのか、これから何が起こるのか、そういった情報を順番に追加していく。

 

ひとコマアニメーションを再生すると、その情報が徐々にわかっていき、最後に全体が明らかになる。といったストーリーをもった構成がひとこまアニメーションらしいと考える。車だけの動きよりも、車のいる場面全体を描くほうがおもしろいだろう。

 

別の言葉で言えば、ひとコマアニメーションは、複雑な事件を1枚の絵で説明する情報整理の方法と考える。ひとコマアニメーションは長編アニメを作る方法ではない。長いストーリーを1コマにまとめる表現で、ショートアニメーションの技法のひとつだろう。これは短い空き時間でスマートフォンをみる現代人向きのアニメーションといえる。

 

何コマも描いて動きを表現する今までのアニメーションの作り方ではなく、一枚の絵にどんな内容を含めるか、ストーリーを考えて作ったほうが魅力的なひとコマアニメーションになるだろう。

 

ひとコマアニメーションは今までのアニメーションとはジャンルの異なるコンピュータアニメーションである。

 

4.黒板書きはひとコマアニメーションである

情報を1枚の絵に順番に表現していく方法がひとコマアニメーションだと考えると、学校の授業で先生が黒板に絵をかいていく様子はひとコマアニメーションだろう。実際、米国ではこれをホワイトボードアニメーションと呼んでおり、通常の動画よりも、説明をわかりやすく伝えられる動画として注目されている。

 

黒板書きがひとコマアニメーションなら、ノートの手書き、スケッチなど、ペンや筆で書くものはすべてひとコマアニメーションになるはずだ。以下のグラフィックレコーディングもひとコマアニメにするとよりわかりやすくなりそうだ。

 

グラフィックレコーディングをやってみました!

 

 5.Draw My Life はひとコマアニメーションで簡単に作れる

ホワイトボードに自分の人生を書いていく、Draw My Life 動画は、ひとコマアニメーションである。自分の人生を紹介した動画は、Youtube で評判になっており、自己ブランディング手法として注目されている。2013年米国ではじまったらしい。

 

自分の人生を描く、Draw my lifeの魅力 | UPLOAD

 

このように、ひとコマアニメーションは昔からあった。それなら  PEAS motch! のひとコマアニメーションはどこが新しいのだろうか。

 

従来の黒板やノートやスケッチは、書き終わったあと、静止画になってしまう。それを動画にするため、ホワイトボードアニメーションや Draw My lifeではビデオカメラを使い、動画編集によってアニメーションを作っていた。そのため、制作には結構手間がかかっていた。

 

ひとコマアニメーションは違う。静止画を描いた時点でアニメが完成している。あとから、いつでも再生、編集できる。これはコンピュータアニメーションであるからだ。その点が違う。アニメーション自体は新しくないが、アニメーションの記録、再生、編集方法が異なり、そのため制作コストが全く違う。

 

6.アニメーションをベクトルで記録する

黒板書きを記録、再生する方法が、今までは、動画撮影しかなかった。米国のホワイトボードアニメーションの制作では、ホワイトボードに書く様子を動画に撮影し、動画編集を行って仕上げていた。 PEAS motch! は、線のデータをベクトル(図形情報)で記録し、線がのびていく様子をその場で計算して再生する。そのため、動画編集を行う必要がない。 「うるさいえほん」JavaScriptで記述されたひとコマアニメ作成Webアプリである。このデータは、ONEP(One Picture)というテキストフォーマットで座標データが記録される。

 

7.手書きメモはひとコマアニメーションに拡張される

今、スマホで写真を撮影し、その上に手書きできるアプリがある。たとえば、

MetaMoJi Noteでできること | あらゆるタブレット端末で使える手書きノートアプリ MetaMoJi Note

など、多くは静止画だが、当然アニメーションになったほうが表現力が高くなり、より楽しくなる。写真上の手書きメモは、ひとコマアニメーションにかわっていくだろう。

 

 スマホアプリ picsart

写真加工アプリで有名な、picsart は、ひとコマアニメーションが作成できる。ただ、録画ボタンを押して絵を書く様子を記録するという作り方で、あとからアニメを編集することができない。本格的な1コマアニメーションを制作するには、PEAS motch! のように、入力した線の形や色や配置を自由に変更できる機能がほしくなるだろう。

 

 

スマホアプリ Gocco Doodle!(らくがキッズ)

GooglePlay2014年上半期ベストアプリに選ばれたフリーソフト「らくがキッズ」は、絵を描く過程を再生する機能がついている。絵はベクトル情報で記録しているようで、ひとコマアニメーションといってよい。再生ボタンをおすとのびていく線があり、アニメーションのような特殊効果をつくることができる。しかし、絵を描く順番を利用してアニメーションを作るという考えはもっていないようだ。

 

 

同じようなアプリには、以下のようなものがある。

 

 

8.ひとコマアニメーションのデータフォーマット

ひとコマアニメーションは、1画面の図形データがあればよいので、SVGのような既存のベクトルフォーマットがそのまま使える。それを読み込んで、再生するライブラリがあれば、ひとコマアニメーションが実現できる。

 

一方、再生時間を細かくコントロールしたければ、再生スピードの情報の追加が必要になる。再生ライブラリを外部からコントロールするといった形になるだろう。

 

 PEAS motch! は、9VAEきゅうべえアニメ研究所が開発した、9VAeLib ライブラリを用いている。9VAeLib は、SVGベースの図形データを読み込んで時間情報を追加し、アニメーションにして再生できる。 「うるさいえほん」JavaScriptで記述されたひとコマアニメ作成Webアプリである。このデータは、SVGを簡略化した「ONEP」というテキストフォーマットで座標データが記録されている。

 

JavaScript で実現した「ひとコマアニメーション」

ひとコマアニメーションは線のデータを記録、再生するだけなので、比較的容易に、JavaScriptで表現できる。静止画を扱ういろんなサイトに「ひとコマアニメーション」を組み込んでいき、アニメーションの活用範囲を広げていくことが考えられるだろう。

 

9.ひとコマアニメーションに描く内容

 ここでは、ひとコマアニメーションに適した絵は、どんな絵かを考えてみたい。ひとコマアニメーションは、絵に対して、新しい情報をどんどん追加していく作り方が考えられるが、どんな情報を追加していくのがよいだろうか。

 

  • 情景描写:これがどんな場面なのかを、順番に説明していく
  • 効果:光とか爆発とか波線とか色をかえて線を書き加えていくだけでも楽しい
  • 増えていく:同じ種類のものが増えていく
  • 場面転換:画面をまっくろにぬるなど
  • ・・・・・

 

 塗るか消しゴムで消すか2つの方法

  • 線を書き加える
  • 線で塗ってから消しゴムで一部を消して形をつくる

 

背景写真に書き加えていく

  • 背景ページに写真をいれ、写真をなぞって線を加えていく
  • 逆にスケッチ画から写真になるという表現もおもしろい

 

複数の人で順番に絵を付け加えていくひとコマ寄せ書きアニメーション

  • 順番に書く人が交代して絵を描き加えていく。新しい要素が追加されていくため、再生したとき、絵の趣旨が意外な方向に転換していくおもしろさがでてくる。NT京都2018 でやってみたが、これはおもしろそうだ。下のアニメはNT京都2018でその場にいた3名の方に書いてもらった。最初の水色の静止画に新しい情報が追加されている。時間を制限すると緊張感が出ておもしろそうだ。

    f:id:dnjiro:20180326162550g:plain

 

順番にひとコマアニメーションを書いていく手法は初対面の人のコミュニケーションツールとしてもつかえそうだ。グループでひとコマアニメーションを作成し、みんなでアニメーションを見るという運営が考えられる。ちなみに、太さの変わる線は、ワコムペンタブレットで書いている。「続きをどうぞ」とペンを渡すと書いてくれた。

 

ネタアニメもできそうだ。Youtube動画が簡単に作成できるし、ひとコマアニメーション作家がうまれそうだ。Draw My Life 動画の作り方も多いに参考になる。

 

10.「ひとコマアニメーション」という言葉の使い方

 Web制作現場では、画面を設計するときに、ここに写真を入れ、ここにイラストをいれて・・・といった検討が行われているだろう。そこには「イラスト」と同じコストで作れ、ホワイトボードアニメーションと同じ効果をもつ「ひとコマアニメーション」も検討に入れるとよいだろう。

 

クライアントから、トップの部分には一目をひくために「アニメーション」を入れたいと要望があるかもしれない。このとき「ひとコマアニメーション」でもよいですか?と提案できるだろう。それが認められれば、静止画と同じコストで作れることになる。

 

「ひとコマアニメーション」は、「静止画と同じコストで制作できること」が重要である。「ひとコマアニメーション」と同じアニメーションはいろんな方法で作ることができる。たとえば、絵を書くようすをビデオ撮影し、あとから動画編集して作ることができる。この場合、絵を書いたあと、動画編集する手間が余分にかかり、制作コストは静止画と同じではない。これは「ホワイトボードアニメーション」と呼べばよい。PEAS motch! の上で同じ絵を書けば、アニメにするのは「鉛筆ボタン」を押すだけである。そのようなアニメーションを「ひとコマアニメーション」として区別するとよい。

 

「ひとコマアニメーション」は従来のアニメーションとは別の新しいジャンルのアニメーションになるだろう。ひとコマアニメーションを制作する人はアニメータではなく、静止画を書くイラストレータが主体になるだろう。

 

 

11.「ひとコマアニメーション」はアニメーションデジタル化の第一歩

日本のアニメーション制作について、デジタル化が遅れていることが問題になっている。これは、アニメーション制作の基本が紙の上に何枚もコマを書いていくことから始まっているからだ。紙の上に絵を書いてスキャナーで入力してからデジタル作業を行うと、最初からデジタル入力するより手間がかかり、国際競争力が低下するのではと危惧されているらしい。 

http://www.meti.go.jp/meti_lib/report/H28FY/000431.pdf

 

それなら「ひとコマアニメーション」から始めるとよいのではないか。ひとコマアニメーションはデジタル入力によって制作コストが静止画と同じになる。これでアニメーションに興味をもち、本来のアニメーションに発展していくという学習過程をたどれば、自然にアニメーションがデジタル化されていくだろう。

 

12.キッズプラザ大阪にひとコマアニメーション制作コーナー設置

f:id:dnjiro:20190821012907g:plain

2019年7月にキッズプラザ大阪の3階デジタル体験広場アクアに、ひとコマアニメーション制作端末が5台設置され、1日150〜200本のアニメが作られている。制作しているのは、4歳児から小学生の子供達だ。(1)1枚絵を描いて (2)アニメーションボタンを押し (3) アップロードボタンを押せば、大画面で1コマアニメーションが再生される。使われているソフト「PEAS motch! one」はここからダウンロードできる。PEAS motch アンドロイド版はこちら

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組いたのは、このワークショップが単に与えられたパズルを解くようなものではなく、自己表現を主体にしたもので、次はあれを試してみようといった、工夫ができる魅力があるからだろう。
  • 海外の人でも問題なく参加できていた。完成した作品をスマホで撮影して持ち帰っていた。これは作業が簡単で、かつ、魅力があることを示している。
  • 文部科学省の「小学校学習指導要領」にはプログラミング学習が「コンピュータに意図した処理を行わせるために必要な論理的思考力を身につけるための学習活動」とあるが、ブロック言語を覚えるのが難しい低学年には、このような方法が適しているのではないかと感じる。