dnjiro’s 9VAe blog

誰でもアニメが作れる無料ソフト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対応のコードをアプリストア側でつくれる。

 

iCloud drive

差替えリスト、命令リストを、9VAeフォルダに保存すると外部アプリから書き込めない。iCloud Drive をつかうと他のアプリから書き込めるかも

 

 

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きゅうべえに関する問い合わせ

 

 

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

SDK Platform Tools release notes  |  Android Developers

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のように違うものにする。

 

アイコンデザイン

SVGからアニメGIF作成「泣く女」

9VAeきゅうべえアンドロイド版でもPC版iPad版でもつくれます。とても簡単で、10分ぐらいでできます。[完成データはこちら]

 

f:id:dnjiro:20190201122658g:plain

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

 

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

 

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

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

f:id:dnjiro:20190201124218p:plain

 

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

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

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

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

 

3. 続きのページを作る

  1. ページの右側のf:id:dnjiro:20181221171302g:plainをタッチ。メニューから「続きのページを作る」。これで1ページが2ページにコピーされます。

 

3. 涙を下に移動

(1)点を選ぶ

  1. 図形を選んでf:id:dnjiro:20181027163024g:plainをタッチすると点が表示されます。
  2. f:id:dnjiro:20181221164812g:plainの「+」をタッチして拡大し、涙の点を囲んで選びます。パソコンの場合、Ctrlキーを押しながら画面をドラッグすると青い線で囲んで選べます。

    f:id:dnjiro:20190201130428p:plain

  3. もう一度f:id:dnjiro:20181027163024g:plainをタッチすると涙の点だけが表示されます。この方法は便利ですのでぜひ覚えてください。

     

(2)涙を下に移動

  1. 涙の点を全部選び、中心の「+」をタッチ。メニューから「移動」をタッチ。画面をドラッグして涙を下に移動させます。f:id:dnjiro:20190201131752p:plain

 

4.顔を下に向ける

  • もう一度顔を選んでf:id:dnjiro:20181027163024g:plainをタッチ。涙以外の顔左手を選びます。下の赤い点が選んだ点です。

    f:id:dnjiro:20190201133057p:plain

    中心の「+」をタッチ。メニューから「ゴム変形」をタッチ。画面下にドラッグすると顔が下を向きます。これで完成。
  • プレイボタンf:id:dnjiro:20181029083754g:plainで再生してみてください。

 

5.アニメGIF出力

  • ファイルメニュー>「アニメGIF出力」で、好きなサイズのアニメGIFが作成できます。画像サイズが大きい場合や、秒間のコマ数が多いと作成に時間がかかります。
  • 今回のアニメは時間を1秒だけ出力しました。また、ファイルメニュー>「ページ設定」で画面をすこし大きくしました。
  • 完成したファイルは、Androidの場合は、端末内の「9VAe」フォルダの中に「cryingfem.gif」という名前で出力されます。
  • Androidの場合、フォトアプリで、「端末内の写真>9VAe」で見ることができます。

 

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

アニメGIFは簡単にMP4動画に変換できます。動画にする場合、アニメGIFの高さは「720」で作成するとよいでしょう。

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

 

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

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

 

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

 

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

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

 

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

 

 

9VAeきゅうべえを使った動くマニュアルの作り方

9VAeきゅうべえは、誰でも簡単にアニメーションが作れるフリーソフトです。 次のアニメーションは、「ひとコマアニメーション」を作ってプレゼンソフトにいれる方法を説明したものですが、このアニメも、9VAeきゅうべえで作りました。作り方を説明します。

000a.gif

9VAeきゅうべえで動くマニュアルを作る利点

動くマニュアル作成は、作業を撮影し、動画編集するのが一般的ですが、9VAeを使うと次の利点があります。

  • 動画撮影、動画編集機材が不要(カメラ、照明、大容量ハードディスクがなくても作れる)
  • データ容量が非常に小さく(動画の1/100以下)処理が軽い。
  • 完成したあとの修正が簡単(文章修正、パーツ差し替え、仕様変更など)。
  • 部品を再利用できるため、似たアニメーション作成がどんどん楽になる。
  • 同じデータから日本語、英語版が作成できる。

解説アニメの構造

9VAeはアニメーションを階層構造で作成します。上の解説アニメのトップの階層は次の5ページです。

strkOrdr01.png

  1. 表紙
  2. 書き順アニメの入力
  3. 書き順アニメの再生
  4. アニメGIF出力
  5. LibreOfficeに挿入

2ページ(書き順アニメの入力)の中には以下のような8ページのアニメが入っています。

strkOrdr02.png

  1. 背景(エディタ画面)
  2. 「1」ボタンを赤い丸で表示
  3. 指で「1」ボタンを押す
  4. 「線で書いたあともう一度1ボタンを押してください」
  5. 押した後の画面を表示
  6. 「アニメの作り方」を書く
  7. 書き終わった状態
  8. もう一度「1」ボタンを押す

9VAeきゅうべえのアニメ制作は、アニメーションパーツを作成し、 階層的に組み立てていきます。レゴブロックを組み立てていくようなイメージです。

動くマニュアルの作り方

このような動くマニュアルをどう作っているか解説します。

  1. SVGイラストを読み込んでアニメにする(画面をタッチする指)
  2. アニメキャスト(アニメーションの部品化)
  3. アニメキャストの作り方
  4. 背景にアニメキャストを入れる
  5. アニメキャストをパスにそって動かす
  6. 複数のアニメを切り替えてコピーする
  7. 複数ページをアニメキャストにする
  8. 日本語と英語の文字の切替え

1.SVGイラストを読み込んでアニメにする

  • 9VAeきゅうべえは、SVGイラストを読み込んで動きをつけることができます。
  • FreeSVG や、OnlineWebfonts.com などの、100万点以上のフリーのイラストを読み込んで、アニメにすることができます。その手順を紹介します。
  • SVG ファイルを 「9VA」ボタンから読み込めば、アニメキャストになります。
  • アニメキャストの中身を編集して動きをつけます。
  • なお、アニメキャストのサイズを変更しても、線の太さはかわりません。太さを調整する必要があります。

000m.gif

2.アニメキャスト(アニメーションの部品化)

2ページには書き順アニメの入力方法を記述したアニメが、アニメキャストになってはいっています。

アニメキャストは、アニメをパーツ化する仕組みで、以下の特長があります。

  • アニメーションができる。
  • アニメキャストの中にアニメキャストが入れられる。
  • 軌道(動き矢印)にそって動かせる。
  • 角度を指定して正確に回転させられる。
  • アニメキャストの中の図形全体の太さを変更したり、色をつけたりできる。
  • 同じアニメキャストの中身は一か所で管理されるため、そこを修正すれば、全部のアニメキャストを同時に修正できる。

よく使うパーツはアニメキャストにしておくと便利です。

3.アニメキャストの作り方

アニメキャストにしたい図形やページを記憶ツールに入れます。それに名前をつけてアニメキャストにします。

  1. 図形を入力し、記憶ツールの中にカットする
  2. 「q」ボタンをクリック
  3. アニメキャストに好きな名前をつける。

000p.gif

4.背景にアニメキャストを入れる

  • 変化しない背景は、背景ページに入れると便利です。
  • 背景ページの内容は、次の背景ページが来るまで、背後に表示されます。

上で説明したアニメキャストを背景に入れる手順を紹介します。

000e.gif

5.アニメキャストをパスにそって動かす

  • アニメキャストは「動き矢印」というパスにそって動かせます。
  • 動き矢印上の点(支点)は最初はアニメキャストの中心にありますが移動させることができます。
  • 文字を書くようにペンを書き順アニメの上に重ねる手順を示します。

000o.gif

6.複数のアニメを切り替えてコピーする

  • 9VAeは複数のアニメを同時に編集することができ、「9VA」ボタンで切り替えできます。
  • 「書き順」アニメを作るために、新しいアニメを開いて書き順アニメを作成し、背景ページの後ろに入れる手順を示します。

000n.gif

7.複数ページをアニメキャストにする

  • 作成した複数ページのアニメを1ページに入れる手順を示します。
  • 空白ページを作成してアニメキャストを入れたあと、ページの時間をアニメキャストの時間に設定します。

000h.gif

8.日本語と英語の文字の切替え

  • 9VAeきゅうべえの文字には、日本語、英語、区別なしの3種類の設定ができます。日本語に設定した場合、ヘルプから英語表記に変えると表示されなくなります。

000b.gif

まとめ

9VAeきゅうべえを使った動くマニュアルの作り方を説明しました。

9VAeきゅうべえを使えば、動くマニュアルや、動く教材など、動きや変化を説明したアニメーションを簡単に作れます。ご活用ください。

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

SVGからアニメGIF作成「カセットテープ」

9VAeきゅうべえアンドロイド版でもPC版iPad版でもつくれます。左右のテープリールの回転数がテープの巻き数によって変化します。この動きがプログラムなしで作れます。作成は20から30分。[完成データはこちら]

 

f:id:dnjiro:20190115004854g:plainほかのアニメの作り方はこちらをご覧ください

 

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

 

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

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

f:id:dnjiro:20190114133224p:plain

 

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

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

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

  3. メニューバー「ファイル>新規作成」をクリック
  4. メニューバー「ファイル>開く」をクリック。「mixtape」を開く。
  5. これに動きをつけていきます。

 

3. 登録パレットをつかってパーツに分ける

  次のようにします。

(1)点を選ぶ

  1. 図形を選んでf:id:dnjiro:20181027163024g:plainをタッチすると点が表示されます。
  2. 一部の点を選んでもう一度f:id:dnjiro:20181027163024g:plainをタッチするとその点を含む図形だけが選ばれた状態になります。この方法でグループ化された図形の一部の点を選択することができます。ぜひ覚えてください。

(2)登録パレットに登録して隠す

  1. 右側のf:id:dnjiro:20181029095306p:plainをタッチ。選んだ図形がパレットに登録されます。

  2. 登録されたボタンをタッチ。メニューから「隠す」。これで選んだ図形が見えなくなります。このボタンに図形を追加登録していきます。

(3)追加したい点を選んで、登録パレットに「追加登録する」

  1. 追加したい図形の点を選んで、f:id:dnjiro:20181027163024g:plainをタッチし、点を含む図形だけが選ぶ。
  2. 登録パレットに登録されたボタンをタッチ。メニューから「追加登録する」

    f:id:dnjiro:20190114135349p:plain

    登録パレットに図形を登録しているところ
  3. ボタンに登録された図形が消えていくので、残った図形を選んで、複数のボタンに分類していきます。

 

4.左右のテープリールとそれ以外のパーツにわける

  • 登録パレットに、左右のテープリールとそれ以外のパーツの3つの登録ボタンを作ります。
  • f:id:dnjiro:20181221164812g:plainで画面拡大して、テープリールの点とそれ以外の点を選んで、登録しましょう。スマホ版は、ピンチ操作で拡大縮小、2本指で場所の移動ができます。

    f:id:dnjiro:20190114140956p:plain

    登録パレットの3つのボタンに分けたところ

5.右の回転リールだけアニメキャストにする

  1. 右側の回転リールの点だけ選択。f:id:dnjiro:20181027163024g:plainをタッチし、回転リールだけが選ぶ。

    f:id:dnjiro:20190114150034p:plain

    右側の回転リールの点だけ選んだところ

  2. f:id:dnjiro:20181027165131p:plainをタッチ。これで回転リールがきおくツールに移動します。

  3. f:id:dnjiro:20181027165315g:plainをタッチ。名前を「reel」とつける。これでアニメキャストになります。

  4. f:id:dnjiro:20181029095306p:plainをタッチして後から選択しやすいよう登録。

 

6.回転するリールをつくる

  1. 回転するリールの選択枠の中心の「+」をタッチ。メニューから「アニメ(:reel)を修正」をタッチ。回転リールの中が開きます。
  2. 回転するリールの中心がグラデーションになっています。中心の図形を選んでべた塗の白色にします。
  3. 正確に回転させるために回転リールをもう一度アニメキャストにします。図形全体を選んでf:id:dnjiro:20181027165131p:plainをタッチ。f:id:dnjiro:20181027165315g:plainをタッチ。名前を「rotate」とつける。回転リールがアニメキャストの中のアニメキャストになりました。

    f:id:dnjiro:20190114152134p:plain


 

7.9秒で時計周り逆回転させる

9秒でテープが再生し、1秒で巻き戻しするアニメーションをつくってみましょう。

  1. 回転リールをタッチ。選択の枠の中心「+」をタッチ。メニューから「枠の角度0(時計回り)」をタッチ
  2. 「3600」と入力。これで回転リールが3600度回転した状態になります。
  3. ページの右側の f:id:dnjiro:20181221171302g:plain をタッチ。メニューから「続きのページを作る」をタッチ。2ページめができます。
  4. 2ページの回転リールをタッチ。選択の枠の中心「+」をタッチ。メニューから「枠の角度3600(時計回り)」をタッチ
  5. 「0」と入力。これで2ページでは0度回転した状態になります。
  6. 1ページの時間「1秒」をタッチ。メニューから「1秒長くする」を8回タッチして9秒にします。
  7. f:id:dnjiro:20181029083754g:plainボタンで回転するようすを見てください。

    f:id:dnjiro:20190115113413p:plain

    1ページを9秒3600回転、2ページを0回転に設定したところ

 

8.元のアニメにもどり、左側のリールも回転させる

  1. ステージの上の太字「mixtape.svg」をタッチ。メニューから「このアニメにもどる」をタッチ。元のアニメーションに戻ります。
  2. 1ページの時間「1秒」をタッチ。メニューから「1秒長くする」を8回タッチして9秒にします。
  3. 右側の回転リールを選び、選択枠の中心の「+」をタッチ。メニューから「複製する」をタッチ。
  4. 左側の回転リールの上に重ねます。
  5. f:id:dnjiro:20181029083754g:plainボタンで両方の回転リールが回転するようすを見てください。

 

 

9.重ね順序の調整

  1. f:id:dnjiro:20181029155754p:plainをタッチ。これで「隠す」がリセットされ、全体が見えます。

  2. テープを選んで、f:id:dnjiro:20190114164532g:plain f:id:dnjiro:20190114164547p:plainをタッチし重ね順序を調整します。

  3. 重ね順序の調整ではうまくいかないので、f:id:dnjiro:20190115132634p:plainをタッチし、下のような凹型多角形を描きます。

    f:id:dnjiro:20190115132810p:plain

    テープを隠すために多角形を入力。あとで色をつける。
  4. 多角形をカセットと同じ色にします。塗色のカラーパレットの中に「画面から色を選ぶ」があり、これをタッチし、カセットテープのケースを選んで同じ色にします。多角形の線は線の種類のパレットで「(なし)」「ぶれをとる」に設定します。重ね順序をテープの上に設定すれば下のようになります。

    f:id:dnjiro:20190115112757p:plain

    カセットと同じ色の凹型を入れて重なり順序を調整したところ


 

10.9秒かけて再生し、1秒で巻き戻すアニメをつくる

最初テープは左側にあって、9秒かけて右側に移動し、1秒で左側に巻き戻す、というアニメーションにしましょう。

  1. ページの右側の f:id:dnjiro:20181221171302g:plain をタッチ。メニューから「続きのページを作る」をタッチ。2ページめを作ります。
  2. 1ページの左側のテープを選択して拡大し、右側のテープを選択して縮小します。
  3. 2ページでは、左側のテープを縮小します。
  4. 1ページのページ番号「1」をタッチ。メニューから「ページを記憶する」をタッチ。これで記憶ツールに1ページがはいります。
  5. 2ページの右側の f:id:dnjiro:20181221171302g:plain をタッチ。メニューから「記憶したページを入れる」をタッチ。これで3ページができます。
  6. 2ページの時間を1秒、3ページの時間を0秒にしましょう。
  7. f:id:dnjiro:20181029083754g:plainボタンで動きをみてください。

    f:id:dnjiro:20190115111129p:plain

    2ページの内容

 

11.動きグラフで回転リールのスピードを変化させる

テープの回転スピードはテープの巻き数が少ないときは速く、巻き数が多くなるとゆっくりになります。動きグラフを使えば簡単に再現できます。

  1. ステージの上の太字「mixtape.svg」をタッチ。メニューから「reel」をタッチ。アニメキャスト「reel」を開きます。
  2. 1ページのアニメキャストをタッチして選択。f:id:dnjiro:20181029095306p:plainをタッチし登録パレットに登録します。
  3. 登録されたボタンをタッチ。メニューから「ゆっくり動き出すグラフ」をタッチ。下のような動きグラフが追加され、最初はゆっくり、だんだん速く回転する動きになります。

    f:id:dnjiro:20190115105555p:plain

    最初はゆっくり、だんだん速くなる動きグラフ
  4. また1秒で巻き戻しを行う2ページについて。回転がはやくてリールが見えないとして、中心に白い円をかぶせます。
  5. ステージの上の太字「mixtape.svg」をタッチ。メニューから「このアニメにもどる」をタッチ。f:id:dnjiro:20181029083754g:plainで動きをみてください。

 

12.アニメキャストを複製して、別の動きをつける

  1. 右側の回転リールは、最初は速く、だんだんゆっくりという逆の動きになります。そのため、右側の回転リールを選択し、選択枠中心の「+」をタッチ。メニューから「別のアニメにして修正」をタッチします。
  2. 「他のページの内容も修正しますか?」と表示されるので「はい」をタッチ。
  3. アニメキャストの名前を「reelR」として「OK」をタッチ。アニメキャスト「reelR」がひらきます。
  4. 右側の登録ボタンをタッチ。メニューから「動きグラフを修正」をタッチ。動きグラフの形が変更できるようになります。
  5. 中央の点を移動させ、下のようにして、最初は速く回転し、あとからゆっくりになるように設定します。

    f:id:dnjiro:20190115105244p:plain

    最初は速く、だんだんゆっくりになる動きグラフ
  6. 元のアニメにもどって、f:id:dnjiro:20181029083754g:plainで動きをみてください。

 

13.アニメGIF出力

  • ファイルメニュー>「アニメGIF出力」で、好きなサイズのアニメGIFが作成できます。画像サイズが大きい場合や、秒間のコマ数が多いと作成に時間がかかります。
  • 完成したファイルは、Androidの場合は、端末内の「9VAe」フォルダの中に「mixtape.gif」という名前で出力されます。
  • Androidの場合、フォトアプリで、「端末内の写真>9VAe」で見ることができます。

 

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

アニメGIFは簡単にMP4動画に変換できます。動画にする場合、アニメGIFの高さは「720」で作成するとよいでしょう。

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

 

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

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

 

 

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

 

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

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

 

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

 

 

SVGからアニメGIF作成「試食サンプルをどうぞ」

9VAeきゅうべえアンドロイド版PC版iPad版iPhone版でもつくれます。アニメキャストで動きを作っています。20分くらいで作れます。[完成したSVGはこちら]

f:id:dnjiro:20190111144615g:plain

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

 

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

 

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

  1. スマホの場合は、「こちら(grocery.svg)」を長押し。メニューから「リンクアドレスをコピー」をタッチ。9VAeきゅうべえのツールメニュー>「ネットからダウンロード」のあと、http:入力エリアを長押しして「貼り付け(ペースト)」。

  2. パソコンの場合は「こちら(grocery.svg)」を右ボタンでクリック。「対象をファイルに保存」または「リンク先のファイルをダウンロード」。9VAeきゅうべえメニューから「ファイル>開く」をクリック。ダウンロードしたファイルを選ぶ。SVGが読めない場合はバージョンが古いので最新版にしましょう。

これで、9VAeにSVGイラストが読み込まれます。
左下の「虫眼鏡」ボタンをクリックすると全体が見えます。 f:id:dnjiro:20190110090031p:plain

 

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

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

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

  3. メニューバー「ファイル>新規作成」をクリック
  4. メニューバー「ファイル>開く」をクリック。上で保存した、「Grocery」を開く。
  5. これに動きをつけていきましょう。

 

3. パーツ作成のためにページを複製

 試食サンプル、手、左腕、を切り取ります。手と試食サンプルはそれぞれアニメキャストにします。具体的には、次のようにします。

(1)点の数を減らす

  1. 図形をタッチして全体を選ぶ
  2. メニューバー「編集>点を減らす」

これで制御点の数が減り、編集しやすくなります。

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

  1. ページの右側の緑色の「+」をクリック。メニューから「続きのページを作る」をクリック。これで2ページ目ができます。
  2. 今回は、背景、試食サンプル、腕、手の4つに分割したいので、「続きのページを作る」を使って同じページを4ページ作ります。

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

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

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

f:id:dnjiro:20190110094826p:plain

 

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

  • 図形を選んでf:id:dnjiro:20181027163024g:plainをタッチすると点が表示されます。
  • スマホ版は、ピンチ操作で拡大縮小、2本指で場所の移動ができます。
  • 一部の点を選んでもう一度f:id:dnjiro:20181027163024g:plainをタッチすれば、その点を含む図形以外の点が消えるのでみやすくなります。
  • 不要な点を選んでf:id:dnjiro:20181221164227p:plainで削除し、パーツの点だけ残します。各ページでそれぞれパーツだけのこるようにします。

    f:id:dnjiro:20190110100507p:plain

    点を選択して削除しているところです
  • 点には△と□の2種類あり、△はとがった点、□は曲線です。これはパレットのf:id:dnjiro:20181029090607g:plainf:id:dnjiro:20181029090533g:plainで切り替えできます。□は前後の点によって形が変わるので、うまく形を整えられない場合、f:id:dnjiro:20181029090533g:plainで点を△に変更してください。
  • パーツ分けができたら間の空白ページは削除してかまいません。削除したいページ番号をタッチ。メニューから「ページを切り取る」でページ削除できます。
  • 下の図は、表示メニュー>「前後のページを重ねて表示」にチェックをいれて、1ページ、2ページ、3ページを表示したものです。

    f:id:dnjiro:20190110104129p:plain

    パーツ分け完了

5.回転するパーツはアニメキャストにする

3ページの試食サンプルと4ページの手は回転するのでアニメキャストにします。アニメキャストは正確に回転できます。しかし自由変形ができなくなります。

  1. 3ページに移動し全体を選択
  2. f:id:dnjiro:20181027165131p:plainをタッチ。これで試食サンプルがきおくツールに移動します。

  3. f:id:dnjiro:20181027165315g:plainをタッチ。名前を「sample」とつける。これで試食サンプルがアニメキャストになりました。

  4. 同様に4ページの手を「hand」というアニメキャストにします。

 

6.アニメキャストの支点の位置を変更

試食サンプルのつまようじの先にアニメキャストの支点を移動させます。こうすると、支点を中心に回転するようになり、手が試食サンプルのつまようじをつかんだ状態で移動できます。9VAeきゅうべえの高度な機能です。

  1. 試食サンプルを選ぶ
  2. 中心の「+」をタッチ。メニューから「支点の位置を変える」
  3. 緑色の◇が支点です、これをつまようじの手で持つ位置に移動させます。

    f:id:dnjiro:20190110110312p:plain

    支点をつまようじの端に移動させたところ

 

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

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

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

  4. 2ページは不要なので削除しましょう。ページ番号2をタッチ。メニューから「ページを切り取る」

 

8.試食サンプルを持った手を組み立てる

2ページのうでに、手と試食サンプルを合成します。

  1. 手がはいったページ番号をタッチ。メニューから「ページを切り取る」。これで手がきおくツールに移動します。
  2. 2ページのうでに移動
  3. f:id:dnjiro:20190110124400p:plainをタッチ。メニューから「ステージにもどす」

  4. f:id:dnjiro:20181029095306p:plainをタッチ。これで手が登録され、選びやすくなります。

同様に試食サンプルも2ページに合成します。

f:id:dnjiro:20190110125346p:plain

2ページに手と試食サンプルを移動したところ

 

9.続きのページを3ページ追加

動きをつけるために続きのページを作ります。3ページ=手前に差し出したところ、4ページ=次の試食サンプルをつまんだところ、5ページ=元の状態として、続きのページを3ページ追加しましょう。

  1. ページの右側の f:id:dnjiro:20181221171302g:plain をタッチ。メニューから「続きのページを作る」を3回くりかえす。

 

10.試食サンプルを渡したところを作る

  • 3ページの手と試食サンプルを拡大します。図形を選択し、選択枠の角の■をドラッグすれば拡大できます。
  • うでの形を手にあわせて変形します。点の一部を選んで回転(選択枠の角の■をタッチしたメニューの中にある)、なめらか(中心の+をタッチ)、ゴム変形(中心の+をタッチ)などを使いました。
  • f:id:dnjiro:20181029083754g:plainボタンで動きをみながら形を修正します。

  • 完成したら、3ページを2ページ分コピーします。
  1. 3ページのページ番号3をタッチ。メニューから「ページを記憶する」
  2. 3ページの右側の「>」をタッチ。メニューから「記憶したページを入れる
  3. ページの右側の「>」をタッチ。メニューから「記憶したページを入れる

    f:id:dnjiro:20190110133759p:plain

    手を手前に動かして2ページコピーしたところ

  4. 4ページ、5ページの試食サンプルを選び、f:id:dnjiro:20181221164227p:plainをタッチして削除します。

これで試食サンプルを手渡しする部分ができました。

 

11.次の試食サンプルをつかむところをつくる

  • 6ページの手と試食サンプルをお盆の上のサンプルに重なるように回転させます。
  • 手にあわせて腕の形を変形させます。

    f:id:dnjiro:20190110140122p:plain

    次の試食サンプルをつかんだところ
  • これだけでは腕の変形がうまくいかないので、5,6ページの間の「>」、6,7ページの間の「>」をタッチし、メニューから「中間ページを作る」
  • これで中間のページができるので、f:id:dnjiro:20181029083754g:plainで動きを確認しながら形を調整します。
  • ここの変形が一番むずかしいのですが、後から拡大して何回でも修正できるので、納得いくまで調整してみてください。
  • 9VAeきゅうべえは点と点が正確に対応して変形するため、点の位置は重要です。各ページの点の位置をかえると、同じ形でも異なる動きになります。

 

12.背景からつかんだ試食サンプルを消す

  • お盆の上から試食サンプルを取り出すようにするため、先頭ページのつかんだ試食サンプルを削除します。点を削除しその部分に何もなかったように修正します。
  • そのかわり、6ページか7ページでつかんだアニメキャストの試食サンプルを選んで、f:id:dnjiro:20181221163257g:plainをタッチし前のページにコピーします。
  • これで試食サンプルがお盆の上に現れ、それをつかんで渡す、という動きができます。

 

13.アクセントの線をアニメキャストにして動かす

顔の左側の3本の線を動かしましょう。

 

  1. 背景から3本の線の点だけ選び、f:id:dnjiro:20181027165131p:plainをタッチ。3本の線をきおくツールの中に切り取ります。
  2. f:id:dnjiro:20181027165315g:plainをタッチして名前をつければアニメキャストになります。名前は何でもよいですが、ここでは「line」としました。

  3. 中心の「+」をタッチし、「アニメ(:line)を修正」。アニメキャストの中が開きます。
  4. f:id:dnjiro:20181221171302g:plainをタッチ。メニューから「続きのページを作る」。2ページを作ります。

  5. 1ページの時間をタッチし、「0.1秒短くする」を5回タッチ。0.5秒にします。
  6. 1ページに移動し、ツールメニュー>「往復」をタッチ。「往復」命令をいれます。これで1ページと2ページの間を往復します。往復は必ず1ページに入れてください。
  7. f:id:dnjiro:20181029083754g:plainで動きを確認しながら、2ページの線を移動させてください。

    f:id:dnjiro:20190110173449p:plain

    アクセントの線をアニメキャストにして動かす

     

  8. 画面の上にあるファイル名「Grocery.svg」の文字をタッチ。メニューから「このアニメにもどる」。これで元のアニメに戻ります。
  9. アニメキャストが背景にあると静止画になっていまうので、f:id:dnjiro:20181027165131p:plainをタッチして記憶ツールに切り取り。
  10. 2ページに移動し、f:id:dnjiro:20190110124400p:plainをタッチ。メニューから「ステージにもどす」。これで2ページにアニメキャストがはいりました。
  11. 右ページにコピーするボタンf:id:dnjiro:20190110174431p:plainをタッチしてアニメキャストを最後のページまでコピーします。

 

14.アニメGIF出力

  • アニメGIF出力する前に、念のため、ファイルメニュー>「上書き保存」で保存しておきましょう。
  • ファイルメニュー>「アニメGIF出力」で、好きなサイズのアニメGIFが作成できます。画像サイズが大きい場合や、秒間のコマ数が多いと作成に時間がかかります。
  • 完成したファイルは、Androidの場合は、端末内の「9VAe」フォルダの中に「Grocery.gif」という名前で出力されます。
  • Androidの場合、フォトアプリで、「端末内の写真>9VAe」で見ることができます。

 

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

アニメGIFは簡単にMP4動画に変換できます。動画にする場合、アニメGIFの高さは「720」で作成するとよいでしょう。

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

 

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

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

 

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

 

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

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

 

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