dnjiro’s 9VAe blog

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

9VAeきゅうべえ Windows11版 開発メモ (２万円ドン・キ PCでプログラム開発)

開発 教育

Windows11 がリリースされたので、アニメ作成ソフト9VAeきゅうべえの アプリストア版を開発しようと思い、試行錯誤した記録です。今の 9va-win はアプリストアに登録できず、ZIPで実行系を配布しています。C＃で作り直せば登録できるのですが、C と C++で作られているので、C++/WinRT を試してみることにしました。C++/WinRT は、ARM版とIntel版Windowsアプリが同時開発できる新しい開発環境です。知識がない状態から、どのように開発していくのか公開します。 アプリ開発してストアへの登録作業までやってみました。２万円のWindowsパソコンに開発環境を入れる方法も紹介します。

 

 

ドン・キホーテ２万円ノートパソコン に VisualStudio を入れる方法

  • ドン・キホーテのノートパソコン U1 は、メモリ４GB、ストレージ６４GB が２万円程度で入手できた激安ノート。キーボードをはずしてタブレットにもなります。
  • ただ６４GB の C ドライブに、Visual Studio をいれると、WindowsUpdateができなくなります。しかし、SDカードには、Visual Studioがいれられません
  • ３２GBのSDカードを、仮想ディスク（VHD）にすると、そこにインストールでき、ちゃんとプログラム開発できることがわかりました。その方法を紹介します。
  • ちゃんとデバッガも動きました。なお、実際の開発はデスクトップ機でやっています。ドンキ U1 はキーボードにくせがあり初心者にはすすめにくいですが、CPUを改良した U1C が入手できるようです。また、ストレージがすくない他のWindowsノートパソコンでも同じ方法が使えると思います。

 

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

  1. ３２GB 以上のSDカードをセット
  2. Windowsボタン＞設定＞「ディスク管理」を検索して実行（Win10）。「ディスクの管理」が起動します。
  3. 下にあるSDカード（リムーバブル）のバーを右ボタンクリック。メニューから「フォーマット」。これで、SDカードを「NTFS」でフォーマットします。exFAT や FAT32だと、数GBのファイルしか保存できないので、NTFSにしなければいけません。フォーマットにより中身はすべて消去されます。★★かならずリムーバブルを確認★★
  4. 「操作メニュー＞ＶＨＤの作成」を実行。
  5. 「参照ボタン」でＳＤカードに仮想ディスクのファイル名を設定。短い半角英数名がよいです。
  6. 、最大サイズを設定し、OKボタンを押します。３２ＧＢのＳＤだと、２８ＧＢぐらいのファイルが作れます。
  7. ファイルができると、ＳＤカードの下に「ディスク２」のバーができます。ウィンドウを縦にのばしてください。ファイルの作成には時間がかかります。
  8. 最初は「初期化されていない」「未割り当て」なので、左側を右ボタンクリックし「ディスクの初期化」を実行。GPTパーティションでよい。左側の表示が「オンライン」にかわります。
  9. 右側の「未割り当て」を右ボタンクリック。「新しいシンプルボリューム」を実行。「次へ」を何回かクリックし「NTFS」フォーマットのボリュームを作成します。
  10. 作成が完了すると、ドライブが割り当てられ、保存ができるようになります。この中に、Visual Studio をインストールすることができます。

作成した仮想ドライブを自動的にマウントする方法

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

Visual Studio インストール

  1. ダウンロードはこちら  
  2. 古い Visual Studio を使っていた場合は、先に削除しましょう。ツールメニュー＞「ツールと機能を取得」＞Visual Studio Installer が起動します。「閉じる」＞「インストール済み」タブ 「その他＞アンインストール」
  3. Visual Studio Installer から、Visual Studio Community をインストールします。
  4. 「インストールの場所」タブで、上の２つの場所はCドライブ以外に変更できます。ただし、SDカードのようなリムーバブルディスクは選べません。上のように仮想ドライブを準備しておく必要があります。
  5. インストール場所を設定後、「ワークロード」タブで、言語やツールを選びます。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フォルダ

 

WinRTに関する調査

  • C++/WinRT を開発するには、Visual Studio 2019 が必要。 C++17 のコンパイラが必要。いったん古い VisualStudioを削除し、2019 Community を入れるとよい。
  • 実行には、Windows10.0.17134.0 (Windows 10、バージョン 1803) 以上が必要らしい
  • IntelとARM版Windowsの両方で動くようになるらしい。M1 Mac はすばらしかったが、ARM Windows はいらん。あ、M1 Mac で動かすのかしら。ChromebookもIntelとARM版があり、ARM のほうが応答が速い気がする。

C#のドキュメントは多いのですが、C++の資料があまりありません。C# のプログラムは、C++ プログラムに書き換えられるようです。MicrosoftのサンプルにはC＃とC++の両方が用意されてます。

 

文字列処理

C# で使えるが、C++だと使えない文字列処理があるみたい。そのために、関数を定義して使うようだ。Substring関数の例

//選択したファイルの拡張子を差し替える文字列処理例
StrageFile ^pickedFile;
int len = pickedFile->Name->Length();
int ext = pickedFile->FileType->Length();

String ^suggestedFileName = Substring(pickedFile->Name,0,len-ext) + ".mp4";

 

String^ Helpers::Substring(String^ s, std::wstring::size_type startIndex, std::wstring::size_type length)
{
    std::wstring sourceString(s->Data());
    std::wstring substring = sourceString.substr(startIndex, length);
    return ref new String(substring.data());
}

非同期プログラム 

winRT は、多くの関数が非同期実行（結果がでる前に終了する）になっており、呼び出し方がきまっています。WinRTは co_await, C++/CXは、task クラス、.then メソッドを使います。/ZW コンパイラ スイッチ UWP用 が必要みたいです。WinRTの非同期関数の型 IAsyncAction, IAsyncOperationで、WithProgressで経過を処理できるみたいです。 

 

パッケージ

Windowsアプリにするためには、パッケージ化する必要あり

 

 

ファイルアクセス

  • UWPアプリには、ファイル システム全体にアクセスする権限がありません。
  • StorageApplicationPermissions クラスの FutureAccessList プロパティを使うとよいらしい。リストに1000件までいれられる。
  • auto picker = ref new FileOpenPicker();

動画編集

  • MediaComposition

  • MediaClip を画像ファイルから作成するには、画像ファイルと再生時間を指定して CreateFromImageFileAsync 

  •  ファイル作成は RenderToFileAsync。 作成経過は、AsyncOperationWithProgress 

  • 音は BackgroundAudioTrack.CreateFromFileAsync で BackgroundAudioTrack を作成。 BackgroundAudioTracks プロパティに追加。
  • 複数の音を入れるにはトラックを clone。Delayプロパティで開始時間をセット

 画像の作成は、SoftwareBitmapを使います。

  • SoftwareBitmap
  •  #include <MemoryBuffer.h> // IMemoryBufferByteAccess
  • SoftwareBitmap.LockBuffer で BitmapBuffer を取得
  • IMemoryBufferByteAccess.GetBuffer でデータを書き込む
  • unsafe キーワード宣言が必要。 プロジェクトの [ビルド] プロパティ＞、[アンセーフ コードの許可] をオン

 

Canvasを使ったプログラムの作り方

Win2D を使うと、古いスタイルでプログラムできるみたいだ。

XAML といっしょに使う場合は、SurfaceImageSource を使うらしい。Canvasは古い？XAML には、<Image をいれるようだ。描画を高速で行う場合は、SwapChainPannelを使うらしい。

 

UWP サンプル

 

 試行錯誤の記録

未知の状態からプログラムを開発していく過程を紹介します。かなり苦労してます・・・が、独学とネット検索ですすめます。

 

勉強方法

新しいプログラム言語の習得は、次のようにやっています。

  1. 知っている人がいれば、その人にきく。＞＞WinRTを知っている人はいなかった。
  2. いない場合、やりたいことに近いサンプルコードを見つける
  3. サンプルコードを少しずつ改造していく

 

  • 今回やりたいことは、「9VAe Windows版にMP4出力をつけて、ストアプリにする」です。
  • その前段階として、9va2mp4 という変換アプリを作成します。
  • サンプルプログラムはすぐ見つかりましたが、中を見ると知らない言葉が・・。これを解読していきます。

元にするサンプル

見つけたサンプル「MediaEditing」はつぎのようなプログラムです。

 

  1. 動画ファイルを選択
  2. 動画の一部をクリップして保存
  3. 音楽トラックを追加

これを改造していきます。まずそのまま動作することを確認します。改造してエラーがでたら間違いとわかります。すこしずつ改造して動かしてみることが重要です。これを繰り返して正しい書き方を勉強していきます。9VAeは静止画を何枚も作成して動画にするので、まず、１枚のJPEGを動画にするように改造してみます。

動画作成方法の習得

  1. JPEGファイルを選択
  2. JPEGファイルから動画を作成して保存
  • 動画ファイル選択から、Xamlファイルの「Click=」に関数名をかくと、ボタンを押したときにその関数が実行されるとわかりました。
  • ハンドル宣言子（＾）は、自動的に削除されるオブジェクトのポインタだと調べました。中身は（＊）、メンバーは（->）でアクセスするとわかりました。
  • C# だと「MediaClip.CreateFromImageFileAsync(IStorageFile file, TimeSpan originalDuration)」が、C++ だと「MediaClip::CreateFromImageFileAsync(file, originalDuration)」と書けることがわかりました。
  • MediaCompositionを作成し、MediaClipを追加して、GeneratePreviewMediaStreamSourceで動画作成できることがわかりました。
  • JPEG画像を５秒つづける動画ができました。

さらに次のように改造します。関連したコードをコピペしてプログラムを作成します。文法エラーが出るので、それをなくすように修正していくと必要な知識があつまってきます。

  1. 画像を自分で作成する
  2. 動画を保存する
  •  Create_task then を続けて書く方法が見つかりました
  • 自分でBitmapを作成する場合は、SoftwareBitmap を使う。以前は、 WritableBitmap だった。これは、DirectXの内部メモリを直接アクセスし、高速。WinRTでは Windows::UI::Xaml::Media::Imaging::WritableBitmap が定義されたようです。
  • DirectX の中をさわるために、Microsoft::WRL::ComPtr 、IBufferByteAccess を使う。
  • IBufferByteAccess を使うためには、#include <robuffer.h> が必要。
  • IMemoryBufferByteAccess を使うには、#include <MemoryBuffer.h>が必要
  • AsComPtr 、ThrowIfFailed は自分で定義するようです。
  • SoftwareBitmapの作り方がわかりました。

次は動画を作成してみます。

  1. 画像が変化する動画を作成する。
  2. １クリックで１コマめを作成し、２クリックで違う絵になる動画を作成する。
  • 動画にするには、いったんファイルにするほうがよいことがわかりました。
  • その場合、数1000枚の画像ができるため、終了後にこれを削除しなければいけません。
  • 作成した画像は、std::vector<Windows::Storage::StorageFile^>files; に記録すればよい。初期化は、files.resize(0); ファイル追加は、files.push_back(file); 全部削除は、for each( auto f in files) f->DeleteAsync();  vector の使い方はこちら。#include <vector> が必要
  • 削除も非同期処理になりますが、上のリストにいれておけばエラーを出さずに削除できることがわかりました。

 

タイマーイベントで動画作成するように変更します。

  1. クリックしなくても、自動的に何コマも作成できるようにする
  • タイマーイベントは、Windows::System::Threading::ThreadPoolTimer::CreatePeriodicTimer を使う。void timerThread(Windows::System::Threading::ThreadPoolTimer^ timer); 関数を定義する。
  • ただ、タイマーイベントにすると非同期処理がうまく動作せず、ボタンクリックで次の処理に進む方法にしました。

音の追加方法の習得

動画ができるめどがついたので、つぎに音楽をつけます。

  1. 動画に音をつける
  2. 指定した音の一部の時間を、動画の指定した時間からはめこむようにする
  • 指定した音楽ファイルがなかった場合、ファイルエラーが発生しますが、これを、try catch では処理できないようです。ファイルセキュリティのせいかもしれません。そのため、なかった場合はファイルを作成し、開いたファイルが直前につくられたものならファイルがなかったものにするという処理にしました。
  • 音の開始時間は、BackgroundAudioTrack ->Delay (TimeSpan) で設定。
  • 音の再生時間は、後ろからトリミングする。BackgroundAudioTrack ->TrimTimeFromEnd
  • 複数の音を動画に追加することができました。

ユーザーインタフェースの習得

音楽のめどがついたので、動画パラメータ（サイズ、コマ数、再生時間）ファイル名、の入力部分を作成します。

 

  1. 9va2mp4 の起動画面をつくる
  • アプリのスタートは、App::OnLaunched からスタートすることがわかりました。最初のページは、MainPageでした。これを、TrimAndSaveClip に変更し、画面を単純化しました。
  • xml にサイズ、コマ数、再生時間を追加する方法を調査。
  • <VisualStateManager.VisualStateGroups>でレイアウトを状態によって変更するようです。
  • <StackPanel でボタンを一列に並べる。 Orientation="Horizontal"で横。<Grid 表組、Grid.Row=行
  • <TextBlock 注釈などの表示
  • <TextBox 文字入力。 x:Name="PicWidth"  Margin="5" 、VerticalAlignment="Center"、TextChanged=" で入力が変化するごとに文字処理する。数値は、 FromStringTo<int>(PicWidth->Text); で取得できる。エラー処理のサンプルコード、TextChangedHandlerDouble 、自分で用意。PicWidth->Text = number.ToString();
  • <Button ボタン。x:Name="save" この「save」がオブジェクトポインタになる。save->IsEnabled = false; でボタン無効。Click="Save_Click"。 Save_Click が実行関数

既存ルーチンの組み込み

これで、コンバーターのUI部分はできました。9VAeのソースコードを組み込みます。

  • C のソースを追加すると「/ZW オプションがあるとコンパイルできない」エラーが出た。/ZW オプションは、プロジェクトには必要。Cソースには、/ZW オプションをいいえにできるようだ。
  • 「プリコンパイルヘッダー検索中に不明なEOFが見つかりました。pch.h をソースに追加しましたか？」エラーが出た。Cソースには、プリコンパイルヘッダを使わないよう個別設定。
  • 「error C3861: '__readfsdword': 識別子が見つかりませんでした。」エラーが出た。これは、プロジェクト＞プロパティ＞C/C＋＋＞コード生成＞構造体メンバーアラインメントを８バイト（/Zp8）にすると出なくなった。
  • インクルードファイル（*.h）もすべてプロジェクトにいれておかないと正しく処理できない。
  • 9VAeソースは C++ライブラリにして、スタティックリンクするとよいかも。これだとライブラリのビルド設定は、メインと異なる設定で作れる。fopen を使う方法
  • スタティックライブラリの作成ができた。しかし、メインとリンクできず。「 LNK2001: 外部シンボル __imp__SelectObject@8 は未解決」など・・これらは以下のライブラリをプロジェクトに追加すると解決された。
  • gdi32.lib 。描画関数
  • kernel32.lib 。ファイル関係
  • shell32.lib  。ShellExecute
  • comdlg32.lib。コモンダイアログ
  • YesNoダイアログなど、winRT側で表示したほうがよい関数は、メインプロジェクトに cpp 関数をつくっていれて、リンクエラーがなくなった！
  • プロジェクトツリーの親を右ボタンクリックし「ビルドの依存関係」でライブラリを追加すれば、いっしょにビルドすることができ、ライブラリもデバッガーで動く。すばらしい。

ファイルアクセス権限の調査

リンクエラーがなくなったので、メインとの接続部分を作っていきます。

winRT で 9VA ファイルを選択してライブラリにわたし、縦、横サイズが取得できるまでを作ります。

auto picker = ref new FileOpenPicker();
create_task(picker->PickSingleFileAsync()).then([this](StorageFile^ videoFile)
{
    auto tempFolder = ApplicationData::Current->TemporaryFolder;
    create_task(videoFile->CopyAsync(tempFolder, videoFile->Name, NameCollisionOption::ReplaceExisting)).then([this](StorageFile^ tempFile)
    {
        String^ path = tempFile->Path;
        std::wstring wp(path->Data());
        std::string sp(wp.begin(), wp.end());
        char* cpath = (char*)sp.c_str(); //これで fopenできた
    }
}

 

選択した9VA ファイルから１コマの動画を作成し、プレビューに表示するまで作ります

  • ファイルにアクセスできたが、描画するための HDC（描画先） や HWND（ウィンドウ） をどう取得すればよいか問題に。Windows.UI.Component というのをつかうとよいらしいが、ややこしそう。
  • HDCは、GetDC(NULL) で、ディスプレイのHDCが得られるようだ。これで9VAeがディスプレイに直接描画した！最後は描画しないようにしないといけないがどこまで動いたかわかるのでこのままにしておく。

アプリの完成

ライブラリと接続し、デバッガーで動作するようになったので、あとは、次のような点を調整

  1. 入力数値のエラー処理
  2. 中断処理
  3. ８の倍数でない出力ができるか
  4. 外部ファイル（画像、音楽）の読み出し（テンポラリーへの複製ができるか）
  5. MIDI音楽の再生  >> 難しそうなのであきらめ
  6. 漢字ファイル名への対応  >> この変換プログラムを使用
  7. 多国語対応

ファイルピッカーでユーザーが指定したファイルしか読みだせないので、最初にアニメーションで使っているファイルをすべて選択してもらうことにする。これをテンポラリに転送し、その中で読み出しを行う。

  • 複数ファイルを選択し、全部テンポラリにコピーするコード

auto picker = ref new FileOpenPicker();
create_task(picker->PickMultipleFilesAsync()).then([this]

    (IVectorView<StorageFile^>^ files)

{
    auto tempFolder = ApplicationData::Current->TemporaryFolder;
    for (auto file : files) {//複製
        flle->CopyAsync(tempFolder, file->Name, NameCollisionOption::ReplaceExisting);
    }
});

  • auto は自動型設定（右にあわせる）、ref new で割り当てると自動的に解放される
  • create_task  then は非同期処理。[this] は非同期処理に this をわたす。＾で定義したオブジェクトは外側の定義が引き継がれるので[  ] には入れない。
  • IVectorView<StorageFile^>^ files は、torageFile^の配列で、複数選択結果
  • for (auto file : files) 、autoで fileの型が自動設定される。
  • NameCollisionOption::ReplaceExisting は同名があったとき上書き

 

  • 動画を作成するために全フレームのBMP画像をテンポラリフォルダに作成しているが、MP4を作成したあと、メディア表示にも使われるみたい。削除するとメディア表示ができなくなった。

 

9VAeファイルからMP4動画に変換するアプリ「9va2mp4」に仕上げます。

 

多国語対応

  • Stringsフォルダを自分で作成して、en-US, ja-JP フォルダを入れる。英語の説明
  • 新規追加＞XAML＞リソースファイル（.resw）を入れ「Resources.resw」にリネーム。しかしこの方法では、Stringフォルダも en-US フォルダもできなかった。
  • いったん除外し、エクスプローラで、String/en-US, String/ja-JP フォルダを作成し、Resources.resw をそこに入れてからプロジェクトに追加。
  • Xamlやプログラム中の文字列の入れ替えは説明をみてもよくわからず、サンプルから以下のコードを抽出。アプリの先頭に以下のコードをいれた。

//定義
    private:
        Windows::ApplicationModel::Resources::Core::ResourceMap^ strMap;
        Windows::ApplicationModel::Resources::Core::ResourceContext^ strContext;


//プログラムの先頭にいれる "Resources" は、"Resources.resw"に対応
    strMap = Windows::ApplicationModel::Resources::Core::ResourceManager::Current->MainResourceMap->GetSubtree(L"Resources");
    strContext = Windows::ApplicationModel::Resources::Core::ResourceContext::GetForCurrentView();

    button1->Content = strMap->GetValue("button1", strContext)->ValueAsString;
    textBlock1->Text = strMap->GetValue("textBlock1", strContext)->ValueAsString;

  • button1はボタン（xaml のx:name）、ja-JP フォルダの"Resources.resw" に 名前"button1" 値 "日本語のボタン"、 en-US フォルダの"Resources.resw" に 名前"button1" 値 "English button name"、といった感じで書いておく。 textBlock1 はテキスト

f:id:dnjiro:20210918213711p:plain

上の日本語の表示は ja-JPフォルダ。英語は en-USにはいっており言語によって切り替えできるようになった。

 

パッケージ化

  1. 「サイドローディング」「自動更新」のチェックははずしておく。「次へ」
  2. 「署名の追加」ここで「作成」をおすとテスト用署名がつくれる。これがPCに登録され、PCにインストールできる。
  3. バージョン、アーキテクチャ選択
  4. 「自動更新」のチェックがあると、自動更新を配信するサイトが必要
  1. Windows10SDK これは、Visual Studio をいれると導入される。「ツールメニュー＞ツールと機能の取得＞個別のコンポーネント」で確認できる
  2. Windows設定で「開発者モード」をオンにする
  3. VisualStudio でパッケージ作成すれば、Windowsアプリ認定キットで実行できる

パッケージの動作テスト

  • パッケージの中の「Add-AppDevPackage.ps1」を右ボタンクリック。Powershellで実行。これで管理者権限の取得やアプリの登録が実行される
  • デバッガーで実行した後だと、同じアプリがすでに登録されているエラーになる。Windows設定からアプリを削除する必要あり（新しくインストールしたものから検索）

アプリストアに登録してみます。まず、開発者登録。

開発者登録

  • 開発者登録はこちら。料金は個人１９ドル。１回限りでよい（Appleは毎年とられる）
  • 国名：Japan
  • Publisher名、住所、電話番号、を入力。Microsoft Acountをいれたが支払いのページで１回失敗したが、アカウントに戻り再入力すると、支払いページに別の支払い方法リンクにはいり登録できた。多くの人は開発者登録のクーポンで登録するのだろう。
  • 登録すると Microsoft Partner Centerが開く。アプリ作成方法がかいてある。

 

アプリの登録

  • アプリの名前：9vae2mp4 といれると、アプリのページが新しくできた。
  • Application overview：Pricing and availability
  • 価格を無料に設定して保存すると、次の項目になった。
  • Submission 1：Properties  ＞ Photo＋Video  
  • プライバシーポリシー情報を入力
  • Display mode：Mix Reality表示するか ＞いいえ
  • Product declarations：宣言
  • System requirements：必要なハードウェア。特に設定せず
  • Age ratings：年齢に関連した情報をいれる
  • Packages：作成したパッケージを登録する。下のようにしてパッケージ作成。x86_bundle.msixupload をドラッグして登録。Windows10 Desktop だけにチェックした。古いDLL使用で認定テスト不合格だが動くので登録してみる。
  • Store listings：アプリの説明を言語ごとに作成
  • Default description：アプリの説明、Screenshots：スクリーンショット、
  • Store logos、Trailers and additional assets、Supplemental fields は省略
  • Additional information にURLを追加、Copyright (c) 9VAe Lab、Developed by Danjiro Daiwa とした
  • ここまで入力して審査に提出＞＞やはり、下の認定テストに通らないとアップできない。

 

Microsoft Store と関連づけてからパッケージ作成、認定テスト実施

  1. VisualStudio ＞プロジェクト右ボタン＞公開＞アプリを Microsoft Store と関連づけを実行
  2. PartnerCenterに登録した名前 9vae2mp4 がリストに表示されたのでそれと関連付けできた。
  3. 公開者ID：関連付けを行うと自動作成された
  4. プロジェクト右ボタン＞公開＞パッケージ作成
  5. PartnerCenterに登録した公開者、名前で作成 。アーキテクチャ x86 のみとした。
  6. Windowsアプリ認定キットを使用にチェックを入れて作成実行
  7. 作成完了後「Windowsアプリ認定キットを起動」をクリック
  • HDCを使った描画関数などが使用不可で不合格という判定が出た。テスト実行はできたが、アプリ登録は不可。gdi32.dll, kernel32.dll, user32.dll, winmm.dll 

認定テストが合格になり、ストアの掲載情報を入力すれば、Microsoftに審査提出できるみたい。描画部分を全部、Direct2Dに置き換えないといけない。これは時間がかかりそう。Windowsストアアプリが増えなかった一因かも。

 

感想：Mac の M1 対応の場合、古い描画関数（Objective-C）がそのまま使えた（一部修正はあったが）。Windowsの場合、GDI関数の抽象化が不十分なため、ARMでも動かすために描画関数を使えなくするようだ。ハードアクセラレータの組み込みを簡単にするためCPU描画をなくしたいのかも。MacOSは、スティーブ・ジョブズが Mac を追い出されてつくった Next社の Next Step がベースで、Objective-C で作られていた。NextStep は、PowerPCでも Intel でも動いたので、Mac もIntel から、 Arm の M1 CPUに変更できた。Windowsも同じことをやりたいが、ハードアクセラレータの部分もいっしょに抽象化したいのだろう。 テスト実行（サイドローディング）だと昔のCPU描画でも動くのは、移行支援のためか。方針は納得できるが、過去のCPU描画アプリをストアアプリに修正するのは、Mac よりも相当難しいみたいだ。自分で確保したバッファメモリ中に文字を描画できない点がネック。（Android版 9VAe のDXライブラリもそうなっている）

Direct2D、DirectWrite

HDCがつかえるライブラリみたいだが、たぶん難しかったのだろう。開発がとまっているらしい。なんとか完成させてほしい。

 最終目標：下がWindowsストアアプリでできるようにする

f:id:dnjiro:20210722171735g:plain

 

いまのところの結論

  • CPU描画の過去のプログラムを、Windowsストアアプリに変更するのは、内部の作り方によっては、相当むずかしいことがわかった。9VAeの移植はいったんあきらめ。
  • 過去のWindows有名アプリも同じような状況と予想。AviUtlなど多くのソフトが、ストアアプリにならないのではないか。Objective-C が使えるAppleと異なる。ストアアプリがふえないので、Android アプリを動かす作戦に出たのでは。
  • ハードアクセラレータが必須の３次元アプリは、作り直さないといけないので、ストアアプリにできる。
  • もともと、9VAeに動画出力をつけるのが目的だった。「ffmpeg」をつかったらできた。
  • あきらめていたら、Amazon版9VAeがWindowsストアアプリに勝手になった。Windows Subsystem for Android を使う。

 

 

動く動画フレームの作り方：無料ソフト9VAeきゅうべえ

アニメの作り方

9VAeきゅうべえアンドロイド版でもPC版、iPad版でもつくれます。作業時間は１５分くらいです。動画編集用素材にもなります。

f:id:dnjiro:20210730230715g:plain

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

 

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

 

SVGイラストのダウンロード

Openclipart (Heart Fractal Outline) からダウンロードします。

 

  1. スマホの場合は、「SVG（Vector）（ここでもよい）」を長押し。メニューから「リンクアドレスをコピー」をタッチ。9VAeきゅうべえのツールメニュー＞「ネットからダウンロード」のあと、http:入力エリアを長押しして「貼り付け（ペースト）」。これでダウンロードできなかった場合は、いったんダウンロードし、「ファイル＞開く」からダウンロードしたファイルを開いてください（Androidの場合）
  2. パソコンの場合は「 SVG（Vector）（ここでもよい）」を右ボタンでクリック。「対象をファイルに保存」または「リンク先のファイルをダウンロード」。9VAeきゅうべえメニューから「ファイル＞開く」をクリック。ダウンロードしたファイルを選ぶ。SVGが読めない場合はバージョンが古いので最新版にしましょう。
これで、9VAeにSVGイラストが読み込まれます。
左下の「虫眼鏡」ボタン（下図A）をクリックすると全体が見えます。 

f:id:dnjiro:20210730235631g:plain

 

アニメキャストの中身を保存して開く（ツールメニューから読み込んだ場合）

ツールメニューからよみこんだイラストはアニメキャストという部品になります。アニメキャストが便利な場合もありますが、動きをつけたい場合は、アニメキャストの中身を開きます。
 

  1. 選択枠の中心の「＋」（上図B）をクリック。メニューの上から２番目「アニメ（...）を修正」をクリック。アニメキャストの中が開きます。

  2. 「ファイルメニュー＞名前をつけて保存」で「heartframe」という名前をつけて保存します。（上図C）

  3. 「ファイルメニュー＞開く」（上図D）。「heartframe」を開きます。

  4. これに動きをつけていきましょう。

中央上のハートをひとつ選んで移動

  1. パレットの下（下図E）をタッチするとパレットが消えます。スマホ版ではよく使う操作です。右下の「もどす」で元に戻ります。

    f:id:dnjiro:20210731074127g:plain

  2. ページ右の「＋」（上図F）をタッチ。「続きのページを作る」をタッチ。これで２ページができます。
  3. ハートをタッチして選びます（上図G）。
  4. 点選択ボタン（上図H）で点がすべて表示されます。
  5. 中心の上のハートの点の一部（上図I）を選びます。
  6. 点選択ボタン（上図J）をもう一度押せば、選んだ点のハートだけ点が表示されます。
  7. 左下の表示拡大ボタン「＋」（上図K）で選んだハートが拡大されます。
  8. ハートの全部の点を選びます（上図L）
  9. 選択枠中心の「＋」をドラッグして下に下げます（上図M）
  10. 「表示メニュー＞前後のページを重ねて表示」（上図N）これで１ページのハートの位置が薄い色で表示されます。

ハートをひとつずつ隣に移動

  1. ハートをタッチして選びます（下図O）。

    f:id:dnjiro:20210731092210g:plain

  2. 点選択ボタン（上図P）。全部の点が表示されます。
  3. 中心からひとつ左のハートの点（上図Q）を選びます。
  4. 点選択ボタン（上図R）を２回タッチ。１回めで選んだハートだけの点になり、２回めでハートがひとつ選択された状態になります。
  5. 中心の「＋」をドラッグして右下に移動（上図S）。
  6. 選択枠の角の■（上図T）をタッチ。メニューから「回転」。前のページのハートの位置に重ねます。
  7. この作業を繰り返します。
  8. ハートをタッチし、左側のハートの一部の点を選択（上図U） 
  9. 点選択ボタン（上図V）。移動し、回転し、となりのハートに重ねます（上図W）

上の作業を繰り返し

  • ハートをひとつずつ移動させます。
  • スマホの場合、２本指で画面をスクロールすると表示場所が変えられます。
  • パソコンの場合、スペースキーを押しながら画面をドラッグすると表示場所が変えられます。

f:id:dnjiro:20210731101142g:plain

 繰り返し、文字をいれる

  1. 左下の虫眼鏡ボタン（下図X）で全体を表示。

    f:id:dnjiro:20210731143220g:plain

  2. １ページ（上図Y）をタッチし１ページに移動。
  3. 「ツールメニュー＞繰り返し」をタッチ（上図Z）。これで「繰り返し」命令がはいり、１ページと２ページの間が繰り返し再生されるようになります。
  4. １ページの時間（１秒）（上図a）をタッチ。メニューから「0.1秒短くする」を５回おして、１ページの時間を 0.5秒に設定
  5. 先頭ページの左側の「＜」（上図b）をタッチ。メニューから「グリーンの背景を入れる」を実行。背景がグリーンバックになります。
  6. ２ページ（上図c）をタッチし３ページに移動。
  7. 文字入力ボタン「A」（上図d）をタッチ。「9VAeでつくれるよ」と入力。
  8. 選択枠の角の■をドラッグして文字を拡大（上図e）。
  9. 右下の「もどす」（上図f）をタッチしてパレットを表示。
  10. 線の種類ボタン（上図g）をタッチ。「縁をつける」で文字が縁取りされます。
  11. 文字タブ２（上図h）をタッチ。文字色ボタン（上図i）で文字の色を設定します。

  12. f:id:dnjiro:20210722162654g:plainプレイボタンで動きをみてみましょう。

    f:id:dnjiro:20210730230715g:plain

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

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

 

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

アニメGIFは簡単にMP4動画に変換できます。

  1. ezgif.com ( Online GIF to MP4 Video converter ) を開く
  2. 「ファイルを選択」をクリック ＞ 作成したファイルを選ぶ。（Android版の場合、「ファイル」をクリックし、出力されたアニメGIFを選ぶ）
  3. 「Upload!」ボタンをクリック
  4. 「Convert GIF to MP4!」ボタンをクリック
  5. 「Save」ボタン（フロッピーディスクアイコン）をクリック
  • これで、MP4ファイルが保存できます。

 

9VAeで動画素材を自作しよう

  • 9VAeきゅうべえを使えば、SVGイラストからいろんな動画素材を作成できます。SVGの静止画のフリー素材イラストがネット上にたくさんあります。いろんな動画素材を作ってみてください。

 

  • 9VAeは各ソフトにあわせて、いろんなフォーマットでクリップ動画を出力できます。
アプリ クリップ形式 作り方
PowerPoint
LibreOffice
Keynote		 アニメGIF 背景を透明にして出力（PowerPointの例）
iMovie
PowerDirector		 グリーンバック動画 先頭にグリーンバック背景を入れる。（iMovieの例、PowerDirectorの例）
AviUtl 連番PNG 背景を透明にして出力（AviUtlの例）

 

長いアニメや動画を作りたい場合は、以下をご覧ください。

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

 

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

 

 

たった５枚の絵からすごいショート動画が作れる無料アプリ：9VAeきゅうべえ

アニメの作り方 おすすめ

下のアニメーションは 動くGIF素材集の Komori が作成した作品です。この動画の作り方を解説します。9VAeきゅうべえ「ヘルプメニュー＞（練習）＞カニとたたかう」で中身がみえます

f:id:dnjiro:20210723001849g:plain

他のアニメの作り方はこちら。

9VAeの質問はこちら。

目次

 

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


www.youtube.com

サンプルアニメーションの入手

  • パソコン版9VAeの場合、exampleフォルダ＞ komo_island ＞ 05crab.eva 
  • スマホ版9VAeは、ヘルプメニュー＞カニとたたかう（Ver.5.0 211001で追加されました）
  • Openclipart (Big crab island animation)からSVGデータをダウンロードできます。

形が変わる図形で動画を作成

  • 上のアニメーションは、形が変化する図形を重ねて作られています。はさみと人以外を線にかえると下のようになります。

f:id:dnjiro:20210722140611g:plain

  • はさみは３つの図形で作られています。それが（１秒）（0.5秒）（１秒）（１秒）（１秒）（０秒）の以下の６ページに描かれています。f:id:dnjiro:20210722143125p:plain
  • 9VAeはこの６ページの図形から中間の形を自動計算し動画を作成します。６ページは１ページと同じ絵で最初にもどります。

    f:id:dnjiro:20210722152348p:plain

    f:id:dnjiro:20210722155528p:plain

作り方：多角形で形を入力

  1. 多角形入力ボタンを押して、形を入力します。最初の点をタッチすると入力終了します。

グラデーションをつける

  1. 選択ボタンをおします
  2. 外からドラッグして入力した図形を選びます。
  3. 塗り色１をパレットから選びます。パレットが消えている場合は右下の「もどす」を押します。もう一度押すとパレットが消えます。
  4. 真ん中のボタンがグラデーションの種類です。横向きにしました。
  5. 塗り色２を選べばグラデーションになります
  6. 下の「線の種類」で（なし）にすると線が見えなくなります

続きのページをつくる

  1. ページの右側の「＋」ボタンのメニューから「続きのページをつくる」で、１ページの内容が２ページにコピーされます。

形をかえる

  1. 選択ボタンを押します
  2. 外からドラッグして入力した図形を選びます。
  3. 点選択ボタンを押せば、図形の点が表示されます
  4. 点をドラッグして形を変えます

さらに続きを作って変形

  1. ページの右側の「＋」のメニューから「続きのページをつくる」で２ページが３ページにコピーされます
  2. 点選択ボタンで、点を表示し、点をドラッグして形を変形します

時間の調整

  1. ２ページの上の時間をタッチし、メニューから「0.1秒短くする」を何回かタッチして、ページの時間を0.5秒にします
  2. プレイボタンで動きを見てみましょう

同じように作成していく

同じようにして５ページの絵を作りました。

  1. １ページのページ番号をタッチ。メニューから「ページを記憶する」
  2. 最後のページに移動するボタンをおします
  3. ページの右側の「＋」をタッチ。メニューから「記憶したページを入れる」。これで１ページと同じ内容が最後のページに入ります。これでループアニメーションができます。

 

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

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

 

Komoriさんの孤島シリーズ

  • パソコン版の9VAeきゅうべえには、Komoriさんのほかの作品が収録されています。すべて６枚以下のキーフレームで作られています。ご覧ください。


www.youtube.com

9VAeで作れる動画の例

  • 他の作品も紹介します。以下の動画も9VAeきゅうべえで作られています。
  • 作成したパーツをアニメキャストにして、多数複製しています。複数のアニメキャストをまとめてアニメキャストにして使っています。


www.youtube.com

  • Komoriさんとどらごんさんが協力してつくった作品

蜘蛛の糸【Two-Piece 作品】 （Komoriとどらごんのユニット）


救出Part2 Two-Piece（Komoriとどらごんのユニット）

9VAeで動画素材を自作しよう

  • 9VAeきゅうべえを使えば、SVGイラストからいろんな動画素材を作成できます。SVGの静止画のフリー素材イラストがネット上にたくさんあります。いろんな動画素材を作ってみてください。

 

  • 9VAeは各ソフトにあわせて、いろんなフォーマットでクリップ動画を出力できます。
アプリ クリップ形式 作り方
PowerPoint
LibreOffice
Keynote		 アニメGIF 背景を透明にして出力（PowerPointの例）
iMovie
PowerDirector		 グリーンバック動画 先頭にグリーンバック背景を入れる。（iMovieの例、PowerDirectorの例）
AviUtl 連番PNG 背景を透明にして出力（AviUtlの例）

 

  • 9VAeは下のような特長をもった商用利用可能な無料アプリです。
     
    9VAeきゅうべえ
    他のアプリ
    方式
    図形のすべての点の対応関係をもったベクトル方式
    タイムラインに画像を並べるビットマップ方式
    修正
    形を後から自由に修正できる
    画像を描き直す
    補間
    変形した形はなめらかに変化する
    形の補間はできない
    データ量
    中間がないので小さい
    何枚も画像が必要で重い
    階層化
    9VAeの中に３０階層まで
    9VAeがはいる。全て編集できる
    できても１階層
    中身は同時に編集できない

 

 

サムネイル画像の作成

  • 9VAe Ver.0.8.5 （スマホ Ver.1.5）から各ページを任意サイズのPNG画像に出力する機能がつきました。
  1. ファイルメニュー＞画像出力。パソコン版は先に保存フォルダと保存名を指定します。
  2. 画像設定画面で、画像サイズ（縦横ドット数）を指定します。Youtube サムネイルは 1280x720 推奨。　サムネイルの場合「背景を透明にする」にはチェックをいれないほうがよいでしょう。
  3. 原稿の縦横比率を変更したい場合は、「ページメニュー＞ページ設定」でステージのサイズを変更します。

 

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

Python パイソンで アニメを動かしてみた

教育 ワークショップ 開発 アニメの作り方

フリーソフト9VAeきゅうべえ は、外部プログラムでアニメーションを制御できます（Ver.0.6.13以降）作り方を説明しました。Pythonの使い方はこちら

次の動画は、Processingと LeapMotion と 9VAe で作ったアニメの女の子とじゃんけんをするデモです。

この記事では、9VAeとPythonを使って、LeapMotion なしでできるデモを作成します。製作時間は３０から４５分くらい。ラズベリーパイかパソコンがあれば実行できます。（Windows版、Mac版9VAeでも可能です）

Python (パイソン) の入手

ラズベリーパイの場合

Mac の場合

  • python(Ver2), python3(Ver3) が最初からはいっています。ターミナルから使えます。
  • ターミナルは「アプリケーション＞ユーティリティ」の中にはいっています。ドックの上にターミナルアイコンをドラッグして登録しておくとよいでしょう。

Windows の場合

python2 と python3 の違い

  • python2 と python3 で書き方が違うところがあるので注意（ネット上には、python2のプログラムもあり、そのまま python3で動かすとエラーになります）
  • プログラムに日本語を入れたいとき（表示したい文字が日本語など）は、python3 を使います。

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

ラズベリーパイの場合

Ver.0.6.15 以上を使うことをお勧めします。

  1. ラズベリーパイのブラウザで「こちら 9va-piダウンロード」 をクリック。開いた画面の右上のダウンロードボタン（上図１）をクリック
  2. ブラウザの左下にダウンロード状態が表示されます。ダウンロードが完了したら右側の「＾」（上図２）をクリック。メニューから「Show in folder（フォルダを開く）」をクリック。/home/pi/Downloads が開きます。
  3. ダウンロードした「9vapXXX.zip」を右ボタンでクリック。メニューから「Extract here （ここでファイルを展開）」をクリック。「9va」フォルダができます。
  4. 「9va」フォルダをダブルクリック
  5. 「9va-pi」をダブルクリック。「Execute（実行）」をクリック。9VAeが起動します。
  6. 次回から「画面左上の Raspi ボタン＞Graphics（グラフィックス） > 9va-pi」で実行できます。

Mac / Windows の場合

  • ここからダウンロード できます。
  • ダウンロードしたファイルを展開すると、中に、9VAeきゅうべえとサンプルがはいっています。

１．9VAeきゅうべえを使ってみよう

サンプルアニメ「girl.eva」を開く

以下はDownloadフォルダに9VAeを展開した場合です。

  1. 「Helpメニュー＞Japanese」で日本語表示になります。
  2. 「ファイルメニュー＞開く」
  3. 「Downloads > 9va > example > 01simple」と順番にフォルダを開き「girl.eva」を選んで「開く」をクリック
  4. プレイボタン（下図A）をクリック。女の子の顔がまわりに出て消えれば成功です。

女の子の顔がまわりにでてくる処理は、命令リスト「girl.csv」の中に書かれています。

命令リスト「girl.csv 」を開いてみる

命令リストの中を見てみましょう。

  1. 「girl.csv」（上図Ｂ）をクリックして選択。選択枠の中心の「＋」をクリック。メニューから「開く」をクリック（Returnキーでもよい）。CSVファイルが開くはずです。

ここに書かれている4文字の記号がCSV命令です。一部を説明しておきましょう。

CSV命令 引数 意味
setA "名前" 配置するアニメキャストを設定する
drwA x,y (x,y)を中心にアニメを配置する
drwA x,y,z,u,d,e,h (x,y)を中心に(倍率z, 角度u, 半径d, 回転e, 水平倍率h)でアニメを配置する
filC r,g,b,alpha 塗色を設定（0-1の範囲）
wait tt tt/100秒時間待ち
clrA 配置したアニメを全部消す
exit CSV命令の読み込みを終了する

”face” が女の子の顔のアニメーションです。9VAeではアニメキャストと呼んでいます。これを、drwAという命令で画面に配置しています。

命令リスト「girl.csv 」を修正してみる

  1. とりあえず、以下のように最後から２番目の行「exit」の前に「#」を入れてコメントアウトしてみましょう。
#loop,
#exit,
#clrA

「Fileメニュー＞Save（保存）」で保存した後、9VAeプレイボタン（上図Ａ）をクリックしてみてください。「exit」をコメントアウトしたため、次のCSV命令待ちの状態（女の子の顔が残った状態）になるはずです。

２．Python (IDLE)

ラズベリーパイや Mac には、Pythonが最初からはいっています。girl.csv の後ろに Python で命令行を追加していけば、アニメーションをコントロールできるわけです。テストとして、CSV命令の最後に図形を全部消去する「clrA」を Python で追加してみましょう。

Python の起動

基本的な IDLE を使ってみます。

ラズベリーパイの場合

  1. 画面左上の Raspi ボタン＞Programming(プログラミング) > Python 3 (IDLE)
    これで、Python の Shell ウィンドウ（実行画面）が開きます。
  2. 「File メニュー＞New file」をクリック。これで、テキストエディタが開きます。

Windows の場合

  1. Windowsボタンをクリックし「IDLE」と入力して、アプリ　IDLE(Python) を実行します。
  2. 「File メニュー＞New file」をクリック。これで、IDLEのテキストエディタが開きます。

Mac の場合

  1. ターミナルから「idle」を実行すると Python という名前で IDLE が起動します。
  2. 「File メニュー＞New file」をクリック。これで、テキストエディタが開きます。

Python でテキストファイルに書き込み

ここに、以下のプログラムを書きましょう。girl.csv に「clrA」という命令を追加します。mode='a' が追加の意味です。file で書き込むファイルを指定しています。 以下は、ラズベリーパイで、Downloadフォルダに9VAeを解凍した例です。Windowsの場合は、girl.csvのフルパス名に修正してください。パスの区切りは「¥」をすべて「/」に書き換えます。Macの場合、ファイルをターミナルにドラッグすれば、フルパスがターミナルに表示されますので、それを使います。

file = "/home/pi/Downloads/9va/example/01simple/girl.csv" 

with open(file, mode='a') as f:
    f.write("clrA\n")
  1. 「File メニュー＞Save as」をクリック。Desktop を選んで、「girl.py」という名前を入力し、「Save」ボタンをクリック。
  2. 「Run メニュー＞Run Module」をクリック。

これで、Python プログラムが実行されます。結果は、Shell Window に表示されます。 9VAeはアニメ girl を再生した状態にしておいてください。まわりの女の子の顔が消えると成功です。9VAeから「girl.csv」を開いて（上図Ｂをクリックして開く）最後に「clrA」が追記されていることを確認してください。

３．サンプルプログラム作成

ここで、次のようなプログラムをつくってみましょう。

  1. キーボードで「１」を押すと指が１の形になる
  2. 「２」を押すと指がピースの形になる

9VAe側で「指が１の形になる」「指がピースの形になる」アニメーションを作成します。9VAeを使えばきれいに動くベクトルアニメーションが作れます。

指の形は freeSVGイラストサイト からダウンロードしましょう。

一本指を freeSVG からダウンロード

  1. こちら Finger Pointing-1574437693 を開く。
  2. 「DOWNLOAD SVG」 を右ボタンでクリック。メニューから「Save link as」をクリック。Downloadフォルダに保存

２本指を freeSVG からダウンロード

  1. こちら Peace victory hand gesture vector image を開く。
  2. 「DOWNLOAD SVG」 を右ボタンでクリック。メニューから「Save link as」をクリック。Downloadフォルダに保存

１本指を9VAeに読み込む

  1. 「9VAe」ボタン（上図Ｃ）をクリック。メニューから「9VAアニメを入れる」をクリック。ダウンロードした１本指「 Finger_Pointing.svg」を選択
  2. 左下「ー」ボタン（上図Ｄ）を何回かクリックし画面を小さくし、選択枠の角のハンドル（上図Ｆ）をドラッグして小さくする。
  3. 選択枠の枠線をドラッグして位置を移動
  4. 右手の横に移動させたら、虫眼鏡ボタン（上図Ｅ）をクリックして全体を表示
  5. 選択枠中心の「＋」（上図Ｇ）をクリック。メニューから「アニメ（Finger_Pointing.svg）を修正」をクリック。アニメキャストの中身が開きます。

アニメキャストの中身をアニメにする

  1. 選択枠の角のハンドル（上図Ｈ）をクリック。メニューから「回転」をクリック。指を縦にする
  2. 線の太さパレット（上図Ｉ）をクリック。一番細い線にする
  3. ページの右端の「＋」（上図Ｊ）をクリック。メニューから「続きのページを作る」

これで２ページできます。１ページの指を小さくし、前のページの時間を0.5秒にしましょう。

  1. １ページ（上図Ｋ）をクリックして１ページに移動
  2. 指の角ハンドル（上図Ｌ）をドラッグして小さくする。ハンドルが押せない場合、左下の「ー」ボタンでサイズを小さくしてください。
  3. １ページの時間（上図Ｍ）をクリック。メニューから「0.1秒短くする」を5回クリックして0.5秒にする
  4. プレイボタン（上図Ｐ）で動作を見てみましょう。１本指が出てくるアニメーションが見えたら成功です
  5. 画面の上の太字「Finger_Pointing.svg」（上図Ｎ）をっクリック。メニューから「名前の変更」をクリック。簡単な名前「one」にしましょう。
  6. 左側の太字「girl」（上図Ｏ）をクリック。メニューから「このアニメにもどる」をクリック

Python のプログラム

Python のプログラムを考えましょう。

  1. 「１」を押すと指が１本指になる
  2. 「２」を押すと指が２本指になる
  3. 「３」を押すと終了

次のようなプログラムになります。

file = "/home/pi/Downloads/9va/example/01simple/girl.csv" 

while True:
    kk = input("1 , 2  or 3:")
    if  kk == '1'
        with open(file, mode='a') as f:
            f.write("setA,\"one\"\n")
            f.write("drwA,183,170.5\n")
            f.write("wait,10\n")
    if  kk == '2'
        with open(file, mode='a') as f:
            f.write("setA,\"two\"\n")
            f.write("drwA,180,160\n")
            f.write("wait,10\n")
    if  kk == '3'
        break;
  • while True: は何回も繰り返すという意味です。繰り返す範囲は while 以下の行で段付けがされた範囲です。段付けで範囲を示すのが Python の特長です。
  • input() はキー入力待ちの関数です
  • \" は、""の中に「"」を入れる書き方です。\n は改行です。
  • f.writeの中の「drwA」はアニメキャストを画面に書く命令です。
  • その後ろの（183,170.5）はアニメキャストの左上の位置の指定です。これは、下図のようにアニメキャストを移動させ、再び選択したときに下図Ｒの位置に表示される数字から中心の座標（98+170/2, 129+83/2）を記入します。
  • wait,10 は0.1秒待つ命令です。 wait はなくてもよいのですが、待ち時間を入れると、あとから、アニメーションが再現できるので便利です。
  • setA の後ろの「one」は１本指のアニメキャストです。２本指「two」はあとから追加しましょう。

  1. アニメキャストの表示位置を確認するために選択枠（上図Ｑ）をドラッグして表示するとよい位置に移動させます。
  2. 選択するときに下に選択枠の左上の座標とサイズが下に表示されます。
  3. 数値を確認したら、枠線（上図Ｑ）をドラッグし、画面の外（下図Ｓ）に移動させ見えなくします。

アニメーションを無限ループにする（重要）

CSV命令で配置したアニメが動くには、9VAeアニメーションが動いている必要があります。そのために、往復命令を無限ループにします。

  1. 往復ボタン（上図Ｔ）を選択
  2. 選択枠の中央の「＋」をクリック。メニューから「－1回」を何回かクリックし、回数０（無限ループ）にする

テスト実行

  1. girl.py を上のプログラムに書き換えて、「File>Save」で上書き保存する
  2. 9VAeきゅうべえのプレイボタンをクリック。girl.csv に書かれた命令が実行され、最後に入力待ちになる。
  3. girl.py の「Run ＞ Run Module」をクリック
  4. キーボードの「1」「Enter」を押す。１本指がでてくれば成功です。
  5. キーボードの「3」「Enter」で終了します。

２本指のアニメキャスト "two"の読み込み

  • １本指を参考に、２本指を作ってみてください。
  • アニメキャストの中身をひらいて、名前を"two"にしましょう。（下図）
  • 2本指には線がついていないので、線属性で線ありにしましょう。（下図Ｕ）
  • ２本指には色がついていませんが、CSV命令で色をつけられます。
  • ２本指は左手なので、CSV命令で左右反転させて配置します。

指と手の間にすきまがありますが、修正できます。

  1. 指を選んで中心の「＋」（上図Ｖ）をクリック。メニューから「グループ解除」をできなくなるまで何回もクリックします。
  2. 中心の「＋」（上図Ｖ）をクリック。メニューから「いっしょに塗る」をクリック。もう一度「＋」をクリックし「グループ解除」をクリック。これで指の図形がバラバラになります。
  3. 重ね順ボタン（上図Ｘ）で手の平を一番下にさげ、点選択ボタン（上図Ｗ）で形を変形し、不要な点を削除ボタン（上図Ｙ）で削除し形を整えましょう。

9VAe アニメの保存

作成した 9VAeアニメを、Pythonプログラムと同じフォルダ（デスクトップ）に保存しましょう。

  1. 「ファイルメニュー＞名前をつけて保存」をクリック
  2. Desktop を選んで「girl.eva」という名前で保存。同時に「girl.csv」もデスクトップに保存されます。

Python プログラムから、9VAe のビュア「9view」を起動するようにしましょう。次のようにすれば、Pythonからビュア 9view を起動できます。

import subprocess
qview = "/home/pi/Downloads/9va/9view"
cmd = (qview)
proc = subprocess.Popen(cmd)

import subprocess でプロセスを起動する機能を追加します。 起動したプロセスをプログラムで終了させるには proc.kill() とします。

完成したプログラム

  • 最終的に次のようになりました。 drwAの後ろの数値は、調整してください。

import subprocess
qview = "/home/pi/Downloads/9va/9view" #プレーヤ
eva = "girl.eva"     # 開くアニメファイル
cmd = (qview, eva)
proc = subprocess.Popen(cmd)
 
file =  "girl.csv"    # CSV命令ファイル  
while True:
    kk= input("1 , 2  or 3:")
    if  kk== '1'
        with open(file, mode='a') as f:
            f.write("setA,\"one\"\n")
            f.write("drwA,183,170.5\n")
            f.write("wait,10\n")
    if  kk== '2'
        with open(file, mode='a') as f:
            f.write("setA,\"two\"\n")
            f.write("drwA,180,160\n")
            f.write("wait,10\n")
    if  kk== '3'
        proc.kill()       
        break;

実行してみる

  1. 上のプログラムを、「girl.py」 という名前でデスクトップに保存
  2. １本指 one、 ２本指 two がはいった9VAeアニメ「girl.eva」をデスクトップに保存
  3. 「girl.py」 をIDLEのエディタで作成した場合、「Run メニュー＞Run Module」で実行できます。
  4. 他のテキストエディタで「girl.py」 を作成した場合は、「Raspiボタン＞プログラミング＞Python 3 (IDLE)」をクリック。Python3 の Shell が起動します。
  5. 「Shell＞File＞Open...」をクリック。「Desktop」の「girl.py」を選んで「Open開く」
  6. 「Run メニュー＞Run Module」

動作確認

  • 「1」「Enter」と押すと１本指
  • 「2」「Enter」と押すと２本指

  • 「3」「Enter」と押すと終了

  • girl.csv に追記されたデータを一度全部削除して実行してみるとよいでしょう。指の形を整えて、次のようになりました。

  • このGIFアニメーションも、9VAeで作成しました。
  • CSV命令リストの中から、１本指、２本指を書く部分だけを残して他を削除しましました。
  • wait の時間を２秒に設定し、「ファイルメニュー＞アニメGIF出力」で４秒間のアニメGIFを作成しました。

補足

新しい9VAeアニメに CSV命令をつけるには

  1. 先に、拡張子が「.csv」のテキストファイルを作成してください。空のファイルでもかまいません。
  2. 9VAeの「ツールメニュー＞差替えリスト」をクリック。作成したCSVファイルを選んで入力。

CSVファイルは最初のページに入れておくのがよいです。また、CSV命令で書き込まれたアニメが動くには、9VAeアニメが動いている必要があります。そのため、「9VAeツールメニュー」から「往復」「繰り返し」「一時停止」のような命令をいれて、アニメーションが終わらないようにしてください。

Python と 9VAe きゅうべえを組み合わせて使う利点

Pythonを 9VAeと組み合わせる利点は、9VAeのグラフィックスエディタの機能がフルにつかえる点です。今回の例では、１本指と２本指のSVGフリーデータを、9VAeで修正して使っています。

ゲームプログラムでは、プログラミングとリソース作成を組み合わせて行います。9VAeがベクトルグラフィックスのリソースエディタになります。

Pythonで座標を計算すれば、雪を降らせたり、いろんなイフェクトが作れます。 Python ＋ 9VAe きゅうべえがアニメーション制作環境になります。

さらに勉強をすすめたいなら

画像処理

Webサーバー、処理の自動化（実際に運用中）

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

DXライブラリをつかって、アンドロイド版 9VAeきゅうべえをつくる

開発 android chrome

かねてから、アニメーションソフト 9VAeきゅうべえのアンドロイド版の作り方を検討していた。最初は、Xamarin でできるかと思ったが難しいことが判明。その後、DXライブラリを発見。いろんな問題があって解決に半年かかったのでヒントとなった情報をまとめる。iPhone/iPad版9VAeの開発記事はこちら

 

 

完成した9VAeダウンロード 

f:id:dnjiro:20220131141301g:plain



Xamarin が使えなかった理由

Xamrin はC#で Androidアプリが開発できる環境。9VAeきゅうべえは、本体がC言語で記述されており、Xamrin からCを呼び出せる。しかし、9VAeきゅうべえはエディタで、あちこちで描画関数を呼び出さないといけない。Xamrinは、Win32に対応した関数をもっていて、それはよいのだが、C言語から描画関数（C#）が呼び出せない。

 

DXライブラリとは

つぎに、DXライブラリを見つけた。これは、Cから呼び出せる描画ライブラリ。アンドロイド版があり、Visual Studio でアンドロイドアプリを作成できる。ゲーム用につくられていて、ハードウェア描画をサポートしており高速。すばらしい。ところが、次のような問題があった。

 

  • メニューシステムがない。メニューバーを自分で作らないといけない。メニューバーの下に、9VAeきゅうべえの描画エリアがくるので、メニューバーのメニューを9VAeきゅうべえが表示することにした。今まではOSのメニューを利用していた。
  • ポリゴン塗りつぶしができない。これは痛い。DXライブラリから呼び出す openGL ES は、3次元の三角形の塗りつぶししかできないようだ。9VAeのポリゴンは形が自由自在なので、ねじれたり、穴があいたり、ありとあらゆる形ができないといけない。それができない。ということで、その部分は自力描画する。せっかくのハードウェア描画が使えないがやむを得ない。
  • 文字入力ダイアログがない。これもつらいと思ったら、JNI という仕組みを使って、Javaプログラムを呼び出せばとよいと、DXライブラリのドキュメントにあった。下の記事をみてやってみると、簡単に文字入力できた。これを修正して使う。

    ＤＸライブラリ Android版を使用した Androidアプリで Java のコードを実行する

  • ポリゴン塗りつぶしを自力描画すると、DXライブラリと自力描画が混在して複雑極まりない。

 

結論として、DXライブラリはよくできている。いろんな問題点は回避できる方法があるようだ。というわけで、9VAeきゅうべえアンドロイド版は、DXライブラリを使うことにした。

 

Android Studio インストール

f:id:dnjiro:20220130160604g:plain



  1. ダウンロードしたAndroidStudio を起動。「Next」
  2. 「Standard」にチェック。「Next」
  3. 背景の色を選ぶ。「Next」２回
  4. ライセンスを３項目選び、それぞれ「Accept」。「Finish」

 

これでインストールが行われます。まず、DxLibのサンプルを読み込んでみましょう。

  1. AndroidStudioの起動画面で、「More Actions」をクリック（上図14）。メニューから「Import Project(Gradle Eclipse ADT etc)」
  2. ダウンロードしたDxLibを展開、中にある「RunSampleFolder_AndroidStudio」を選ぶ。
  3. プロジェクトを信用するか聞かれるので「TrustProject(信用する)」（上図15）をクリックすると読み込みが始まります。

アンドロイド実機をUSBでつなぐ

DxLibサンプルプロジェクトを実行 (Android Studio)

f:id:dnjiro:20220130181940g:plain

  1. 実機をUSBケーブルで接続。正しく接続されると（上図1）No Devices の表示が実機の機種名に変わります（上図2）実機のリセット、ケーブルの抜き差しを試してみてください。
  2. DxLibのサンプルプログラムを表示するには、左側「app」「cpp」「native-lib.cpp」をクリックすると、右側にソースコードが表示されます。ここにDXLibの関数を書いて動作確認するとよいでしょう。
  3. アプリを作成してみます。「Build」メニュー＞「Rebuild Project」でアプリを作り直します（上図６）
  4. 下のBuild タブ（上図７）をクリックすると作成結果が表示されます。この例ではエラー（Javaのバージョンが違っている）と表示されました。
  5. Javaのバージョンは、「File」メニュー＞「Project Structure」で設定します。＜AndroidStudioのバージョンによって動作が異なります＞.gradle .idle .cxx .tmp フォルダを削除して、もう一度、プロジェクト読み込みからやりなおすと、ヒントが得られるかもしれません。「Unsupported class file major ver.61」エラーが出た場合、Javaのバージョン変更する必要があるみたいです。
  6. 左側「SDK Location」＞「Gradle Setting」
  7. 「Gradle JDK」を「11 Version」に変更します。「OK」をクリック
  8. 「Build」メニュー＞「Make Project」を実行。今度は「BUILD SUCCESSFUL(成功)」となりました。
  9. 右上のデバッグボタン（上図15）を実行
  10. 実機の上に四角形が描画されたら成功です。
  11. 下にはデバッグ用のタブが表示されます。ソースコードにブレークポイントを設定し、そこからステップ実行させたり、変数の中をみたりできます。

AndroidStudio の Tips

  • アプリのバージョンは、左側「Gradle Scripts」の上から２つめの「buil.gradle」 に書く
  • 新しいCプログラムファイルを追加するとき、左側「app」 「cpp」「CmakeLists.txt」に書く
  • ストアに登録する .aabファイルは、「build」メニュー「Generate Signed Bundle / APK...」で作成する

Visual Studio インストール

ビルドエラーが出たとき（VisualStudio）

  • 下のウィンドウで「出力」タブをひらいてエラーコードを確認する

機能の追加 (Visual Studio)

  • Visual Studio で「Unable to resolve project target 'android-23'」と表示された場合、アンドロイドのバージョンXX用ライブラリがはいっていない。
  • Visual Studio ＞ ツール ＞「ツールと機能を取得」
  • 「個別のコンポーネント」から、android-23 の取得を試みる
  • android-23がなかった場合、プロジェクトのターゲットレベルをインストールされているレベルに変更する。

 

 

 Java アラートの参考文献

 

JNIについて

 

DXライブラリを使った XOR 描画

  • ラバーバンドを実現するために、XOR演算の描画を使いたかったが、それらしい描画がなかったので、DXライブラリサイトで質問するとすぐ答えが返ってきた。

    ＤＸライブラリ質問掲示板

  • DX_BLENDMODE_INVDESTCOLOR 演算を、白(255,255,255)で使うと２回描画すると元に戻るらしい。なるほど。具体的なコードは以下 。

int white=GetColor(255,255,255);

SetBlendMode( DX_BLENDMODE_INVDESTCOLOR ,255); //反転描画

DrawBox( x1,y1,x2,y2, white, TRUE); //TRUEだと中を塗る FALSEだと枠線

SetBlendMode( DX_BLENDMODE_NOBLEND ,0); //描画を元にもどす

 

ファイル処理

 

ネットからSVGをダウンロードする方法

UIViewのスレッドでダウンロードするとエラーが発生するみたいだ。別スレッドにすると落ちなくなった。

URLからファイル名を取り出す方法。

 

その他、いろいろ

縦横回転はどうするの？

Javaがheapエラーするときは、環境変数_JAVA_OPTIONSを設定

 

アプリ画面のキャプチャー方法

VisualStudioから adbコマンドプロンプトを起動し、コマンドで取得するのが簡単。コマンドプロンプトから adb コマンドを使いたい場合はこちら

SDK Platform Tools release notes  |  Android Developers

Windowsでadbコマンドを使う方法! Android SDKを入れてパソコンのコマンドプロンプトから操作しよう

  1. Visual Studio > ツール ＞ Android ＞Android Adb コマンドプロンプト または 上の方法でコマンドプロンプトから adb コマンドを使う
  2. adb コマンドプロンプトに以下を入力すれば、パソコンのコマンドプロンプトを起動したフォルダにデータを取得できる。pull で取得。３つめはデータ削除 
    adb shell screencap -p /sdcard/screen.png
adb pull /sdcard/screen.png
adb shell rm /sdcard/screen.png

画面操作を動画で記録

  • screenrecord で動画キャプチャできる 
    adb shell screenrecord /sdcard/screen.mp4
    （Ctrl+C で停止）
    adb pull /sdcard/screen.mp4

 

 

 

アプリ(9VAe)で保存したデータの取得

  1. adb コマンドプロンプトに以下を入力 
    adb pull /sdcard/9VAe/xxx.xxx

 

 WebViewのリンクボタンで落ちる問題の修正（Android8以降）

Android8 から、WebViewで表示した asset のHTMLドキュメントで外部リンクは落ちないのに、asset内部の分岐が落ちるようになった。Adroid6以前では、WebViewの親が自動的に設定されていたのが、どうも、Android8 のWebViewから明示的に設定しないといけないようになったみたいだ。WebViewを開く java のコードに以下の setWebViewClient を追加すると落ちなくなった。

webView.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
return false;
}
});
webView.loadUrl("file:///android_asset/help/jp/index.html");

file:///android_asset/は、assetを示すURL。そこに help jp というフォルダをおいて、index.html ファイルを入れている。

 

 パーミッション制御

Android6からプログラム実行中にユーザーが権限を追加できるようになった。その対応

ファイル書き込み権限を与えるために以下の対応を入れた。

  1. プロジェクトのパッケージのプロパティ＞ターゲット APIを android-23 にする
  2. 以下の java コードで権限取得（Android6以上で権限をリクエスト） 
    private static final int REQUEST_WRITE_STORAGE = 112;

    if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.M) {
    	requestPermissions(
    	  new String[]{Manifest.permission.WRITE_EXTERNAL_STORAGE},
    	  REQUEST_WRITE_STORAGE);
    }

 

 多国語対応

1. DXライブラリの、以下の関数を使って、strings.xml の文字列を取得できる

// res/values/strings.xml の string リソースを取得する
// ValueName：string 情報名
// StringBuffer：ValueName が示す文字列を格納するバッファの先頭アドレス
// StringBufferBytes：StringBuffer のサイズ( 単位：バイト )
// 戻り値　　-1：指定の string 情報は無かった　　-1以外：StringBuffer に必要なバッファのサイズ
extern int GetAndroidResource_Strings_String( const char *ValueName, char *StringBuffer, int StringBufferBytes ) ;

例えば strings.xml に

    <string name="test_str">あいうえお</string>

と記述してあった場合

char StringBuffer[ 256 ] ;
GetAndroidResource_Strings_String( "test_str", StringBuffer, sizeof( StringBuffer ) ) ;

を実行することで StringBuffer に『あいうえお』が代入される

 

2. 英語用文字列と日本語用文字列を、言語別のフォルダ res/values/strings.xml と  res/values-ja/strings.xml に入れておけば、設定言語に従って違う文字列が読み出されるので、翻訳ができる。

 

対応バージョンの書き方

 

Android Go

  • Appストアでテストしてもらうと、Android Go (8.1)で起動できない。別のAPKを用意せよ。といわれた。RAMが１GB以下の低価格バージョンらしい。

1GBメモリでもサクサク動く軽量版Android OS「Android Go」が登場 - GIGAZINE

  • 「端末の除外」という仕組みで対象機種から除外できるようだ。

 

Appストアへの登録

  • apkに署名するために、keytool を使うが、これは java の中にはいっている

    Windows10でJavaのkeytoolを使う - Logicky BLOG

  • keytool をつかって、keystore を作成し、それを、Visual Studio に登録するみたいだ。keystore には、住所、名前などをいれる。App ストアに登録する名前と合わせておく。ただ、Visual Studio への keytool の登録がわからなかった。Xamalin にするとできるようになるのかも。直接コマンドで署名する方法で行った。
  • 最初、jarsigner を使って署名する方法ではうまくいかなかった。以下の、apksigner をつかうと署名できた。apksigner は、\android-sdk にはいっている。

    アプリの署名  |  Android Developers

 

 

  • コマンドプロンプトで署名した例。コマンドのフルパスは環境によって違います。 
    １．キーストアxxxxx.jks の作成 
    "C:\Program Files\Java\jdk1.8.0_192\bin\keytool" -genkey -v -keystore xxxxx.jks -keyalg RSA -keysize 2048 -validity 10000 -alias xxxxx
    パスワード、名前、所属名、組織名、住所、国名（JP）、はい

    ２．キーストアxxxxx.jks で、yyy-unsigned.apk に署名をつけて yyy.apk を作成する
    "C:\Program Files (x86)\Android\android-sdk\build-tools\25.0.3\apksigner" sign --ks xxxxx.jks --out yyy.apk yyy-unsigned.apk

    ３．署名できているか確認
    "C:\Program Files\Java\jdk1.8.0_192\bin\keytool" -list -printcert -jarfile yyy.apk
  • 作成した署名つき apk でインストールするには、adb コマンドプロンプトから 
    adb install yyy.apk

Google Playにアプリ署名鍵をあずける

 

64bit対応

  • 2019年8月から64bit 版がないとアップデートできなくなる

Ensure that your app supports 64-bit devices  |  Android Developers

  • 32bit版APKと64bit版APKを同時にリリースしてもよい。そのとき、android:versionCode は、異なる番号をつける。64bit版のほうを大きな数字にする。また、APIレベルを必ず異なるようにする。例えば 32bit版は、21－28、64bit版は、26－28のように違うものにする。

 

アイコンデザイン

 

Android10（API29）対応

  • 2020年８月から、Android10（API29）に対応しないとアプリストアにアップロードできなくなった。
  • それには、Androidマニフェストで、targetSdkVersionを29にするとよい（32bitも64bitも同じ）それで9VAeも以下のように設定していたが・・・

<uses-sdk android:minSdkVersion="21" android:targetSdkVersion="29"/> 

  • ところが、targetSdkVersion="29"にすると、セキュリティが厳しくなってファイルの処理がかわり、Android 10 では、DXライブラリで取得したフォルダに読み書きできなくなっていた。げげえ！Android 9 まで保存できていたのに。
  • とりあえずこれを回避するためには、<application の中に以下の宣言を追加するとよいらしい。これで互換性モードになり、Android10, 11 でも保存ができた。

 <application android:requestLegacyExternalStorage="true" 

  •  さて、これをマニフェストに入れるには、ビルドのターゲットAPIを、android-29 にしないと、requestLegacyExternalStorage が未定義エラーになった。
  • ところが、Visual Studio 2017 には、android-29 SDKがなかった。
  • Visual Studio 2019 にも、android-29 SDKがなかった。
  • やむを得ず、Android Studio で、android-29 を取得し、必要なファイルを自力でコピーした。
  • android-29 にすると、エラーが発生したので、プロジェクトのプロパティから、C/C++＞コマンドライン をみて、-I オプション（インクルードファイルのパス）をチェック。そのフォルダがなければ、Android Studio から29バージョンをコピーしたら、どうにかビルドできた。
  • 今、ＤＸライブラリは、Android Studio でアプリを作成できるようになっている。ところが、9VAeは Visual Studio 2017 で作成したため、同じ署名が Android Studio でもつけられるのかどうかが不明。

 

実機デバッグができなくなったとき

  • adbバージョンがAndroid実機とあわなければ、配置ができなくなる。Android 5/6/8 は Ver.1.0.39 でないと配置できない。
  • 新しく環境構築すると、adb が Ver.1.0.40 になるので、古いAndroid実機でデバッグできなくなるみたいだ。
  • プロジェクトから、ターゲットデバイスや起動するAPKファイルの設定がなくなる、間違えている場合がある。プロジェクトプロパティ＞デバッグ から正しく設定する
  • VisualStudio2017の場合、ターゲットAPIにかかわりなく、android-sdk19 がないとデバッグできなくなるようだ

 

●Android Studio への移行

 

Chromebook対応

 

Package作成でエラーがでたときの対処

android - How to fix issue Caused by: java.nio.file.NoSuchFileException: app/build/intermediates/external_libs_dex/release/out while signing apk? - Stack Overflow

プロジェクトフォルダで　rm -rf .gradle を実行して、.gradleフォルダを削除するとエラーが出なくなった。ルートにある「.gradle」「.idle」フォルダを削除するとプロジェクトが再構築される。

 

 

M1 Macの AndroidStudio で error=86, Bad CPU type がでた場合

softwareupdate --install-rosetta

 

Wacom ペンタブレットへの対応

 

API30対応

 

MP4動画作成

Mobile-FFmpeg

dependencies {
    implementation 'com.arthenica:ffmpeg-kit-full:4.5.LTS'
}

 

Jcodec、MediaCodecとの比較

サンプル（VideoEditor）の調査

FFmpegで動画をつくるときのコマンド

-r 30 -i "読み出し可能なフォルダ/%04d.jpg" -b 6000k -vcodec mpeg4 -pix_fmt yuv420p "書き込み可能なフォルダ/out.mp4"

M4a

 

HTTPからのダウンロード許可

<application 
   ...
   android:usescleartexttraffic="true"
  >
 </application>

Windows11 Android

  • Android™️ 用 Windows サブシステム
  • Windows11で使うには、Amazon appstore をインストールする。メモリ８GB必要
  • API31対応、64bitアプリがWindows 11のストアアプリから、AmazonAppストア経由で実行できる。Amazonストアに登録するだけで、Windows11で公開するかどうか設定するタグが表示される。複数のAPKを登録したとき、１つしか有効にできない点に注意。古いバージョンを有効にすると新しいバージョンを有効にできない。
  • Windowsとのデータのやりとりは、ACTION_VIEW、ACTION_EDIT、ACTION_SEND、および ACTION_SEND_MULTIPLE がある。
  • Windowsの電卓を起動するサンプルプログラム
Intent intent = new Intent("com.microsoft.windows.LAUNCH_URI");
intent.putExtra("com.microsoft.windows.EXTRA_URI", "ms-calculator:");
 
try {
    startActivity(intent);
} catch (ActivityNotFoundException e) {
    // Not running in Windows Subsystem for Android™️ (or running on an older build that did not contain this feature).
}

API 31 対応

<application 
   ...
   <activity 
     android:exported="true"
  >
</application>

しゃべらせる

<queries>
        <intent>
            <action android:name="android.intent.action.TTS_SERVICE"></action>
        </intent>
</queries>  

 

ファイルピッカー：SAF(StorageAccessFramework）

 

USIスタイラスペン

アカウント確認

2023年から、Googleによる開発者のアカウント確認が必要になりました。Google Play Console から以下の項目の提出が必要です

  • 氏名と住所
  • D-U-N-S ナンバー（組織のみ）
  • Google Play のユーザーが連絡する際に使用するデベロッパーの連絡先電話番号（組織のみ）
  • Google Play のユーザーが連絡する際に使用するデベロッパーのメールアドレス
  • Google が連絡する際に使用する連絡先電話番号とメールアドレス
  • デベロッパー本人であることを確認するための正式な書類
  • 組織を確認するための正式な書類（組織のみ）

個人用アカウント、日本、で確認期限を予約しました。

 

デバッガーの動作がおかしくなった

  • AndroidStudioのデバッガー動作がおかしくなったとき、File > Project Structure からSuggestions を実行するとなおりました。
  • ただし、Suggestionsのなかの、WebKit, ffmpeg のアップデートを実施すると、ビルドできなくなったため、適用していません

Android14 セキュリティ問題

  • Android14 になると、自分で保存したファイル、ファイルアプリで開いたファイルしか、DXLibフォルダで見えなくなった。
  • そのため、ファイルアプリで外部から転送した9VAeアニメを直接みることができない。9VAe開くで、「ファイルから」で読み込んだ単体SVGは上書きもできるが、画像や音の外部ファイルが見えない。
  • そのため、読み込んだSVGを、9VAe内部のフォルダに保存し、画像や音を正しいものに差し替えると正常に戻るが、アプリをインストールしなおすと、自分以外が作成したファイルとみなされ、見えなくなってしまう。
  • 外部ファイルの転送をJavaで行うと改善されるかも。今はCのパスで読み出しており、それがセキュリティ強化でみえなくなっているようす

フォルダのアクセス権限取得

public void openDirectory(Uri uriToLoad) {
    // Choose a directory using the system's file picker.
    Intent intent = new Intent(Intent.ACTION_OPEN_DOCUMENT_TREE);

    // Optionally, specify a URI for the directory that should be opened in
    // the system file picker when it loads.
    intent.putExtra(DocumentsContract.EXTRA_INITIAL_URI, uriToLoad);

    startActivityForResult(intent, your-request-code);
}
  • 取得した権限を次の起動時にリセットしないようにするためのコード
final int takeFlags = resultData.getFlags()
      & (Intent.FLAG_GRANT_READ_URI_PERMISSION
      | Intent.FLAG_GRANT_WRITE_URI_PERMISSION);
// Check for the freshest data.
getContentResolver().takePersistableUriPermission(uri, takeFlags);

デバッガーが落ちる (LayoutInspector の問題)

  • デバッガーが落ちるようになった。右下の「LayoutInspector」のデバイスが実機に設定されていると、落ちる。実機の状態を取得するときに失敗しているみたい。No Device にしておくと落ちなくなった。ケーブル接続で自動的にONになるので毎回OFFにする。

透過PNGの背景が真っ黒になる（透過PNGでなくなる）

  • Googleドライブに透過PNGをいれると、透過情報が消えて、背景が真っ黒になることがあるようだ。ショック。最近の写真はサイズが大きいので、サイズを小さくする処理がはたらくことがあるようだ。そのときに透過情報が失われるみたい。

動画出力するときは、再起動してから

  • 1080p 、１０分以上の動画出力するときは、再起動してから、いったん再生（音声の時間測定）してから、動画出力するとよい。他のアプリと同時に動かしていると、処理が中断され、うまく再開できないことがあるようだ。

 

ハートがズームアップする動画の作り方：無料ソフト9VAeきゅうべえ

アニメの作り方 おすすめ

9VAeきゅうべえアンドロイド版でもPC版、iPad版でもつくれます。作業時間は１０分くらいです。動画編集用素材にもなります。

f:id:dnjiro:20210618180938g:plain

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

 

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

 

SVGイラストのダウンロード

Openclipart (pink heart) からダウンロードします。

 

  1. スマホの場合は、「SVG（Vector）（ここでもよい）」を長押し。メニューから「リンクアドレスをコピー」をタッチ。9VAeきゅうべえのツールメニュー＞「ネットからダウンロード」のあと、http:入力エリアを長押しして「貼り付け（ペースト）」。これでダウンロードできなかった場合は、いったんダウンロードし、「ファイル＞開く」からダウンロードしたファイルを開いてください（Androidの場合）
  2. パソコンの場合は「 SVG（Vector）（ここでもよい）」を右ボタンでクリック。「対象をファイルに保存」または「リンク先のファイルをダウンロード」。9VAeきゅうべえメニューから「ファイル＞開く」をクリック。ダウンロードしたファイルを選ぶ。SVGが読めない場合はバージョンが古いので最新版にしましょう。
これで、9VAeにSVGイラストが読み込まれます。
左下の「虫眼鏡」ボタン（下図A）をクリックすると全体が見えます。 

f:id:dnjiro:20210618134040g:plain

 

アニメキャストの中身をコピー（ツールメニューから読み込んだ場合）

ツールメニューからよみこんだイラストはアニメキャストという部品になります。アニメキャストが便利な場合もありますが、動きをつけたい場合は、アニメキャストの中身を開きます。
 

  1. 選択枠の中心の「＋」（上図B）をクリック。メニューの上から２番目「アニメ（...）を修正」をクリック。アニメキャストの中が開きます。

  2. ハートを選択し（上図C）、記憶ツールにコピー（上図D）します。記憶ツールの中にハートが入ります。

  3. 「ファイルメニュー＞新規作成」（上図E）。貼り付けボタン（上図F）には「ステージにもどす」と「複製する」があります。「複製する」を選ぶとよいでしょう。

  4. これに動きをつけていきましょう。

ハートを中心に移動し、色変更

  1. パレットの下（下図G）をタッチするとパレットが消えます。スマホ版ではよく使う操作です。右下の「もどす」で元に戻ります。

    f:id:dnjiro:20210618141158g:plain

  2. ハートを選択し、中心（上図H）をドラッグして、ハートを中心に移動させます。
  3. 画面右下の「もどす」（上図I）でパレットを表示。
  4. 塗り色ボタン（上図J）で紫色にしましょう。ハートを虹色にします。
  5. 線の種類（上図K）で線を（なし）にしましょう。縁の線がないハートになります。

ハートを同じ場所に複製し、赤、だいだい色にする

  1. 左下のShift（下図L）をタッチしてから、ハートの選択枠中心「＋」（下図M）をタッチし「複製する」を実行すれば、同じ位置に複製されます。キーボードのShiftキーを押しながら複製、または、Ctl+C Ctrl+V でもかまいません。

    f:id:dnjiro:20210618182709g:plain

  2. 塗り色ボタン（上図N）で赤にしましょう。
  3. 左下の縮小ボタン「ー」（上図O）で画面を縮小します。
  4. 選択枠の角の■（上図P）をドラッグして赤いハートを縮小します。
  5. 同様にしてだいだい色のハートを作りましょう（上図） 

続きのページを作成し、黄、緑、青のハートを作成

  1. ページ右の「＋」（下図U）をタッチ。「続きのページを作る」をタッチ。これで２ページができます。

    f:id:dnjiro:20210618154810g:plain

  2. ハートを３つ選び（上図V）、コピーボタン（上図W）でコピーしておきます。
  3. 左下の縮小ボタン「ー」（上図X）を何回か押して縮小。
  4. 選択枠の角の■（上図Y）をドラッグしてハート３つを拡大。ページサイズより大きくしてください。
  5. 右側の登録ボタン「＋」（上図Z）でハートを登録。
  6. 登録したハート（上図a）をタッチ。メニューから「固定」。これで拡大したハートが選択されなくなり、新しいハートの色変更のじゃまになりません。
  7. 貼り付けボタン（上図b）をタッチ。メニューから「複製する」。これで記憶したハート３つが画面に複製されます。（ステージにもどすだと複製できません）
  8. 左下の虫眼鏡ボタン（上図c）をタッチし、元の倍率に戻します。
  9. 複製したハートを順番に選び、塗り色ボタン（上図d）で、黄色、緑色、青色にしましょう。

 ハートを４つ選んで前のページにコピー

２ページにハートを３つ追加しました。これを１ページにコピーしたいのですが、だいだい色もいっしょに選んでコピーすれば、だいだい色と同じ縮尺で縮小されます。次のようにします。

f:id:dnjiro:20210618162516g:plain

  1. 右側のリセットボタン「◯」（上図e）をタッチ。これで「固定」設定が解除され、だいだい色のハートが選択できるようになります。
  2. ２ページのだいだい、黄、緑、青の４うのハートをドラッグして選びます（上図f）。ドラッグして選択するときに、図形の縁が反転するので、選ぶときの判断に利用してください。
  3. 前のページにコピーするボタン（上図g）をタッチ。だいだい色は１ページに存在します。その場合１ページにない、黄、緑、青のハートが、だいだい色の縮尺にあわせて縮小されてコピーされます。もし、黄、緑、青のハートだけが選ばれていた場合は、同じ大きさでコピーされます。
  4. 続きのページをつくる「＋」ボタンが見えるように、パレットの下（上図h）をタッチしてパレットを消しました。

 続きのページを作成してハートを追加

上と同じことを繰り返して３ページを作成します。

f:id:dnjiro:20210618171505g:plain

  1. ページ右の「＋」（上図i）をタッチ。「続きのページを作る」をタッチ。これで３ページができます。
  2. 左下の「ー」ボタン（上図j）で縮小。
  3. 外側のハートを２つ選んで削除（上図k、l）。
  4. 全部選択して大きく拡大（上図m）。
  5. 虫眼鏡ボタン（上図o）で元の倍率にして、貼り付けボタン（上図p）から「複製する」でハート３つを追加。
  6. ハート４つを選択し（上図q）、前のページにコピー（上図r）
  7. これで１ページと同じハートが３ページに作成され、繰り返すとつながるように動きます。

 繰り返し命令を追加

  1. ツールメニュー（下図s）から「繰り返しボタン」を入力します。この命令をいれると２ページと３ページの間を繰り返します。

    f:id:dnjiro:20210618174054g:plain

  2. 前のページにコピー（上図t）で、「繰り返し」命令を１ページにコピーします。これで１ページと３ページの間を繰り返します。

  3. プレイボタンf:id:dnjiro:20181029083754g:plainで動きをみてみましょう。f:id:dnjiro:20210618174235g:plain

 アニメGIF出力

  • ファイルメニュー＞「アニメGIF出力」で、好きなサイズのアニメGIFが作成できます。画像サイズが大きい場合や、秒間のコマ数が多いと作成に時間がかかります。
  • このアニメには繰り返しボタンがはいっており、無限ループなのでアニメGIFの「出力秒数」を設定する必要があります。
  • ２秒で繰り返しているので、２でもかまいません。動画素材にする場合は必要な長さを指定するとよいでしょう。
  • 完成したファイルは、スマホの場合、端末内の「9VAe」フォルダの中に出力されます。
  • Androidの場合は、フォトアプリで、「端末内の写真＞9VAe」で見ることができます。

 

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

アニメGIFは簡単にMP4動画に変換できます。（Mac / iPhone / iPad版の場合は、「ファイルメニュー＞動画出力」で直接MP4動画が作れます。）動画にする場合、アニメGIFの高さは「７２０」で作成するとよいでしょう。

  1. ezgif.com ( Online GIF to MP4 Video converter ) を開く
  2. 「ファイルを選択」をクリック ＞ 作成したファイルを選ぶ。（Android版の場合、「ファイル」をクリックし、出力されたアニメGIFを選ぶ）
  3. 「Upload!」ボタンをクリック
  4. 「Convert GIF to MP4!」ボタンをクリック
  5. 「Save」ボタン（フロッピーディスクアイコン）をクリック
  • これで、MP4ファイルが保存できます。

 

9VAeで動画素材を自作しよう

  • 9VAeきゅうべえを使えば、SVGイラストからいろんな動画素材を作成できます。SVGの静止画のフリー素材イラストがネット上にたくさんあります。いろんな動画素材を作ってみてください。

 

  • 9VAeは各ソフトにあわせて、いろんなフォーマットでクリップ動画を出力できます。
アプリ クリップ形式 作り方
PowerPoint
LibreOffice
Keynote		 アニメGIF 背景を透明にして出力（PowerPointの例）
iMovie
PowerDirector		 グリーンバック動画 先頭にグリーンバック背景を入れる。（iMovieの例、PowerDirectorの例）
AviUtl 連番PNG 背景を透明にして出力（AviUtlの例）

 

  • 9VAeは下のような特長をもった商用利用可能な無料アプリです。
     
    9VAeきゅうべえ
    他のアプリ
    方式
    図形のすべての点の対応関係をもったベクトル方式
    タイムラインに画像を並べるビットマップ方式
    修正
    形を後から自由に修正できる
    画像を描き直す
    補間
    変形した形はなめらかに変化する
    形の補間はできない
    データ量
    中間がないので小さい
    何枚も画像が必要で重い
    階層化
    9VAeの中に３０階層まで
    9VAeがはいる。全て編集できる
    できても１階層
    中身は同時に編集できない

 

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

 

 

動画をYoutubeにアップしてシェアする方法：ひとコマ解説

アニメの作り方 動画 解説動画

スマホやパソコンから動画をYoutubeにアップして、シェアする方法を説明します。

この解説動画（ひとコマアニメ）の作り方も説明します。

 

スマホの動画をYoutubeにアップする方法

f:id:dnjiro:20210605232344g:plain

  1.  Youtube にログイン
  2. 下の「＋」をタッチ
  3. アップする動画を選ぶ。ここで動画がみつからなった場合は「管理」ボタン＞「他のメディアを選択」＞アクセスを許可しますか？が表示されたら「写真と動画を選択」でアップロードしたい動画を選んで「許可」してください
  4. 「次へ」ボタン
  5. タイトル・説明を入れる
  6. ライブラリから自分の動画を開く
  7. タイトルと説明を入れる
  8. 公開設定をタッチ
  9. 一般公開か限定公開か選ぶ
  10. 公開設定で戻る
  11. 「次へ」
  12. 子供向け動画か選ぶ
  13. アップロード
  14. アップロードした動画をタッチ
  15. 共有をタッチ
  16. 動画リンクをコピーして見てもらいたい人におくる

Youtubeの「＋」ボタンから動画が選べない場合

  • アクセス許可が設定されていない可能性があります。(1) 動画が写真（フォトライブラリ）の中にあるか、(2)Youtubeアプリにアクセスが許可されているか確認しましょう。
  • ファイルアプリで動画を選択し、「共有」から「Youtube」にアップロード、ができる場合もあるようです。

 

パソコンの動画をYoutubeにアップする方法

f:id:dnjiro:20210628054000g:plain

  1.  Youtube にログイン
  2. 最初はアカウント登録が必要です。次へ
  3. ビデオカメラボタンで動画をアップロード
  4. 動画を選ぶ
  5. タイトル・説明を入れる
  6. 子供向け動画か選ぶ
  7. 一般公開か限定公開か選ぶ
  8. 保存
  9. 動画リンクをコピーして見てもらいたい人におくる

 

動画にせりふや音楽を入れる方法

 

 

動画に字幕を入れる方法

  • しゃべる声がはいった動画をYutubeにアップすれば、何もしなくても字幕がつきます。プレーヤの下の字幕ボタン（歯車の左CC）を押すと表示されます。
  • 自動変換に間違いがあった場合、パソコン版のYoutube Studio で細かく修正できます。別の言語への翻訳もできます。Youtube Studioのタグ欄に yt:cc=on といれれば最初から字幕がオンになります。
  • 字幕の入れ方（Youtubeの説明）

 

この解説動画の作り方を説明します。無料ソフト9VAeきゅうべえで作りました。

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

 

内容：

 

解説動画の作り方

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

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


www.youtube.com

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

 

画面キャプチャ方法

OS
画面キャプチャ方法
保存先
 Windows
クリップボード
 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に読みこむ

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

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

f:id:dnjiro:20220119154101g:plain

  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

作り方

 

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

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

 

 

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