dnjiro’s 9VAe blog

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

1枚の写真から簡単MP4動画の作り方

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

f:id:dnjiro:20190424145655g:plain

このアニメーションは、9VAeきゅうべえアンドロイド版の写真の上にバージョンアップ項目の説明を書き加えたものですが、この Youtube動画を簡単に作成する方法を説明します。「1コマアニメーション」といい10分で作れます。他のアニメの作り方はこちらをご覧ください

 

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

 

1. 背景ページに写真をいれる

  1. 先頭ページの左側の「<」をクリック>メニューから「背景ページを入れる」
  2. メニューから「ツール>絵・写真を入れる」をクリック。画像を選ぶ(アンドロイド版の場合、ファイルマネージャアプリを使って写真を「9VAe」フォルダに入れておく必要があります。)
  3. 写真の中心の「+」をクリック>メニューから「ステージの大きさにする」
  4. 写真の中心の「+」をクリック>メニューから「ページを画像にあわせる」
これで、画面サイズが写真と同じサイズになります。

f:id:dnjiro:20190424151954p:plain

 

2. 次のページに移動。1コマアニメーションを準備

  1. 2ページをクリックして2ページに移動
  2. ページの右側のf:id:dnjiro:20190424153550p:plainをクリック>「線を書いたあと、もう一度このボタンを押してください」>OK

  • これで1コマアニメーションの作成準備ができました。

 

3. 線と文字を順番に書いて、もう一度「1.鉛筆」

  • 書いた順番に1コマアニメーションになります。
  1. 順番を考えて、線、文字を入力。色は右側のパレットで選ぶ。
  2. 完成したら、f:id:dnjiro:20190424153550p:plainをクリック
  • これで1コマアニメーションが完成。
  • f:id:dnjiro:20190424153550p:plainは何回でもクリックできます。その都度1コマアニメーションが作り直されます。
  • あとから線の形や色がいくらでも修正できます。

f:id:dnjiro:20190424154622p:plain

 

 

4.アニメGIF出力

  • ファイルメニュー>「アニメGIF出力」
  • 出力画面サイズの「高さ」を720に設定。アンドロイド版の場合、幅を空白にすれば同じ比率で「幅」が自動的に設定される。
  • 「OK」ボタンでアニメGIFファイルができる

 

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

  1. ezgif.com ( Online GIF to MP4 Video converter ) を開く
  2. 「ファイルを選択」をクリック > 作成したファイルを選ぶ。(アンドロイドの場合、「ファイル」をクリックし、出力されたアニメGIFを選ぶ)
  3. Upload!」ボタンをクリック
  4. Convert GIF to MP4!」ボタンをクリック
  5. Save」ボタン(フロッピーディスクアイコン)をクリック

 

9VAeと ezgif を使えばショートクリップ動画がすぐ作れる 

  • 9VAeきゅうべえと ezgif を使えば、スマホだけで短い動画が簡単につくれます。ぜひご利用ください。
  • もっと長いアニメや動画を作ることもできます。以下をご覧ください。

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

 

 

9VAeきゅうべえ Mac 64bit版 開発メモ

9VAe Mac版の Mojave 対応版をリリースしたが、Sierra より動作が遅い。32bit版アプリの動作が制限されているようだ。仕方がないので、64bit版への移植を開始。

Objective-C で移植します。Cプログラムの移植には、Swiftよりはるかに使いやすいです。

 

いろいろ試行錯誤を繰り返しなんとか動くようになったので、こちらで公開(9va-mac64)しました。

以下は、macOS 10.15 Catalina ベータ版での画面です。左上のフォルダが従来の9VAeで、32bit アプリなのでストップマークがついて実行できません。2つめのフォルダが今回移植した64bit版9VAeです。ストアアプリでないので最初に警告がでますが、マウス右ボタンメニュー>「開く」をもう一度実行すると、ちゃんと動作しました。

 

f:id:dnjiro:20190828191236p:plain



 

 

 

64bit版移植の方針

  • Objective-C を使う。9VAe iOS版が Objective-C で書かれているので、それを利用して移植する。
  • Objective-C のサンプルコードは、ネットから入手できなくなっている。そこで、古いMacOSのDVDにはいっている Xcode サンプル Sketch を使う。
  • これを最新の Xcode で読み込むと新しいプロジェクトにコンバートしてくれる。
  • イベント処理を残し、iOS版の9VAeのプログラムを追加し、Sketchの処理ルーチンを取り除く。
  • iOSmacOSで関数が異なる部分を修正する。iOSのUI関数が、macOSでは使えない。また、mouseの処理、メニュー処理が iOSにないので追加する。

 

プロジェクトの修正

  • Sketch プロジェクトの名前を QVAe に修正。
  • MacOS Development Target を 10.10 にする
  • Build Settings > Search Paths > Always Search User Paths(Deprecated) をNoにする

プロジェクトターゲットの修正

  • General > App Icons  (1)「Migrate」ボタンクリック(1回しか押してはいけない) (2) 左側のリスト > Resources > Images.xcassets > AppIcon (3) 右側に128x128 png アイコンをドラッグして追加 

リソースの修正

  • 古いアイコン Draw2App.icns を削除
  • Draw2.nib > Localization > (1) English にチェック (2) English,deprecatedのチェックをはずす (3) Builds for を Deployment Target(10.7) 
  • Sketchを検索して9VAeに変更。(1) メニュー (2) infoplist.strings

ターゲットにリソースを追加

  • ターゲット>Copy Bundle Resources > + をクリックしてファイルを追加

ターゲットにFramework 追加

SKTGraphicView を Window全体に一致させる

SKTGraphicView を 9VAeの描画ウィンドウにする。9VAeは Viewを1つしかもっていない。

  • DrawWindow.nib のView の直下に SKTGraphicViewを移動
  • Use Auto Layoutにチェック
  • 上下左右値0の Constraints を追加 

 

SKTGraphicView に Timerを追加

SKTGraphicView に mousemoved イベントを受けるよう設定

  • 何もしないと mousemoved イベントが無視されるため、ホバー処理ができない。以下のコードを、初期化処理にいれる。

CGRect rect = CGRectMake(0.0f, 0.0f, self.frame.size.width, self.frame.size.height);

NSTrackingAreaOptions options = NSTrackingActiveInKeyWindow | NSTrackingMouseMoved | NSTrackingInVisibleRect;

NSTrackingArea *_trackingArea = [[NSTrackingArea alloc] initWithRect:rect options:options owner:self userInfo:nil];

[self addTrackingArea:_trackingArea];

objective c - NSView mouseMoved event sometimes doesn't fire - Stack Overflow

以下の関数を追加

- (void)mouseMoved:(NSEvent *)event

- (void)mouseUp:(NSEvent *)event

- (void)mouseDragged:(NSEvent *)event

- (void)rightMouseDown:(NSEvent *)event

- (void)rightMouseDragged:(NSEvent *)event

- (void)rightMouseUp:(NSEvent *)event

 

drawRect の処理 

  • Windowサイズが変更されたら画面バッファを作り直す
  • SKTGraphicViewのcontextに対応したイメージを作成。描画はそこに行う
  • drawRect では描画したイメージから毎回矩形転送する

 タブの削除

  • WindowController ウィンドウ生成時に以下をいれる

[NSWindow setAllowsAutomaticWindowTabbing: NO];

 

キー

ファイル開く

ファイル保存

メニュー

  • メニューの表示項目変更、メニュー実行は以下のコードを SKTGraphicView.m に入れる。(NSInteger)[item tag] でメニュー項目に設定した tag 値を取得できる。それを9VAeLib にわたしてメニューの状態を得る。

- (BOOL)validateMenuItem:(NSMenuItem *)item {

  int ret = [qvae qVAtestCommand:(int)[item tag]]; //tag はメニュー項目数値

  [item setState:(ret&2 ? NSOnState : NSOffState)]; //チェックの切り替え

  return ret&1 ? NO:YES; //灰色にするかどうかの切り替え

}

  •  メニュー項目の実行は以下のコード。メニューの tag に 9VAeLib の処理番号をいれておく
  • Draw2.nib のメニュー項目>Outlets > Sent Action の(+)をドラッグして、FirstResponderのなかの qvaeCommand とつなぐ。

- (IBAction)qvaeCommand:(NSMenuItem *)menuItem{

  [qvae qVAsendCommand:(int)[menuItem tag]]; //tag はメニュー項目数値

}

文字入力

フォント

アニメGIF出力

QuickTime出力

音再生

多国語対応

9View

バッチ処理

deprecated 対応

 

 いろいろ試行錯誤を繰り返し、メインルーチンを何度も書き直した結果、なんとか動くようになった。こちらで公開(9va-mac64)

 

 

 Mojaveでdmgを作成すると、10.10でマウントできなくなった

  • 新しいOSに対応せねばなるまいと、Mojave + Xcode11で開発していた。
  • 新しいOSで動作しない問題点があったので、新OSへの対応ばかりやっていたら、ダウンロードモジュール dmg が、古いOSでマウントできなくなっているようだ!なんということだ。Appleの下位機種切り捨てにやられた。
  • 古い機種に対応するためには、古いOSで作らないといかん。
  • そうすると、今度は、Mojave でビュアが起動しなくなった。dmg のバージョンによってファイル名がかわるのか、アプリの性質がかわるのか??

9VAeきゅうべえ/PEAS motch! Android版ダウンロード

9VAeきゅうべえは、初心者からセミプロまで使える無料アニメーション作成ソフトです。

Windows / Mac / Linux / RaspberryPi 版を移植しました。

 

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

PEAS motch! Android版 ダウンロード

  • Google Play (PEAS motch! one Android版)

    f:id:dnjiro:20191026001620g:plain


    ★新しいバージョンがインストールできない場合は、一度アプリを削除してからインストールしてください。保存したデータは削除されません。

 

めも

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

 

アンドロイド版 9VAe で作成したサンプル

f:id:dnjiro:20181221220918g:plain

絵を描かなくてもこんなアニメが作れます。作り方はこちら

 

履歴

  • 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: 最初のバージョン

 

実装状況

  • ほぼ実装できました。
  • ときどき上書き保存してください。
  • ARM64版(非公開)で、ポリポリゴンが表示できません。

 

主な修正

  • PEAS motch!デザインの変更(190404
  • 半透明画像(190206
  • PEAS motch!デザインの修正(190203190204
  • アニメGIFの高さ、幅だけ指定(残りは自動設定)ができるようにした(190203)
  • 保存バグ修正(190120)
  • ファイル上書き時の確認、おちたあとバックアップファイルを開く機能を追加(190110)
  • 背景、きおくツールの文字表示を追加。(190105, 190106)
  • ファイル権限を与えたあとのスタンプ画像の再読み込み(190101)
  • アニメGIF設定画面を修正(181229)
  • 一部の機種で、ヘルプ文書のリンクでおちる問題を修正。(181225)

SVGからアニメGIF作成「動く温泉マーク」

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

f:id:dnjiro:20190405174302g:plain



作業時間は10分程度です。[完成データはこちら]。他のアニメの作り方はこちらをご覧ください

 

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

 

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

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

f:id:dnjiro:20190405095741p:plain

 

2. アニメキャストの中身を保存(スマホの場合)

よみこんだイラストはアニメキャストという部品のアニメになります。静止画として使う場合はアニメキャストにしておくほうが便利ですが、動きをつけたい場合は、アニメキャストの中身を開きます。
 
  1. 選択枠の中心の「+」をクリック。メニューの上から2番目「アニメ(...)を修正」をクリック。アニメキャストの中が開きます。

  2. ねんのため「ファイル>名前をつけて保存」で「onsen」と名前をつけて保存しましょう。

  3. メニューバー「ファイル>閉じる」をクリック。
  4. メニューバー「ファイル>開く」をクリック。「onsen」を開く。
  5. これに動きをつけていきましょう

 

3. 点の数を減らして、グループ解除

(1)点の数を減らす

  1. 画面をタッチして図形を選択。
  2. メニューバー「編集>点を減らす」をクリック。これで点の数が減り、編集しやすくなります。(パソコンの場合は、編集>効果>点を減らす)

 

(2)グループの解除

  1. 画面の図形をクリック。中心の「+」をクリック、メニューから「グループ解除」をクリック。もう一度湯気をクリック。中心の「+」をクリック、メニューから「グループ解除」をクリック。これで図形がばらばらになります。

 

4.湯気をのばして透明グラデーションをつける

(1)湯気3本を複製して下につなげる

  1. 3本の湯気をいっしょに選択。中心の「+」をクリック、メニューから「複製」をクリック。
  2. 複製した湯気を下に移動し、長い湯気を作ります。中央の湯気は少し下に移動させましょう。

    f:id:dnjiro:20190405141536p:plain

(2)6本の湯気をグループ化し「いっしょに塗る」ようにしてグラデーションをつける

  1. 6本の湯気を同時に選択。中心の「+」をクリック、メニューから「グループ化」をクリック。湯気をひとつのグループにまとめます。
  2. 中心の「+」をクリック、メニューから「いっしょに塗る」をクリック。
  3. 右上のパレットからグラデーションのパレットをクリック。上から4番目のかまぼこ型グラデーションをクリック。下のようなグラデーションになります。

    f:id:dnjiro:20190405143106p:plain

(3)グラデーションの制御点◇を選んで右上に移動させる

  1. 点選択ボタンf:id:dnjiro:20181027163024g:plainをクリック。湯気の点が表示されるので、右端の◇、または左上の湯気の点を1点だけ選んで、もう一度f:id:dnjiro:20181027163024g:plainをクリック。これで下図のようにグラデーションの点が選びやすくなります。
  2. グラデーションの点◇4点を選んで、右上に移動。選択枠の角のハンドルをドラッグして、サイズを半分に縮めます。

    f:id:dnjiro:20190405144401p:plain

    グラデーションの点の意味は、緑色の◇がグラデーションの範囲、オレンジ色の◇を結ぶ線がグラデーションの方向になります。

(4)グラデーションの色2を透明にする

  1. カラーパレットの色2ボタン(上図の黄色いボタン)をクリック。色を赤にし、カラーパレットの上の透明度を一番左側(透明)にします。虫眼鏡ボタンを押して再描画すると下図のようになります。

    f:id:dnjiro:20190405150010p:plain

 

5.続きのページを追加

動きをつけるために続きのページを作りましょう。

  1. ページの右側の f:id:dnjiro:20181221171302g:plain をクリック。メニューから「続きのページを作る」をクリック。2ページができます。

 

6.前後のページを表示し、下の湯気を前のページの上の湯気に合わせる

  1. メニューバー「表示>前後のページを重ねて表示」をクリック。前のページの湯気の場所が水色で表示されます。
  2. 2ページの湯気を選び、下の湯気が前のページの上の湯気に重なるように移動させます。
  3. 中心の湯気の位置も合わせましょう。湯気を選んで、点選択ボタンf:id:dnjiro:20181027163024g:plainをクリック。中心の湯気の点を一部選んで、2回f:id:dnjiro:20181027163024g:plainをクリック。これで中心の湯気だけ選ばれるので前のページの湯気の位置にあわせます。

    f:id:dnjiro:20190405152638p:plain

7.2ページのグラデーションを1ページと同じ位置にする

  1. 2ページのグラデーションの点を選んで、1ページのグラデーションの点と同じ位置に移動させます。

    f:id:dnjiro:20190405153815p:plain

8.1ページに「繰り返し」をいれる

  1. 1ページに移動。メニューバー「ツール>繰り返し」をクリック。これで1ページと2ページの間を繰り返します。
  2. プレイボタンf:id:dnjiro:20181029083754g:plainをクリックし、下から湯気があがっていくアニメーションをみてください。

 

9.アニメGIF出力

  • ファイルメニュー>「アニメGIF出力」で、好きなサイズのアニメGIFが作成できます。
  • 「繰り返し」を入れているため、アニメーションの時間が無限になっています。アニメGIFの時間は、「1」を入力し、繰り返し1秒のアニメGIFをつくりましょう。
  • 画像サイズについて、スマホ版では、幅、高さのどちらかを空白にしておけば、比率を保った数値が自動設定されます。MP4動画を作る場合は高さ「720」に設定するとよいでしょう。
  • Androidの場合、完成したファイルは、端末内の「9VAe」フォルダの中に、指定した名前、例えば「onsen.gif」という名前で出力されます。フォトアプリで、「端末内の写真>9VAe」で見ることができます。

 

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

 

11.SVGアニメ出力

  • Ver. 0.6.6 以上のバージョンでSVG出力してください。
  • 9VAeきゅうべえ(スマホ版)は、SVG形式で保存されます。ChromeFirefox ではプラグインなしでアニメーションになります。(Internet Explorer や Edge では静止画になります。)
  • 9VAeきゅうべえ(Windows版、Linux版)では、保存するときに、SVG形式で保存できます。Mac版では、ファイルメニューの中に、SVG出力があります。

 

12.完成したSVGアニメの読み込み

  • 9VAeきゅうべえで保存したSVGアニメーションは、9VAeで読み込めば、自由に編集できます。
  • こちら(完成データ)を長押し、もしくは右ボタンメニューでダウンロードし、9VAeきゅうべえで開いてみてください。

 

9VAeでイラストからループアニメーションがすぐ作れる 

  • 9VAeきゅうべえを使えば、SVGイラストから絵をかかずにループアニメが作れます。Openclipart には15万点以上のSVGイラストがあります。そのまま静止画として使うのはもったいない。ぜひ動きをつけてご利用ください。
  • もっと長いアニメや動画を作ることもできます。以下をご覧ください。

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

 

 

iPhone/iPad版9VAeきゅうべえ開発メモ

アンドロイド版が、なかなか難しいので、先にiPhone/iPad版9VAeきゅうべえを作ることにした。その時のメモ。iPhoneXが画面の上に凹みができたので、メニューバーの場所を変えないといかん。画面を横にした時、今まではどちらの方向も同じだったが、凹みがどっちかで、変更しないといかん。カメラロールへの保存方法が変わってる。

 

iPhoneXのシミュレータを使うには、HighSierra にして、最新の Xcodeを入れないといかん

  • 凹みへの対応は、SafeArea を使う。

    【随時更新】iPhoneX完全対応マニュアル

  • StoryBoardの設定で、メニューバーはうまく行ったが、9VAeの独自ビューと、WebViewがうまくいかない。これは、プログラムで修正する。

    ios - Objective C : How to create self.view inside Safe Area programmatically - Stack Overflow

  • プログラムで修正するには、SafeAreaのサイズとデバイスの向きを知る必要があるが、普通の場所ではわからんらしい。

    iOS でデバイスの向きを取得するときの罠

  • メニューバーの項目の配置には、StoryBoard で、UIStackView に入れ、Distribution を「Fill Proportionally」に設定すると綺麗になった。複数のボタンをUIStackView に入れるには、複数のボタンを選んで、StoryBoardの右下のアイコン「Embed In」を押して何の中に入れるか選ぶとできる。なお、UIStackViewには描画機能がなく、背景に色をつけても無視される。
  • StoryBoardで挿入した Viewをプログラムから変更するには、StoryBoardの名前とプログラム上の名前を対応づけしないといかん。それには、StoryBoard上のオブジェクトから右ボタンメニューを開き、「Referencing Outlets」の右側の+ボタンをドラッグし、Viewの上に持って行って対応するプログラムの中の名前と結ぶ。
  • Viewを処理するプログラムには、インクルードファイル(.h)の中に、「@property (weak,nonatomic) IBOutlet Viewのタイプ 名前」という行と、プログラム(.m)の中に、「@synthesize 名前」が必要。IBOutlet の指定を元に、StoryBoard上で+ボタンをViewまでドラッグした時に、その名前が表示される。同じ名前にしておけば自動的にリンクされるというものではない。
  • Viewをプログラムで操作する場合、画面の表示に反映されるのは、トップビューだけ。ボタンをつけたり消したりするのは、トップビューのプログラムでやらないといけない。
  • WebView は、なぜか、画面配置をStoryBoardで制約をつけると描画されなくなった。プログラムでサイズ変更することはできた。
  • iPhoneiPadでもステータスバーの表示が違うみたいだ。ステータスバー有る無しでレイアウトを変えないといかん。

    Objective-C:画面サイズを取得する - devlog [naru design]

カメラロールへの保存は、PHPhotoLibraryを使う

前からわかっていたが、ALAssetsLibrary が非推奨になって、PHPPhotoLibraryを使うことになった。iPhoneXシミュレータでアニメGIFをカメラロールに保存できなくなったので、対応する。

  • 参考サイト

    カメラで撮影した写真と動画を Photos.framework でライブラリに保存する - ObjecTips

  • GIFファイルは一旦自分のアプリ領域に作成する。それをカメラロールに転送する。
  • UIImageを使って作成したGIFを転送すると静止画になってしまう。creationRequestForAssetFromImageAtFileURL にアニメGIFファイルのURLを指定すれば、アニメGIFを保存できた。
  • エラーメッセージはGIF作成時とカメラロールへの転送時と異なる。メッセージ表示はボタンを押してから行うように作る。エラーコードを受け取って一か所でメッセージ表示するのではなく、各処理に分岐した最後にメッセージ関数を呼ぶ構造にする。

Localize(多言語対応)

  • プロジェクトの設定で「Use Internatinalization」にチェックを入れる。すると、Base言語ができる。その後、+ボタンで Japaneseを追加。言語化用フォルダja.lproj, en.lproj ができる。

    iOS Localization チュートリアル – Taka Mizutori (JP) – Medium

  • Localizable.stringsは自動的にはできない。ja.lproj, en.lprojの中に infoPlist.stringsができているので、これを複製+リネームして、プロジェクトに追加する。
  • @"xxx"をNSLocalizedString(@"xxx", comment: "") のように記述しておく。"xxx"="yyy";をLocalizable.stringsに入れておけば、"xxx"が"yyy"に置き換えられる。

ライブラリ作成

 

プロジェクト管理に BitBucket を導入

SouceTreeとの連携までややこしかったが、いろんな人に聞いて設定できた。

BitBucketはつぎのようにしてつかう。

 

  1. BitBucket(ネット上)にリポジトリを作る。リポジトリーはプロジェクトのいれもので履歴をもったフォルダみたいだ
  2. SouceTreeとの連携ができている場合、BitBucketから「SouceTreeにクローン」をつくれば、パソコン上に対応したフォルダが作られるみたいだ。フォルダの中を修正すれば、修正点がリストされるので(1)アップするものを index にあげる。(2)コミットボタン(3)プッシュボタン でネット上と同期される。

 

SouceTreeを使って新しい環境にクローンを作る方法

  1. SouceTreeをインストールして実行
  2. 「BitBucketクラウド」をクリック
  3. ATLASSIANに Googleアカウントでログイン>名前、メールアドレスが設定される>完了
  4. これで、BitBucketとSouceTreeが連携される。
  5. 取得したいリポジトリーを選んで「クローン」をクリック。
  6. フォルダ名を入力すればそこにクローンができる

 

iPhone 11 対応

iPhone11 に対応した Xcode にバージョンアップすると、ヘルプが表示されなくなった。UIWebView が使えなくなったようで、WKWebView に変更しないといかんらしい。

 

bitcode 対応

機械語をつくるまえの中間コードで、iPhoneアプリにはこれをつけて提出しないといかんらしい。これがあるといろんなCPU対応のコードをアプリストア側でつくれる。

SVGからアニメGIF作成「目パチ」

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

f:id:dnjiro:20190204160808g:plain



画像からまつ毛の部分を切り出します。作業時間は30分から1時間です。[完成データはこちら]。他の簡単なアニメの作り方はこちらをご覧ください

 

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

 

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

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

f:id:dnjiro:20190203173324p:plain

 

2. アニメキャストの中身を保存(スマホの場合)

よみこんだイラストはアニメキャストという部品のアニメになります。静止画として使う場合はアニメキャストにしておくほうが便利ですが、動きをつけたい場合は、アニメキャストの中身を開きます。
 
  1. 選択枠の中心の「+」をタッチ。メニューの上から2番目「アニメ(...)を修正」をタッチ。アニメキャストの中が開きます。

  2. 「ファイル>名前をつけて保存」で「eye」と名前をつけて保存しましょう。

  3. メニューバー「ファイル>閉じる」をクリック。
  4. メニューバー「ファイル>開く」をクリック。「eye」を開く。
  5. これに動きをつけていきましょう

 

3. 保存したアニメをひらいて、パーツ作成のためにページを複製

(1)点の数を減らす

  1. 画面をタッチして図形を選択。
  2. メニューバー「編集>点を減らす」をタッチ。これで点の数が減り、編集しやすくなります。(パソコンの場合は編集>効果>点を減らす)

 

(2)続きのページをつくる

  1. ページの右側の緑色のf:id:dnjiro:20181221171302g:plainをタッチ。メニューから「続きのページを作る」をタッチ。これで2ページ目ができます。
  2. 今回は、まつげとまぶたを作るために同じページを2ページ追加します。

(3)ページの間に空白ページをいれる

 「続きのページを作る」では各ページの点がリンクでつながれており、点を削除すると他のページの対応した点も削除されてしまいます。そのためページとページの間に空白ページを入れ、リンクを削除します。

  1. ページとページの間の「>」をクリック。メニューから「空白ページを作る」

f:id:dnjiro:20190203175408p:plain



 

4.不要な点を削除してパーツをつくる

  • 3ページの目から上のまつげを作ります。

(1)不要な点を選んで削除する

  • 図形を選んでf:id:dnjiro:20181027163024g:plainをタッチすると点が表示されます。
  • f:id:dnjiro:20181221164812g:plainの「+」で拡大。スマホ版では、ピンチ操作で拡大縮小、2本指で場所の移動ができます。

  • とりあえず、目や下のまつ毛の点を選んでf:id:dnjiro:20181221164227p:plainで削除します。下の線がおかしいですが、後で修正します。

    f:id:dnjiro:20190203180818p:plain

 

(2)シフトキーを押して点を削除し、パスを結合する

  • まつげと目の上の線が重なっています。ここからまつ毛を取り出すためには、外周の線と穴の線をつなぐ必要があります。特別な点の削除を行います。下の図をみてください。

    f:id:dnjiro:20190204112556p:plain

     

    赤い点が2つ選ばれています。右上の赤い点はf:id:dnjiro:20181027163046g:plainをタッチして追加しました。この2つの点をシフトキーを押しながら削除します。
  • スマホ版では左下の「Shift」をタッチして黒くします。こうしてf:id:dnjiro:20181221164227p:plainをタッチすれば外周と穴のパスがつながって下のようになります。

    f:id:dnjiro:20190204112851p:plain



  • この方法を使って、まつ毛の横の穴と外周のパスをつなげていきます。不要な点を削除して、下図のようになります。

    f:id:dnjiro:20190204114451p:plain

  • 5ページのデータから、まぶたを作ります。上と同じ方法でパスを結合し、不要な点を削除すると、以下のようになります。わかりやすいように黄色にしました。
  • f:id:dnjiro:20190203193350p:plain

 

5.最初のページを背景にする

先頭ページを背景にして、1ページの内容をコピーします。

  1. 先頭ページの左側の「<」をタッチ。メニューから「背景ページを入れる
  2. 2ページに移動。全体を選ぶ。
  3. 左ページにコピーするボタンf:id:dnjiro:20181221163257g:plainをタッチ。これで2ページの内容が背景ページにはいります。

  4. 2ページと空白ページは不要なので削除します。ページ番号をタッチ。メニューから「ページを切り取る」で削除できます。
  5. 2ページに移動。背景に重なって上のまつ毛が見えます。f:id:dnjiro:20181027163046g:plainをタッチし、背景の目にあわせてまぶたの下の線を作り、以下のようになります。

    f:id:dnjiro:20190204120053p:plain

 

6.まつ毛の下にまぶたを入れる

3ページのまぶたを2ページにコピーし、重ね順序を一番下にします。わかりやすいようにまぶたを黄色にしています。

  1. 3ページに移動。まぶたを選んで、f:id:dnjiro:20181027165131p:plainをタッチ。きおくツールにまぶたを移動します。
  2. 2ページに移動。f:id:dnjiro:20190110124400p:plainをタッチ。元の図形と重ならないようにするため、メニューから「複製する」をタッチ。これで新しいまぶたがまつ毛の上に重なります。

  3. 「Shitt」をタッチ(PC版の場合は「Shiftキー」を押しながら)下に下げるボタンf:id:dnjiro:20190114164547p:plainをタッチ。これでまぶたの上にまつ毛が重なった状態になります。
  4. 選びやすいようにf:id:dnjiro:20181029095306p:plainをタッチして登録。
  5. 3ページは不要なので削除。ページ番号3をタッチ。メニューから「ページを切り取る」で削除できます。

    f:id:dnjiro:20190204120537p:plain

 

 

7.続きのページを追加

動きをつけるために続きのページを作ります。

  1. ページの右側の f:id:dnjiro:20181221171302g:plain をタッチ。メニューから「続きのページを作る」をタッチ。3ページができます。
  2. 3ページに移動し、まぶたを閉じたところを作ります。

 

8.まぶたを閉じたところを作る

  • 登録したパレットのまぶたをタッチし、メニューから「固定」をタッチ。これでまぶたが選ばれなくなり、まつ毛だけを選択できます。
  • まつ毛の点を選択し、選択枠の辺の■メニューにある「のばす」や、中心メニューの「+」にある「ゴム変形」や「移動」などを使ってまつ毛の形を下のように変形します。

    f:id:dnjiro:20190204122046p:plain

  • 登録したパレットのまぶたをタッチし、メニューから「選択する」をタッチ。まぶたを選びます。

  • f:id:dnjiro:20181027163024g:plainをタッチし、点を表示し、まぶたの下の線を下のように変形します。

    f:id:dnjiro:20190204123749p:plain

  • プレイボタンf:id:dnjiro:20181029083754g:plainで動きをみながら形を調整します。変形の途中で背景が見えてしまうので、2ページのまぶたの下の線をもっと下げるという調整も行いました。

 

9.2ページに「往復」と動きグラフをいれる

  1. 2ページに移動。メニューバー「ツール>往復」をタッチ。これで2ページと3ページの間を往復します。
  2. 2ページの図形を全部選んで、f:id:dnjiro:20181029095306p:plainをタッチ。パレットに登録します。
  3. 登録したパレットをタッチ。メニューから「ゆっくり動くグラフ」をタッチ。下のような形にグラフを調整します。このグラフの形を変えれば目の閉じ方を調整できます。

    f:id:dnjiro:20190204133431p:plain

 

10.背景の上のまつ毛を消す

  • 1ページの背景の上のまつ毛は必要ないので、点選択して削除します。これで完成。

 

11.アニメGIF出力

  • ファイルメニュー>「アニメGIF出力」で、好きなサイズのアニメGIFが作成できます。
  • 「往復」を入れているため、アニメの時間が無限になっています。アニメGIFの時間は、「2」を入力し、2秒のアニメGIFをつくりましょう。
  • Android版では、画像サイズの幅、高さのどちらかを空白にしておけば、比率を保って自動的に数値が設定されます。MP4動画に変換する場合は高さを「720」に設定するとよいでしょう。
  • 画像サイズが大きい場合や、秒間のコマ数が多いと作成に時間がかかります。
  • 完成したファイルは、Androidの場合は、端末内の「9VAe」フォルダの中に、指定した名前、例えば「eye.gif」という名前で出力されます。
  • Androidの場合、フォトアプリで、「端末内の写真>9VAe」で見ることができます。

 

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

 

13.SVGアニメ

  • 9VAeきゅうべえ(Android版)で保存したファイルは、SVG形式で保存され、ChromeFirefox ではプラグインなしでアニメーションになります。(Internet Explorer や Edge では静止画になります。)
  • 9VAeきゅうべえ(パソコン版)では、標準は EVA形式ですが、SVG形式でも保存できます。

 

14.完成したSVGアニメの読み込み

  • 9VAeきゅうべえで保存したSVGアニメーションは、9VAeで読み込めば、自由に編集できます。
  • こちら(完成データ)を長押し、もしくは右ボタンメニューでダウンロードし、9VAeきゅうべえで開いてみてください。

 

 

 

9VAeきゅうべえAndroid版を使えば、スマホだけで、SVGイラストから絵をかかずにアニメGIFを作成できます。Openclipart には15万点以上のSVGイラストがあります。ぜひいろんなアニメを作ってみてください。

 

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

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

 

 

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

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

 

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

 

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ライブラリのドキュメントにあった。下の記事をみてやってみると、簡単に文字入力できた。これを修正して使う。

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

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

 

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

 

Visual Studio インストール

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

 

ビルドエラーが出たとき

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

機能の追加

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

 

 

 Java アラートの参考文献

 

JNIについて

 

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

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

    DXライブラリ質問掲示板

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

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 コマンドを使いたい場合はこちら

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

  1. Visual Studio > ツール > AndroidAndroid Adb コマンドプロンプト または 上の方法でコマンドプロンプトから adb コマンドを使う
  2. adb コマンドプロンプトに以下を入力すれば、パソコンのコマンドプロンプトを起動したフォルダにデータを取得できる。pull で取得。3つめはデータ削除
    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. プロジェクトのパッケージのプロパティ>ターゲットAPIandroid-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が1GB以下の低価格バージョンらしい。

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

 

 

  • コマンドプロンプトで署名した例。コマンドのフルパスは環境によって違います。
    1.キーストア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)、はい

    2.キーストア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

    3.署名できているか確認
    "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のように違うものにする。

 

アイコンデザイン