dnjiro’s 9VAe blog

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

9VAeきゅうべえiOS版 http:ダウンロードとタイル塗りつぶし

9va-mac64bit版がいちおうできたので、そのソースを利用して、iOS版を作り直している。

 

ネットからhttp:URLからのダウンロードができなくなってる

  • 一度作成したとき、initWithContentsOfURL をつかってダウンロードできていたように思ったが、次のようなエラーがでてダウンロードできなくなった。"NSURLErrorDomain" - code: 18446744073709550414
  • 同様のエラー記事がこちら。

    NSURLErrorDomain Issues |Apple Developer Forums

  • なんと、iOS9 から http:通信ができなくなってるらしい。iOS8対応にすればよいかと思ったら、iOS8だとスクリーンにへこみがあるときの SafeAreaがつかえない。

    iOS9のWebviewでNSURLErrorDomainとなる場合の対処法(ATS) - Qiita

  • 上の記事にあった対応をしてみる。App Transport Security Setting の中にある NSAllowsArbitraryLoads をYESにするとダウンロードできるようになった。

    アプリ内のInfo.plistを編集し、NSAllowsArbitraryLoadsYESとするとATSは無効化されます。

     

タイル塗りつぶし

  •  mac64bit版の描画をそのままつかうとタイル塗りつぶしができるようになった。ただ、半透明になっているのがすこしおかしい。

    f:id:dnjiro:20190903185947p:plain

    と思ったら mac64bit も同じ症状である。修正しないといかん。

 

 Ver.0.6.8 で修正。公開した。

9VAeきゅうべえVer.0.6.7 について

2019年8月末に、9VAeきゅうべえVer.0.6.7(Mac版、Windows版、ラズパイ、Ubuntu版)をリリースしました(ダウンロードはこちら。)その内容を紹介します。Ver.0.6.6から、Ver.0.6.7までソースコードがかなり変更されました、その内容は大きく次の2つです。

  1. キッズプラザ対応(PEAS motch! one)
  2. macOS 64bit 版対応

 

キッズプラザ対応

キッズプラザ対応とは、キッズプラザ大阪のフロアに5台設置するための対応で、

  • タイマー処理の追加。子供が操作しないと自動的に作品をアップロードして初期状態にもどる。
  • ファイル名の自動付与
  • 保存先フォルダの指定。5台の端末の保存先を1つのフォルダにする。
  • プレーヤーの改善。作品を順番に再生するが、アップロードされた作品はすぐ再生する。最後にアップロードされた10作品だけを再生する。日付がかわったら新しいフォルダの作品を再生する。
  • ネットワークの接続が切れたらすぐわかる表示

など、多くの機能を追加しました。これらは、9VAeきゅうべえを教室で使うときにも便利に使えます。後の「日付フォルダ保存機能」で説明します。

 

macOS 64bit 版対応

macOS 64bit 版対応は4月から取り組みました。画面の描画システムを Core Graphics 、イベント処理を Cocoa に変更し、メインルーチンをすべて書き換えました。文字表示やダイアログ作成、音の再生、動画出力など、多くの処理手順がかわったため、9VAeきゅうべえライブラリに影響がありました。64bit化により、16bit処理で作られていたアニメGIF出力ルーチンが動かなくなり、コードの修正が必要でした。

 

SVG保存

 macOS 64bit 版は標準の保存形式を、EVAからSVGに変更しました。SVGで保存するとファインダで選んだときにプレビューが表示されます。SVG保存はEVAで保存するより時間がかかります。名前をつけて保存するときに、拡張子「.eva」をつければ、EVA形式で保存できます。

 

タイル塗りつぶし

Core Graphicsを使ってタイル塗りつぶしを行ったところ、改善点がみつかったので、Windows版、Linux版のタイル塗りつぶしも修正しました。タイル塗りつぶし表現が少し変わってしまったかもしれません。

 

 

日付フォルダ保存機能の使い方

複数台のパソコンをつかって、アニメ制作体験コーナーを実施すると、以外に手間がかかるのが、データの保存です。普通は(1)フォルダを指定し、(2)ファイル名をつけて保存します。もし共通のフォルダに保存しようと思うと、同じ名前が存在すると困るので、パソコンに番号をつけておき、ファイル名に必ずパソコン番号を入れるといった対応をします。そういった説明が手間で、そのとおりできない子供が必ずあらわれます。

 

これを解決するために

  • 保存先をファイル(setpath.ini)に書いておく
  • そこに、2019-0810 といった年-月日フォルダを自動作成し、そこに保存する
  • ファイル名は自動的に連番を作成する

この機能が「日付フォルダ保存機能」です。9VAeきゅうべえ Ver.0.6.7 から使えます。

 

使ってみる(Windows / ラズベリーパイ、Linux の場合)

    1. 9va-win, 9va-pi の場合、9va_data フォルダの中に、#setpath.ini ファイルがはいっています。これを、setpath.ini にリネームします。
    2. setpath.ini をテキストエディタで開き、次のような行(保存先をデスクトップとしたときのフルパス)を最後に追加します。パソコンの環境によって追加する文字列は異なります。

C:¥Users¥xxxxxx¥Desktop(Windowsでデスクトップを指定した例)

/home/pi/Desktop(ラズベリーパイでデスクトップを指定した例)

  • この状態で、9va-win, 9va-pi  を起動します。
  • ヘルプメニュー>「かおであそぼう(練習用)」>わらえもん
  • 顔を自由に移動、変形して、ファイルメニュー>名前をつけて保存

これで、デスクトップに今日の日付フォルダが作成され、ファイル名に「0000.eva」が表示されれば成功です。保存してから、もう一度「わらえもん」を作成すると、次は「0001.eva」になるはずです。

 

使ってみる(Macintoshの場合)

  1. 9VAeアイコンがはいっているフォルダにある readme.txt を「複製」する
  2. setpath という名前にリネームする。
  3. ファインダで選択し、右ボタンメニューから「情報を見る」
  4. 「名前と拡張子」を「setpath.ini」に変更し、拡張子を「.ini」に変更する
  5. 「setpath.ini」をテキストエディタで開き、中身を全部選択し、削除し、何もはいっていない状態にする。
  6. ファインダで「デスクトップ」をドラッグし、テキストエディタの上にドロップする。すると下のような、デスクトップフォルダのパスがはいる(内容は環境によって違います)

/Users/xxxxxx/Desktop

 

  • setpath.ini を保存して閉じる
  • 9VAeを起動し、 上と同じように「わらえもん」を作って保存してみてください。
  • Macの場合、デスクトップに日付フォルダができますが、保存するときに自分で日付フォルダを選ばなければなりません。保存ダイアログを開くときのフォルダの場所をプログラムで指定する方法が見つからないためです。

 

9View-lastday プレーヤーの使い方

上のようにして日付フォルダに保存したデータを再生する専用プレーヤが「9view-lastday」です。キッズプラザ大阪でも使われています。

 

  1. プレーヤー「9view」または「9View」 を複製します。(Macは複製、Win/Linux は、コピー&ペースト)
  2. 名前を「9view-lastday」または「9View-lastday」にリネームします。
  3. 「9view-lastday」を起動します

これで、setpath.ini で指定したフォルダの中の一番新しい日付フォルダをさがして、その中の作品を連続再生します。日付がかわると自動的に新しい日付フォルダに移るため連続運転が可能です。

 

 

パソコン1台でアニメ制作体験

日付フォルダ保存機能と、9view-lastday 、ヘルプメニューから開く「わらえもん」は、パソコン1台でアニメ制作体験を行うために開発した機能です。この機能があれば、「わらえもん」を順番に開くだけで、ファイル名が連番で保存できる(新しくわらえもんを開くときに、保存するかどうか尋ねられるので、Yesを押せば連番で保存できる)ので、次々に子供達がきても簡単にアニメ作成、保存ができます。

 

9view-lastday を起動しておけば、最後の10本が繰り返して再生されます。

この機能は、Ver.0.6.7 から使えます。ご活用ください。

簡単エンドロール動画の作り方 :9VAeきゅうべえ

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

f:id:dnjiro:20190426092918g:plain



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

 

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

 

1. 文字をいれる

  1. f:id:dnjiro:20190426101709g:plainをクリックして文字を入れる

  2. 文字は250文字以内で区切って入れる
  3. f:id:dnjiro:20190426102049g:plainの右側の「-」をクリック。画面の外が見えるので、画面の下に後から出てくる文字を入れる。

文字を整列させるには次のようにします。

  1. 文字を全部選ぶ。「編集>選択する>全て」。(スマホ版は「編集>すべて選択」)
  2. 「調整>整列>縦軸を合わせる」(スマホ版は「配置>縦軸を合わせる」)
  3. 「調整>整列>上下のすきまを均等に」。(スマホ版は「配置>上下のすきまを均等に」)f:id:dnjiro:20190426102824p:plain

 

2. 背景をいれる

  1. 先頭ページの左側の「<」をクリック>メニューから「背景ページを入れる」
  2. f:id:dnjiro:20190426103850g:plainをクリック。画面全体を四角で囲んで背景に色をつける。色は右側のパレットで選ぶ。

  • 背景に写真を入れてもかまいません。メニューから「ツール>絵・写真を入れる」をクリック。(スマホ版の場合、ファイルマネージャアプリを使って写真を「9VAe」フォルダに入れておきます。)
  • 文字の色を変更したい場合、2ページをクリックして移動し、文字を全部選んでから、f:id:dnjiro:20190426104430g:plainをクリックし「タブ2」の中の色ボタンで変更します。

    f:id:dnjiro:20190426105009p:plain


     

3. 続きのページを作成

  1. 2ページの後ろのf:id:dnjiro:20181221171302g:plainをクリック。「続きのページを作る」をクリック
  2. 文字を全部選び、ドラッグして上に移動。(選んだあと中心の「+」>「移動」でもかまいません。「Shift」キーを押しながら移動させれば、まっすぐ上に移動します。スマホ版は「Shift」ボタン)

 

4. 時間調整、プレイして確認

  1. 2ページの上の「〇〇秒」をクリック。メニューから「1秒長くする」で時間を調整。
  2. 3ページの時間で、エンドロール終了後の文字の停止時間を調整できます。
  3. プレイボタンf:id:dnjiro:20181029083754g:plainで動作を確認

    f:id:dnjiro:20190426110623p:plain

 

 

5.アニメGIF出力

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

 

6.ezgif サイトで、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きゅうべえと ezgif を使えば簡単にエンドロール動画が作れます。
  • この方法は、自由度が非常に高く、文字の位置、文字サイズ、エンドロールがでてくる場所、タイミングなど自由自在に作成できます。
  • アニメーションをいれたり様々なエンドロールが作れます。

Android版では、あまり長いアニメGIFは作成できません。

  • もっと長いアニメを作りたい場合、以下をご覧ください。

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

  

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

 

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 のバージョンによってファイル名がかわるのか、アプリの性質がかわるのか??

 

Sandboxアプリの作り方

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

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

f:id:dnjiro:20190405174302g:plain



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

このアニメはグラデーションのキーフレーム補間をつかっており、9VAe以外のフリーソフトで作るのは難しいでしょう。

 

■ 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番目のかまぼこ型グラデーションをクリック。下のようなグラデーションになります。

「いっしょに塗る」がでてこない場合、グループ化されていないかもしれません。もしくはグループの中にグループが含まれると表示されません。「いっしょに塗る」は特別なグループ化(図形だけがはいっているグループ)にだけ存在するオプションです。また、「いっしょに塗る」にチェックをつけると、1つの図形とみなされるようになり、チェックをはずすまでグループ解除ができなくなります。

  1. 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イラストから絵をかかずにループアニメが作れます。FreeSVG などネット上には100万点ぐらいSVGイラストがあります。そのまま静止画として使うのはもったいない。ぜひ動きをつけてご利用ください。
  • もっと長いアニメや動画を作ることもできます。以下をご覧ください。

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

 

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

 

 

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

 

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