SVGからアニメGIF作成「ペンで字をかく」

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

作業時間は１５分程度です。

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

 

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

• Win/Mac/Linux：無料ソフトでアニメを作ってみよう（9VAe きゅうべえ） - Qiita
• アンドロイド：9VAeきゅうべえAndroid版（Google Play）
• iPad / iPhone：9VAeDanga (Apple)、9VAePro (Apple)
• 9VAeのボタン説明

9VAeきゅうべえの使い方

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

1. 以下のイラストを開く 。ダウンロードは「[↓] SVG FILE」ボタン

   Wacom Tablet Svg Png Icon Free Download (#431412) - OnlineWebFonts.COM

2. スマホの場合「[↓] SVG FILE」ボタンを長押し。メニューから「リンクアドレスをコピー」をタッチ。9VAeきゅうべえのツールメニュー＞「ネットからダウンロード」のあと、http:入力エリアを長押しして「貼り付け（ペースト）」。
3. パソコンの場合は「[↓] SVG FILE」ボタンを右ボタンでクリック。「対象をファイルに保存」または「リンク先のファイルをダウンロード」。9VAeきゅうべえメニューから「ツール＞9VAeアニメを入れる」をクリック。ダウンロードしたファイルを選ぶ

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

２. アニメキャストの中身を保存

よみこんだイラストはアニメキャストという部品のアニメになります。編集するにはアニメキャストの中身を開きます。

 

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

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

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

1. メニューバー「ファイル＞閉じる」をクリック。
2. メニューバー「ファイル＞開く」をクリック。上で保存した、「tablet」を開く。
3. これに動きをつけていきましょう。

（１）点の数を減らす

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

（２）グループの解除

1. 画面の図形をクリック。中心の「＋」をクリック、メニューから「グループ解除」をクリック。これでペンとタブレットが別々になります。●イラストによっては図形がグループ化されていない場合もあります。その場合、9VAeきゅうべえでパーツにわけていきます（例１、例２）。

４．登録をつかって、ペンとタブレットをわける

（１）ペンを選んで点ボタン（下のまる）

1. ペンを選んで点ボタンを押す。ペン以外の点が選ばれた場合は、ペンの点だけ選んでもう一度「点ボタン」を押せば、その点を含む図形の点だけが選ばれる。これを使ってペンの点だけを選ぶ

   

（２）ペンを登録して「隠す」

1. スマホの場合、「＜＜」ボタン（下図１の場所）をクリックすると、登録パレットが表示されます。下の絵の「＋」ボタンの下が登録エリアです。
2. 登録パレットの「＋」（下図２）をクリック。選んでいたペンがボタンに登録されます。
3. 登録されたボタン（下図３）をクリック。メニューから「隠す」を選びます。ペンが見えなくなります。

   

 

５．ペンの消えた部分をなおす

1. タブレットを選んで、点ボタンをクリック
2. ペンが消えたあとの線の端の点を選びます。

   

3. スマホの場合、「配置」メニュー＞「左に寄せる」。パソコンの場合、「調整＞整列＞左に寄せる」をクリック。これで選んだ点が選択した領域の一番左端に移動します。これで線がつながりました。（最初からペンのないタブレットとペンを別々に読み込めばよいという意見もありますが、SVGイラストをパーツ分けする例として紹介しました。）

   

 

６．タブレットに色をつける

1. タブレットの外側の線の点を選んで、もう一度点ボタンをクリックすると、外側の線の点だけが表示されます。
2. 外側の線上の点を全部選びます。
3. 選択枠の中心の「＋」をクリック、メニューから「点の後ろに図形を入れる」をクリック。これでタブレットに色がつきます。色はカラーパレットで変えられます。

   

•  SVGイラストの多くは、線が線でなく、輪郭で囲まれた図形になっている場合が多いです。そういった場合に中を塗りたいときは、点を選択して「点のうしろに図形を入れる」を使います。

７．ペンをアニメキャストにして色をつける

（１）ペンを選んでアニメキャスト（部品）にする

1. 登録パレットのペン（下図１）をクリック。メニューから「選択する」をクリック。これでペンが選ばれます。
2. カットするボタン（下図２）をクリック。ペンが記憶ツールの中に移動します。
3. アニメキャストを作る「ｑ」ボタン（下図３）をクリック。
4. アニメキャストの名前例えば「ペン」と入力します。これで、ペンがアニメキャストになりました。

   

（２）ペンの中身をひらいて色をつける

1. ペンの中心の「＋」をクリック。メニューから「アニメの中を修正する」をクリック
2. ペンの中が開くので、ペンの中を選んで、カラーパレット（下図１）で色をつけましょう。単純にペンを選んで色をつけると、線の色が変わってしまいます。ペンの中に色をつけるにはタブレットに色をつけたやり方をするとよいでしょう。ペンを選んで点モードにし、点を全部選んでから中心の「＋」をクリックし「点の後ろに図形を入れる」。はいった図形に色をつけます。

   

（３）反転をつかってペンを下にむける

1. ペン全体を選ぶ。上の辺の「■」（下図１）をクリック。メニューから「反転」をクリック。画面をもう一度クリックすると位置がきまります。

   

８．元のページにもどってペンに動きをつける

（１）元のページに戻る

1. 画面の上の太字「tablet（.svg）」（上図２）をクリック。メニューから「このアニメに戻る」をクリック。元のページに戻ります。

（２）動き矢印をつける

1. ペンの中心の「＋」（下図１）をクリック。メニューから「動き矢印を入力」。これで赤い矢印が表示され、点を追加できるモードになります。

   

（３）点を追加して動きをつける

1. まず中心の緑色の「◇」（下図１）をドラッグしてペン先に移動してください。この点が矢印にそって移動するときの基準点になります。
2. 赤い矢印に点を追加して、好きな形にしてください。
3. ページの時間（下図２）（大きな画面の場合はページの上部）をクリックし、時間を長くしましょう。
4. プレイボタン（下図３）をクリックすると動きます。動きをみながら赤い矢印の形や時間を調整してください。

  動きをみながらいろいろ工夫してみてください。下に文字をいれ、それをなぞってみるのもよいでしょう。

９．アニメGIF出力

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

最初にあげた作例では、次の修正を行っています。

• 先頭ページに「背景」をいれ、タブレットを移動し、9VAe の文字をいれました。背景ページは、先頭ページの左側の「＜」をクリックしてメニューから「背景ページを入れる」を実行します。タブレットの移動は、きおくツールをつかいました。
• ２ページで「9VAe」の文字に動き矢印をあわせました。
• 画面サイズを 1100×750 にしました。スマホ版では、「ファイル＞ページ設定」。パソコン版では、「ページ＞ページ設定」で変更できます。

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

 

１１．SVGアニメ出力

• スマホ版、Mac版（9va-mac64）では普通に保存すれば、SVGアニメ形式で保存されます。Chrome や Firefox で開けばはアニメーションになります。（Internet Explorer や Edge では静止画になります。）
• 9VAeきゅうべえ（Windows版、Linux版）では、保存するときに、SVG形式で保存できます。

 

１２．完成したSVGアニメの読み込み

• 9VAeきゅうべえで保存したSVGアニメーションは、9VAeで読み込めば、自由に編集できます。

9VAeでイラストから動くアイコンがすぐ作れる 

• 9VAeきゅうべえを使えば、SVGイラストから絵をかかずに動くアイコンが作れます。１５万点以上のイラストを保有するOpenclipart が、2019年からサイトリニューアルのため見えなくなっているようですが、他にも多くのSVGイラストサイトがあります。いろんなアイコンをつくってみてください。

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

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

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

• 9VAeに関する質問（Yahoo知恵袋）
• よくある質問（Qiita）
• 本記事の文章、図、アニメは複製自由です。教材、解説記事にご利用ください。

 

 

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を編集し、NSAllowsArbitraryLoadsをYESとするとATSは無効化されます。

   

タイル塗りつぶし

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

  

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

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

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

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

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

キッズプラザ対応

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

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

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

macOS 64bit 版対応

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

SVG保存

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

タイル塗りつぶし

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

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

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

これを解決するために

• 保存先をファイル（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 で指定したフォルダの中の一番新しい日付フォルダをさがして、その中の作品を連続再生します。日付がかわると自動的に新しい日付フォルダに移るため連続運転が可能です。

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

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

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

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

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

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

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

macOSの種類と機種対応表はこちら（Macのアンチョコ）

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

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

64bit版移植の方針

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

• Cocoa
• CoreGraphics
• CoreFoundation
• CoreImage
• CoreMedia
• CoreText
• CoreVideo
• AVKit
• AVFoundation
•  

SKTGraphicView を Window全体に一致させる

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

• DrawWindow.nib のView の直下に SKTGraphicViewを移動
• Use Auto Layoutにチェック
• 上下左右値０の 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アプリの作り方

• Mac版をアプリストアに登録しようとすると、Sandboxアプリにしないといけないようだ。それに関するドキュメントは以下

  [Mac OS X] Sanbox下のファイルアクセス実装方法 - Qiita

NSURLConnection から NSURLSession への移行

Deprecated対応

• NSURLConnection から NSURLSession への移行例 - Qiita

Downloadファイルを開く方法

• UIDocumentPickerViewController

• 【iOS開発】iCloudにエクスポート/インポートする - TadaoYamaokaの日記

• iOS 11ファイルAppにDocumentsフォルダを表示して他のアプリと共有する方法 - Qiita

info.plist内に以下を追加し値をYESにするとファイルアプリでコピーできるようになるようだ

• UIFileSharingEnabled (Application supports iTunes file sharing)
• LSSupportsOpeningDocumentsInPlace (Supports opening documents in place)

Apple Silicon （Universal2）への対応

• Xcode 12.2 にすると、勝手にUniversal2 にしてくれるらしい。しかし、うかつにアップすると、プロジェクトがつくれなくなったりするので、慎重にやらんといかん。今の環境をおいておいて、古いMacに BigSur をいれて、試してみてからにすべき。移植のしかたのドキュメントは以下

• Apple Developer Documentation

Xcode 15にすると、'libarclite'が見つからないエラー

• Xcode 15にすると、Debugモードだとエラーが出ないが、Releaseモードにすると'libarclite'が見つからないというエラーがでるようになった。
• 対応バージョンを、macOS12(Monterey) 以上にするとエラーがなくなる。どうも旧バージョン(Intel)用のARC (Automatic Reference Counting)用のライブラリが削られているためらしい。Xcode14でないと、Intel用アプリがつくれないかも

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

アンドロイド版が、なかなか難しいので、先にiPhone/iPad版9VAeきゅうべえを作ることにした。iOS 10 （iPad第４世代）以上で動くように開発。iPhoneXが画面の上に凹みができたので、メニューバーの場所を変えないといかん。画面を横にした時、今まではどちらの方向も同じだったが、凹みがどっちかで、変更しないといかん。カメラロールへの保存方法が変わってる・・・ Android版9VAeの開発記事はこちら

iPhone実機デバッグ

• iPhone機種とiOSの対応表(Qiita)、最終バージョン表(アンチョコ)
• iOSのバージョンをあげると、Xcodeから実機デバッグできなくなることがあるので、自動アップデートにしてはいけない。一度バージョンをあげると元のバージョンにもどすことはできない。下位機種テストには中古でバージョンがあげられないものを入手しておくとよい
• 9VAeは、iOS10.0 から対応している（iPad 第４世代2012）

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で制約をつけると描画されなくなった。プログラムでサイズ変更することはできた。
• iPhoneとiPadでもステータスバーの表示が違うみたいだ。ステータスバー有る無しでレイアウトを変えないといかん。

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

• StoryBoardでの制約のつけかた。（１）制約をつけたいViewを選ぶ。（２）ボタン（３）左右はView、上下はSafeAreaを選ぶ（どのViewとの関係を制約にするか選べる）（４）最後に制約の追加ボタンをクリック。
• StoryBoardで制約をつけると、プログラムでViewのサイズ変更は不要になった。

カメラロールへの保存は、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"に置き換えられる。

ライブラリ作成

• iOSで自作したライブラリやSDKを公開する際に気をつけたいこと | SONICMOOV LAB

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

• BitBucketを使ってみる - tanaka's Programming Memo

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

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

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

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

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

• 今は使ってない。個人開発だと、ローカルでバックアップ複製とっておくほうが簡単。

iPhone 11 対応

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

• iOS 13における必須対応について

• uiwebview - How to Migrate to WKWebView? - Stack Overflow

bitcode 対応

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

• [iOS]bitcode対応のlibrary/frameworkを作成する - Qiita

iCloud drive

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

• [iOS 8] UIDocumentPickerViewController で iCloud ドキュメントを開く ｜ Developers.IO

ファイルで読み込めるようにする（iOS11以降）

以下の対応をいれればファイルアプリでダウンロードからデータ転送できるみたい

• iOS 11ファイルAppにDocumentsフォルダを表示して他のアプリと共有する方法 - Qiita

ApplePencil対応

• iOS: Apple Pencilから情報を取得する｜TechRacho（テックラッチョ）〜エンジニアの「？」を「！」に〜｜BPS株式会社

   

NSURLConnection から NSURLSession への移行

Deprecated対応

• NSURLConnection から NSURLSession への移行例 - Qiita

Downloadファイルを開く方法

• UIDocumentPickerViewController

• 【iOS開発】iCloudにエクスポート/インポートする - TadaoYamaokaの日記

• iOS 11ファイルAppにDocumentsフォルダを表示して他のアプリと共有する方法 - Qiita

info.plist内に以下を追加し値をYESにするとファイルアプリでコピーできるようになるようだ

• UIFileSharingEnabled (Application supports iTunes file sharing)
• LSSupportsOpeningDocumentsInPlace (Supports opening documents in place)

invalid context エラーの場所をさがす方法

• 実行中にコンテクストエラーメッセージがときどき発生した。このエラーが発生した場所をさがす方法は以下の記事が役に立った。

• invalid contextの場所を特定する - Qiita

•  xCode左のナビゲーションエディタを、ブレークポイントのタブに切り替えて、
  左下の+ボタンを押して、add symbolic breakpointを選びます
  そしてSymbolに、CGPostErrorと入力

info.plistの多国語対応

• infoPlist.strings を各言語で作成。左側のキーワードは、info.plist の xml タグ名をかく
• 例：写真アクセス＞　

  NSPhotoLibraryUsageDescription="写真の読み込み/GIF,MP4保存";

Mac Catalyst

Mac Catalyst に対応すると、Macでも動くようになる

• Scale interface to match iPad
• Creating a Mac Version of Your iPad App

• Apple Developer Documentation

AppStoreへの登録手順

Apple Connect で審査用紙を作成

1. https://appstoreconnect.apple.com/

2. アプリを選ぶ
3. iOS APP +  をクリックし、次のバージョン番号を入力
4. このバージョンの最新情報（日本語、英語）を入力
5. プロモーション用テキストを前のバージョンからコピー（日本語、英語）

XCode

1. Project > Target にバージョン番号を設定
2. Project > archive を実行し、バージョンなどをチェック

実機テストができたりできなかったりする

• entitlement の中に Apple developement があると、テストできないが、このキーを除くとテストできることがあった。以下が関係しているかも？　　

• What is a provisioning profile & code signing in iOS? | by Abhimuralidharan | Medium

• iPhone や iPad の OS バージョンをあげると、Xcode が未対応で実機デバッグできなくなった。macOS を Big Sir にあげたくない場合は、実機 iOS のバージョンをあげてはいけない。

M1 Xcode でシミュレータ用ライブラリを作る方法

• M1 Xcode でシミュレータで動作テストするとき、「i386, x86_64 がライブラリにない」エラーがでた場合、プロジェクト＞ Build Setting ＞ Excluded Architectures に「i386 x86_64」を入れると実行できる。もともと シミュレータが Intel で動作していたため、Intel用コードを作成しようとして失敗しているもよう。Intel用コードを作らないように設定する。
• M1のシミュレータ用ライブラリは、arm でよいが、シミュレータと iOS用ライブラリは異なる。そのため違う名前で作成する。
• テストプロジェクトでは、iOSとシミュレータと異なる名前のライブラリをリンクする。その設定は、プロジェクト＞ General ＞Frameworks, Library で、iOS用ライブラリをシミュレータと実機で切り替える（どちらも iOSで両方書くことができない）XCFramework をつかうとできるらしい

iOS 15 でカーソルキーが効かない問題

• iOS 15 でカーソルキーが効かなくなった。以下のように　wantsPriorityOverSystemBehavior　の設定が必要。keyUp, keyDown, keyLeft, keyRight はキーを押したときの処理
• if (@available(iOS 11.0, *))をいれておかないと、iOS 10 で落ちた。
• 修正には、Xcode 13 （Big Sur以上）が必要

＜修正前＞

    
- (NSArray *)keyCommands { 
  return @[ 
    [UIKeyCommand keyCommandWithInput: UIKeyInputUpArrow modifierFlags: 0 action: @selector(keyUp)], 
    [UIKeyCommand keyCommandWithInput: UIKeyInputDownArrow modifierFlags: 0 action: @selector(keyDown)], 
    [UIKeyCommand keyCommandWithInput: UIKeyInputLeftArrow modifierFlags: 0 action: @selector(keyLeft)], 
    [UIKeyCommand keyCommandWithInput: UIKeyInputRightArrow modifierFlags: 0 action: @selector(keyRight)] 
  ]; 
}

＜修正後＞

- (NSArray *)keyCommands { 
  UIKeyCommand *ukey = [UIKeyCommand keyCommandWithInput: UIKeyInputUpArrow modifierFlags: 0 action: @selector(keyUp)]; 
  UIKeyCommand *dkey = [UIKeyCommand keyCommandWithInput: UIKeyInputDownArrow modifierFlags: 0 action: @selector(keyDown)]; 
  UIKeyCommand *lkey = [UIKeyCommand keyCommandWithInput: UIKeyInputLeftArrow modifierFlags: 0 action: @selector(keyLeft)]; 
  UIKeyCommand *rkey = [UIKeyCommand keyCommandWithInput: UIKeyInputRightArrow modifierFlags: 0 action: @selector(keyRight)]; 
  if (@available(iOS 11.0, *)) if(@available(iOS 15.0, *)){ 
    ukey.wantsPriorityOverSystemBehavior = YES; 
    dkey.wantsPriorityOverSystemBehavior = YES; 
    lkey.wantsPriorityOverSystemBehavior = YES; 
    rkey.wantsPriorityOverSystemBehavior = YES; 
  } 
  return @[ ukey, dkey, lkey, rkey ]; 
}

iCloud対応

• 参考記事
• iOSでのファイル保存
• iCloud Documentをつかうのがよさそう。
• 有料のDeveloperAcountがないと開発できないらしい。Cloud capabilityを追加するみたい

iOS版にカラーピッカーをつける

• iOS14 ではカラーピッカーがあるみたい

しゃべる機能をつける

• AVSpeechSynthesizer < Macは、NSSpeechSynthesizer 。MacのNSSpeechSynthesizerはsleep(1)の間に動作するが、AVSpeechSynthesizerは動かない
• AVSpeechSynthesizer の出力をファイルにおとす方法(obj-c)
• 終了検出   デリゲートをつかう

シェイクモーション

• iPhoneをふるとメニューがON/OFFする機能をつけた。実装方法は以下の命令を ViewControrer にいれる

// シェイクモーションの開始を検知
- (void)motionBegan:(UIEventSubtype)motion withEvent:(UIEvent *)event {
    if (event.type == UIEventTypeMotion && event.subtype == UIEventSubtypeMotionShake) {
        //NSLog(@"シェイクが開始されました。");ここに実行命令をいれる
    }
}

// シェイクモーションの完了を検知
- (void)motionEnded:(UIEventSubtype)motion withEvent:(UIEvent *)event {
    if (event.type == UIEventTypeMotion && event.subtype == UIEventSubtypeMotionShake) {
        //NSLog(@"シェイクが終わりました。");
    }
}  

GameCenter のビルドエラー対応

• 2023年８月から、アプリストアに登録するときに、勝手に GameCenter 属性がつくようになり（ゲームでないのに）、ゲーム用情報入力が求められるようになりました。ひどい。解説記事
• GameCenter 設定をOFFにする設定を entitlement に追加する必要があります。
  <key>com.apple.developer.game-center</key>
  <false />
• 上をいれてもエラーがなくならない場合、Xcode > 左一番上＞Signing & Capability タブで、左上の「+Capability」から「Game Center」をドラッグして右側に追加すると、ビルドエラーがでなくなりましたが、GameCenterがONに書き換えられました。

  

• GameCenterをOFFに戻すとエラー。アプリIDと矛盾という意味か？

「目パチ」 が作れる無料アプリ：9VAeきゅうべえ

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

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

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

• Android / Chromebook：9VAeきゅうべえAndroid版、9VAeDangla
• iPad / iPhone：9VAeDanga (Apple)、9VAePro (Apple)
• Win / Mac / Linux：無料ソフトでアニメを作ってみよう - Qiita
• Amazon Fire : 9VAeきゅうべえFire版 (Amazon)
• 9VAeのボタン説明、メニュー/キー

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

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

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

 

２. アニメキャストの中身を保存（スマホの場合）

よみこんだイラストはアニメキャストという部品のアニメになります。静止画として使う場合はアニメキャストにしておくほうが便利ですが、動きをつけたい場合は、アニメキャストの中身を開きます。

 

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

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

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

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

（１）点の数を減らす

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

（２）続きのページをつくる

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

（３）ページの間に空白ページをいれる

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

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

４．不要な点を削除してパーツをつくる

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

（１）不要な点を選んで削除する

• 図形を選んでをタッチすると点が表示されます。

• の「＋」で拡大。スマホ版では、ピンチ操作で拡大縮小、２本指で場所の移動ができます。

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

  

（２）シフトキーを押して点を削除し、パスを結合する

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

  

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

  

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

  

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

• 

５．最初のページを背景にする

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

1. 先頭ページの左側の「＜」をタッチ。メニューから「背景ページを入れる」
2. ２ページに移動。全体を選ぶ。

3. 左ページにコピーするボタンをタッチ。これで２ページの内容が背景ページにはいります。

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

   

６．まつ毛の下にまぶたを入れる

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

1. ３ページに移動。まぶたを選んで、をタッチ。きおくツールにまぶたを移動します。

2. ２ページに移動。をタッチ。元の図形と重ならないようにするため、メニューから「複製する」をタッチ。これで新しいまぶたがまつ毛の上に重なります。

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

   
   
   

７．続きのページを追加

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

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

８．まぶたを閉じたところを作る

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

  

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

• をタッチし、点を表示し、まぶたの下の線を下のように変形します。

  

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

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

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

   

１０．背景の上のまつ毛を消す

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

１１．アニメGIF出力

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

 

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

１３．SVGアニメ

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

１４．完成したSVGアニメの読み込み

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

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

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

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

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

• 9VAeに関する質問（Yahoo知恵袋）
• よくある質問（Qiita）
• 本記事の文章、図、アニメは複製自由です。教材、解説記事にご利用ください。

 

 

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

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

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

 

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

• Win/Mac/Linux：無料ソフトでアニメを作ってみよう（9VAe きゅうべえ） - Qiita
• アンドロイド：9VAeきゅうべえAndroid版（Google Play）
• iPad / iPhone：9VAeDanga (Apple)、9VAePro (Apple)
• 9VAeのボタン説明

9VAeきゅうべえの使い方

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

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

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

 

２. アニメキャストの中身を保存（スマホの場合）

よみこんだイラストはアニメキャストという部品のアニメになります。静止画で使いたい場合はアニメキャストにしておくほうが便利ですが、動きをつけたい場合は、アニメキャストの中身を開きます。

 

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

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

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

３. 続きのページを作る

1. ページの右側のをタッチ。メニューから「続きのページを作る」。これで１ページが２ページにコピーされます。

３. 涙を下に移動

（１）点を選ぶ

1. 図形を選んでをタッチすると点が表示されます。

2. の「＋」をタッチして拡大し、涙の点を囲んで選びます。パソコンの場合、Ctrlキーを押しながら画面をドラッグすると青い線で囲んで選べます。

   

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

（２）涙を下に移動

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

４．顔を下に向ける

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

  

  中心の「＋」をタッチ。メニューから「ゴム変形」をタッチ。画面下にドラッグすると顔が下を向きます。これで完成。

• プレイボタンで再生してみてください。

５．アニメGIF出力

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

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

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

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

• これで、MP4ファイルが保存できます。

 

７．完成したSVGアニメの読み込み

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

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

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

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

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

• 9VAeに関する質問（Yahoo知恵袋）
• よくある質問（Qiita）
• 本記事の文章、図、アニメは複製自由です。教材、解説記事にご利用ください。