9VAeをキッズプラザ大阪向けに改造する

![9view.gif](https://qiita-image-store.s3.amazonaws.com/0/67734/57c59972-eae1-34e9-4690-57e4c31aeccb.gif)
（写真はサイエンスフェスタ）

2016年12月10日から３月まで
[こどものための博物館 キッズプラザ大阪](https://www.kidsplaza.or.jp/gallery/2020/000405/)で、9VAeきゅうべえを使ったアニメ制作ワークショップをやることになりました。そこでアプリをワークショップ用に改造しました。

## 9VAe（きゅうべえ）とは

- [子供から大人まで使えるアニメーション制作フリーソフト](https://9vae.blogspot.com/p/9vae-download.html)
- [キーフレーム補間機能があり](https://dnjiro.hatenablog.com/entry/link-ghost)、絵を描かずに**アニメGIF、APNG, SVGアニメ**が作れます。
- カスタマイズ可能なフリーソフトで、改良して、販売、配布など自由です。
- マルチプラットフォームで、Windows/Mac/Linux/iPhone/iPad/Android/Chromebookで動きます。


## 本記事の目的

- ワークショップを実施するときに、作成したアニメ作品を保存するときに、ファイル名入力やUSBメモリの抜き差しに手間がかかりします。スタッフの人数が少ない場合には、極力作業を簡略化したいところです。ここではそのために行った、9VAeきゅうべえキッズプラザバージョンの仕様についてまとめます。
- アプリ開発者、ワークショップ実施者に参考になるかと思います。


# 要件

### 基本条件

- 対象は幼稚園から小学生
- キーボードを使わない
- パソコンは１０台から２０台
- 土日祝日は、10:30～11:10/11:20～12:00/1:15～1:55/2:05～2:45/2:55～3:35 の５回
- 平日は自由入場
- OS は Windows
- 講師１名、補助１名

### 保存の簡略化

- 名前をつけて保存」を実行すると、サーバーの指定場所が開き、自動的に名前がついて、OKボタンをクリックするだけで保存できる。
- 上書き保存もできる

- フォルダは以下のような階層構造
  年-月日/時
- ファイル名の先頭にパソコン番号

- 子供が前回の編集の続きができるようにしたい
- 当日のワークショップで上映する作品は同じフォルダにはいっている
- ワークショップが始まるときに最初に名前をソフトキーボードでいれる。新しいファイルを作ってもその名前が引き継がれるとよい
- 最初の上書き保存で名前をつけるときもソフトキーボードにする
- 新規作成、顔サンプル呼び出しのときにいったん保存する
- 男女別、年齢を記録したい。

### ４歳の子供でも操作できるように
- ボタンを大きくする。カラーパレットの色が多すぎる
- ソフトキーボードを搭載
- メニューの「ファイルとじる」を隠す。誤用防止
- 新規ファイルや新しいわらえもんを開いたとき、前につけた名前＋新しい番号になってほしい。
- ファイル名はソフトキーボードで入力。海外からの旅行者向けにアルファベットキーボードも必要

### ワークショップレイアウト
- ワークショップ10名のよこに自由にアニメ制作できるスペースを作る
- ワークショップの作品と自由エリアの作品の２つ表示するディスプレイがある

### 作品上映
- １日何回かワークショップを行う。土日祝日はワークショップごとに区別して上映できる
- 平日は自由入場なので、その日の作品はまとめて上映
- 最初にやる練習用アニメと作品用アニメは上映するときに区別したい。
- 作品上映とエディタの操作説明を交互に行う。そのために指導者用エディタには最小化ボタンをつけてほしい

### その他
- 作成したアニメをメール添付で送ることができる
- [Webアニメコンテスト](https://9vae.blogspot.com/p/web.html)に応募する作品が取り出せる
- 外国からの来館者も多い。メニューが外国語にできると良い。
- 子供が続きを作りたいとき、作品をどう読み出せばよいか
- 親にメール添付するとき、どう作品を指定するとよいか
- 年齢、性別を記録したい
- タブレットを使ってみたい



# 要件に答えるための仕様

## タイトルバー
- タイトルバーを表示しない
- 指導者用には、"-title"オプションをつけて起動するとタイトルバーが表示されるようにする。ショートカットキーにこのオプションをつけておく。


## キーボードを使わない
- 文字入力ボタンを隠す
- 「名前を付けて保存」にコモンダイアログを使わず、保存用ダイアログを作成し、ソフトキーボード（日本語、英語）を入れる。

## 保存フォルダの指定
- 9va_data/setpath.ini ファイルにサーバーフォルダを次の形式で記述する

```
\\192.168.xxx.xxx\share
```

- 9va_data/setpath.ini のフォルダが有効な場合、その中に年月日、時間に従った次のようなフォルダを自動作成する。(yyyy年４桁、mm月２桁、dd日２桁、hh24時２桁)

```
yyyy-mmdd\hh
```
 
- hh は以下のように計算する

|実施時間|判定条件|フォルダ名（hh）|
|:--:|:--:|:--:|
|10:30～11:10|終了時間より前|10|
|11:20～12:00|終了時間より前|11|
|1:15～1:55|終了時間より前|13|
|2:05～2:45|終了時間より前|14|
|2:55～3:35|前回の終了時間以降|15|



## ファイル名（パソコン番号）の指定
- アプリの exe 名を以下のようにつける。xxx をパソコン番号とする。

```
9vakids-xxx.exe
```

- 新しい名前をつける場合、まず、保存先フォルダの中のファイル名から -数字 を検出する。その一番大きい数字＋１の値とパソコン番号をつかって、次の形式の名前を自動生成する。

```
xxx-数字+1.eva
```

- 同時にファイル名入力画面でソフトキーボードを表示する。上の名前にひらがなで文字を追加することができる。後で思い出せるように作者名、作品名などをつけておく。

```
xxxソフトキーボードでつけた名前-数字+1.eva
```

## アニメーション上映

### 土日、祝日
- 10, 11. 13, 14, 15 フォルダのいずれかを、9view.exeにドラッグする。指定したフォルダの作品がつながって上映される。

### 平日
- 日付フォルダを、 9view.exeにドラッグする。日付フォルダの中の全作品がつがって上映される。


### 練習用アニメと作品アニメの区別（不採用）
- 練習用アニメの先頭ページの画面外に小さく「練習用」という文字を入れておく
- フォルダをドラッグしてアニメを上映するときに、（１）先頭ページに「練習用」という文字がはいっていない作品だけ再生する（２）先頭ページに「練習用」という文字がはいっている作品だけ再生する。これを繰り返す。こうすればドラッグ直後、作品だけ先に再生される。そのあと練習用アニメばかり再生される。
- 練習用アニメと作品アニメの区別が煩雑になるため不採用

### 作品をメールで送信（不採用）
- アニメGIF出力し、MP4に変換してメール送信する仕組みを作ったが、思ったほど要望がなかったため不採用
- 来場者は自主的にスマートフォンのカメラで作品を撮影していた。そのほうが簡単で子どもの顔も撮影できる。

# キッズプラザ大阪バージョンと、9VAeきゅうべえ標準版との違い

今回のキッズプラザ大阪バージョンで、どこが改良されたか下にまとめます。

|項目|キッズプラザ大阪版|9VAeきゅうべえ標準版|
|:--:|:--:|:--:|
|アイコン|大きい。一部に色つき|－|
|カラーパレット|１２ｘ４色|６ｘ６ｘ６色＋３６色|
|キーボード|使用しない|○|
|ひらがなソフトキーボード|○|×|
|英語ソフトキーボード|○|×|
|メニュー|ひらがな/英語/フランス語|漢字/英語|
|保存サーバーの登録|○|△最初に開く場所の指定|
|日付時間に連動した保存先の自動設定|○|×|
|ファイル名にパソコン番号を自動追加|○|×|
|同名ファイルがあるときの-番号自動追加|○|×|
|キッズプラザキャラクタ|○|×|
|登録パレット、動きグラフ|なし|○|
|文字、音、絵、アニメ入力ボタン|なし<br>（ツールメニューから入力）|○|
|文字色パレット|文字がなければ表示しない|○|
|ラベル、ボタンジャンプ、ズーム|なし|○|






# ワークショップ実施のヒント
キッズプラザ大阪でのワークショップを見ながら気づいた点をヒントとして記載します。

### 最初どういう状態から始めるか
- ワークショップの最初は、ヘルプメニューから「あいちゃんゆうくん」を読み出して、ファイルメニュー＞「なまえをつけてほぞんする」を実行して、名前入力用のソフトキーボードを表示しておくのがよいみたいです。
- いろんな子供たちがくるので、マウスのクリックが難しい子供もいます。もし最初が真っ白の画面で、メニューから「あいちゃんゆうくん」、もしくは「なまえをつけてほぞん」をクリックという操作からはじめると、不慣れな操作で何が起こるか不安な感じで始めることになります。「あいちゃんゆうくん」が画面にあって、自分の名前をクリックするところから始めれば、簡単でできそうな雰囲気から始められます。
- 名前をクリックできれば、「あいちゃんゆうくん」の帽子をクリックし、色を変えるもできるでしょう。
- つぎに、帽子の上の丸をクリックし、移動をやります。
- クリックして何か選ぶと周りに四角枠ができることを教えます。
- 目をクリックし、枠の辺をドラッグすると伸びることを教えます。
- 枠の角をドラッグすると拡大縮小できることを教えます。
- 帽子を２回クリックし、内部の点を表示させれば、帽子の形を変形できることを教えます。
- 全体を四角形で選ぶと、顔を大きくしたり小さくできることを教えます。
- 続きのページを作る方法を教えます。
- このように少しずつできることを増やしていくのが、楽しくアニメを作るこつです。

### 大画面で上映することの効果
- 作品を大画面で上映するというのはすごく効果があります。
- 子供たちは自分が作成した作品とほかの作品をはっきりと区別します。自分で作ったものが上映されることはうれしいことですし、大きな自信につながります。

### 小さな成功の積み重ね
- おとなは何か良い作品ができなければ残念と思いがちですが、子供たちは小さな成功を確かめながら成長していくようです。
- 例えば色を変更する操作を教えると、すべての図形の色を変えるまでその操作を繰り返す子供がいます。大人は、色を変えるだけでなく、移動、変形など他の操作もしてみてはとつい声をかけてしまうのですが、すべての色を変更し終わったあとの「やったあ」という声をきくと、自分で目標を設定し、小さな成功を体験したのだと感じます。

### 大人も子供も図形を動かしたことがない
- 大人も子供も絵を描いたことはあります。そのため、白いページを作成し、順番に絵を描くのは得意です。これでは再生ボタンを押しても絵が切り替わるだけ。これは古いアニメの作り方です。
- 9VAeきゅうべえのアニメの作り方は、新しい方法です。となりのページに図形をコピーし変形してアニメを作ります。この方法は大人も子供も未体験です。繰り返しやり方を教えてあげる必要があります。
- 例えば、絵の消し方をきかれたら、削除ボタンは教えずに、図形を選んで画面の外にだすことを教えます。そうすれば図形が外に退場する動きが作れます。消すという言葉に、どう消えるかという動きが隠れていることに気づいてほしいのです。
- 新しいアニメの作り方に気づいていく。そこに 9VAeきゅうべえの面白さがあります。



---
# 関連記事

## 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)

## 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. [動く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)
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 / 9svg データフォーマット解説](http://qiita.com/danjiro/items/0d4ac334a7a97ddb4fe2)