- テキスト読み上げソフト、パソコンは Windows 、スマホは iPhoneを使う人が多い
- ブラウザの自動読み上げツールをカスタマイズする方法、IEのツールでできるが、これからやる場合は、
- スクリーンリーダー NVDA
- 読み上げソフトの一覧
きゅうべえVer.0.6 をつくっている。
DXライブラリとか、Webアニメコンテストとか、いろいろやって、なかなかすすまないが、とりあえず、Ver.0.6 が出せそうだ。
次の目玉は、
だ。この2つは関係があって、これを組み合わせて、チュートリアルアニメーションのフランス語バージョンができるようにする。
今、9VAeきゅうべえはフランス人ボランティアの努力によって、プログラムがフランス語化されている。ところが、ソフトの操作方法を説明したチュートリアルアニメーションがフランス語されていない。
これをフランス語にするためには、アニメーションと文字を分離する必要がある。プログラムは、テキスト文字がリソースに分離されているため、その部分だけ対訳をつくればよい。それと同じことがアニメーションでもできるようにする。
ドラマの字幕の差し替えのようなものだが、9VAeきゅうべえのチュートリアルアニメは、ボタン操作ができる対話的なアニメーションなので、もっと複雑だ。
これを実現するためには、チュートリアルアニメーションに含まれる文字列を検索し、タグに置き換え、対訳リストと結び付けなければならない。そういった作業が完成し、リリースに近づいている。
検索はアニメキャストの中まで検索できるので、かなり便利である。
キッズプラザ大阪・コンピュータ工房で、フリーソフト PEAS motch! を使ったワークショップが 2018/1/25-4/8 にかけて行われました。
キッズプラザ大阪では、1枚の絵を描くだけ作れるコンピュータアニメーションを「1コマアニメーション」と呼びます。
1コマアニメーションは、絵を書きうつすだけでも楽しいです。自分で書くと理解が深まるので、様々な学習用途で使えます。
キッズプラザ大阪で行われたワークショップカリキュラムを紹介します。操作が単純なので、4歳児からできます。
ソフトキーボードをタッチして、下の名前を入力します。複数のパソコンを使用する場合、PEAS motch!のプログラム名に、peasmtch-01 のようにパソコン番号を追加しておけば、作品名の先頭と最後に、パソコン番号、年齢、性別が追加されます。
PEAS motch! はボタンの数が少なく、機能が単純なので、何も説明せずに、自分でボタンを押しながら操作を発見していくことができます。実際に子供たちが自分で発見したことをあげてみます。
自分で使い方を見つけることは、とても楽しいことです。時間があるなら、あまり説明せずに自由に使わせてみましょう。
「ひとコマアニメーション」は、2018年キッズプラザ大阪コンピュータ工房のワークショップでうまれた言葉だ。どんなものか体験できる「うるさいえほん」がこちら
キッズプラザ大阪では、フリーソフト PEAS motch! を使ったアニメ制作ワークショップが行われ、 3か月で、3000点近いアニメ作品が制作された。その期間中の3月3日、あるボランティアスタッフTが「夢のある「ひとコマ」マンガです。」と感想欄に書いた。それをプランナーSが「ひとコマでアニメーション」とは面白いとミーティングで紹介した。アプリを開発した大和団次郎はこの言葉に驚いた。
アニメーションは何コマも絵を書く必要があり、「2コマアニメーション」は存在するが、「ひとコマアニメーション」は存在しないと思われる。ところが、線を書く途中をアニメーションにすれば1コマでもアニメができる。いわれてみれば当たり前だが、実は、画期的なアニメーションだとわかってきた。下がキッズプラザの指導員が作成したひとコマアニメーションのサンプルだ。
今まで手軽に作れるアニメーションといえば、任天堂DSの「うごくメモ帳」のような、絵を何枚か書いて再生する、というものだった。線を描くだけなので相当簡単なのだが、それでも、数枚絵を描く必要がある。ところが、
これは制作コストが静止画と同じということだ。WebページやPowerPoint など、 静止画はいろんな場面で使われている。アニメーションを作ったことがない人でも、静止画を作ったことはあるだろう。
例を示そう。下は、 PEAS motch! 画面の説明図で、上はひとコマアニメーション、下が静止画である。
上のアニメーションは、下の静止画を作成したあと、ボタンを1つ押すだけ。文字や矢印にアニメーション効果が自動的に追加される。アニメ化の時間は0.1秒。制作コストが同じなら、どちらを使いたいだろうか? データサイズも小さい。上のアニメは62KB。変化部分だけ記録するので静止画よりすこし大きい程度である。
今までのアニメーションは何コマか作成するので、静止画より必ず制作コストが高くなるわけだが、ひとコマアニメーションは、同じなのである。
ひとコマアニメーションが静止画よりすぐれていることは、心理学的に検証されている。ひとコマアニメーションは、米国ではホワイトボードアニメーションといい、このような線を順番に書いていくアニメーションは単純な動画よりも一目をひき、理解度も高いことが実証されている。その制作コストが静止画と同じなら、つかわない理由はない。世の中の多くの静止画が、ひとコマアニメーションに置き換えられてもおかしくない。相当インパクトがあることがわかるだろう。
ひとコマアニメーションを次のように定義した。
さらに、次のような機能があってもよい。
ひとコマアニメーションらしきアニメーションは昔からあった。
上の例で、「絵の制作過程を録画した動画」はアニメーションと呼ぶには抵抗があるかもしれない。絵をかく様子を撮影した実写だからだ。
これについて、静止画制作が目的で途中の様子を撮影したものなら単なる動画かもしれないが、アニメーション制作を目的に作られたもので、書いた時間と異なる時間で再生されたら、アニメーションだと考える。
アニメーションは、従来の2次元アニメーション(セルアニメ、人形アニメ・・)とコンピュータグラフィックスで作成する3次元アニメーションに分類されていた。ひとコマアニメーションはそのどちらにも属さない新しいジャンルと考えられる。
ひとコマアニメーションの絵は、従来のアニメーションのコマとは異なった作り方になりそうだ。車のアニメーションを例に説明してみる。
従来のアニメーションでは、1コマめに車を描いたあと、次のコマでは、その車を少し移動、変化させ、車の動きを表現するだろう。
ひとコマアニメーションは、違う考え方をすべきだ。
ひとコマアニメーションでは、車を描いたあと、その余白に、車以外の情報を書き加えていく。どんな人が乗っているのか、何を運んでいるのか、どんな道なのか、どこに行くのか、これから何が起こるのか、そういった情報を順番に追加していく。
ひとコマアニメーションを再生すると、その情報が徐々にわかっていき、最後に全体が明らかになる。といったストーリーをもった構成がひとこまアニメーションらしいと考える。車だけの動きよりも、車のいる場面全体を描くほうがおもしろいだろう。
別の言葉で言えば、ひとコマアニメーションは、複雑な事件を1枚の絵で説明する情報整理の方法と考える。ひとコマアニメーションは長編アニメを作る方法ではない。長いストーリーを1コマにまとめる表現で、ショートアニメーションの技法のひとつだろう。これは短い空き時間でスマートフォンをみる現代人向きのアニメーションといえる。
何コマも描いて動きを表現する今までのアニメーションの作り方ではなく、一枚の絵にどんな内容を含めるか、ストーリーを考えて作ったほうが魅力的なひとコマアニメーションになるだろう。
ひとコマアニメーションは今までのアニメーションとはジャンルの異なるコンピュータアニメーションである。
情報を1枚の絵に順番に表現していく方法がひとコマアニメーションだと考えると、学校の授業で先生が黒板に絵をかいていく様子はひとコマアニメーションだろう。実際、米国ではこれをホワイトボードアニメーションと呼んでおり、通常の動画よりも、説明をわかりやすく伝えられる動画として注目されている。
黒板書きがひとコマアニメーションなら、ノートの手書き、スケッチなど、ペンや筆で書くものはすべてひとコマアニメーションになるはずだ。以下のグラフィックレコーディングもひとコマアニメにするとよりわかりやすくなりそうだ。
ホワイトボードに自分の人生を書いていく、Draw My Life 動画は、ひとコマアニメーションである。自分の人生を紹介した動画は、Youtube で評判になっており、自己ブランディング手法として注目されている。2013年米国ではじまったらしい。
自分の人生を描く、Draw my lifeの魅力 | UPLOAD
このように、ひとコマアニメーションは昔からあった。それなら PEAS motch! のひとコマアニメーションはどこが新しいのだろうか。
従来の黒板やノートやスケッチは、書き終わったあと、静止画になってしまう。それを動画にするため、ホワイトボードアニメーションや Draw My lifeではビデオカメラを使い、動画編集によってアニメーションを作っていた。そのため、制作には結構手間がかかっていた。
ひとコマアニメーションは違う。静止画を描いた時点でアニメが完成している。あとから、いつでも再生、編集できる。これはコンピュータアニメーションであるからだ。その点が違う。アニメーション自体は新しくないが、アニメーションの記録、再生、編集方法が異なり、そのため制作コストが全く違う。
黒板書きを記録、再生する方法が、今までは、動画撮影しかなかった。米国のホワイトボードアニメーションの制作では、ホワイトボードに書く様子を動画に撮影し、動画編集を行って仕上げていた。 PEAS motch! は、線のデータをベクトル(図形情報)で記録し、線がのびていく様子をその場で計算して再生する。そのため、動画編集を行う必要がない。 「うるさいえほん」はJavaScriptで記述されたひとコマアニメ作成Webアプリである。このデータは、ONEP(One Picture)というテキストフォーマットで座標データが記録される。
今、スマホで写真を撮影し、その上に手書きできるアプリがある。たとえば、
MetaMoJi Noteでできること | あらゆるタブレット端末で使える手書きノートアプリ MetaMoJi Note
など、多くは静止画だが、当然アニメーションになったほうが表現力が高くなり、より楽しくなる。写真上の手書きメモは、ひとコマアニメーションにかわっていくだろう。
写真加工アプリで有名な、picsart は、ひとコマアニメーションが作成できる。ただ、録画ボタンを押して絵を書く様子を記録するという作り方で、あとからアニメを編集することができない。本格的な1コマアニメーションを制作するには、PEAS motch! のように、入力した線の形や色や配置を自由に変更できる機能がほしくなるだろう。
GooglePlay2014年上半期ベストアプリに選ばれたフリーソフト「らくがキッズ」は、絵を描く過程を再生する機能がついている。絵はベクトル情報で記録しているようで、ひとコマアニメーションといってよい。再生ボタンをおすとのびていく線があり、アニメーションのような特殊効果をつくることができる。しかし、絵を描く順番を利用してアニメーションを作るという考えはもっていないようだ。
同じようなアプリには、以下のようなものがある。
イラスト制作の様子を自動的にInstagram用ビデオにまとめるSketchVid | TechCrunch Japan
ASCII.jp:Windows 10「フォト」アプリが大きく進化、手書きの過程を動画で保存できる|ズバッと解決! Windows 10探偵団
コード不要で手描き風のSVGアニメーションを自動作成できるエディタ「Vivus Instant」の使い方大公開! - paiza開発日誌
ひとコマアニメーションは、1画面の図形データがあればよいので、SVGのような既存のベクトルフォーマットがそのまま使える。それを読み込んで、再生するライブラリがあれば、ひとコマアニメーションが実現できる。
一方、再生時間を細かくコントロールしたければ、再生スピードの情報の追加が必要になる。再生ライブラリを外部からコントロールするといった形になるだろう。
PEAS motch! は、9VAEきゅうべえアニメ研究所が開発した、9VAeLib ライブラリを用いている。9VAeLib は、SVGベースの図形データを読み込んで時間情報を追加し、アニメーションにして再生できる。 「うるさいえほん」はJavaScriptで記述されたひとコマアニメ作成Webアプリである。このデータは、SVGを簡略化した「ONEP」というテキストフォーマットで座標データが記録されている。
ひとコマアニメーションは線のデータを記録、再生するだけなので、比較的容易に、JavaScriptで表現できる。静止画を扱ういろんなサイトに「ひとコマアニメーション」を組み込んでいき、アニメーションの活用範囲を広げていくことが考えられるだろう。
ここでは、ひとコマアニメーションに適した絵は、どんな絵かを考えてみたい。ひとコマアニメーションは、絵に対して、新しい情報をどんどん追加していく作り方が考えられるが、どんな情報を追加していくのがよいだろうか。
塗るか消しゴムで消すか2つの方法
背景写真に書き加えていく
複数の人で順番に絵を付け加えていくひとコマ寄せ書きアニメーション
順番にひとコマアニメーションを書いていく手法は初対面の人のコミュニケーションツールとしてもつかえそうだ。グループでひとコマアニメーションを作成し、みんなでアニメーションを見るという運営が考えられる。ちなみに、太さの変わる線は、ワコムのペンタブレットで書いている。「続きをどうぞ」とペンを渡すと書いてくれた。
ネタアニメもできそうだ。Youtube動画が簡単に作成できるし、ひとコマアニメーション作家がうまれそうだ。Draw My Life 動画の作り方も多いに参考になる。
Web制作現場では、画面を設計するときに、ここに写真を入れ、ここにイラストをいれて・・・といった検討が行われているだろう。そこには「イラスト」と同じコストで作れ、ホワイトボードアニメーションと同じ効果をもつ「ひとコマアニメーション」も検討に入れるとよいだろう。
クライアントから、トップの部分には一目をひくために「アニメーション」を入れたいと要望があるかもしれない。このとき「ひとコマアニメーション」でもよいですか?と提案できるだろう。それが認められれば、静止画と同じコストで作れることになる。
「ひとコマアニメーション」は、「静止画と同じコストで制作できること」が重要である。「ひとコマアニメーション」と同じアニメーションはいろんな方法で作ることができる。たとえば、絵を書くようすをビデオ撮影し、あとから動画編集して作ることができる。この場合、絵を書いたあと、動画編集する手間が余分にかかり、制作コストは静止画と同じではない。これは「ホワイトボードアニメーション」と呼べばよい。PEAS motch! の上で同じ絵を書けば、アニメにするのは「鉛筆ボタン」を押すだけである。そのようなアニメーションを「ひとコマアニメーション」として区別するとよい。
「ひとコマアニメーション」は従来のアニメーションとは別の新しいジャンルのアニメーションになるだろう。ひとコマアニメーションを制作する人はアニメータではなく、静止画を書くイラストレータが主体になるだろう。
日本のアニメーション制作について、デジタル化が遅れていることが問題になっている。これは、アニメーション制作の基本が紙の上に何枚もコマを書いていくことから始まっているからだ。紙の上に絵を書いてスキャナーで入力してからデジタル作業を行うと、最初からデジタル入力するより手間がかかり、国際競争力が低下するのではと危惧されているらしい。
http://www.meti.go.jp/meti_lib/report/H28FY/000431.pdf
それなら「ひとコマアニメーション」から始めるとよいのではないか。ひとコマアニメーションはデジタル入力によって制作コストが静止画と同じになる。これでアニメーションに興味をもち、本来のアニメーションに発展していくという学習過程をたどれば、自然にアニメーションがデジタル化されていくだろう。
2019年7月にキッズプラザ大阪の3階デジタル体験広場アクアに、ひとコマアニメーション制作端末が5台設置され、1日150〜200本のアニメが作られている。制作しているのは、4歳児から小学生の子供達だ。(1)1枚絵を描いて (2)アニメーションボタンを押し (3) アップロードボタンを押せば、大画面で1コマアニメーションが再生される。使われているソフト「PEAS motch! one」はここからダウンロードできる。PEAS motch アンドロイド版はこちら。
PEAS motch!がひと段落してきたので、9VAeきゅうべえアンドロイド版の作成を再開。
開発環境は、Visual Studio、DXライブラリ置き場にサンプルがあり、それをそのままビルドすると、ちゃんと動いたので、できそうな気がしてきた。
DXライブラリは、構造がすごく簡単。イベントループは自分でもつようだ。タッチイベント(マウスイベント)は、マウスボタンの状態を取得して自分で作成する。
画面表示は、9VAeのデザイン画像から矩形転送で行う。画像は assets の中にいれる。
これで、以下のような画面表示ができるようになった。
あとは、少しずつ関数を増やしていくだけだ。アンドロイド版できそう。
キッズプラザ大阪でのワークショップ用に、PEAS motch!を開発した。
このソフトは、小学校低学年や幼稚園の子供たちでも、楽しくコンピュータを使って創作活動ができるように、キッズプラザの担当者といっしょに作り上げたソフトだ。
このソフトがプログラミング学習の役に立つとよいと思い、このジャンルでどういう位置づけになるのか、調べていると、どうも、ビジュアルプログラミングと関係ありそうなことがわかってきた。
ビジュアルプログラミングは、スクラッチのようなブロックを組み立てるもののことをいうと思いがちだが、スクラッチはテキストをブロックで置き換えただけなので、テキスト言語に近い。ビジュアルプログラミングはもっと広い概念で、テキストでは考えられない自由な発想でプログラムを考えてみようというものらしい。
その代表が「ビスケット」で、これがつくられたときは、結構、いろんな研究があったらしい。ところが、ビスケット以外は下火になって、ブロック型言語ばっかりになってしまった。
ブロック型言語は、テキスト言語よりも覚えやすいので、プログラム学習に適している。ところが、小学校低学年や幼稚園児には、まだむずかしい。それで「アンプラグド」というコンピュータを使わない方法が提唱されている。
「アンプラグド」はもともとは、コンピュータに興味をもった人がコンピュータの中身を勉強するために考えられたもので、本来コンピュータをよく知らない人にコンピュータを教えるためのものではない。コンピュータを知らずに「アンプラグド」をやると、コンピュータとは思わず、単なるゲームで終わってしまうおそれがある。
この問題を解決するのに、ビジュアルプログラミングが役にたちそうだ。そういえば、過去、大ヒットした「インクレジブルマシン」もビジュアルプログラミングなのではないか。スクラッチのようなブロックではなくて、ねずみとか、チーズとか、風船とか、画面上にいろんなものがおいてあって、うまくその配置をかえると、ねずみはチーズに向かって走っていく、風船は上にのぼっていく、それをうまく組み合わせて課題を解決するというものだった。
PEAS motch! が、インクレジブルマシンなみのプログラム要素をもっているとは思えないが、それでも、絵を書く順番でアニメーションができる。太い白い線で絵を消すことができ、絵を消して、また描くといったことを繰り返せば、ものを動かしていくことができる。といった、いくつかのルールがあり、それを利用して、自分の考えたとおりのアニメーションを作る。といった学習ができる。これは、現在のレベルであり、今後、もっと楽しいプログラミング要素を付け加えていけるかもしれない。ちなみに、PEAS motch!には「すすんだメニュー」というのが背後に隠れており、そこにすすむと、ループ、サブルーチン、グラフを用いた動きの制御、再起呼び出しといったプログラム要素が使える。
ブロック型言語はだいぶ充実してきた。小学校高学年はこれでよいと思うので、これからは、ビジュアルプログラミングに力をいれて、低学年、幼稚園児でも創造活動ができるコンピュータアプリを開発し、アンプラグドをつかわなくてもすむ状況にしていく必要があるのではないだろうか。