9VAeきゅうべえ動画ピックアップ

9VAeきゅうべえを使ったと連絡いただいた作品の一部を紹介します。

AviUtlと9VAeきゅうべえをうまく組み合わせた動画

自己流AviUtl「カメラ制御」入門マニュアル（其の１）

自己流AviUtl「カメラ制御」入門マニュアル（其の２）

自己流AviUtl「カメラ制御」入門マニュアル（其の３）

自己流AviUtl「カメラ制御」入門マニュアル、其の4（続・カメラ補助線）

9VAeきゅうべえでつくったミュージックビデオ

島唄（三線演奏）

9VAeを使ったキャラクタアニメーション

【そろばん・プログラミング的思考】簡単にアニメーションをつくる方法（9VAeきゅうべえ）

ここに掲載してよい9VAeを使った動画がありましたら、コメントでご紹介ください。

9VAeきゅうべえの開発ロードマップ

曲線をもうすこしきれいにしてほしいとの要望があった。内部事情を説明すると・・

9VAeきゅうべえは内部処理を固定小数点（32bit整数演算）で行なっているので、どうしても誤差が累積し、特に、円がきれいに表示されない。これは非力なパソコンでも動くように開発がスタートしたからだ。内部処理がすべて固定小数点でこれを修正するのは相当大変である。回避策として、傾いていない楕円だけ正しく描画するようにした（Ver.0.6.11）。

精度以外にもいろいろな要望を受けている。すこしずつ対応していく方針で、今後、どんな機能が追加されるか公開しておこう。

今後、開発していく機能

項目	内容	開発期間（見込み）	状態
Android外部ファイルからのリンク切れ修正	ファイル指定したら、そのフォルダのリンク切れを全部調べる	２週間？
画像の数値指定	画像の配置を数値で指定できるようにしたい	２週間？
アニメキャストの文字制御VerUp	;でマルチステートメント、[]で小節ループ記述、イージング	２ケ月？
Unityとの連携	Unityの中で9VAe が作れるようにしたい	１年？
音声入力	アニメにせりふをつけたい	２ヶ月？

開発をあとまわしにする機能

以下はあとまわし（実はあきらめている）機能

項目	内容	代替え策・開発が難しい理由
SVG保存の改善	処理を細分化し、進捗表示、中断ができるようにする	99ページより長いデータは静止画にした
口パク動画専用アプリ	AndroidStudio+Cocos2dで作りたい	ひとコマ+しゃべる機能で十分、Cocos2dよりDxLibがよい
JSON化	JSONテキストで保存できるようにする	OnePフォーマット
Windows11アプリストア対応	WinRT C++	移植が非常にむずかしいことが判明。自分が確保したメモリに文字を描画できない。ファイル処理を非同期にするのがたいへん。動画出力は FFmpegで達成
ひらがな口パク	ひらがなでも口パクできるようにする	ローマ字を標準にして、IPA Symbolとローマ字の対応表をつけることにする
ボーン	骨格で変形したい	点の結合でアニメキャストを組み合わせることで代用してほしい。かなりの変更になるのであきらめ。
動画編集	9VAeの中に動画を入れたい	AviUtlやiMovie などの既存アプリを使ってね
SNS機能	作品投稿、コメントの追加など	既存サービスを使ってね
投稿機能	Twitterやインスタグラムにアップする機能	相手側の仕様にあわせたりメンテが大変
スタンプの追加、販売	作成したキャラクタやパーツの販売	個人情報の管理、サポートが大変
スクリプト	変数を使ったプログラミング	わからん
文字の回転	文字が回転しない	inkscapeやimpressをつかって文字をアウトライン化すれば回転できます
写真の回転	写真が回転しない	他のアプリをつかって回転させてください。

いままで拡張してきた機能

今まで行なってきた機能拡張と開発期間を紹介。難しそうにみえることでも時間をかければできることがわかる。最初にあげた項目もいつかできるよきっと。

項目	期間	補足
Android版、文字の上に描画できるようにする	2か月	Ver.1.5
Windowsストアアプリ	０日	Amazon版がストアアプリになった
OneP保存	３ヵ月	X68000Z用に開発
しゃべる機能の搭載	３ヵ月	Ver.1.3
PNG画像をPNG出力すると色が変わる症状の改善	１ヵ月	Ver.1.2.1
DOORにデモルームを開設	３日	GIFアニメとリンクを設置
タッチでみえるアニメキャストのSVG保存	２週間	Ver.0.9.2
MP4出力	２ヶ月	Ver.0.9.0
連番PNG入力	１ヶ月	Ver.0.7.3
保存フォルダの階層化	１ヶ月	Ver.0.7.3
点の結合・点を結合して複数の図形を一体化する	３ヶ月	Ver.0.7.2
せりふをいれるとしゃべるアニメができる	１ヶ月	ゆっくりボイス
テクスチャ（タイル）エディタの搭載	数ヶ月	全OSで動作させるのに時間がかかった
外部プログラムからのコントロール	３週間	CSVで命令を伝える
スマホから作品のアップロード	１週間	Flaskでできた
作った作品の持ち帰り	3日	Flaskでできた
Amazon Fire版	0日	Android32bitAPKがそのままつかえた
パレットのON/OFF	3日	右下すみのタッチで切り替え
曲線の精度向上	１ヶ月	傾いていない楕円を正確に描画するようにした
iPhone/iPad版	２年	作っている間にXcodeがVerUpされると動かなくなったりした
Android版	２年	DXライブラリにない機能をどう補うか
Mac64bit版	半年	Carbon から Cocoaへの移行。iPhone/iPad版のコードが一部流用できた。
キッズプラザ大阪への導入	３年	子供が使えるアプリの開発と設備導入のタイミング
APNG出力	２ヵ月	OpenSourceの利用で比較的簡単だった
多国語対応	数ヵ月	Utf8 とShiftJIS の混在、今でも完全とはいえない
太さが変わる線、ぶれ線	１年	太さを変えるアルゴリズムが思いつかなかった
SVG入力	２年	仕様が複雑。曲線の仕様が何種類もある
SVG出力	２年	9VAe の仕様をSVGで簡単に表現することができない
ポリポリゴン	５年	従来との互換性をとるアイデア（グループ化＞いっしょに塗る）を思いつくまで５年かかった
テクスチャ塗りつぶし	２年	仕様の検討
アニメーションの階層化（アニメキャスト）	数年	時間の制御、複数のアニメから参照されたときの処理・・

9VAeきゅうべえに追加してほしい機能

9VAeきゅうべえに追加してほしい機能があれば、コメントにご記入ください。「実現したい機能」か「あとまわしにする機能」に追加していきます。

「１コマアニメーション」ワークショップ（2019 ATCロボットストリート）

機材

項目	機材	使用ソフト
タブレット	Windows タブレット５台	PEAS motch! one
ネットワーク	RaspberryPi WiFi アクセスポイント	設置方法
再生用PC	WindowsノートPC 1台	9view-lastday
プロジェクタ	1台
説明用PC	LinuxノートPC 1台	9view

• ５台のタブレットのデータを、ラズベリーパイWiFiサーバーで収集し、再生用PC＋プロジェクタで上映。説明用PCで作り方アニメーションを連続再生。

結果

実施日	作品数	総再生時間	総データサイズ
11/2(土)（10:00-17:00）	５３０本	１時間15分	2 MB
11/3(日)（10:00-17:00）	４８５本	１時間24分	2 MB

• ５３０本合計１時間15分のアニメーションが２MBしかありません。１コマの線の座標値しか記録していないので驚異的に小さく、ラズベリーパイ（８GBのSDカード）で収集できます。

作品例

11/2 の９作品

１コマアニメーション９作品（2019 ATCロボットストリート）

11/3 の９作品

１コマアニメーション９作品（2019 ATCロボットストリート）

• 9va-mac64 で、９本ずつMP4動画に変換しました。動画にすると９本が２０MBになりました。

機材レイアウト

• １－５＝タブレット ６＝RaspberryPi ７＝再生用PC ８＝説明用PC ９＝プロジェクタ

メモ

• タブレット端末５台、PEAS motch! one は５分の時間制限を設定、担当者１名で実施。順番待ち席を３席用意したが、順番を明らかにするために必ずいる。３席では足らず、５席ほしかった。
• 制限時間５分の自動運転は良好。初期状態に戻るので運用が楽。時間不足で不満を示した子は１名のみ。制限時間で自動的にデータ転送され上映されるのをみて満足する子が大半。リピータも多かった。
• 担当者のメイン作業は順番の交代。（１）席があいていたらそこに誘導。（２）席がうまっていたら、順番席にすわるよう促す。近くにたっていると順番がわからなくなる。（３）アプリの残り時間をみて、終了に近い子供がだれか把握しておく。終了すると自動的に完成しアップロードされるので、大画面での再生を確認してから、席をかわってもらう。

• よくある質問。（１）茶色はどうする－色が表示されている場所をタッチするとパレットがでてくる。（２）消しゴムが消しにくい－まわりを囲むと消える。（３）終わったらどうするー上向き矢印でアップロード。

• 9va_data/afa9vaqas.png をリネームし、ページ追加ができないモードにした。（キッズプラザ大阪でもこの設定で運用している。）

• WiFi アクセスポイントは、Raspberry Pi2 ＋ WiFiアンテナ＋ Jessie で、トラブルなし。しかし、バックアップとして持参した Pi3（WiFi内蔵） では一部の端末が接続できなかった。イベント会場ではWiFiの接続が保証できないことが多い。

• 折り畳み机の端にすわった太った子供のひざが、机の端の脚のささえに当たって、机の脚が折りたたまれ、機材が落ちるというトラブルが２回（両側の脚で）発生した。

• PC性能について、タブレットについては、6000円で購入した中古のWindowsタブレットでも十分なスピードで動作した。再生用ノートPCは低価格のノートではやや速度不足。ものすごい本数の線を入力した場合はコマ落ちが見られた。WiFiサーバーは、RaspberryPi２＋WiFiアンテナで問題なし。

プログラミング教育フリーソフトで 9VAeきゅうべえが第４位

2019年「ミスターPC」５月号、フリーソフト紹介のページで、プログラミング学習に適したフリーソフトのランキングがこうなっていた。

1. 子供向けプログラミングツール：Scratch デスクトップ
2. 初歩から学びたい人に適する：PG0
3. 子どもの意見を取り入れて開発：プログラミングゼミ 
4. アニメから学ぶプログラム：9VAeきゅうべえ
5. ゲームでプログラミングの基礎を知る：ハナのマイクラでプログラミング冒険

9VAeきゅうべえはこう紹介されていた。

アニメーションに動きを追加していくという特殊な方法でプログラミングを学習、アニメ制作ソフトとしても使えます。

すばらしい紹介文だ。５位のマインクラフト－Microsoftよりも上になっているのがすごい。

１．9VAeきゅうべえがプログラミング教育ソフトになる理由

9VAeきゅうべえがなぜ、プログラミングになるかというと、9VAeきゅうべえを開発した理由が、もともと絵を描く枚数を減らしてアニメーションを作りたかったからだ。（入手 iOS版、Android版、Amazon Fire版、PC/Mac版）Youtube解説

アニメーションに必要なコマを全部手描きすると相当な枚数になる。プログラミングで絵を作成するほうが楽にできる。例えば、同じ動きは部品化して使いまわす。部品を軌道にそって動かす。ループを簡単にする。羽ばたく鳥を飛ばそうとおもうと、階層化が必要だ。そうするとアニメーションがプログラムになっていく。全部のコマを手描きするのは、１から１０００まで数字を足すのに、１＋２＋３＋４＋と全部の数字を書くようなものだ。これはループで書いたほうが簡単である。アニメーションを楽に作る手段がプログラミングなのである。（参考：9VAeきゅうべえのプログラミング要素）

以下、ランキングのほかのソフトと 9VAeきゅうべえを比べてみた。それぞれの特長がわかる。ソフトを選ぶときの参考にしていただきたい。

２．「Scratch」と 9VAeきゅうべえは伸ばすところが違う

１位が「Scratch」というのは納得できる。MITが開発した教育界でもっとも有名なソフトだ。プログラム言語を知らなくても、ブロックをならべていくことでプログラムができる。世界中で使われている。

プログラミングが作業手順の分解だと考えると、Scratchの基本単位がブロックだ。そのため、どんなブロックがあるかを知ることが重要である。もともとブロックはテキストプログラミングの命令をブロックで置き換えたものだったが、初心者がプログラム演習するときに、楽しく学習できるように、いろんなブロック（たとえば音がでるブロックなど）が追加された。

ロボットをブロックで動かす場合、ひとつのブロックは「１歩前進」だったりする。ところが実際の動きをみると、「１歩歩く」は右足と左足を動かしており、もっと細かく分解できるはずだ。ところが、ブロックの単位を細かくすると１歩歩くだけで大変になってしまう。

そのため、ブロックを使うプログラミングでは、用意されたブロックによって、できることが左右される。自由に思いついたことをプログラミングするよりも、答えが存在する課題（用意されたブロックで実現できる課題）に向いている。しかし、答えのブロックを見つける勉強になってしまうと、教科書の勉強と同じようになってしまう。

9VAeきゅうべえにはブロックがないのでなんでもできる

9VAeの場合はどうか、鳥が３羽、羽ばたいて飛ぶアニメをつくろうとすると、１羽の鳥をパーツにして、それを３羽複製するとよい。羽がはばたくところは、胴体と羽を別々のパーツにしておいて羽を上下にうごかすとよい。

この場合、羽というパーツや胴体というパーツ（ブロックに相当）が最初からあるわけではない。最初は自分で絵を描く。それをどうブロックにわけるか自分で考えるのである。

そのためブロックによる制限がない。だから子供が自由に思いついたことから始められる。例えば「モンスターが地面からもこもこと現れてきた。」と思いついたら、Scratch ならモンスターのキャラクタを探すことから始めるだろう。9VAeの場合は自分で描けばよい。もこもこと現れるとはどういうことか、自分で描いた絵を変形して、動きを考えればよい。つまり思いついたことが何であっても、そこからスタートできるのである。

Scratchと9VAeきゅうべえの似たところ

Scratchでプログラムを作ったら、期待どおりに動くか実行して確かめる。9VAeきゅうべえではアニメーションを再生して、期待どおりの動きになるか確かめる。細かく部品化していくと、複雑な動きが実現できるが、思ったとおりに動かすのが難しくなっていく。これはプログラムのデバッグ作業と同じである。つまり、9VAeきゅうべえのベクトル図形はソースコードなのである。どこでも自由に修正し、再生できる。ブロックもプログラム言語もないが、プログラミング開発環境なのである。

ただ、9VAeきゅうべえでプログラミングが全部学べるかというとそうではない。そもそも変数がない。自分で作業を分解するプログラミング的な考え方が身につくだけだ。Scratchと9VAeきゅうべえは伸ばすところが違う。ぜひ両方体験してほしい。9VAeきゅうべえは、Scratchコスチュームが簡単に作れるので連携できる。

３．「PG0」は数値、  9VAeきゅうべえは絵を扱う

PG0 はテキストでプログラムを書き、プログラム実行の仕組みがわかるプログラミング言語＋開発環境である。筆者がさいしょにパソコンでBASICをつかったときはこんな感じだった。左側にプログラムを書いて実行すると、右側に自動的に変数が毎時表示される。値がどう変わっていくか表示されとてもわかりやすい。言語はCやJavaを簡単にした独自言語。

ただ算数をしらない幼児には難しいかもしれない。PG0  は数を扱う。9VAeは絵を動かす。扱うものが全く違う。9VAeは数という抽象的なものでなく具体的な絵を扱うので、幼児から取り組める。抽象的なことが苦手な子供には、9VAeから始めるとよいかもしれない。

ところが9VAeきゅうべえの内部では絵が数値で表現されている。線を右に移動させるには、X座標の数値を増やす。回転させるには行列演算を行う。 9VAeきゅうべえを開発したければ、PG0が理解できなければならない。9VAeきゅうべえがどのように動いているかと聞かれたら、PG0のようなプログラムが図形の頂点の場所を計算していると答えるとよい。9VAeをさわることで、なぜPG0が必要かが実感できる。

４．「プログラミングゼミ」は先生、9VAeきゅうべえは道具

プログラミングゼミはソーシャルゲームのDeNAが本気で作った教育アプリだ。9VAeきゅうべえとは開発規模、レベルがまったく違う。低学年の子供がゲーム感覚でプログラミング学習ができる。一言でいえば「Scratch」をゲーム会社が作ったらこうなる、といったアプリで、Scratchよりわかりやすい。

使い方を動画で説明してくれる。やさしいサンプルを提示し、ステージを順番にクリアして難易度があがっていくのはゲームソフトと同じ作り方だ。iPadでやってみたが、これなら先生がいなくてもブロック言語をつかってキャラクタを動かす方法が身につけられそうだ。Scratch が難しいと感じたらこちらをやるとよいだろう。

DeNAと開発規模が違うので比較するのもおかしいが、9VAeきゅうべえは不親切で、先生のかわりに教えてくれる機能は全くない。

9VAeきゅうべえには練習用サンプルが付属しているが、基本は白紙からスタートする。線をひいた段階で、すべての子供は異なる地点から出発する。その後の展開を自分で考えなければならない。9VAeきゅうべえには便利な機能があちこちに隠れているが、それを自ら発見してほしいと考えている。登山にたとえると、プログラミングゼミは整備された登山道だ。誰でもこの道を通って頂上までいける。見所ポイントを順番に全部みることができる、しかし見える景色は同じだ。9VAeきゅうべえは出発点がみんな異なり、さまよいながら頂上をめざす。登り方は自分で考える。大人が思いつかなかった新しい景色に出会うかもしれない。筆者はそういう可能性をもった道具が好きである。

9VAeは動画素材が作れる実用ツールである。順番としては、プログラミングゼミを先にやってみて、自分の世界を表現したくなったら、9VAeきゅうべえを体験してみるのがよいと思う。

５．「ハナのマイクラでプログラミング冒険」は３次元、9VAeは２次元

ハナのマイクラでプログラミング冒険は、Microsoft が教育向けに作成した解説書。Minecraft（下図）は世界的にヒットした３次元ゲームソフトで、３次元の世界を自分で作ることができる。 MakeCodeというプログラミング環境を使ってさらに複雑な処理ができる。その使い方をまんがで説明したもの。

「プログラミングゼミ」がゲーム会社が作った教育ソフトとすると、こちらはもっと本格的だ。Windows版の 9VAeきゅうべえも Microsoft のプログラム環境VisualStudio で開発している。３次元のゲームの世界の中でプログラミングが勉強できるという本物感がある。ただ、今は「Office 365 Education account」などのアカウントがないと実行できない。9VAeもMinecraftのように外部からコントールできる（こちら）。

以上まとめると、このランキングには、Scratch, DeNA, Microsoft, という巨人の中に、PG0 と 9VAeきゅうべえという小さなソフトがはいっているわけだ。商業用ソフトに偏っていないバランスがとれたランキングだと思う。

６．Viscuit は簡単だが難しい。9VAeは実用的

さて言語を使わないプログラミング学習といえば「Viscuit ビスケット」が有名だ。おそらく次点に選ばれていると思う。そのかわりに 9VAe が選ばれたのは、Viscuitビスケットと同じような特長をもった新しいソフトだったからかもしれない。

• 白紙からはじめる、みんなが違う結果になる。
• 答えがない。自分で考える。

• めがねの追加で、どのような動きになるか、予測が難しいが、そこがおもしろい。奥が深い。

一方、9VAeきゅうべえが、Viscuitビスケットと違うのは、

• 文字、写真やイラストを動かす動画作成アプリとして実用的。
• 期待した動きをつくるのは、9VAeのほうが直感的でわかりやすい。

9VAeには、ユーザー登録がなく、個人情報を収集しない。広告がなく、出力にロゴがはいらない点も安心。ぜひ他の教育ソフトといっしょに、9VAeきゅうべえを使ってみてほしい。

•  9VAeきゅうべえの入手
•  Pythonで9VAeアニメデモを作る
• Processingで9VAeアニメデモを作る
• 9VAeでスクラッチコスチュームを作る

７．Springin' スプリンギン

言語をつかわないプログラミング環境として、しくみデザインの Springin' スプリンギンはおすすめ。

• 物理演算が可能で、絵の形と重力や反発係数、重さなどの設定によって、いろんな動きが制御できる。Viscuitよりわかりやすく、9VAeより複雑な動きを簡単に表現できるのが魅力。
• こちらに使い方があります。

一方、描いた絵が物理演算とは関係なく変化していく動きは、9VAeが作りやすいです。

８．さらに勉強したいなら Python (パイソン)

より先にすすめたいなら、Python がおすすめです。無料でプログラムがつくれます。解説記事も豊富です。

•  Python パイソンで アニメを動かしてみた
•  Python + Flask でアニメGIF ダウンロードサーバーを作る
•  OpenCV と Python を使ったアニメーション動画用紙のスキャン画像位置合わせ

９．Webアニメコンテストに応募しよう

 9VAeで作成した、EVAアニメ、GIFアニメは、PEAS Webアニメコンテスト に応募してみましょう。学校のクラブからの応募も多く、小中学生の作品が多数掲載されています。賞品は、ワコムのペンタブレット、CLIP STUDIO PAINT など。募集期間は６月から９月末まで。（大人でも応募できます。）

9VAeきゅうべえに関する質問

• 9VAeに関する質問（Yahoo知恵袋）
• よくある質問（Qiita）

PEAS motch! で１コマアニメーション動画を作成

PEAS motch アンドロイド版で、５分で動画を作ってみました。

9VAeきゅうべえアンドロイド版、PC版、iPad版、iPhone版でもつくれます。
他のアニメの作り方はこちらをご覧ください

 

■ PEAS motch! one（Android）のダウンロード

•  https://play.google.com/store/apps/details?id=com.peasMotch

フリーソフト9VAeきゅうべえでも最初に「１．」ボタンを押せば作れます。

• 無料ソフトでアニメを作ってみよう（9VAe きゅうべえ） - Qiita

１. 絵を描いて、アニメーション再生ボタンを押す

1. PEAS motch! の左上のボタン（上図１）を押せば、画面が広がります。
2. 色はカラーボタン（上図２）で変更できます。線の太さを変更したいときは左上のボタン（上図１）ををおして、メニューからペンサイズを変更します。
3.  順番を考えながらメッセージを書きましょう。間違えたときは、戻るボタン（上図４）で取り消しできます。
4. アニメーションボタン（上図３）で、アニメーションになります。（9VAeきゅうべえの場合は最初に「1.」を押して、絵を描いたあと、もう一度「１．」を押せば１コマアニメーションができます。）

書いた順番に線が書けるアニメーションを「ホワイトボードアニメーション」といい、普通は絵を描く様子を録画して作成します。9VAeきゅうべえ／PEAS motch! の「１コマアニメーション」は録画ではありません。完全な図形エディタなので、後から、形や色を自由に修正できます。

２. 後から形を自由に修正できる

右上の文字「て」（上図１）の形がおかしくなってしまったので修正します。

 

1. 選ぶボタン（上図２）をタッチし、「て」を選びます。

2. もう一度、選ぶボタン（上図２）をタッチすると「て」の内部の点が表示されます（上図１）
3. ２本指を離す動作（ピンチアウト）で画面拡大ができます。
4. 点を移動させて形を整えます。（上図３）

３. 影をつける

入力した線に後から影やぼかしをつけることができます。線の太さや色も後から変更できます。

1. 選ぶボタン（上図１）をタッチして図形を選択（上図２）。
2. 線の種類ボタン（上図３）をタッチ。影（上図４）で影がつきます。
3. これでもうアニメーションができました。

４．アニメGIF出力

• ファイルメニュー＞「アニメGIF(ジフ)をつくる」で、好きなサイズのアニメGIFを作成できます。
• 画像サイズについて、MP4動画を作る場合は高さ「７２０」（下図１）に設定するとよいでしょう。幅は空白（下図２）にしておけば、比率を保った数値が自動設定されます。

  

• ファイル名をいれて「OK」ボタンを押せばアニメGIFができます。
• PEAS motch! Android版の場合、完成したファイルは、端末内の「PEASMotch」フォルダの中に、指定した名前で出力されます。フォトアプリで、「アルバム＞PEASmotch」で見ることができます。ただし最初は何もかかれていないので静止画では白紙のように見えます。

５．ezgif サイトで、MP4動画に変換

ezgif サイトを使えば、アニメGIFをMP4動画に変換できます。無料でロゴもはいりません。

1. ブラウザで、ezgif.com ( Online GIF to MP4 Video converter ) を開く
2. 「ファイルを選択」をタッチ＞ 作成したファイルを選ぶ。（Android版の場合、「ファイル」をタッチし、出力されたアニメGIF（白紙に見える）を選ぶ）
3. 「Upload!」ボタンをタッチすれば下図のようになります。

   

4. 「Convert GIF to MP4!」ボタン（上図１）をタッチ

   

5. 「Save」ボタン（フロッピーディスクアイコン 上図１）をタッチ

• これで、MP4動画ファイルが「ダウンロード」フォルダに保存できます。上に表示されている時間、１３秒（上図２ length）を覚えておきましょう。

 

６．Youtube に動画をアップ

• 作成したMP4動画ファイルは、Youtube アプリを使ってアップロードできます。

1. Youtubeアプリを起動
2. 一番上のカメラボタンをタッチ
3. Youtube にファイルアクセスを許可する
4. 「ダウンロード」したファイルが表示されるので、それをタッチ。１コマアニメーションは最初が白紙なので画面には白紙で表示されています。13秒の白紙を選びます。
5. タイトルを入れて上の送信ボタン（紙飛行機ボタン）を押せば、スマホからYoutubeにアップできます。
6. 最初はプライバシーが「限定公開」になっており、「共有」ボタンでリンクを通知すれば動画を送った人だけにみてもらえます。プライバシーを「公開」に変更すれば、誰でも Youtubeでみることができるようになります。

   
   PEASmotchで１コマアニメーション動画を作成

７．ポイント

• PEAS motch ! を使えば、スマホだけで簡単に動画（ホワイトボードアニメーション）が 作成できます。
• 今回の例では１３秒のアニメーションが５分で作れました。PEAS motch! は９ページの１コマアニメーションが作れるので、１分程度のメッセージアニメーションが簡単に作れます。
• 結婚式のお祝いメッセージ動画を、その場で Youtube にアップするといった使い方ができそうです。
• １コマアニメーションの歴史、いろんな応用が以下に書かれています。

  dnjiro.hatenablog.com

9VAeきゅうべえに関する問い合わせ

• 9VAeについて、Yahoo知恵袋で質問すれば答えが得られます。
• 本記事の文章、図、アニメは複製自由です。教材、解説記事にご利用ください。

タッチすると拡大するアニメが作れる無料アプリ：9VAeきゅうべえ

画面をタッチするとその部分を拡大するアニメをつくってみよう。

9VAeきゅうべえアンドロイド版でもPC版、iPad版、iPhone版でもつくれます。

作業時間は１５分程度です。他のアニメの作り方はこちらをご覧ください

 

■ 9VAeきゅうべえのダウンロード

• Win/Mac/Linux：無料ソフトでアニメを作ってみよう（9VAe きゅうべえ） - Qiita
• アンドロイド：9VAeきゅうべえAndroid版（Google Play）
• iPad / iPhone：9VAeDanga (Apple)、9VAePro (Apple)
• 9VAeのボタン説明

9VAeきゅうべえの使い方

１. 文字を入れる

1. 拡大するサンプルの文字を入れましょう。どんな文字でもかまいません。この例では、9VAeきゅうべえの開発年表を作ってみました。

   文字入力ボタン（１）を押して何か文字を入力してください。（２）を押しながらドラッグして左に寄せましょう。選択枠中心の「＋」（３）を押してメニューから「複製する」で文字を複製します。

2. 複製した文字を移動し、中心の「＋」をタッチ。あと２回「複製する」を繰り返すと上のようになります。

3. 文字を順番に選択し、選択枠の中心の「＋」メニューから「文字の内容変更」をタッチし、４つの文字を別の内容に変更しましょう。

4. 

   文字が大きすぎる場合、全体を四角形で選択し、選択枠の角の▪️をドラッグして縮小します。文字を整列させるには、両端の文字を左端、右端に移動させたあと、全体を選択し、「メニューバー＞配置＞横軸を合わせる」と「配置＞左右のすきまを均等に」を実行します（パソコン版は「調整＞整列」の中にあります）。文字背景の塗りつぶしは塗り色（下図１）です。文字に影をつけるのは、文字パレット（下図２）を押して「F」ボタンメニューから「影（枠）」にチェックを入れます。

   

２. 文字を記憶ツールに入れてアニメキャストを作る

文字をさわると拡大するようにするには「アニメキャスト」の「さわるとみえる」設定を使います。

 

1. まず文字を選択し、記憶ツールボタン（上図１）をタッチすれば、文字が記憶ツールにはいります。

2. 記憶ツールの下の「ｑ」ボタン（上図２）をタッチ。アニメキャストの名前入力になります。そのまま「OK」を押してもかまいません。

3. アニメキャストの中心の「＋」をタッチ。メニューの「さわったら見える」にチェックを入れます。
4. そのあとメニューの「アニメ（ｘｘ）を修正」をタッチ。アニメキャストの中身のページが開きます。

３. 続きのページを作成

1. ページの上の時間（上図１）をタッチ。メニューから「0.1秒短くする」を何回かタッチして「0.3秒」にします。
2. ページの右側のボタン（上図２）をタッチ。メニューから「続きのページを作る」をタッチ。１ページの内容が２ページにコピーされます。

４．文字を拡大し、「往復」を入れる

1. 文字の選択枠の角の▪️（上図１）をドラッグして拡大。
2. ツールメニュー（上図２）から「往復」をタッチ。２ページに「往復」命令を入れます。
3. プレイボタン（上図３）で動きをみてください。文字が0.3秒で拡大し、その状態を保ちます。アニメを止めるには、プレイボタンの右側の停止ボタン、iPhoneの場合はメニューバーをタッチしてください。
4. 画面の左上の太い文字（上図４）をタッチ。メニューから「このアニメに戻る」をタッチすれば元のアニメに戻ります。

 

５．他の文字にもアニメキャストをつける。往復を入れる。

1. 他の文字にも同じように「さわったら見える」アニメキャストをつけましょう。
2. 「ツールメニュー＞往復」で元のページにも「往復」命令をいれます。これがないと１秒でアニメが終了してしまい、文字が拡大されたままになりません。
3. 「表示＞大きいサイズで再生」で動作を確かめてください。

• 文字の上に点線で表示された透明なアニメキャストが重なっています。
• 「さわったら見える」にチェックがあるため、そこをタッチしたときにアニメキャストがスタートします。
• 0.3秒で文字が拡大され「往復」命令があるため拡大した状態を保ちます。
• ほかの文字の場所をタッチすれば、元の文字は見えなくなり、タッチした文字が拡大されます。

６．「さわったら見える」の応用

• 「さわったら見える」アニメーションは、9VAe上でしか動作しません。
• PowerPointのかわりに、9VAeをつかってプレゼンテーションするときにつかえます。
• 9VAeをプログラミング教材として使う場合には、いろんな使い道があるでしょう。

1. 今回作成したアニメーションについて、最初から見えている文字を「？？？？？」といった文字にすれば、最初は何をかいてあるかわからずに、その場所をさわると文字が表示されるというアニメーションになります。
2. 最初の文字を英語にし、アニメキャストの中の文字を日本語にすれば、英単語をタッチすると日本語訳が表示されるといった学習用のアニメーションが作れます。

７．説明用アニメーションの作り方

• このページの最初にある説明用アニメーションは、対話型ではないため、アニメキャストは使っていません。「続きのページをつくる」をつかって文字を順番に拡大し、指のイラストをそれに合わせて動かしています。

• 指のイラストは、FreeSVG の次のイラストを使いました。

  Finger pointing nog in black and white image | Free SVG

• こういう説明用アニメが簡単に作れるのも 9VAeきゅうべえの魅力です。

• もっと長いアニメや動画を作ることもできます。以下をご覧ください。

9VAeきゅうべえ：長いアニメを作る方法 - Qiita

9VAeきゅうべえに関する問い合わせ

• 9VAeについて、Yahoo知恵袋で質問すれば答えが得られます。
• 本記事の文章、図、アニメは複製自由です。教材、解説記事にご利用ください。

 

9VAeきゅうべえの黒バック機能（ダークモード）について

9VAe きゅうべえの iPhone版のリリースをすすめている。そのとき、9VAeで作成した「１コマアニメーション」を、ARグラスに表示できるようにしようと考えている。

そうすると、背景が黒のほうが都合よい。それで「ダークモード」を新設し、これをONにすると背景が黒になるようにした。iOS / macOSがダークモードをはじめたのでそういうのがあってもよいだろう。

予想される問題点

ダークモードでは、背景が黒なので、線は白で描画するだろう。

• SVGで保存する場合、背景を黒にしないと線が見えなくなる
• データにダークモードON/OFFの情報を記録しておかないと、プレーヤーで再生するときにこまるのでは？
• 昔のデータは白バック前提でつくられている。ダークモードに設定したプレーヤーで再生すると、全部黒バックで再生される。これは良さそうな気がする。
• iPhoneは、黒バックで起動する予定。するとここで作られるデータは、白い線で書かれることになる。それをパソコン版で読みだした時、パソコン側も黒バックで起動したほうがよいのでは。つまり、パソコンにもダークモードを導入していくのがよいかも
• データには、指定なし、白バック、黒バックの３種類を新たに記録する。
• 記録がない場合、iPhoneは黒バック、その他は白バックで起動。記録がある場合はそれに従って、エディタの背景色をファイルごとに切り替える？
• いや、エディタは手動でダークモードを切り替える。プレーヤーだけファイルごとに切り替えるがよいような気がする。

順次、機能追加していくつもり。