Springin' Classroom （スプリンギン）の使い方：ひとコマ解説

Springin' Classroom の使い方を説明します。

ほかの解説動画はこちら。

Springin' Classroom とは

• Springin' （スプリンギン） は、しくみデザインが開発した、手描きイラストに物理演算を働かせて、動く絵本やゲームが作れるアプリです。言語をつかわないので子供でも簡単にできるプログラミング開発環境といってもよいです。Springin' Classroom は、Springin' を学校教育向けに修正したもので、コインのやりとりやコンテスト応募をなくし、授業で使える教材などが追加されています（要アクティベート）。

Springin' Classroom ダウンロード

契約して使う教育機関向けのソフトとのことですが、無料で試用できます。学習用はこちらがおすすめ

• iPhone / iPad版
• Android / Chromebook 版

Classroom でない Springin' はこちら

• iPhone / iPad版
• Android / Chromebook 版

絵を描いてレイアウト

絵を描くのは簡単です。描き終わるとパーツになります。ドラッグして画面にレイアウトします。

1. Springin' Classroom を起動。「アクティベートせずに試用」でスタート
2. 「＋」で作成画面になります。
3. 下の「i」ボタンが「ヘルプ」です。使い方説明が表示されます。画面説明やサンプルゲームの作り方まで動画でわかりやすいです。
4. 「＋」で絵を描く画面になります。
5. まるい顔を描いてみましょう。
6. 終了は、右下のチェックマーク。描いた図形が部品リストに入ります。
7. もう一回「＋」
8. 「し」の形の線を描きましょう。
9. チェックマークで終了
10. 「し」をドラッグして、右側にいれます。タッチするとパレットが表示されます。
11. 拡大ボタンをタッチ
12. ドラッグして拡大します。２本指でさわって拡大、回転することもできます。

重力を設定して動かす

重力を設定すると、レイアウトした図形が下に落下します。ピン留めすると落下しなくなります。自由に回転する設定もあります。

1. 顔をドラッグして入れます
2. 何もないところをタッチすると重力設定ボタンが表示されます
3. 重力設定ボタン
4. 中央から下にドラッグすると下向きの重力が設定されます。
5. チェックマークで完了
6. 顔をタッチ。
7. パレットから「自由回転」をタッチ。これで顔の向きが自由に動きます。
8. 線をタッチ
9. パレットから「ピン止め」をタッチ。「自由回転」が設定されていないので、線は動かなくなります。
10. 「スタート」をタッチ。顔が下に落ちて転がります。重力が小さいと止まります。
11. 「停止」ボタンで終了
12. 重力をもっと下にのばすと、重力が強くなります。重力を強くすると顔が外に飛び出します。

ホッケーゲーム

タブレットだと、描いた図形を指ではじいて動かすことができます。形を変えるといろんな方向にはねかえります。

1. 「＋」で新規作成
2. 「＋」で絵を描きます。
3. 三角、四角、まる、ホッケーのリンクを描きます。ホッケーリンクは上下にすきまをあけておきます。角をまるくしておいたほうがよいでしょう。
4. 描いた図形をドラッグして画面に配置します。
5. ホッケーリンクを選びます。
6. 拡大ボタン
7. ドラッグして拡大
8. ホッケーリンクを選びます。
9. ピン止めボタン
10. 三角を選びます
11. 自由回転
12. 四角も選んで自由回転にします
13. パレットは、端のボタンで消すことができます。
14. スタートボタンで、ゲームスタート
15. 指で、交互に、三角、四角を指ではじいて、ゴールにボールをいれたほうが勝ち

Springin' Classroom の魅力

• 自分の描いた絵に簡単に動きがつけられるのが魅力です。
• 物理演算があり、プログラム言語を使わずに、複雑な動きを作ることができます。9VAeは自分が描いた絵をキーフレーム補間で動きをつけますが、より複雑な動きが簡単に作れます。
• 形によって接触したときの動き方がかわるので、どのような形をつくれば、どんな動きをするか、想像しながら自由に作れます。

内容：

---

解説動画の作り方

この記事のひとコマ解説GIFは、フリーソフト9VAeきゅうべえで作成しています。

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

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

• 9VAeきゅうべえで、キャプチャー画面に、矢印や説明を加え、ページに「ひとコマ」設定するだけで作れます。
• Youtube動画より短く、キャプチャー画面の羅列より見やすいのが特長です。
• FFmpeg を使って Youtube 動画にすることもできます。

画面キャプチャ方法

OS	画面キャプチャ方法	保存先
Windows	Print Screen キー Shift + Windows + S  無料ソフト「kioku」	クリップボード
Mac	Shift + Command + 4 （ShiftキーはZの左）	デスクトップ
Android	電源 + 音量Down  adbコマンド (開発者向け)  adb shell screencap -p /sdcard/screen.png  adb pull /sdcard/screen.png	フォトアプリ＞ ライブラリ＞ Screenshots
iPhone / iPad	ホームボタン + 電源ボタン サイドボタン + 音量UP	写真＞ アルバム＞ スクリーンショット
Linux Mint	Print Screen キー	クリップボード ファイル
Amazon Fire	電源 + 音量Down １秒長押し USBケーブルでPCと接続し、 設定＞接続デバイス＞USB＞ファイル転送	ピクチャ > スクリーンショット
Chromebook	Shift + Ctrl + ウィンドウ一覧キー（上の中央のキー）	マイファイル > ダウンロード

キャプチャ画像を転送する方法はこちら

キャプチャ画像を9VAeに読みこむ

1. 画像入力ボタン「山」でキャプチャ画像を読み込む
2. 画像の中心の「＋」をクリック。メニューから「ステージの大きさにする」
3. 画像の中心の「＋」をクリック。メニューから「ページを画像に合わせる」

文字、矢印を入れる

1. 文字入力ボタン「A」で数字を入力
2. 角の■をドラッグでサイズ変更。
3. 中心の「＋」または枠線のドラッグで移動
4. 線の種類ボタンをクリック。メニューから「→」で矢印に設定
5. 折れ線ボタンをクリック
6. 開始点
7. 終了点
8. 選択ボタンで入力終了
9. 太さ設定ボタン。メニューから「太くする」で太くできます。
10. 文字入力ボタン「A」で説明文章を入力
11. 背景の色を設定
12. 線の種類メニューの「ー」で枠線がつきます
13. 太さ設定ボタン。メニューから「太くする」で太くできます。

文字の色、縁、影をつける

1. 文字を選ぶ
2. 文字タブ２をクリック
3. 文字の色をクリック
4. 赤に設定
5. 文字と矢印をドラッグして選ぶ
6. 図形タブ１をクリック
7. 線の種類から「縁をつける」
8. 線の種類から「影をつける」、線の種類から「広く」
9. 線の色「赤」

ひとコマアニメーションにする

1. ページ時間をクリック。メニューから「ひとコマ」を設定。これでアニメーションができます。
2. プレイボタンで再生してみましょう。入力した順番に文字、矢印がでてきます。
3. これで１ページ完成です。続きを作りたい場合は、ページの右側の「＋」をクリックし「続きのページを作る」で、２ページ目が作成できます。

アニメGIF、動画出力

• 「ファイルメニュー＞アニメGIF出力」または「動画出力」で、好きなサイズのアニメGIF または MP4動画 が作成できます。
  Win / RaspberryPi / Linux版 でMP4動画を作るには FFmpeg が必要です
• スマホの場合、端末内の「9VAe」フォルダの中に出力されます。フォトアプリで、「端末内の写真＞9VAe」で見ることができます。
• アニメGIFは、背景を透明にできます。音がいれられません。
• MP4動画には音が入れられます。Youtubeに投稿できます。Youtubeに投稿する場合、１秒30コマ、高さ720 または 1080 で出力するとよいでしょう。

9VAeをつかえば素材動画が作れる 

• 9VAeきゅうべえを使えば、オリジナルの素材動画が簡単に作れます。
• Openclipart や  FreeSVG などフリーのSVGイラストをつかって動くキャラクタが作れます。
• 動画編集ソフトで動画に合成できます。

OS	フリーソフト	9VAeで作成する素材動画
Windows	AviUtl	連番PNG または MP4
Mac/iPhone/iPad	iMovie	MP4 または　QuickTime(古いMac)
Android	PowerDirector	GIF または MP4

作り方

• AviUtl動画に合成する方法 (Windows)

• グリーンバック動画を作成してiMovieに合成する方法 (iPhone/iPad/Mac)

• PowerDirector でグリーンバック動画を入れる方法（Android 他）

• キネマスター用グリーンバック動画を作る方法

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

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

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

• 9VAeに関する質問（Yahoo知恵袋）
• よくある質問（Qiita）
• 本記事の文章、図、アニメは複製自由です。教材、解説記事にご利用ください。

9VAeきゅうべえの使い方：ひとコマ解説

9VAeきゅうべえの使い方を説明します。

ほかの解説動画はこちら。

9VAeきゅうべえとは

• 9VAe は、イラストに動きをつけてオリジナルな動画素材が作れる無料アプリです。この解説動画も9VAeで作成しました。

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

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

動画編集ソフトと9VAeの関係

• フリーソフト9VAeをつかうと、上の「カニとたたかう」のような自由に動く動画を作成できます。動画編集アプリといっしょに使うと効果的です。プロは 動画を作成するときに、Adobe Premiere と After Effects を組み合わせてつかいますが、9VAe は、AfterEffects のようなツールアプリです。

サンプル動画の作成

9VAeをダウンロードしたら、まず、サンプル動画を作成してみましょう。ヘルプメニュー「カニとたたかう」を見てみましょう。たった５枚のキーフレームでなめらかに動く動画が作られています。

1. 9VAeを起動。ヘルプメニューから「カニとたたかう」
2. 右下の空白をタッチするとパレットが消え、表示画面が広くなります。
3. ファイルメニュー＞動画出力
4. サイズの横幅を空白にします。空白にすると横幅の値が自動設定されます。
5. サイズの縦を１０８０にします。
6. 秒コマを３０にします。
7. OKでMP4動画が作成されます。

・Windows版、Linux版9VAeで MP4動画を出力したい場合、FFmpegが必要です。こちらを参照。

ファイルの保存と切り替え

9VAeで名前をつけてファイルを保存しましょう。複数のファイルの切り替えは「9VA」ボタンです。

1. 9VAeを起動。ヘルプメニューから「カニとたたかう」
2. 右下の空白をタッチするとパレットが消え、表示画面が広くなります。
3. ファイルメニュー＞名前をつけて保存。「かに」と名前をつけました。
4. 右下の「もどす」でパレットが見えます。
5. ヘルプメニューから「変身」を読み出します
6. 「9VA」ボタンをタッチ。メニューの「↓編集中のアニメ」の「かに」をタッチすると「かに」が開きます。
7. 「9VA」ボタンメニューの「↓編集中のアニメ」の「(new-sample)」をタッチすると「変身」が開きます。(new-sample)は保存する前の仮の名前です。

• あるファイルの図形をコピーし、別のファイルに入れたいときに上の方法でファイルを切り替えます。

保存したファイルを開く、複数ファイルの切り替え

SVGフリー素材イラストを読み込む

9VAeきゅうべえは、既存のSVGイラストを読み込んで、自由に動きがつけられるのが特長です。この機能を持ったアプリは、他には見当たりません。

SVGフリーイラストを提供しているサイトには、以下のようなものがあります。

SVG素材サイト	アドレス
Openclipart	https://openclipart.org
unDraw	https://undraw.co/illustrations
OpenDoodles	https://www.opendoodles.com
SASHIE	https://sashie.org/

• SVGファイルをダウンロードして、ファイルメニュー「開く」で読み込めます。
• スマホ版9VAeでは、Android版はダウンロードから読み込めます。iPhone/iPad版では、ファイルアプリをつかって「9VAe」フォルダに移動してください。もしくは、SVGファイルのアドレスをコピーし、ツールメニュー「ネットからダウンロード」でも読み込めます（アニメキャストになります）。

Openclipartからの読み込み

ここ(Shishi Lion Dance)から読み込んでみます。

1. SVGボタンを長押しし「リンクをダウンロード」。iPhone/iPad版では、共有＞ファイル＞「9VAeDangla」または「9VAe」フォルダに保存します。
2. 9VAeを起動。パレットの下をタッチすると画面が広がります。右下の「もどす」で戻ります。
3. 表示メニュー「ダークモード」で白黒反転します（スマホ版）
4. ファイルメニュー「開く」。ダウンロードした「shishi.svg」を読み込みます。
5. ページの右側「＋」をタッチ。メニューから「続きのページを作る」。これで２ページを作ります。
6. 点選択ボタンをタッチし、歯と下顎の点を選んで下に下げます。この操作の詳細な説明はこちらをご覧ください。
7. １ページをタッチして移動
8. ツールメニュー「往復」
9. プレイで再生してみましょう。下のようになるはずです。

unDraw から読み込み（Android）

ここから「Coffee with friends」を読み込んでみます

1. Coffee with friends をタッチ
2. Download SVG for your projects ボタンをタッチ。iPhone版では、ファイルアプリでダウンロードから「9VAe」「9VAeDangla」フォルダに移動してください。
3. 9VAeを起動。パレットの下をタッチすると画面が広がります。右下の「もどす」で戻ります。
4. 表示メニュー「ダークモード」で白黒反転します（スマホ版）
5. ファイルメニュー「開く」。ダウンロードしたSVGファイルを読み込みます。
6. ページの右側「＋」をタッチ。メニューから「続きのページを作る」。
7. コーヒーカップと腕の点を選択して回転。細かい操作はこちらを参考。
8. プレイボタンで再生

OpenDoodles から読み込み（iPhone）

ここから下のイラストを読み込んでみます。

1. イラストをタッチ。SVGボタンが表示されます。
2. SVG ボタンを長押し「リンク先のファイルをダウンロード」
3. iPhone版では、ファイルアプリを起動し、「iPhone内」の「ダウンロード」フォルダを開きます。
4. ダウンロードしたSVGファイルを長押し。メニューから「移動」
5. 「iPhone内」の「9VAe」「9VAeDangla」フォルダを選んでください。
6. 「移動」
7. 9VAeを起動。パレットの下をタッチすると画面が広がります。右下の「もどす」で戻ります。
8. 表示メニュー「ダークモード」で白黒反転します（スマホ版）
9. ファイルメニュー「開く」。ダウンロードしたSVGファイルを読み込みます。
10. ページの右側「＋」をタッチ。メニューから「続きのページを作る」。
11. 髪の毛を選び、形を変形します。
12. １ページに移動
13. ツールメニューから「往復」を入れます。
14. １ページの時間を「0.4秒」にします。
15. プレイで再生してみましょう。

内容：

---

解説動画の作り方

この記事のひとコマ解説GIFは、フリーソフト9VAeきゅうべえで作成しています。

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

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

• 9VAeきゅうべえで、キャプチャー画面に、矢印や説明を加え、ページに「ひとコマ」設定するだけで作れます。
• Youtube動画より短く、キャプチャー画面の羅列より見やすいのが特長です。
• FFmpeg を使って Youtube 動画にすることもできます。

画面キャプチャ方法

OS	画面キャプチャ方法	保存先
Windows	Print Screen キー Shift + Windows + S  無料ソフト「kioku」	クリップボード
Mac	Shift + Command + 4 （ShiftキーはZの左）	デスクトップ
Android	電源 + 音量Down  adbコマンド (開発者向け)  adb shell screencap -p /sdcard/screen.png  adb pull /sdcard/screen.png	フォトアプリ＞ ライブラリ＞ Screenshots
iPhone / iPad	ホームボタン + 電源ボタン サイドボタン + 音量UP	写真＞ アルバム＞ スクリーンショット
Linux Mint	Print Screen キー	クリップボード ファイル
Amazon Fire	電源 + 音量Down １秒長押し USBケーブルでPCと接続し、 設定＞接続デバイス＞USB＞ファイル転送	ピクチャ > スクリーンショット
Chromebook	Shift + Ctrl + ウィンドウ一覧キー（上の中央のキー）	マイファイル > ダウンロード

キャプチャ画像を転送する方法はこちら

キャプチャ画像を9VAeに読みこむ

1. 画像入力ボタン「山」でキャプチャ画像を読み込む
2. 画像の中心の「＋」をクリック。メニューから「ステージの大きさにする」
3. 画像の中心の「＋」をクリック。メニューから「ページを画像に合わせる」

文字、矢印を入れる

1. 文字入力ボタン「A」で数字を入力
2. 角の■をドラッグでサイズ変更。
3. 中心の「＋」または枠線のドラッグで移動
4. 線の種類ボタンをクリック。メニューから「→」で矢印に設定
5. 折れ線ボタンをクリック
6. 開始点
7. 終了点
8. 選択ボタンで入力終了
9. 太さ設定ボタン。メニューから「太くする」で太くできます。
10. 文字入力ボタン「A」で説明文章を入力
11. 背景の色を設定
12. 線の種類メニューの「ー」で枠線がつきます
13. 太さ設定ボタン。メニューから「太くする」で太くできます。

文字の色、縁、影をつける

1. 文字を選ぶ
2. 文字タブ２をクリック
3. 文字の色をクリック
4. 赤に設定
5. 文字と矢印をドラッグして選ぶ
6. 図形タブ１をクリック
7. 線の種類から「縁をつける」
8. 線の種類から「影をつける」、線の種類から「広く」
9. 線の色「赤」

ひとコマアニメーションにする

1. ページ時間をクリック。メニューから「ひとコマ」を設定。これでアニメーションができます。
2. プレイボタンで再生してみましょう。入力した順番に文字、矢印がでてきます。
3. これで１ページ完成です。続きを作りたい場合は、ページの右側の「＋」をクリックし「続きのページを作る」で、２ページ目が作成できます。

アニメGIF、動画出力

• 「ファイルメニュー＞アニメGIF出力」または「動画出力」で、好きなサイズのアニメGIF または MP4動画 が作成できます。
  Win / RaspberryPi / Linux版 でMP4動画を作るには FFmpeg が必要です
• スマホの場合、端末内の「9VAe」フォルダの中に出力されます。フォトアプリで、「端末内の写真＞9VAe」で見ることができます。
• アニメGIFは、背景を透明にできます。音がいれられません。
• MP4動画には音が入れられます。Youtubeに投稿できます。Youtubeに投稿する場合、１秒30コマ、高さ720 または 1080 で出力するとよいでしょう。

9VAeをつかえば素材動画が作れる 

• 9VAeきゅうべえを使えば、オリジナルの素材動画が簡単に作れます。
• Openclipart や  FreeSVG などフリーのSVGイラストをつかって動くキャラクタが作れます。
• 動画編集ソフトで動画に合成できます。

OS	フリーソフト	9VAeで作成する素材動画
Windows	AviUtl	連番PNG または MP4
Mac/iPhone/iPad	iMovie	MP4 または　QuickTime(古いMac)
Android	PowerDirector	GIF または MP4

作り方

• AviUtl動画に合成する方法 (Windows)

• グリーンバック動画を作成してiMovieに合成する方法 (iPhone/iPad/Mac)

• PowerDirector でグリーンバック動画を入れる方法（Android 他）

• キネマスター用グリーンバック動画を作る方法

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

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

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

• 9VAeに関する質問（Yahoo知恵袋）
• よくある質問（Qiita）
• 本記事の文章、図、アニメは複製自由です。教材、解説記事にご利用ください。

文字や図形のアウトライン化：ひとコマ解説

文字や図形を無料アプリをつかってアウトライン化する方法を説明します。

ほかの解説動画はこちら。

文字のアウトライン化 

• フリーソフト9VAeきゅうべえは、文字を回転させることができません。しかし、文字をアウトライン化し、図形にすれば、自由自在に変形できるようになります。

Vectornator で文字のアウトライン化：iPhone / iPad / Mac の場合

iPhone / iPad /Mac の場合、Vectornator が使えます。

• Vectornator ダウンロード

1. Vectornstor を起動。iPhone か iPadの場合、保存先を本体にするとよいでしょう。
2. 「＋」ボタンで新規作成。用紙サイズは「A4」にしました。
3. 「あ」ボタン
4. 画面をドラッグして文字をいれる領域を設定し、文字を入力します。
5. 選択ボタン
6. 文字を選択
7. iPhone縦なら下の「＾」ボタンで文字スタイルがでてきます。
8. フォント、フォントタイプ（太さなど）、サイズなどが変更できます。
9. ブラシボタンで元の画面に戻ります。
10. 上向矢印で保存します。
11. 「SVG」をタッチ
12. 「テキストからアウトラインを作成」をON
13. 「ファイルに保存」
14. 9VAeでよみこむには「9VAe」フォルダに保存します。
15. 「保存」

1. 9VAeで「ファイル＞開く」を実行し、保存したSVGを開きます。
2. 左側パレットの下を押せば、画面が広がります（スマホ版）
3. 文字を選び、選択枠中央の「＋」をタッチし、メニューから「ゴム変形」
4. 上にドラッグすれば、文字が湾曲します。

LibreOffice で文字をアウトライン化：Windowsの場合

Windows版の9VAeきゅうべえは、LibreOfficeでコピーしたものを、貼り付け（ペースト）操作で入力できます。グラフ入力などにも使えます。（Windows版だけの機能です）

• LibreOffice ダウンロード

1. LibreOfficeを起動。挿入メニューから「フォントワーク」
2. 「Simple」
3. 文字をクリックして選択し、入れたい文字に変更します。
4. 選択枠の上の辺のハンドルをドラッグして高さを調整
5. 編集メニュー＞コピー
6. 9VAeを起動。編集メニュー＞貼り付け。これで文字が入ります。
7. 選択枠中央の「＋」をタッチし、メニューから「ゴム変形」
8. 上にドラッグすれば、文字が湾曲します。

内容：

---

解説動画の作り方

この記事のひとコマ解説GIFは、フリーソフト9VAeきゅうべえで作成しています。

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

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

• 9VAeきゅうべえで、キャプチャー画面に、矢印や説明を加え、ページに「ひとコマ」設定するだけで作れます。
• Youtube動画より短く、キャプチャー画面の羅列より見やすいのが特長です。
• FFmpeg を使って Youtube 動画にすることもできます。

画面キャプチャ方法

OS	画面キャプチャ方法	保存先
Windows	Print Screen キー Shift + Windows + S  無料ソフト「kioku」	クリップボード
Mac	Shift + Command + 4 　（ShiftはZの左）	デスクトップ
Android	電源 + 音量Down  adbコマンド (開発者向け)  adb shell screencap -p /sdcard/screen.png  adb pull /sdcard/screen.png	フォトアプリ＞ ライブラリ＞ Screenshots
iPhone / iPad	ホームボタン + 電源ボタン サイドボタン + 音量UP	写真＞ アルバム＞ スクリーンショット
Linux Mint	Print Screen キー	クリップボード ファイル
Amazon Fire	電源 + 音量Down １秒長押し USBケーブルでPCと接続し、 設定＞接続デバイス＞USB＞ファイル転送	ピクチャ > スクリーンショット
Chromebook	Shift + Ctrl + ウィンドウ一覧キー（上の中央のキー）	マイファイル > ダウンロード

キャプチャ画像を転送する方法はこちら

キャプチャ画像を9VAeに読みこむ

1. 画像入力ボタン「山」でキャプチャ画像を読み込む
2. 画像の中心の「＋」をクリック。メニューから「ステージの大きさにする」
3. 画像の中心の「＋」をクリック。メニューから「ページを画像に合わせる」

文字、矢印を入れる

1. 文字入力ボタン「A」で数字を入力
2. 角の■をドラッグでサイズ変更。
3. 中心の「＋」または枠線のドラッグで移動
4. 線の種類ボタンをクリック。メニューから「→」で矢印に設定
5. 折れ線ボタンをクリック
6. 開始点
7. 終了点
8. 選択ボタンで入力終了
9. 太さ設定ボタン。メニューから「太くする」で太くできます。
10. 文字入力ボタン「A」で説明文章を入力
11. 背景の色を設定
12. 線の種類メニューの「ー」で枠線がつきます
13. 太さ設定ボタン。メニューから「太くする」で太くできます。

文字の色、縁、影をつける

1. 文字を選ぶ
2. 文字タブ２をクリック
3. 文字の色をクリック
4. 赤に設定
5. 文字と矢印をドラッグして選ぶ
6. 図形タブ１をクリック
7. 線の種類から「縁をつける」
8. 線の種類から「影をつける」、線の種類から「広く」
9. 線の色「赤」

ひとコマアニメーションにする

1. ページ時間をクリック。メニューから「ひとコマ」を設定。これでアニメーションができます。
2. プレイボタンで再生してみましょう。入力した順番に文字、矢印がでてきます。
3. これで１ページ完成です。続きを作りたい場合は、ページの右側の「＋」をクリックし「続きのページを作る」で、２ページ目が作成できます。

アニメGIF、動画出力

• 「ファイルメニュー＞アニメGIF出力」または「動画出力」で、好きなサイズのアニメGIF または MP4動画 が作成できます。
  Win / RaspberryPi / Linux版 でMP4動画を作るには FFmpeg が必要です
• スマホの場合、端末内の「9VAe」フォルダの中に出力されます。フォトアプリで、「端末内の写真＞9VAe」で見ることができます。
• アニメGIFは、背景を透明にできます。音がいれられません。
• MP4動画には音が入れられます。Youtubeに投稿できます。Youtubeに投稿する場合、１秒30コマ、高さ720 または 1080 で出力するとよいでしょう。

9VAeをつかえば素材動画が作れる 

• 9VAeきゅうべえを使えば、オリジナルの素材動画が簡単に作れます。
• Openclipart や  FreeSVG などフリーのSVGイラストをつかって動くキャラクタが作れます。
• 動画編集ソフトで動画に合成できます。

OS	フリーソフト	9VAeで作成する素材動画
Windows	AviUtl	連番PNG または MP4
Mac/iPhone/iPad	iMovie	MP4 または　QuickTime(古いMac)
Android	PowerDirector	GIF または MP4

作り方

• AviUtl動画に合成する方法 (Windows)

• グリーンバック動画を作成してiMovieに合成する方法 (iPhone/iPad/Mac)

• PowerDirector でグリーンバック動画を入れる方法（Android 他）

• キネマスター用グリーンバック動画を作る方法

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

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

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

• 9VAeに関する質問（Yahoo知恵袋）
• よくある質問（Qiita）
• 本記事の文章、図、アニメは複製自由です。教材、解説記事にご利用ください。

CapCutの使い方：ひとコマ解説

Capcutの使い方を説明します。

ほかの解説動画はこちら。

CapCut とは

• CapCut は、TikTok 用動画を作成するために開発された、スマホ用の動画編集アプリです。無料でいろんな動画編集ができます。

• iPhone / iPad 版ダウンロード
• CapCut Android版ダウンロード

CapCutと9VAeの関係

• フリーソフト9VAeをつかうと、上の「カニとたたかう」のような自由に動くCapCut用の動画素材を自作できます。CapCut付属とは異なる効果を使いたい場合、9VAeでフリー素材を読み込んで動きをつければ、オリジナル素材がつくれます。プロは Adobe Premiere と After Effects を組み合わせてつかいますが、CapCut と 9VAe もそのような関係です。

サンプル動画の作成

CapCutの使い方を説明するため、サンプル動画を9VAeで作成しました。他の動画をつかってもかまいません。

1. 9VAeを起動。ヘルプメニューから「カニとたたかう」
2. 右下の空白をタッチするとパレットが消え、表示画面が広くなります。
3. ファイルメニュー＞動画出力
4. サイズの横幅を空白にします。空白にすると横幅の値が自動設定されます。
5. サイズの縦を１０８０にします。
6. 秒コマを３０にします。
7. OKでMP4動画が作成されます。

動画の不要なシーンをカット

CapCut の使い方を説明します。

1. Capcutを起動。「新しいプロジェクト」をタッチ
2. 編集したい動画をタッチ。
3. 下の「追加」ボタンで編集スタート。
4. 下の動画トラックを左にドラッグし、分割したいコマを表示します。
5. 「分割」で２つに分割されます。
6. 削除したいほうをタッチします。
7. 「削除」で削除されます。
8. プレイボタンで再生してみましょう。

CapCutのロゴを削除

CapCutのロゴは削除できます。

1. 動画トラックを左にドラッグして一番最後を表示
2. CapCutロゴをタッチ
3. 「削除」
4. プレイで再生してみましょう

トリミング（上下左右を縮める）

動画の端のいらない部分を削除するやり方、縦横変換

1. 「編集」をタッチ
2. 下のバーを左にドラッグして「編集」を表示します。
3. 「編集」をタッチ
4. 「カット」
5. 「９：１６」にしました。もし動画に合わせて不要な部分を削除したい場合は「カスタム」を選びます。
6. 「V」で設定完了
7. プレイで再生してみましょう。

文字テロップを入れる

テキストで文字が入れられます。文字を自由に動かしたい場合は9VAeをつかうとよいでしょう。

1. テキスト
2. テキストを追加
3. 文字を入力すると上にはいります。ドラッグで位置の変更、右下のドラッグでサイズ変更できます。
4. 下のバーの長さを調節すれば、文字が表示される時間を調整できます。
5. スタイル
6. スタイル
7. 縁取り文字。下のカラーパレットで色を変更できます。

音楽を入れる

CapCutを使うと簡単に音楽を入れられます。

1. オーディオ
2. 楽曲
3. ジャンルを選ぶ
4. 好きな音楽を選んで「＋」をタッチ
5. 音楽のトラックが追加されます。動画と長さを合わせるために、左にドラッグします。
6. 音楽トラックをタッチ
7. 分割
8. 後ろの音楽をタッチ
9. 削除
10. プレイ

9VAeきゅうべえで素材を自作して合成

• こちらに作り方の説明があります

動画出力

上向矢印で動画出力します。

1. 上向矢印で動画出力します。
2. そのあと、シェアする方法を選びます
3. パソコンに転送したい場合は、iOSなら「その他」＞「ファイル」＞「iCloud」に保存（iPhoneとPCの転送はこちら）Androidなら「その他」＞「ドライブ」でGoogleドライブに保存するとよいでしょう。

内容：

---

解説動画の作り方

この記事のひとコマ解説GIFは、フリーソフト9VAeきゅうべえで作成しています。

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

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

• 9VAeきゅうべえで、キャプチャー画面に、矢印や説明を加え、ページに「ひとコマ」設定するだけで作れます。
• Youtube動画より短く、キャプチャー画面の羅列より見やすいのが特長です。
• FFmpeg を使って Youtube 動画にすることもできます。

画面キャプチャ方法

OS	画面キャプチャ方法	保存先
Windows	Print Screen キー Shift + Windows + S  無料ソフト「kioku」	クリップボード
Mac	Shift + Command + 4	デスクトップ
Android	電源 + 音量Down  adbコマンド (開発者向け)  adb shell screencap -p /sdcard/screen.png  adb pull /sdcard/screen.png	フォトアプリ＞ ライブラリ＞ Screenshots
iPhone / iPad	ホームボタン + 電源ボタン サイドボタン + 音量UP	写真＞ アルバム＞ スクリーンショット
Linux Mint	Print Screen キー	クリップボード ファイル
Amazon Fire	電源 + 音量Down １秒長押し USBケーブルでPCと接続し、 設定＞接続デバイス＞USB＞ファイル転送	ピクチャ > スクリーンショット
Chromebook	Shift + Ctrl + ウィンドウ一覧キー（上の中央のキー）	マイファイル > ダウンロード

キャプチャ画像を転送する方法はこちら

キャプチャ画像を9VAeに読みこむ

1. 画像入力ボタン「山」でキャプチャ画像を読み込む
2. 画像の中心の「＋」をクリック。メニューから「ステージの大きさにする」
3. 画像の中心の「＋」をクリック。メニューから「ページを画像に合わせる」

文字、矢印を入れる

1. 文字入力ボタン「A」で数字を入力
2. 角の■をドラッグでサイズ変更。
3. 中心の「＋」または枠線のドラッグで移動
4. 線の種類ボタンをクリック。メニューから「→」で矢印に設定
5. 折れ線ボタンをクリック
6. 開始点
7. 終了点
8. 選択ボタンで入力終了
9. 太さ設定ボタン。メニューから「太くする」で太くできます。
10. 文字入力ボタン「A」で説明文章を入力
11. 背景の色を設定
12. 線の種類メニューの「ー」で枠線がつきます
13. 太さ設定ボタン。メニューから「太くする」で太くできます。

文字の色、縁、影をつける

1. 文字を選ぶ
2. 文字タブ２をクリック
3. 文字の色をクリック
4. 赤に設定
5. 文字と矢印をドラッグして選ぶ
6. 図形タブ１をクリック
7. 線の種類から「縁をつける」
8. 線の種類から「影をつける」、線の種類から「広く」
9. 線の色「赤」

ひとコマアニメーションにする

1. ページ時間をクリック。メニューから「ひとコマ」を設定。これでアニメーションができます。
2. プレイボタンで再生してみましょう。入力した順番に文字、矢印がでてきます。
3. これで１ページ完成です。続きを作りたい場合は、ページの右側の「＋」をクリックし「続きのページを作る」で、２ページ目が作成できます。

アニメGIF、動画出力

• 「ファイルメニュー＞アニメGIF出力」または「動画出力」で、好きなサイズのアニメGIF または MP4動画 が作成できます。
  Win / RaspberryPi / Linux版 でMP4動画を作るには FFmpeg が必要です
• スマホの場合、端末内の「9VAe」フォルダの中に出力されます。フォトアプリで、「端末内の写真＞9VAe」で見ることができます。
• アニメGIFは、背景を透明にできます。音がいれられません。
• MP4動画には音が入れられます。Youtubeに投稿できます。Youtubeに投稿する場合、１秒30コマ、高さ720 または 1080 で出力するとよいでしょう。

9VAeをつかえば素材動画が作れる 

• 9VAeきゅうべえを使えば、オリジナルの素材動画が簡単に作れます。
• Openclipart や  FreeSVG などフリーのSVGイラストをつかって動くキャラクタが作れます。
• 動画編集ソフトで動画に合成できます。

OS	フリーソフト	9VAeで作成する素材動画
Windows	AviUtl	連番PNG または MP4
Mac/iPhone/iPad	iMovie	MP4 または　QuickTime(古いMac)
Android	PowerDirector	GIF または MP4

作り方

• AviUtl動画に合成する方法 (Windows)

• グリーンバック動画を作成してiMovieに合成する方法 (iPhone/iPad/Mac)

• PowerDirector でグリーンバック動画を入れる方法（Android 他）

• キネマスター用グリーンバック動画を作る方法

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

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

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

• 9VAeに関する質問（Yahoo知恵袋）
• よくある質問（Qiita）
• 本記事の文章、図、アニメは複製自由です。教材、解説記事にご利用ください。

初心者むけ、Unityのはじめ方：ひとコマ解説

初心者が Unityをはじめる方法を説明します。

ほかの解説動画はこちら。

Unityとは

• Unity は、３次元グラフィックスをつかったゲームや教材など様々なコンテンツを開発、公開、販売ができる、ツール・素材・サービスの集合体です。
• 開発ツールはOSごとに異なります。ユーザーアカウントは、Webサービスで共通です。それらを UnityHub というアプリで管理しています。
• Unity をはじめるには、まず、（１）UnityHubをインストールする。（２）アカウント登録しログインする。（３）Unity Editor などのツールを、UnityHub経由で取得する。という手順を踏みます。

	種類	内容
Unity	サイト	Unity Hubダウンロード チュートリアル コンテンツ公開、販売
Unity Hub	アプリ	開発ツールの管理 プロジェクトの管理
Unity Editor	アプリ	プロジェクト開発環境

以下の資料を参考にしました。

• Unity - Qiita
• Unity ゲーム・・iOS, AndroidはPro版で有料みたい
• デスクトップ版個人開発は無料 。ダウンロードはこちら

Unity は、mouse E10 のような１万５千円のパソコンでも動きます。SDカードをつかって、Cドライブを増やし、インストール先を変更する必要があります。

Unity Hub ダウンロード

• こから Unity Hub をダウンロード

• 完了すると、Unity Hub が開き、(1)アカウント作成 (2)サインイン (3)UnityEditor ダウンロード画面になります。

Unity Hub からアカウント作成、Editorダウンロード

• Unityアカウントを作るには、メールアドレス、パスワードが必要です。Googleアカウント、Facebookアカウント、Apple IDでもかまいません。
• アカウント作成したら、サインインし、Editor (Unityの開発環境)をダウンロードします。Mac だと M1 CPU用と、Intel CPUがあります。

Learningで使い方を学ぶ

• Unity Editorをダウンロードしたら、Unity Hub ＞NewProject  から、lerningプロジェクトをダウンロードして使い方を勉強しましょう。
• 左の Learning からいろんな教材をダウンロードできます。実際のEditor上で操作が学べます。

• 2D Platformer は簡単な横スクロール型のゲームサンプルです。LEGO Microgameは3次元のゲームです。「Tutorial」をひらき、右下の「Start」をおすと、実際のエディタでどう操作するか順番に教えてくれます。操作を間違えると次に進めないので、必ず理解できるでしょう。
• プロジェクトを保存したフォルダが読み書き禁止になっていた場合、Learningが次に進めなくなることがありました。フォルダのセキュリティ設定（右ボタンプロパティ）でフルコントロールに設定しましょう。

保存先フォルダの変更

mouse E10 のように C ドライブに空きがないパソコンの場合、 Unity Hubの保存先を別のドライブに変更しましょう。

1. Unity Hubの歯車ボタンをクリックします。
2. 「Projects」
3. プロジェクトの保存先フォルダを設定します。
4. 「Installs」
5. Unity Editor の保存フォルダを設定します。

３次元立体に、動画をはりつけてみよう

もっとも簡単なプロジェクトをつくって動かしてみましょう。

1. UnityHub Project 右上の「NewProject」をクリック
2. 「3D Core」を選ぶ。
3. 名前をつけて
4. 「CreateProject」。これでEditorが開きます。
5. Editorにアクセスを許可。空のプロジェクトが起動します。
6. メニュー「GameObject（ゲームオブジェクト） > 3D Object（３Dオブジェクト） > Cube（キューブ）」
7. Cube の「Scale（スケール）」を「X16 Y12」に変更。Cubeの大きさが４：３のスクリーンに変わります。
8. なんでもよいので、外からMP4動画をドラッグ。9VAeのサンプルでもかまいません。(1) 9VAe「ヘルプメニュー＞練習用＞カニとたたかう」(2) ファイルメニュー「動画出力」でMP4動画を作成できます。
9. 下にはいった動画をドラッグして Cube に重ねる。これで、Cubeの表面が動画になります。
10. Cubeの「VideoPlayer」の「WaitForFirstFrame（最初のフレームを待つ）」をOFF、「Loop（ループ）」をONにしましょう。
11. Playボタンで、再生するはずです。
12. 動画の上下左右が反転しているので、Scale（スケール）の「X」を -16 、「Y」を-12にします。
13. Playボタンで、再生してみましょう。

UnityEditorの左側が、プロジェクトの構造をあらわすリスト（ヒエラルキー）でここに部品が並びます。部品を選ぶと、右側に部品の属性（インスペクター）が表示されます。下は素材（プロジェクトフォルダの中にあるファイル）です。

バーチャルカメラで３次元のなかを動く

Cinemachine バーチャルカメラで、Cubeに貼り付けた動画を、遠くから近づいてみてみましょう

1. UnityEditor > Window（ウィンドウ） > PackageManager（パッケージマネージャ）
2. 左上 Packages:（パッケージ） を「Unity Registry（レジストリ）」に変更
3. 右上の検索窓で「Cinemachine」を検索
4. Cinemachine を選びます
5. Install（インストール）
6. 右上「X」で閉じます
7. GameObject（ゲームオブジェクト） > Cinemachine > Virtual Camera でバーチャルカメラを入れます
8. GameObject > Cinemachine > Dolly Track with Cartで Cart（台車）とTrack（レール）を入れます
9. 左の Dolly Track を選びます
10. WayPoints ０（レールの開始点）、１（レールの終了点）のZ座標をそれぞれ「-50」「10」に変更します。これで、より遠くから接近するようになります。
11. Looped にチェックをいれます。これでレールの上を台車が往復します
12. DollyTrack の Position（位置） Y を「-6」にします。これで、レールがスクリーンの一番下を通り抜けることになります。
13. 左の CM vcam1 を選びます。
14. Follow を、「Dolly Cart」 に設定します。これでカメラが台車といっしょに動きます。
15. Look at を「Cube」に設定します。これでカメラが自動的にスクリーンをみるようになります。
16. 左の DollyCart を選びます。
17. 「Speed（速度）」を「５」に設定します。
18. プレイボタンでカメラの映像をみてみましょう。下のようになりました。もし動かなかったら、CM vcam1  の「Body」の右側の設定が「Transposer」になっているか確かめてください。

日本語化

Unity Editor > Edit > Preference で言語指定するのですが、その前に、UnityHub で、日本語を追加しておく必要があります。また、一部しか日本語化されません。

1. UnitiHub >歯車ボタン
2. Appearance
3. 「日本語」に変更
4. Xで閉じます
5. インストール（Installs）
6. 歯車ボタン＞モジュールを加える（Add Modules）
7. 「日本語」にチェック
8. インストール（Install）
9. Unity Editor を起動。 Edit > Preferences
10. Languages
11. 「日本語」に変更
12. Xで閉じます

LEGO Learning Project をやってみよう

３次元空間での物体の作り方は独特です。Learningで実際に操作して練習するのがわかりやすいです。

1. UnitiHub >プロジェクト（Project）
2. 新しいプロジェクト（NewProject）
3. 使い方を学ぶ（Learning）
4. LEGO Microgame
5. プロジェクトを作成（Create Project）。はじめて作成する場合、テンプレートのダウンロード、年齢の確認などが求められます。
6. Load tutorials
7. 右側の「Start」で開始します。最初にゲームを実際に操作します。
8. プレイボタンで、ゲームスタート。キー操作でキャラクタを操作できます。スペースでジャンプします。
9. このゲームは、最初はクリアできないようになってます。「Next」ボタンを押していくと、ゲームをつづけるために、プレーヤーの速度をあげたり、空中に橋を設置したり、そのために、物体の配置や、３次元での視点変更などの操作を順番に練習していきます。Unity の使い方がわかると、ゲームがクリアできるようになっています。

内容：

---

解説動画の作り方

この記事のひとコマ解説GIFは、フリーソフト9VAeきゅうべえで作成しています。

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

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

• 9VAeきゅうべえで、キャプチャー画面に、矢印や説明を加え、ページに「ひとコマ」設定するだけで作れます。
• Youtube動画より短く、キャプチャー画面の羅列より見やすいのが特長です。
• FFmpeg を使って Youtube 動画にすることもできます。

画面キャプチャ方法

OS	画面キャプチャ方法	保存先
Windows	Print Screen キー Shift + Windows + S  無料ソフト「kioku」	クリップボード
Mac	Shift + Command + 4	デスクトップ
Android	電源 + 音量Down  adbコマンド (開発者向け)  adb shell screencap -p /sdcard/screen.png  adb pull /sdcard/screen.png	フォトアプリ＞ ライブラリ＞ Screenshots
iPhone / iPad	ホームボタン + 電源ボタン サイドボタン + 音量UP	写真＞ アルバム＞ スクリーンショット
Linux Mint	Print Screen キー	クリップボード ファイル
Amazon Fire	電源 + 音量Down １秒長押し USBケーブルでPCと接続し、 設定＞接続デバイス＞USB＞ファイル転送	ピクチャ > スクリーンショット
Chromebook	Shift + Ctrl + ウィンドウ一覧キー（上の中央のキー）	マイファイル > ダウンロード

キャプチャ画像を転送する方法はこちら

キャプチャ画像を9VAeに読みこむ

1. 画像入力ボタン「山」でキャプチャ画像を読み込む
2. 画像の中心の「＋」をクリック。メニューから「ステージの大きさにする」
3. 画像の中心の「＋」をクリック。メニューから「ページを画像に合わせる」

文字、矢印を入れる

1. 文字入力ボタン「A」で数字を入力
2. 角の■をドラッグでサイズ変更。
3. 中心の「＋」または枠線のドラッグで移動
4. 線の種類ボタンをクリック。メニューから「→」で矢印に設定
5. 折れ線ボタンをクリック
6. 開始点
7. 終了点
8. 選択ボタンで入力終了
9. 太さ設定ボタン。メニューから「太くする」で太くできます。
10. 文字入力ボタン「A」で説明文章を入力
11. 背景の色を設定
12. 線の種類メニューの「ー」で枠線がつきます
13. 太さ設定ボタン。メニューから「太くする」で太くできます。

文字の色、縁、影をつける

1. 文字を選ぶ
2. 文字タブ２をクリック
3. 文字の色をクリック
4. 赤に設定
5. 文字と矢印をドラッグして選ぶ
6. 図形タブ１をクリック
7. 線の種類から「縁をつける」
8. 線の種類から「影をつける」、線の種類から「広く」
9. 線の色「赤」

ひとコマアニメーションにする

1. ページ時間をクリック。メニューから「ひとコマ」を設定。これでアニメーションができます。
2. プレイボタンで再生してみましょう。入力した順番に文字、矢印がでてきます。
3. これで１ページ完成です。続きを作りたい場合は、ページの右側の「＋」をクリックし「続きのページを作る」で、２ページ目が作成できます。

アニメGIF、動画出力

• 「ファイルメニュー＞アニメGIF出力」または「動画出力」で、好きなサイズのアニメGIF または MP4動画 が作成できます。
  Win / RaspberryPi / Linux版 でMP4動画を作るには FFmpeg が必要です
• スマホの場合、端末内の「9VAe」フォルダの中に出力されます。フォトアプリで、「端末内の写真＞9VAe」で見ることができます。
• アニメGIFは、背景を透明にできます。音がいれられません。
• MP4動画には音が入れられます。Youtubeに投稿できます。Youtubeに投稿する場合、１秒30コマ、高さ720 または 1080 で出力するとよいでしょう。

9VAeをつかえば素材動画が作れる 

• 9VAeきゅうべえを使えば、オリジナルの素材動画が簡単に作れます。
• Openclipart や  FreeSVG などフリーのSVGイラストをつかって動くキャラクタが作れます。
• 動画編集ソフトで動画に合成できます。

OS	フリーソフト	9VAeで作成する素材動画
Windows	AviUtl	連番PNG または MP4
Mac/iPhone/iPad	iMovie	MP4 または　QuickTime(古いMac)
Android	PowerDirector	GIF または MP4

作り方

• AviUtl動画に合成する方法 (Windows)

• グリーンバック動画を作成してiMovieに合成する方法 (iPhone/iPad/Mac)

• PowerDirector でグリーンバック動画を入れる方法（Android 他）

• キネマスター用グリーンバック動画を作る方法

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

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

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

• 9VAeに関する質問（Yahoo知恵袋）
• よくある質問（Qiita）
• 本記事の文章、図、アニメは複製自由です。教材、解説記事にご利用ください。

9VAeきゅうべえの動画出力時間を比較。１位７秒、最下位10分

動画素材作成フリーソフト9VAeきゅうべえの動画出力時間を比較しました。

• 作成した動画は、9VAeのヘルプ＞練習用にある「カニとたたかう」27秒です。
• これを、960 x 720 、30fps の MP4動画にしました。
• パソコン、スマホ、タブレットで手動で計測しました。

機種	OS	CPU	メモリ	出力時間
Macbook Air (M1 2020)	macOS Monterey	Apple M1	8GB	7秒
Macbook Pro (Late 2013)	macOS Big Sir	Intel Core i7	16GB	14秒
iPad (第7世代)	iPadOS 15.4	Apple A10	3GB	16秒
iPhone 6s	iOS 15.4	Apple A9	2GB	21秒
Mac mini (Late 2014)	macOS Catalina	Intel Core i5	4GB	25秒
Lenovo IdeaCenter240	Windows11	Intel Core i5-10400T	8GB	30秒
mouse E10	Windows10	Intel Celeron N4000	4GB	1分
iPad (第4世代)	iPadOS 10.3	Apple A6X	1GB	1分6秒
ドン・キホーテ U1	Windows10	Intel Atom Z8350	4GB	1分44秒
Google Pixel 3a	Android 12	Qualcomm® SnapdragonTM 670	4GB	2分47秒
ASUS C223N	ChromeOS101 64bit	Intel N3350	4GB	3分1秒
Lenovo S330	ChromeOS100 32bit	MediaTek MT8173C	4GB	3分43秒
Amazon Fire7 (第9世代)	FireOS 7	MediaTek MT8163V/B	1GB	8分43秒
Raspberry Pi 2B	Raspbian Stretch	Broadcom BCM2837	1GB	9分50秒

わかること、感想

• M1 Macbook Air はやはり速いです。７秒
• Amazon Fire 7 (第9世代) は、３千円で入手できましたが遅いです。８分
• 新しいiPad は無印でも速いです。１６秒。古い iPad の４倍も速いです。
• 1万5千円の mouse E10 は、少し前の格安 Chromebook より速いです。１分
• 新しいドンキU1Cは、Celeron N3350 で、もっと速いかも。Unityも動くかも。
• Chromebook は、OSが軽いので、非力なCPUでメモリが少なくても軽快に動くといいますが、Googleドキュメントは速いのですが、作り方が悪いアプリは速く動かないかも。
• Android / Chromebook が遅いのは、9VAeアプリのせいもあります。連番画像作成の処理が遅いです。
• ラズベリーパイ、時間がかかるけど、ちゃんと動画ができます。

なお、Amazon Fire 7 は動画出力に８分もかかりますが、9VAeきゅうべえ編集中は動画を作成しないので、軽いです。

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

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

低価格 Windows タブレットの Cドライブを増やす方法：ひとコマ解説

Chromebookより安い２万円程度で Windowsノートパソコン が入手できるようになってきました。低価格Windows にマイクロSDカードを入れて C ドライブの代わりにする方法を解説します。この方法で、mouse E10 に、Unity をいれることもできました。

ほかの解説動画はこちら

 SDカードの中にハードディスクのかわり（仮想ディスク）を作成する

• マウスコンピュータ mouse E10 や、ドン・キホーテ U1C は、メモリ４GB、ストレージ６４GB が２万円程度で入手できる激安 Windows パソコンです。キーボードをはずせばタブレットにもなり、mouse E10 には筆圧ペンまでついています。
• ただ６４GB だと、 C ドライブに Visual Studio などのプログラミング開発環境をいれると、容量不足で OSのアップデートができなくなります。しかし、SDカードには、Visual Studioがいれられません。
• 1000円程度で入手できる ３２GB のマイクロSDカードを、仮想ディスク（VHD）にすると、Cドライブのかわりに開発環境やプロジェクトをいれることができます。その方法を紹介します。

仮想ディスク（VHD）の作り方

３２GB 以上のマイクロSDカードをセットして以下の操作をします。

1. Windowsボタン＞「ディスク管理」を検索します。
2. 見つかった項目（ハードディスクパーティションの作成とフォーマットなど）をクリックすると「ディスクの管理」が開きます。もし開かなければ「設定」から検索してみてください。
3. 下にあるSDカード（左側の表示がリムーバブル）のバーを右ボタンクリック。メニューから「フォーマット」を実行。
4. ファイルシステムは「NTFS」にします。FAT32だと数GBのファイルしか保存できないので、NTFSにしなければいけません。フォーマットにより中身はすべて消去されます。★★かならずリムーバブルを確認★★
5. OKでフォーマットを実行
6. 「操作メニュー＞ＶＨＤの作成」を実行。
7. 「参照ボタン」でSDカードの中の仮想ディスクのファイル名を設定。
8. 左側でSDカードを選びます。
9. 短い半角英数名がおすすめ。好きな名前を設定
10. 「保存」
11. 最大サイズを設定します。３２ＧＢのＳＤだと、２８ＧＢぐらいのファイルが作れます。
12. 単位を「GB」に変更
13. 「OK」ボタン
14. ファイルの作成には時間がかかります。ファイルができると、ＳＤカードの下に「ディスク２」のバーができます。見えなければウィンドウを縦にのばしてください。最初は「初期化されていない」「未割り当て」となっています。左側の「初期化されていない」を右ボタンクリックし「ディスクの初期化」を実行。
15. GPTパーティションでかまいません。「OK」で初期化を実行。
16. 左側の表示が「オンライン」にかわります。右側の「未割り当て」を右ボタンクリック。「新しいシンプルボリューム」を実行。

仮想ドライブを作成し、自動的にマウントするよう設定

上の操作につづいて、つぎの操作を実行します。

1. 「次へ」を何回かクリックし「NTFS」フォーマットのボリュームを作成します。
2. 作成が完了すると、ドライブが割り当てられ、保存ができるようになります。この中に、Visual Studio をインストールすることができます。

仮想ディスクVHDファイルのショートカットをスタートアップに入れて自動マウント

• PCを再起動すると、最初、仮想ディスクVHDは単なるファイルです。
• 仮想ディスクファイルVHDをダブルクリックすれば、マウントされ、仮想ディスクが使えるようになります。
• VHDファイルを右ボタンでクリックし「ショートカットの作成」でショートカットを作ります。これを、スタートアップフォルダにいれて、起動時に実行するようにします。
• スタートアップフォルダは、Windowsボタンと「R」を同時におし、「ファイル名を指定して実行」で「shell:startup」で開きます。この中に、VHDのショートカットを入れます。
• パソコンを再起動して、EドライブができればOKです。

ドライブ名変更の注意

• パソコン再起動時に、VHDにEドライブが割り当てられるのに少し時間がかかります。その前にUSBメモリなどを差すと、USBメモリがEドライブに割り当てられてしまい、VHDドライブが Fドライブになってしまうことがあります。こうなると、Eドライブにインストールしたプログラムが使えません。VHDにEドライブが割り当てられてからUSB機器をさすようにしましょう。
• Fドライブに割り当てられたVHDを、Eドライブに戻すには、次の様にします。

  

1. Windowsボタン＞「ディスク管理」を検索します。
2. 見つかった項目（ハードディスクパーティションの作成とフォーマットなど）をクリック
3. ドライブ名を変更したいドライブを右ボタンでクリック。「ドライブ文字とパスの変更」
4. 変更したいドライブ名を選んで「変更」

■Unity インストール

• Unityは、初心者でも３次元ゲームがつくれる開発環境です。mouse e10 にも入れることができます。入れ方はこちら
• 標準では、Cドライブにはいるため、ツールや プロジェクトの保存先を、仮想ディスクに変更しましょう。

■Visual Studio インストール

Unityをはじめ、いろんなアプリ開発につかわれるプログラミング開発環境です。

1. ダウンロードはこちら  
2. 古い Visual Studio を使っていた場合は、先に削除しましょう。ツールメニュー＞「ツールと機能を取得」＞Visual Studio Installer が起動します。「閉じる」＞「インストール済み」タブ 「その他＞アンインストール」
3. Visual Studio Installer から、Visual Studio Community をインストールします。
4. 「インストールの場所」タブで、上の２つの場所はCドライブ以外に変更できます。ただし、SDカードのようなリムーバブルディスクは選べません。上のように仮想ドライブを準備しておく必要があります。
5. インストール場所を設定後、「ワークロード」タブで、言語やツールを選びます。Windows用アプリを作りたい（C++/WinRT）の場合は、「C++によるデスクトップ開発」、「ユニバーサルWindowsプラットフォーム開発」を選びます。
6. 不足していたモジュールは、あとから「個別のコンポーネント」タブで追加できます。

サンプルの動画編集プログラム(MediaEditing) をビルドして実行

1. ここ GitHub を開く
2. 「Code」ボタンの右側の▼をクリック。メニューから「Download ZIP」をクリック。Windows-universal-samples-main(.zip) がダウンロードフォルダに入手できます。
3. ダウンロードフォルダを開く。Windows-universal-samples-main(.zip) を右ボタンでクリック。メニューから「すべて展開」を実行。「展開」ボタンをおすとダウンロードフォルダの中に「Windows-universal-samples-main」ができます。
4. 「Windows-universal-samples-main」の中の「Samples」フォルダの中にたくさんのサンプルがはいっています。
5. この中の「MediaEditing」を開きます。「cpp」の中にC＋＋、「cs」の中にC＃プログラムがはいっています。
6. 「cpp」の中の「MediaEditing.sln」をダブルクリックします。
7. Visual Studio が起動します。
8. メニューバーの下の「Debug▼」「ARM▼」「リモートコンピュータ▼」がありますが、「ARM」の右側の▼をクリック。「x86」に変更します。「リモートコンピュータ」が「ローカルコンピュータ」に変わります。
9. 「ローカルコンピュータ」をクリックすると、ビルド（プログラムから実行系を作る作業）が始まります。成功するとアプリがインストールされます。
10. 初回、「開発者向け設定」画面が開きます。自作アプリをインストールするには「任意のソースからのアプリのインストール（開発者モード）」をオンにします。
11. ドン・キホーテノートでも「MediaEditing」サンプルが起動しました。1) Trimming and Saving a clip をクリックすると、「1 Choose Video」「2 Trim Video」「3 Save Result」ボタンが表示されます。「1 Choose」ボタンで動画を選択。「2 Trim」で動画の前、後ろを削除。「3 Save Result」で、結果を保存できます。
12. このサンプルを手掛かりに、WinRT アプリを作っていく過程はこちら

Visual Studioでよく使うキー

• Alt ＋B のあと B    ビルド
• F5  実行、続きを実行
• F9  ブレークポイント ON/OFF
• F10  ステップ実行
• F11  関数の中にはいる
• Shift＋F11  関数から外に抜ける 

Visual Studio メモ

• 右側がソリューションエクスプローラで、プロジェクトに含まれるファイルなどが表示
• ソリューションエクスプローラの親を右ボタンでクリックし、「スタートアッププロジェクトに設定」すると、右向き▲ボタンでこのプロジェクトが実行される。
• ソリューションエクスプローラの親を右ボタンでクリックし、一番下の「プロパティ」を開くと、コンパイラー、リンカーなどの設定がみえる
• プロパティの $(ProjectDir); はプロジェクトがあるフォルダ（.vcxproj, .sln）ほかの意味はこちら
• ビルドすると下に結果が表示される。下の「出力」タブを押すとエラーが見える
• プロパティの $(GeneratedFilesDir); は、x86, x64, ARM などのCPUフォルダ

---

解説動画の作り方

この記事のひとコマ解説GIFは、フリーソフト9VAeきゅうべえで作成しています。

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

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

• 9VAeきゅうべえで、キャプチャー画面に、矢印や説明を加え、ページに「ひとコマ」設定するだけで作れます。
• Youtube動画より作成が簡単で、スクロールしなくても見えるのが特長です。
• Youtube 動画にすることもできます。

画面キャプチャ方法

OS	画面キャプチャ方法	保存先
Windows	Print Screen キー Shift + Windows + S  無料ソフト「kioku」	クリップボード
Mac	Shift + Command + 4	デスクトップ
Android	電源 + 音量Down  adbコマンド (開発者向け)  adb shell screencap -p /sdcard/screen.png  adb pull /sdcard/screen.png	フォトアプリ＞ ライブラリ＞ Screenshots
iPhone / iPad	ホームボタン + 電源ボタン サイドボタン + 音量UP	写真＞ アルバム＞ スクリーンショット
Linux Mint	Print Screen キー	クリップボード ファイル
Amazon Fire	電源 + 音量Down １秒長押し USBケーブルでPCと接続し、 設定＞接続デバイス＞USB＞ファイル転送	ピクチャ > スクリーンショット
Chromebook	Shift + Ctrl + ウィンドウ一覧キー（上の中央のキー）	マイファイル > ダウンロード

キャプチャ画像を転送する方法はこちら

キャプチャ画像を9VAeに読みこむ

1. 画像入力ボタン「山」でキャプチャ画像を読み込む
2. 画像の中心の「＋」をクリック。メニューから「ステージの大きさにする」
3. 画像の中心の「＋」をクリック。メニューから「ページを画像に合わせる」

文字、矢印を入れる

1. 文字入力ボタン「A」で数字を入力
2. 角の■をドラッグでサイズ変更。
3. 中心の「＋」または枠線のドラッグで移動
4. 線の種類ボタンをクリック。メニューから「→」で矢印に設定
5. 折れ線ボタンをクリック
6. 開始点
7. 終了点
8. 選択ボタンで入力終了
9. 太さ設定ボタン。メニューから「太くする」で太くできます。
10. 文字入力ボタン「A」で説明文章を入力
11. 背景の色を設定
12. 線の種類メニューの「ー」で枠線がつきます
13. 太さ設定ボタン。メニューから「太くする」で太くできます。

文字の色、縁、影をつける

1. 文字を選ぶ
2. 文字タブ２をクリック
3. 文字の色をクリック
4. 赤に設定
5. 文字と矢印をドラッグして選ぶ
6. 図形タブ１をクリック
7. 線の種類から「縁をつける」
8. 線の種類から「影をつける」、線の種類から「広く」
9. 線の色「赤」

ひとコマアニメーションにする

1. ページ時間をクリック。メニューから「ひとコマ」を設定。これでアニメーションができます。
2. プレイボタンで再生してみましょう。入力した順番に文字、矢印がでてきます。
3. これで１ページ完成です。続きを作りたい場合は、ページの右側の「＋」をクリックし「続きのページを作る」で、２ページ目が作成できます。

アニメGIF、動画出力

• 「ファイルメニュー＞アニメGIF出力」または「動画出力」で、好きなサイズのアニメGIF または MP4動画 が作成できます。
  Win / RaspberryPi / Linux版 でMP4動画を作るには FFmpeg が必要です
• スマホの場合、端末内の「9VAe」フォルダの中に出力されます。フォトアプリで、「端末内の写真＞9VAe」で見ることができます。
• アニメGIFは、背景を透明にできます。音がいれられません。
• MP4動画には音が入れられます。Youtubeに投稿できます。Youtubeに投稿する場合、１秒30コマ、高さ720 または 1080 で出力するとよいでしょう。

9VAeをつかえば素材動画が作れる 

• 9VAeきゅうべえを使えば、オリジナルの素材動画が簡単に作れます。
• Openclipart や  FreeSVG などフリーのSVGイラストをつかって動くキャラクタが作れます。
• 動画編集ソフトで動画に合成できます。

OS	フリーソフト	9VAeで作成する素材動画
Windows	AviUtl	連番PNG または MP4
Mac/iPhone/iPad	iMovie	MP4 または　QuickTime(古いMac)
Android	PowerDirector	GIF または MP4

作り方

• AviUtl動画に合成する方法 (Windows)

• グリーンバック動画を作成してiMovieに合成する方法 (iPhone/iPad/Mac)

• PowerDirector でグリーンバック動画を入れる方法（Android 他）

• キネマスター用グリーンバック動画を作る方法

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

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

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

• 9VAeに関する質問（Yahoo知恵袋）
• よくある質問（Qiita）
• 本記事の文章、図、アニメは複製自由です。教材、解説記事にご利用ください。