dnjiro’s 9VAe blog

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

9VAeきゅうべえiPad版 iPhoneで、SVGイラストからGIFアニメを作ってみる

9VAeきゅうべえiPad版を開発中

iPhone実機でかなり動くようになってきたので、OpenclipartからSVGイラストを読み込んで、アニメGIFを作ってみよう。

 

iPhoneSafariからSVGをダウンロードできない

パソコンだとSVG画像を右クリックし、画像を保存すると取得できるが、iPhoneSafariだとそれができないみたいだ。

 

iPhoneでファイルをダウンロードする方法 | AppBank – iPhone, スマホのたのしみを見つけよう

ZIPならSafariでもダウンロードできるらしいが、SVGを長押ししてもダウンロードできない。そこで

SVGファイルのURLからSVGを取得して読み込む機能をつける

ことにする。OpenclipartのSVGのURLをコピーして入力すれば、ダウンロードして、9VAeきゅうべえに読み込みできれば嬉しい。読み込めたらダウンロードしたファイルは消してもいいか。URLを指定してダウンロード、保存するコードは、以下のようにすれば良いことがわかった。

 

そもそも、iPoneでSVGはどう扱われているのか調べてみると

 

ここでは否定的 

Should you use SVG files for images in an iOS app? - Quora

ここでも、SVGPNGでは、PNGの方が良くて、もしベクターを使いたかったら、PDFを使えと書いてある。

Which image format i should for ios development native ? SVG or PNG? - Stack Overflow

ということで、SVGを使う理由は、イラストを入手して、GIFアニメを作ることと、編集データを保存する目的しかないな。

 

Openclipartイラストからアニメを作成してみて、以下点を改良

  • 点を選択してから、選んだ点を含まない図形の点を表示しない機能(点選択ぼボタン)を「点追加ボタン」でも働くようにした。
  • 描画画面を広げた時に、線の太さボタンが右側に出てきて押せるようにした。
  • ストップボタンで選択の解除ができるようにした。

そうこうしているうちに

テンポラリファイルに書き込みできていないことを発見

シミュレータだと、/tmp フォルダにテンポラリファイルを作成して読み書きできていたが、実機ではできないみたいだ。アプリの領域以外には読み書きできないようにする安全措置。テンポラリファイルの作成場所を変更しないといけない。

  

フォルダの場所についての資料

iOSアプリのファイル保存について - Qiita

NSTemporaryDirectory()を使うと良いみたいだが、これを使っても保存できなかった。ファイルを作成してからパスを与えるといった方法を取らないといけないのかも。もしくは、同時に2つのファイルを fopenできないのかもしれん。

 

原因を発見。NSTemporaryDirectory にも書き込みはできていた。しかし、tmpnamを使っていたが、mkstempを使うべきと書いてあったので、そちらに変更したが、関数の動作が異なるので、動かなかったみたいだ。

 

  • tmpnamは名前だけ取得し、テンポラリファイルは作らない。
  • mkstempは0バイトのテンポラリファイルを作る。

ということで、かなりの部分が動作できるようになった。

 

iPhoneアプリ GIF Viewerを導入

iPhoneのカメラロールで、GIF再生ができないので、GIF Viewerという外部アプリを導入。このアプリは、

  • カメラロールの中のGIFアニメを検索して表示できるようにしてくれる。
  • Twitterにも投稿できる。GIF Viewerサーバーが mp4に変換して、Twitterに投稿してくれるようだ。

#GIFViewer hashtag on Twitter

 

ということで、9VAeきゅうべえ iPhone実機で作成した GIFアニメがこれ

f:id:dnjiro:20171104171525g:plain