青少年のための科学の祭典で行った１００名のホワイトボードアニメーションの作り方

2017年[青少年のための科学の祭典大阪大会「サイエンスフェスタ」](http://www.pesj-bkk.jp/OSF/)で9VAeきゅうべえを使ったホワイトボードアニメーション（[１コマアニメーション](http://dnjiro.hatenablog.com/entry/2018/03/22/155249)）の作成を行いました。

ホワイトボードアニメーションは、黒板の上に絵を描いていく様子を再現したアニメーションで、普通のビデオよりも学習効果が高いといわれています。

[9VAe](https://qiita.com/danjiro/items/253e5a33a38599098274) や [PEAS motch!](http://dnjiro.hatenablog.com/entry/2018/03/22/155249) を使えば誰でも簡単に作成できます。その方法を公開します。[PEAS motch!をつかったワークショップはこちら](http://dnjiro.hatenablog.com/entry/2018/04/04/150324)。

![9view.gif](https://qiita-image-store.s3.amazonaws.com/0/67734/57c59972-eae1-34e9-4690-57e4c31aeccb.gif)
9VAeを使ったワークショップ。子どもたちの作品をその場で連結しプロジェクタで上映

# １．概要

- パソコン４台使用
- ワコムペンタブレットを２台接続
- Windowsタブレットを１台用意（低学年用）
- ラズベリーパイをローカルサーバーとして使用
- 作成したアニメをその場で１本にまとめ、プロジェクタで上映

- 長机１台
- アニメ制作する体験者：同時に２から３名
- 指導者１名
- 一人のアニメ制作時間：１分から５分
- 体験者：小学１年生から高校生まで
- １日１００名が体験（２日間で２００名）

# ２．出来上がったホワイトボード（１コマ）アニメーション

クリックすると、Youtubeが開きます。2日めの作品の一部です。
[![青少年のための科学の祭典で作った連作アニメーション](http://img.youtube.com/vi/2aiRstFBFFA/0.jpg)](https://youtu.be/2aiRstFBFFA)
[AviUtil を使って作成しました。](https://qiita.com/danjiro/items/13a247748f3097c2c055)（10966コマを9VAe＋子供たちで作成）


# ３．特長

- 操作が簡単、だれでも数分でホワイトボード（１コマ）アニメーションが作れる。
- 提供するのは白紙であり、中身は全部子供たちが考える。これがゲームと違う。
- 表情豊かな筆線のアニメができる。ストーリー作品が作れる。
- データサイズが驚異的に小さく取り扱いが容易。１００名分のアニメーションが数ＭＢにしかならない。
- ラズベリーパイをローカルサーバーに使うことで、制作、上映が簡単

# ４．機器構成

機器構成は以下のようになります。
![000.gif](https://qiita-image-store.s3.amazonaws.com/0/67734/424d0a61-d43a-21d8-6924-774e7cf7bc05.gif)

- ラズベリーパイをローカルサーバーにし、LANケーブルで各パソコンと接続します。[ローカルサーバーの作り方はこちらで公開](https://qiita.com/danjiro/items/28bb17ab3e2aaf79e572)しています。
- ワコムペンタブレットをつないだノートパソコンを２台。9VAeを入れておきます。[9VAeはここからダウンロード](https://qiita.com/danjiro/items/253e5a33a38599098274)
- Windowsタブレットを１台。これはペンでメニューボタンを押す操作が難しい低学年用です。画面を指で直接さわれるため、ボタン操作が簡単です。ただし筆圧が検知できません。予備として使いました。
- プロジェクタ用ノートパソコンには、再生プログラム 9Viewを入れておきます。9VAeも入れておけば、後から先生がデータを編集することもできます。


# ５．共有フォルダの構成

- ラズベリーパイには、192.168.99.100 といった固定アドレスを割り当てました。
- 共有フォルダに年と日付のフォルダをおきました。その中に_bgmから始まるMIDI音楽を入れておきました。

> 192.168.99.100/
> 　└ share/
> 　 　└ 2017/
> 　 　 　├ 0819/
>　 　 　 │　├ _bgm01.mid
>　 　 　 │　└ _bgm02.mid
> 　 　 　└ 0820/
>　 　 　 　　├ _bgm01.mid
>　 　 　 　　└ _bgm02.mid

-  日付フォルダ「0819」「0820」の中に、アニメーションを保存していきます。
- 「\_bgm」という文字から始まるMIDIファイルをフォルダに入れておくと、9Viewで再生したときに、背景に音楽が流れます。また、その音楽にテンポを合わせてアニメが再生されます。9VAeの example フォルダの中に、_bgm01.mid _bgm02.mid がはいっているので、これを使いました。別の midiファイルの名前の先頭に _bgm を入れても使えます。

# ６．動作確認

## 6.1 １台めのノートパソコンから保存確認

- ノートパソコンの 9VAe を起動します。![0000.png](https://qiita-image-store.s3.amazonaws.com/0/67734/818397bd-e1d5-1188-9cc5-815535d7ee2b.png)

- 画面上の「１．鉛筆（上図 A.）」をクリック。OKボタンをクリック
- 画面に好きな絵を書きます。
- 「１．鉛筆」をもう一度クリック。これでアニメーションができるはずです。
- 「ファイルメニュー ＞ 名前を付けて保存」をクリック
- ファイル名の場所に「\\192.168.99.100」といったラズベリーパイのアドレスを入力
- 「share」をダブルクリック
- 「2017」をダブルクリック
- 「0820」をダブルクリック
- 最初の番号「000」を入れて「保存」ボタンをクリック<br>これで、share/2017/0820/000.eva というファイルが保存できました。
- 「ファイルメニュー ＞ 新規作成」をクリック。<br>これで次の人の順番になります。
- 次の保存から、「ファイルメニュー ＞ 名前を付けて保存」をクリックすれば、先ほど保存した場所が開きますので、次の番号を入力して保存するだけです。

## 6.2 ２台め、３台めのパソコンからの保存確認

- 上と同じように２台め、３台めの9VAeからもアニメが保存できることを確認します。

## 6.3 プロジェクタ再生の確認

- 9VAeの再生プログラム「9View」を再生用パソコンのデスクトップにコピーしておきます。
- エクスプローラのアドレスバーにラズベリーパイの固定アドレス「\\192.168.99.100」を入力します。
- 「share」をダブルクリック
- 「2017」をダブルクリック
- 作品を保存した「0820」フォルダを「9View」の上にドラッグ＆ドロップします。これで、中のアニメーションが順番に再生されるはずです。

# ７．子供たちへの教え方

操作は、上の動作テストと同じことをやるだけです。とても簡単です。絵を書くだけで、誰でもアニメーションを作ることができます。

以下の点を覚えておいてください。

1. 最初「ファイル＞新規作成」から始める。
2. 必ず「１．鉛筆」ボタンをクリックしてから絵を書き始めること。<br>
最初に「１．鉛筆」ボタンを押していないと、絵を書いたあと「１．鉛筆」ボタンを押しても書き順アニメが作られません。
3. また「続きのページを作る」などを実行し、２ページ以上になっていた場合、「１．鉛筆」ボタンを押しても書き順アニメは作られません。不要なページを削除し、１ページにしてから「１．鉛筆」ボタンを押せば、書き順アニメが作られます。


間違えたとき、色を変えたいとき、線の太さを変えたいときは、以下のボタンを使います。
![0000.png](https://qiita-image-store.s3.amazonaws.com/0/67734/818397bd-e1d5-1188-9cc5-815535d7ee2b.png)

- A. 絵を描く前、描いた後に押すボタン
- B. 線を描く
- C. 間違えたときに押す（Backspaceでも戻ります）
- D. 線の色
- E. 線の太さ

これ以外のボタンを押すとどうなるか、いろいろ試してみてください。ただし２ページ以上作ると「１．」ボタンで書き順アニメができなくなります。

- 面を塗るバケツ塗りつぶしの機能はありません。どうしてもやりたければ、塗りのある図形を描いて、重なり順序を下にすればよいのですが、太い線を何回も描いて塗るほうが簡単でしょう。
- アニメになると絵を書いた順番に表示されます。これを利用してストーリー性のある絵を描くことができることも教えましょう。

# ８．9VAeのホワイトボードアニメーションの特長

- 「１．鉛筆」ボタンで作られる書き順アニメは、絵を描く様子を録画したものではない点に注意してください。9VAeはアニメーションエディタであり、入力した線の形を後から細かくいくらでも修正できます。修正していけば、どんどんきれいな絵が描ける書き順アニメに変わっていきます。
- [書き順アニメについてもっと詳しい情報がこちら](https://qiita.com/danjiro/items/8dd0d7c7263f62189437#%E6%9B%B8%E3%81%8D%E9%A0%86%E3%82%A2%E3%83%8B%E3%83%A1%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF)にあります。
- ペンタブレットを使った場合、筆圧によって線の太さが変わります。ペンタブレットでない場合（マウスや、Windowsタブレットの場合）線の太さは適当に変化します。[太さがを変化する線をひくアルゴリズムをこちら](https://qiita.com/danjiro/items/8c73ce974c5988eb3a5f)で公開しています。

# ９．9Viewの使い方

- 作成したアニメを再生するのは、9Viewを使うのが簡単です。動画への変換が不要でデータ容量も少なくて済み、アニメの背景に音楽を鳴らすこともできます。再生中にキーを押して、早送りしたり、再生を一時停止したりできます。


|キー |9View のショートカットキー|
|:--:|:--|
|【←】【→】|【←】ひとつ前のアニメ（シーン）に移動。 <br>【→】次のアニメ（シーン）に移動。|
|【↑】【↓】|【↑】再生速度を速くする。 <br>【↓】再生速度を遅くする。|
|【スペース】|一時停止。タイトルバーに「■停止」と表示。 もう一度【スペース】または【Enter】を押すと続きから再生。|
|【Esc】|再生中に押すと停止し、先頭まで巻き戻し。 <br>停止中に押すと終了確認。 OKボタンで終了。|
|【Enter】|停止中に押すと続きから再生。 <br><br>再生中に押すと、再生終了後の動作を切り替えます。タイトルバーの表示が次の順番で変わります。 <br>表示なし：最後まで再生すると停止する。 <br>(自動)：最後まで再生すると次のファイルを再生する。 <br>(自動->)： 「クリックで進むボタン」など再生が終わらないファイルでも１０秒後に次に進み、必ず次のファイルを再生する。 |

# １０．連作アニメを１本の動画にまとめる方法

- 作成したホワイトボードアニメーションを１本の動画にして、Youtubeなどにアップしたい場合は、各アニメを連番PNG 出力し、[AviUtilなどの動画アプリ](https://qiita.com/danjiro/items/13a247748f3097c2c055)を使って動画にすることができます。

## 10.1 スマートフォンで撮影するのが簡単

- もっとも簡単な方法は、パソコン画面をスマートフォンで動画撮影する方法です。手間も時間もかかりません。

## 10.2 AviUtil で動画作成（Windowsの場合）

AviUtil は、Windows用の動画編集フリーソフトです。

１， [「AviUtilの導入方法」](https://qiita.com/danjiro/items/13a247748f3097c2c055)はこちらをご覧ください。

２．次のようにして連番PNGを作成します。

- 連番アニメが 001.eva, 002.eva, 003... だとします。このアニメがはいったフォルダに 9VAe(9va-win.exe)をコピーし、次のようなバッチファイル（makepng.bat）を作ります。

``` bat
9va-win 001.eva "-png-w1280-h720-o0001.png"
9va-win 002.eva "-png-w1280-h720"
9va-win 003.eva "-png-w1280-h720"
9va-win 004.eva "-png-w1280-h720"
ファイルの数だけ続ける
```

> -w1280-h720 は、出力サイズ、幅 1280 高さ 720 の指定です。指定がなければ、アニメのサイズになります。
> 最初だけ、"-o0001.png"を指定し、先頭のファイルを 0001.png にします。その後は、自動的に続きの番号から連番が作成されます。（この機能は、Ver.0.5.13 で追加されました。）

- このバッチファイルをダブルクリックすれば、フレームレート10コマ/秒で連番PNGが出力されます。 秒30コマで出力したい場合は 各行を "-w1280-h720-fps30" としてください。

- ディスクを数ＧＢ使用しますので、十分空き容量があるハードディスクか、ディスクがいっぱいになっても差し支えないUSBメモリ上で実行してください。時間がかかりますので、夜中に実行するとよいでしょう。


３．AviUtil では、次のような手順になります。詳細はリンク先を参照

1. [プロジェクトの作成（画面サイズ、フレームレートを設定）](https://qiita.com/danjiro/items/13a247748f3097c2c055#5-1-%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90)
- [動画オブジェクトを入力し、連番PNGの先頭ファイル 0001.pngを設定](https://qiita.com/danjiro/items/13a247748f3097c2c055#5-2-%E9%80%A3%E7%95%AApng%E3%82%92%E5%8B%95%E7%94%BB%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AB%E3%81%99%E3%82%8B)
- [動画出力](https://qiita.com/danjiro/items/13a247748f3097c2c055#5-4-mp4%E5%8B%95%E7%94%BB%E5%87%BA%E5%8A%9B)

- AviUtil で動画に音楽を追加したり様々な動画編集ができます。

---

# 関連記事

## 9VAeきゅうべえ のご紹介

1. [無料ソフトでアニメを作ってみよう（9VAe きゅうべえ）](http://qiita.com/danjiro/items/253e5a33a38599098274)
2. [インストール方法](http://qiita.com/danjiro/items/1debda10c37fd8a55927)
3. [スクラッチ、ビスケットの次は 9VAe＝第３のプログラミング学習環境](http://qiita.com/danjiro/items/d856d393b3e138af123a)
4. [よくある質問](http://qiita.com/danjiro/items/205efee350bfbbef488e)
5. [印刷用マニュアル](http://qiita.com/danjiro/items/1ca2ff3eb0a2d6f98842)


## 9VAeきゅうべえ 初級編
1. [9VAe チュートリアル（１）ーページでタイムラインなし](http://qiita.com/danjiro/items/ea71567fa8c313f6f3fc)
2. [9VAe チュートリアル（２）ー図形入力、選択、移動、サイズ変更](http://qiita.com/danjiro/items/7507cd9f4c19197f21ea)
3. [9VAe チュートリアル（３）ーアニメキャストを作る、時間調整](http://qiita.com/danjiro/items/ec174df989af8db42da4)
4. [9VAe チュートリアル（４）ーアニメキャストの修正、往復](http://qiita.com/danjiro/items/70cfb20980fee4fdd245)
5. [9VAe チュートリアル（５）ー動きグラフ、ページコピー、GIF作成](http://qiita.com/danjiro/items/ffa863d303eb7d640d10)
6. [書き順アニメーションの作り方](http://qiita.com/danjiro/items/8dd0d7c7263f62189437)
7. [9VAeきゅうべえ：長いアニメを作る方法](http://qiita.com/danjiro/items/020cd885edb5eb3d9fb0)

## 9VAeきゅうべえ 中級編
1. [アニメの作り方](http://dnjiro.hatenablog.com/archive/category/%E3%82%A2%E3%83%8B%E3%83%A1%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9)


## 9VAeきゅうべえ 上級編
1. [AviUtil と 9VAeきゅうべえを使った簡単アニメ動画作成](http://qiita.com/danjiro/items/13a247748f3097c2c055)
1. [動くLINEスタンプのAPNG作成：無料ソフト9VAeきゅうべえ](http://qiita.com/danjiro/items/e4d9eb2b22f90ebd1e91)
2. [萌えキャラ デジたんを目ぱちさせるまで：APNGアニメの作り方](http://qiita.com/danjiro/items/67af46418b4831cda10b)
2. [openclipartの無料イラストをアニメ化する６つの手順](http://qiita.com/danjiro/items/161fc6bb0dc7aaa4f76d)
2. [イラストから動くLINEスタンプのようなアニメを簡単に作る方法](http://qiita.com/danjiro/items/f7ffcf5027babf3b03e9)
5. [フリーソフト9VAeきゅうべえで簡単デジタルサイネージ](http://qiita.com/danjiro/items/e3b7ac1ef24826f9ff3d) 
4. [Openclipart の 無料SVG をアニメにするテクニック](http://qiita.com/danjiro/items/1fcdd55a346d30b40b5e)
5. [無料アニメソフト9VAeきゅうべえの裏技集](http://qiita.com/danjiro/items/6ce85f33bcda11c04f71)

## 9VAeきゅうべえ サンプル作品
1. [9VAeきゅうべえ」で絵を描かずに作れるGIFアニメ](http://qiita.com/danjiro/items/7fa584a4336cda9c0a05)
2. [9VAeきゅうべえで作成したSVGアニメーション](http://qiita.com/danjiro/items/1b4f6b5a520ade762116)



## 9VAeきゅうべえ 技術資料
1.  [アニメソフト 9VAe をカスタマイズする方法](http://qiita.com/danjiro/items/c5dc07671ffdbbb8a9a9)
2.  [イラストレータのデータを 9VAe(きゅうべえ)に変換する方法](http://qiita.com/danjiro/items/f1ad02d25196ed90fe6f)
3. [9VAeをキッズプラザ大阪向けに改造する](http://qiita.com/danjiro/items/bbb10e07a9775a938200)
4. [9VAeきゅうべえにテクスチャを追加する](http://qiita.com/danjiro/items/f07c10f82b08a646a569)
4. [9VAe / 9svg データフォーマット解説](http://qiita.com/danjiro/items/0d4ac334a7a97ddb4fe2)
6. [ワコム筆圧ペンで太さが変わる線をひくアルゴリズム](http://qiita.com/danjiro/items/8c73ce974c5988eb3a5f)
 

## ラズベリーパイ・Linux 資料
1. [Raspberry Pi 設定メモ、ワコムペンタブレットのつなぎ方](http://qiita.com/danjiro/items/a29fe4b670f1e504a717)
2. [ラズベリーパイを使ったWiFiローカルサーバーの作り方](http://qiita.com/danjiro/items/28bb17ab3e2aaf79e572)
3. [Raspberry Piとペンタブレットで毛筆描画アプリを作る](http://qiita.com/danjiro/items/efcad069d8e5e3fd6e49)
4. [Xtra-PCを日本語化して使ってみた](http://qiita.com/danjiro/items/8ee08e7a06455d860cc2)
5. [OpenCV と Python を使ったアニメーション動画用紙のスキャン画像位置合わせ](http://qiita.com/danjiro/items/985afccd07722d4c21e9)