dnjiro’s 9VAe blog

誰でもアニメが作れる無料ソフト9VAeきゅうべえ開発者のブログ

Flaskの調査

Flaskは、Python がつかえるWebアプリ開発環境らしい。パソコンの中に独立したサーバーがつくれるみたいだ。

 

これを利用すれば、アニメ教室で作ったアニメをスマホにダウンロードするサーバーがラズパイで作れるかもしれん。ということで調査することにした。

 

まず関連情報を検索

以下が初心者向きでわかりやすい

 

インストール

 

FlaskサーバーにGIF動画を表示する方法

Flaskサーバーはいろんなアドレスを実データに変換する仕組みをもっているらしい。/image との記述を変換して適当なデータを与える。

静的なデータ(後述のQRコードなど)は "{{ url_for('static', filename='xxxxxx') }}" のように設定。

 

FlaskサーバーとGIF変換を同時に行う方法

WebサーバーとGIF変換を同時に行うにはマルチスレッドをつかう

 

Flaskサーバーの公開用IPアドレスを設定する方法

下のようにするとできるらしい。8080 は公開するポート(コマンド起動する場合)

flask run --host='xxx.xxx.xxx.xxx' --port=8080

*もし  FLASK_APP 未定義エラーがでたら Windowsなら

set FLASK_APP=app.py

*Mac or Linux なら以下のように設定する

export FLASK_APP=app.py

 

python の app.run の引数でも、URLとポートが指定できるようだ

if __name__ == '__main__':
app.run(host='xxx.xxx.xxx.xxx', port=8080)

 

公開IPアドレスQRコードで表示する方法

Pythonで簡単にQRコードが生成できるみたいだ。すばらしい。(pip or pip3 でインストール)

pip install qrcode

pip install pillow

 

Flaskサーバーにファイルをアップロードする方法

POSTをつかえばスマホで作ったアニメをアップロードする機能がつくれそうだ。早速、PEASmotch! one にその機能を搭載した。

Android

 

Windows で ローカル Flask サーバーをたてる方法

Flask で作るサーバーは一般に公開するサーバーには適してないと書いてある。しかし、ローカルでインターネット接続しない前提でスマホに公開するには、以下のように設定する。

 

  1. Windowsパソコンの ip アドレスを調べる。コマンドから「ipconfig」
  2. Flask サーバーのURL を上でしらべた 'xxx.xxx.xxx.xxx' ポート 8080 にする。(デフォルトは、'127.0.0.1' ポート 5000 になっている)
  3. Windows Defender ファイアーウォール > 詳細設定 >受信の規則 > python が接続禁止になっているので、「python (プロトコル TCPのほう)」を選んでプロパティ「接続を許可する」に設定する。

ラズベリーパイの場合、ファイアウォールの設定なしで http://xxx.xxx.xxx.xxx:8080 に接続できた。

 

 

Bottle

Bottleというのはもっと小さくて、Pythonだけでサーバーができるみたい。Flaskより小規模。Flaskのほうが人気があるらしい。

FFmpegでMP4動画が作れる無料アプリ「9VAeきゅうべえ」

FFmpegは、有名な動画作成・変換用フリーソフトです。ただコマンドの使い方が難しいという問題がありました。フリーソフト9VAeきゅうべえ をつかうと、FFmpeg のコマンドを知らなくても、音、音楽入りの動画を作成できます。Windows版/Linux版9VAe から FFmpeg を使う方法を説明します。Youtube解説はこちら

f:id:dnjiro:20220118150601g:plain

ほかのアニメの作り方はこちらをご覧ください

 

内容:

 

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


www.youtube.com

WindowsFFmpegの入手

f:id:dnjiro:20211228100801g:plain

  1. 「DOWNLOAD」ボタン
  2. Windowsを選ぶ
  3. どちらでもダウンロードできますが「Windows builds by BtbN」がZIP形式なので簡単
  4. ffmpeg-maser-latest-win64-gpl-shared.zip」をクリック。ダウンロードフォルダにZIPファイルがダウンロードされます。「ffmpeg-maser-latest-win64-lgpl-shared.zip」でもかまいません(サイズが小さい)。
  5. ダウンロードフォルダの「ffmpeg-maser-latest-win64-gpl-shared.zip」をダブルクリック。中身が表示されます。
  6. ffmpeg-maser-latest-win64-gpl-shared」フォルダをドラッグ(マウス左ボタンでおして押しながら)移動して、デスクトップにコピー(好きな場所にコピーしてかまいません)
  7. コピーした場所の中の「bin」フォルダの中に「ffmpeg.exe」がはいっています。これを9VAeに設定すれば、動画出力できるようになります。

 

WindowsFFmpegの設定

f:id:dnjiro:20211228110844g:plain

  1. 9VAeの「ファイルメニュー>動画出力」
  2. ダウンロードしたFFmpeg のフォルダを開きます。
  3. 「bin」フォルダの中の「ffmpeg.exe」を選んで「開く」を実行。これで、ffmpegが9VAeに設定されます。次回から設定する必要はありません。
  4. そのあと、動画ファイル名を指定し、動画出力することができます。

 

Linux版(ラズベリーパイ・Ubuntuなど)FFmpegの入手

  • ターミナルから以下の命令を実行すると、ffmpeg を導入できます。ターミナルは、メニューバーや、アプリ>ユーティリティなどの中にあります。
    sudo apt-get -y install ffmpeg
  • 上の命令で失敗した場合以下をお試しください。(/snap/bin/ffmpeg にインストールされます。Ubuntu 18 以降, ただし、USBブートだと、snapでインストールした ffmpeg は実行できないようです。)
    snap install ffmpeg
  • なお、次の命令で、mpg321 を導入すれば、9VAe上で、MP3音楽を利用できるようになります(Mint / RaspberryPi、Ubuntu32bit)。
    sudo apt-get -y install mpg321
  • Ubuntu で、MP4動画が見えない場合、vlc を導入すればよいです。
    snap install vlc

 

動作確認・制限事項など

  1. 9VAe「ヘルプメニュー>かおであそぼう>リミックス」で音入りサンプルアニメが開きます。
  2. 「ファイルメニュー>動画出力」
  3. ファイル名を指定
  4. 動画サイズ、動画時間、1秒のコマ数を設定し「出力開始」

これで、動画が作成されるはずです。

  • 動画作成途中、連番画像を保存するために「__tmp_」というフォルダができます。これは動画出力後に自動的に削除されますが、もし残っている場合は削除してください。
  • Windows版9VAeは、MIDI音楽を使うことができますが、MP4動画に、MIDI音楽ははいりません。同じ名前の MP3音楽を同じフォルダにいれてください。MIDI音楽をMP3に変換する方法はこちら。
  • 動画を作成する FFmpeg 命令はこちらで解説しています

 

動画出力、音声出力が失敗する場合

  • 圧縮されたMP3音声が ffmpeg で解釈できない場合に、動画出力が途中でとまったりする場合があります。その場合は、音声ファイルを、audacity のような音声処理ソフトで読み込んで、同じ名前の MP3ファイルで書き出すとうまくいくことがあります。

 

解説動画の作り方

この記事の解説動画は9VAeの「ひとコマアニメ」で作成しています。これはアニメGIFですが、FFmpeg を使って Youtube 動画を作ることもできます。

 

画面キャプチャ方法

OS
画面キャプチャ方法
保存先
 Windows
クリップボード
 Mac
  • Shift + Command + 4 (スペースでウィンドウ指定)
デスクトップ
 Android
  •  電源 + 音量Down
 adbコマンド (開発者向け)
  •  adb shell screencap -p /sdcard/screen.png
     adb pull /sdcard/screen.png
フォトアプリ>
スクリーンショット
 
iPhone / iPad
  •  ホームボタン + 電源ボタン
  • サイドボタン + 音量UP
写真>
アルバム>
スクリーンショット

 

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

f:id:dnjiro:20220119095713g:plain

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

文字、矢印を入れる

f:id:dnjiro:20220119131719g:plain

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

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

f:id:dnjiro:20220119140955g:plain

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

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

f:id:dnjiro:20220119154101g:plain

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

アニメGIF、動画出力

  • ファイルメニュー>アニメGIF出力」または「動画出力」で、好きなサイズのアニメGIF または MP4動画 が作成できます。
    Win / RaspberryPi / Linux版 でMP4動画を作るには FFmpeg が必要Youtube解説
  • スマホの場合、端末内の「9VAe」フォルダの中に出力されます。フォトアプリで、「端末内の写真>9VAe」で見ることができます。
  • アニメGIFは、背景を透明にできます。音がいれられません。
  • MP4動画には音が入れられます。Youtubeに投稿できます。Youtubeに投稿する場合、1秒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

作り方

 

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

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

 

 

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

 

 

手描きスケッチ風動画が作れる無料アプリ:9VAeきゅうべえ

9VAeきゅうべえを使えば、写真から手描きスケッチ風動画が誰でもつくれます。9VAeきゅうべえアンドロイド版PC版iPhone/iPad版でもつくれます動画素材になります下の作品は15分でできました。

 

f:id:dnjiro:20190207103630g:plain


Youtubeの解説をみる

他のアニメの作り方はこちら9VAeの質問はこちら

内容:15分程度

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


www.youtube.com

以下の 図のABCDEの順番に操作していきます。

 

1.9VAeの「1.」をクリックしてから、背景ページに写真を入れる

  1. 9VAeきゅうべえを起動。
  2. 「ファイル>新規作成」
  3. ページの右側のf:id:dnjiro:20181221201107p:plain(下図A)をクリック。「線を書いた後もう一度「1.」ボタンを押してください」が出たら、OKをクリック。★この作業は重要でこれをやっておかないと、書き順アニメを作ってくれません。
  4. ページの左側の「<」(下図B)をクリック。メニューから「背景ページを入れる」をクリック。>背景ページが左側にできます。
  5. 写真入力ボタン(下図C)をクリック。好きな写真を入れます。

    f:id:dnjiro:20200114191424p:plain

  6. Android版の場合、ファイルマネージャを使って入れたい写真を端末内部の 「9VAe」 フォルダにいれておけば読み込めます。

 

2.画面サイズの調整

  1. 写真を選んで、選択枠の中心「+」(下図D)をクリック。「ステージの大きさにする」をクリックします。これで写真が画面全体に広がります。
  2. もう一度、選択枠の中心「+」(下図D)をクリック。「ページを画像に合わせる」をクリックします。これでステージの縦横比率が写真と同じになります。(★この項目がない場合は最新版の9VAeきゅうべえをダウンロード

    f:id:dnjiro:20200114193454p:plain

3.写真をなぞって絵を描く 

  1. 2ページ(上図E)をクリックして2ページに移動。背景に入れた写真が下に見えるはずです。
  2. 左上のツールパレットから「えんぴつ」ボタンf:id:dnjiro:20190207084344p:plain(下図F)をクリック。上のf:id:dnjiro:20181221201107p:plainをもう一度クリックしてもよいです。これで線を書くモードになります。
  3. 写真の上をなぞります。録画でない(速度は形から自動計算する)ため、ゆっくりなぞってもかまいません。線が太いと感じたら右側のパレット(下図G)で調節できます。4つならんだ箱が線の属性。左から「線の色」「線の太さ」「線の種類」「矢印」。ちなみに上の色は塗り色です。
  4. 失敗したら、f:id:dnjiro:20181023071022g:plain(下図H)または「Backspace」キーで元に戻れます。
  5. スマホ版では「<< <」ボタン(下図I)をタッチし、ピンチアウト、または虫眼鏡ボタン(下図J)で画面が拡大できます。
  6. 描いた線は、あとから選択して、頂点を移動させることもできるので、あまり気にせず入力すればよいです。

    f:id:dnjiro:20200114202113p:plain

     

4.書き順アニメの作成

  1. 絵が完成したら、写真を取り除きます。背景ページの下の番号「1」(上図K)をクリック。メニューから「ページを切り取る」をクリック。写真がきおくツールに入ります。

    f:id:dnjiro:20200114202933p:plain

  2. ここでf:id:dnjiro:20181221201107p:plain(上図L)をクリック。これで絵を描いていく書き順アニメ(ひとこまコマアニメーション)ができます。簡単でしょう。

5.手描きスケッチから写真に変化させる

  1. ページの右側のf:id:dnjiro:20181221171302g:plain(上図M)をクリック。メニューから「続きのページを作る」をクリック。これで2ページ目(下図N)ができます。
  2. 2ページの時間が長すぎるので、2ページの上の時間「xx秒」(下図N)をクリック。一番上の時間をクリックして「2秒」ぐらいにします。ここに写真をいれます。
  3. 右側のf:id:dnjiro:20190110124400p:plain(下図O)をクリック。メニューから「ステージにもどす」をクリック。これで写真が2ページにはいります。

    f:id:dnjiro:20200114203814p:plain

  4. 写真の中心の「+」(上図P)をクリック。メニューから「透明にする」をクリックしてチェック。これで写真が透明になります。(★「透明にする」がない場合は最新版の9VAeきゅうべえをダウンロード
  5. ページの右側のf:id:dnjiro:20181221171302g:plain(上図Q)をクリック。「続きのページを作る」をクリック。3ページ目ができます。

    f:id:dnjiro:20200114204528p:plain

  6. 3ページの透明な写真をクリックして選択。中心の「+」(上図R)をクリック。メニューから「透明にする」をクリックしてチェックをはずせば写真が元に戻ります。これで完成。
  7. プレイボタンf:id:dnjiro:20181029083754g:plain(上図S)をクリックして、スケッチが描かれたあと、写真に変化するアニメを見てください。

 

6.アニメGIF / 動画(MP4)出力

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

 

7.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ファイルが保存できます。

 

8.応用編

 

  • 9VAeは各ソフトにあわせて、いろんなフォーマットでクリップ動画を出力できます。
アプリ クリップ形式 作り方
PowerPoint
LibreOffice
Keynote
アニメGIF 背景を透明にして出力(PowerPointの例

iMovie
PowerDirector

CapCut

キネマスター

グリーンバック動画 先頭にグリーンバック背景を入れる。(iMovieの例PowerDirectorの例Capcutキネマスター
AviUtl 連番PNG 背景を透明にして出力(AviUtlの例

 

 

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

 

 

DXライブラリをつかって、Amazon Fire 版 9VAeきゅうべえをつくる

 Amazon Fire7 が3000円程度に値下がりしてたので衝動買いしてしまった。ディスプレイ、筐体、カメラ、バッテリーつきで、RaspberryPi より安い。子供むけタブレットにはぴったりだ。こうなるとアニメソフト 9VAeきゅうべえアンドロイド版が動くかどうか気になって調べてみると、Amazon アプリストアへの登録が無料らしい。アプリストア登録までできた。さらに、2023年、Windows11 の Microsoftストアアプリになったが2025年3月5日で終了。orz

 

 

FireOSとAndroidOSの違い

入手したFire7は、FireOS 6.3で、Android API 25 32bitらしい。最新は64bitにも対応。APIとAndroidVer.の関係はこちら

Fireタブレット
Fire OS AndroidOS相当 Android API 画面(ピクセル
2014年モデル(第4世代)
2017年版 Fire 7 / HD 8 / HD 10(第7世代
5
5.1
32bit
22

2018年版 Fire HD 8(第8世代
2019年版 Fire 7 / HD 10(第9世代
2020年版 Fire HD 8(第10世代

7
9
32bit
28
2014 Fire HDX(第4世代
5
5.1
32bit
22
2560 x 1600
2021 Fire HD 10(第11世代
7
9
32/64bit
28
1920 x 1200
2022 Fire HD 8(第12世代
8
11
32/64bit
30
1280 x 800
2022 Fire 7(第12世代
8
11
32/64bit
30
1024 x 600
2023 Fire HD 10(第13世代)
8
11
32/64bit
30
1920 x 1200
Fire MAX
8
11
32/64bit
30
2000 x 1200
2023 Fire Max 11(第13世代)
8
11
32/64bit
30
2000 x 1200
Windows11 WSA(2024終了)  
13
32/64bit
31

 9VAeきゅうべえは、Android API 21  以上(動画出力は API24以上)で開発しているので動きそうだ。2014年モデル以降(第4世代)が対象になりそう。

 

Amazonアプリストアへの登録をやってみた

  1. 新規アプリを追加する>Android
  2. 一般情報>価格情報>アプリの説明
  3. 価格情報は無料にする
  4. アプリの説明>アイコン、画像サイズはGooglePlayとは違うので作り直した
  5. APK  32bit版がそのままアップできた。

GooglePlay 向けに、64bitAPK と 32bitAPKを作成していれば、32bitAPKを、Amazon用につかえるみたいだ。今、審査中。

 

32bit版APKのアップで審査パス

1週間くらいかかったが、問題なく公開された。

ということで、DXライブラリをつかって32bit APKをつくれば、Amazonアプリストアに登録できました。

 

64Bit版APKがアップできない

AndroidStudioで、32bit, 64bit, arm x86 全部はいったAPKを作成できるが、それを、Amazonアプリストアにいれると、64bit に対応していないといわれる。

ライブラリの中を調べると、32ビットには、NEON対応のライブラリがあり、64bitにはそれがないため、64bit対応していないと思われているようだ。

APKのなかをみる> AndroidStudio > build > Analyze APK... 

 

NEONは、ARM用のSIMD命令で、64bitはすべてのARMが対応しているため、NEON用ライブラリがないみたいだ。32bit と 64bit のライブラリの数をあわせるために、NEON対応をやめるには、build.gradle に以下をいれる

android {
    defaultConfig {
        externalNativeBuild {
            cmake {
                arguments "-DANDROID_ARM_NEON=FALSE"
            }
        }
    }
}  

これをいれても、NEONができた。ffmpegをつかうと、NEONができるようだ。64bitにはNEONが不要なので、32bitにあるライブラリが64bitにないため、64bit対応不足と、Amazon ストアに判定されてしまう。

 

64bit版しかはいっていない APK をつくるには、つぎのように記述するらしい

android {
    defaultConfig {
        ndk {
            abiFilters 'arm64-v8a', 'x86_64'
        }
    }
}    

これで FFmpegがはいった Amazon用64bit版をつくることができた。

 

結局次の3本のAPKを登録すると、全機種に対応できるようになった。

  1. FFmpegがはいっていない APK (古い機種用 SDK-API31で作成)
  2. FFmpegつき(Googleストアと同じ)。これは、32bit 対応にしかならない
  3. FFmpegつき 64bitのみ出力。64bitしかないので64bit対応と判定される

Windows11モバイルアプリ対応

  • Windows 11から、Amazonアプリがストアから入れられるようになった。
  • APKを登録し、Windows対応デバイスを選んで対応するをチェックすれば、Windowsストアから検索していれられるようになる。ただし、32bit版を登録していると、64bit版が有効にできないので注意(複数のAPKを登録している場合、ひとつ有効にしていると、他のAPKを有効にできない)
  • 動画出力、日本語音声合成も可能(ただし男の声になった)
  • Chromebook版9VAeと同じと考えてよさそう
  • データは、Androidサブシステムの、Download > 9VAeフォルダに保存されるが、WSAを初期化すると削除されるみたい。
  • データを取り出すには、WSAのファイル共有オプションを設定すると Windowsのドキュメントフォルダにデータが読み書きできるようになる。

 

マウス、キーボード、Windows11の検出

以下のJavaで検出できます

PackageManager pm = getApplicationContext().getPackageManager();
if (pm.hasSystemFeature(PackageManager.FEATURE_PC)){
IsPC="1"; //Chromebook
if(Build.BRAND.equals("Windows")){
IsPC="2";//Windows
}
}else{
IsPC="0"; //SmartPhone
}

マウスかタッチの区別は不明、マウスイベントはタッチイベントに変換してアプリに渡されるみたいです。キーボードはAndroid版のコードがそのまま動きました。

Windows11 WSA 版の問題点

  • マウスホイールがおかしい。DxLibの GetMouseWheelRotVol()が動作しない。
  • Windowsフォルダから読み込んだ画像、音は、9VAeフォルダに保存する。そのため同名ファイルで別の内容をつくることができない(アプリの作り方の問題)。
  • 連番ファイルはWindowsフォルダから9VAeフォルダに複製したものをつかうしかできない
  • 1000x728x32bit の png画像 が SoftImage によみこめなかった。512KB以上のサイズの画像がよみこめない様子。
  • 点を結合したときに点の周りの◯が見えない(実機では表示される)

Windows11 WSA 便利ツール

  • ファイルマネージャ(Haligames) : 実行するたびに落ちるが、Windows11のフォルダを、まるごと9VAeフォルダにコピーできる。転送したファイルは9VAeのファイルから読めるが、9VAeフォルダからは見えない。

新しいアプリの追加

9VAeを改造して「1コマアニメーター?」を作ったときのメモです

AndroidStudio プロジェクト名変更

Amazonn Fire版アプリは、AndroidStudioで作るが、既存のプロジェクトを複製して新しいプロジェクトにするのが簡単。その方法(参考記事:Zenn

     
  1. Android Studioの左側にあるディレクトリツリー(Project)から「app/src/main/java/(旧パッケージ名)」を開く
  2. パッケージ名のディレクトリを右クリックして「Refactor」>「Rename...」をクリック
  3. 変更したいパッケージ名に書き換え「Refactor」をクリック
  4. Refuctoring Preview が下に表示されたら「Do Refuctor」をクリック
  5. Edit >FindInFiles で古い名前を検索し、必要なら新しい名前に修正
  6. 「Build」>「Clean Project」して、「Make」
  7. 左のタブから「.idea」フォルダを削除し、もう一度プロジェクトを読み込んで「.idea」を作成しなおせば、プロジェクト名が変わります(.ideaは環境設定のキャッシュみたいなもの?)

アイコンの変更・追加

  1. [Project] ウィンドウで [Android] ビューを選択
  2. res フォルダを右クリックして、[New] > [Image Asset] を選択
  3. Android9以上なら、普通に、アクションバー アイコンを作成。res/drawable フォルダに 512x512 四角形透明なしのPNG画像をいれておき、Image Assetの画像に設定すれば、必要な画像が自動生成されます
  4. タブアイコン、通知アイコンを作成。これは png 画像ではなく、マテリアルアイコン

Amazon ストアへの新規登録

新規アプリの申請

  • アプリタイトル:
  • アプリSKU:com.qvae.OnePic
  • アプリのカテゴリー:
  • カスタマーサポート連絡先
  • Eメール、電話番号(任意)、ウェブ(任意)

アプリファイルのアップロード

ターゲットアプリ

  • ここでWindows11を選びます

古いバージョンの作り方

古い端末用のアプリは、以下の設定で作成できました。

 compileSdkVersion 33
minSdkVersion 22
targetSdkVersion 31

バージョンの整合性をとるために数字を工夫する必要があるようです

Amazon Fire タブレットに 9VAeきゅうべえをインストールする方法

9VAeきゅうべえは、プログラミング教育フリーソフト第4位に選ばれた、こどもがアニメーション制作するのに適したアニメーション作成フリーソフトです。Fireタブレット版、アンドロイド版・iOS版は、下記アプリストアからダウンロードできます。

 

9VAeきゅうべえはAmazonアプリストアから無料でインストールするのが簡単です。ここでは、APKを取得して、アプリストアに登録されていない PEASmotch! をインストールする方法を説明します。(昔の記事です。今は上のリンクから入手できます。)

 

 1.「不明ソースからのアプリ」設定をONにする

 APKから直接インストールするため以下のように設定します。

  • Fireタブレット >設定>セキュリティとプライバシー>「不明ソースからのアプリ」をONにします。

 

2.PEASmotch! APK(ZIP)をダウンロードする

 上のリンクをクリックしたあと、右上のダウンロードボタン Untitled.png をクリックしてダウンロードします。下が PEASmotch!です。

 

 3.ZIPを解凍できるアプリをインストールしてAPKを実行

amazon アプリストアから次のアプリをインストールします。File Managerはたくさんありますが、ZIPが解凍できる WinZip-rar がよいです。他の File Managerは解凍できないものが多いです。

  1. WinZip-rar を開く。
  2. 「Dounload」フォルダをタッチして開く
  3. ダウンロードした「xxxx.zip」をタッチ>「Extract to」が表示されるので「OK」。これでダウンロードフォルダの中に、9VAeまたはPEASmotch!のAPKファイルができます。
  4. APKファイルをタッチ>「インストール」ボタンをタッチ

これで、PEASmotch! が、amazon Fireタブレットで使えます。

 

4.アニメGIFを見えるようにする

Amazon Photo で、アニメGIFを見ると、静止画になるようです。アニメGIFを見るには、次のプレーヤー GIF Player+ をインストールするとよいです。

  • GIF Player +
  • これをいれると、ファイルマネージャ WinZip-rar から「9VAe」や「PEASmotch」フォルダの中にあるGIFアニメを直接再生できるようになりました。

 

実行環境

・9VAeきゅうべえが実行できるのは、FireOS 5.3 以上、 2014年モデル以降(第4世代以上)です。

 

9VAe で作れるアニメーション

9VAeきゅうべえは、ひとこまアニメーションと2次元アニメーションを作ることができます。PEASmotch!one は、ひとこまアニメーションが簡単に作れるソフトです。詳細はこちら

 

イラストからアニメーションを作る方法はこちらをご覧ください。

 

今までのメモ

  • Amazon Fire タブレットにインストールする方法を説明しました。
  • 9VAeきゅうべえ・PEAS motch! アンドロイド版は、Play ストアで公開しました。今後、ストアで更新します。
  • Ver.190110 で、自動バックアップファイルが残っている場合に開くか消すか起動時に尋ねるようにしました。以前のバージョンを使用して自動バックアップファイルが残っている場合は、「いいえ」ボタンで削除してください。
  • スマホを回転したあと画面をタッチすれば縦横が切り替わります。
  • ファイルの書き込み権限を許可しておかないと保存できません。
  • データはスマホ内部の「9VAe」フォルダに保存されます。(PEAS motch!は「PEASmotch」フォルダ)

 

履歴

  • 191119:9VAe 楕円の描画精度アップ、パレットのON/OFF
  • 191002:PEAS  motch! プレイストアで公開
  • 190404:PEAS  motch! デザイン変更
  • 190208 (1.1): 全体再生の改善(メニューバーの文字消去、縦横比率の保存)
  • 190207: アニメキャストを開いたときのステージが基準枠を含むように修正
  • 190206: 半透明画像が使えるようにした。サイズ変更のバグ修正
  • 190205: PEAS motch! デザイン変更, 背景バッファサイズが間違っていたのを修正
  • 190204: PEAS motch! デザイン変更(色変更矢印を追加)。動くスタンプのメニュー表示追加。
  • 190203: アニメGIF出力で、幅と高さを空白にすると比率を保って自動設定する機能を追加。
  • 190202: 塗りのあるポリゴンや穴に対してどこでも点の追加ができるよう修正(今までは開いたポリゴンの場合、開いた辺に点の追加ができなかった。)
  • 190201: 点を削除して穴を結合するときのバグ修正
  • 190121: 表示倍率拡大ボタンを押しやすくした
  • 190120: 拡張子 .svg をつけないと読み出せなくなるバグを修正
  • 190115: SVG入力(太い線が細くなる問題を改善)
  • 190111: 英語に対応
  • 190110: 起動時にバックアップファイルがあれば開く機能を追加。ファイルの上書き確認
  • 190106: 細かい修正
  • 190105: 背景、記憶ツールの文字表示を実装。バグ修正(ポップアップメニュー、線入力時のピンチ表示、ページの動きパス表示)
  • 190101: スタンプの読み込みを改善。画面サイズ設定の枠を拡大。SVG入力を改善
  • 181229: 起動時にファイルアクセス権限を取得するようにした
  • 181225: Android8 でヘルプのリンクボタンを押すと落ちる問題を修正
  • 181222: 画面サイズを720x480に拡大
  • 181212: SVG保存したアニメ情報を読み出せない場合があるバグを修正、手書き入力中に画面の再描画をおさえる処理を追加
  • 181202: 最初のバージョン

 

 

 

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

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

 

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


自己流AviUtl「カメラ制御」入門マニュアル(其の1)

自己流AviUtl「カメラ制御」入門マニュアル(其の2)

自己流AviUtl「カメラ制御」入門マニュアル(其の3)

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

 

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


島唄(三線演奏)

 

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


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

 

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

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

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

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

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

今後、開発していく機能

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

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

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

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

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

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

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

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

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