iPhone
Xcode
プログラミング
アニメーション
9VAe

9VAeきゅうべえ iPhone/iPad 版の作り方

SVGイラストから簡単にアニメが作れるソフト9VAeきゅうべえの iPad/iPhone版は、GitHubに公開されている 9VAeLib ライブラリを使って自分で作ることができます。作り方と使い方を説明します。

Xcodeを使ったプログラミングに興味のある方もお試しください。

9VAe iPhone版スクリーンショット

9VAeきゅうべえ iPad/iPhone版の作り方

必要なもの

  • Macintosh パソコン
  • Xcode Appストアから入手(無料)AppleIDが必要
  • iPhone または iPad
  • USB接続ケーブル
  • 9VAeLibプロジェクト(https://github.com/dnjiro/9VAeLib

1. Xcode(無料)の入手

  1. App Store App Storeアイコンを起動
  2. xcode を検索
  3. Xcode xcodeの「入手」ボタンをクリック。[APPをインストール]をクリック。
  • Xcodeを入手するためには、AppleID の登録が必要です。
  • かなりディスクを消費します。また古いMacだとインストールできません。インストールに時間がかかるので寝る前に入手すると良いでしょう。

2. 9VAeLibプロジェクトの入手

  1. ブラウザで、GitHub https://github.com/dnjiro/9VAeLibを開く
  2. Clone or downloadボタン、Download ZIPボタンをクリック。Macにプロジェクトがダウンロードされます。
  3. ダウンロードしたZIPを解凍すると、「9VAeLib-master」ができます。これをデスクトップなどに複製してください。
  4. 中にある「ios」フォルダの中の9VAe.xcodeprojをダブルクリック。
  5. 初めてXcodeを起動した場合は「Agree」をクリックし、Xcodeのインストールを完了させます。XcodeのWelcome画面が開いたら一旦Xcodeを閉じて、もう一度、9VAe.xcodeprojをダブルクリックしてください。
  6. ダウンロードしたプロジェクトを開いても良いかとの確認に「Open」ボタンをクリックすれば、9VAeの設定画面が開きます。
  7. Xcodeの上にある右向き▶︎ボタンがプログラム作成と実行ボタンです。右向き▶︎ボタンをクリックし、初回だけ「Enable」をクリックし、しばらく待つとシミュレータが起動し、9VAeが実行されるはずです。
  8. シミュレータで9VAeが起動したら「Help」メニューをクリック。「変身」をクリック。プレイボタンプレイボタンをクリックすればアニメーションが見えるでしょう。IMG_0043.GIF

3. iPhone/iPad実機で 9VAeを実行する

  1. 実機(iPhone/iPad)とMacをUSBケーブルで接続します。
  2. 実機に「このコンピュータを信頼しますか」が表示されたら「信頼」をタッチ。
  3. Xcodeを起動していなければ、プロジェクトのiosフォルダの中の「9VAe.xcodeproj」9VAe.xcodeprojをダブルクリックしてプロジェクトを開く。
  4. 設定画面の「Signing」の「Team:Add Account...」Team:Add Amount...

をクリックし 自分のAppleIDを登録し、Team欄に自分のAppleIDを設定します。もしこの画面が表示されていない場合、左端のボタンをクリックし「9VAe」をクリックしてください。設定画面の出し方

5. 次にプログラムの実行をシミュレータから実機に切り替えます。Xcodeのメニュー「Product」から「Destination」、「Device欄 iPhoneまたはiPad」を順番にクリックします。
6. Xcodeの左上の「右向き三角▶︎」ボタン右向き▶︎ボタンをクリックすればプロジェクトがビルドされ、実機に9VAeアイコン9VAeアイコン
が転送されます。ただしまだ実行できません。実機でアプリの認証が必要です。
7. 実機(iPhone/iPad)のトップ画面にある「設定」アイコン「設定」アイコン
をタッチ、「一般」「デバイス管理」を順番にタッチ。上で入力した自分のAppleIDが見えるはずなので、タッチ「信頼する」「信頼」をタッチ。これで実機でデバッグできるようになります。
8. もう一度、Xcode上の「右向き三角▶︎」をクリックすれば、9VAeきゅうべえが起動するはずです。失敗した時はもう一度クリックしてみてください。

9VAeきゅうべえ iPhone/iPad版の使い方

iPhone版9VAeの操作方法を紹介します。

  • iPhoneは画面が小さいため、メニューが半分外に出ています。画面左中央にあるメニューを中に入れるを押せばメニューが全部表示され、メニューを半分外に出すをクリックすれば半分になります。
  • 2本指のピンチイン、ピンチアウトで画面を拡大縮小できます。
  • 2本指スクロールで、画面の表示範囲をスクロールできます。

1. 書き順アニメの作り方

  1. 「File」メニュー「新規作成」をタッチ
  2. 画面上部の1.鉛筆ボタンをタッチ。「OK」をタッチ
  3. 画面上に絵や文字を自由に書きましょう。右側のパレットで線の太さや色を変更できます。線の太さ、線の色
  4. 間違えた場合は左下の取消で取消しできます。
  5. 書き終えたら1.鉛筆ボタンをもう一度タッチします。これで書き順アニメが完成です。

2. アニメGIFの作成

  1. 「File」メニュー「アニメGIF出力」をタッチ
  2. ここで画面サイズや1秒のコマ数を設定できます。
  3. 「OK」をタッチし、しばらく待てば、カメラロールにアニメGIFが保存されます。なお、書き順アニメは最初は白紙なので真っ白な画像になります。

3. アニメGIFを見る方法

  • iPhoneのカメラロールではアニメGIFが動きません。無料アプリ「GIF Viewer」を使うと良いでしょう。
  • GIF Viewerを起動すればカメラロールの中の GIFアニメを読み込んでくれます。再生できますし、Twitterに投稿することもできます。

4. SVGイラストから GIFアニメを作る

9VAeきゅうべえ iPhone/iPad版は、openclipart の10万点以上のフリーのSVGイラストや、WMFイラストを読み込んでGIFアニメを作ることができます。

URLアドレスをコピー

  1. SafariSafari で、openclipart(https://openclipart.org)を開きます。
  2. 例として 268357番のイラスト(https://openclipart.org/detail/268357)を読み込んでみましょう。イラストの上を長押しし、リンク先(SVGファイル)を「コピー」します。リンク先をコピー
  3. 9VAeきゅうべえをもう一度起動し、「Input」メニュー「SVGをダウンロード」をタッチ。
  4. アドレス入力欄を長押しすれば「Paste」と表示されるので、タッチして、SVGイラストのURLアドレスを入力します。Pasteスクリーンショット 2017-11-25 17.34.45.png
  5. 「OK」ボタンを押せば、SVGイラストが9VAeに読み込まれます。イラストが9VAeに読み込まれたところ

SVGイラストの画面サイズ設定

  1. SVGイラストを読み込むと、アニメキャスト(パーツアニメ)として読み込まれます。この状態でイラストをパスに沿って移動できますが、アニメを作るには、イラストの中を修正します。イラストを選んで表示される中心の「+」をタッチし、「アニメ(shishi.svg)を修正」をタッチ。イラストの中身が開きます。
  2. 左下の虫眼鏡ボタン虫眼鏡ボタンをタッチすれば、イラスト全体が見えます。
  3. もし全体が見えなかったら、「File」メニュー「ページ設定」で画面サイズを「2048 x 2048」に変更してもう一度虫眼鏡をタッチしてみてください。画面サイズ

続きのページを作成

  1. 上の2.ボタンをタッチ。「続きのページを作る」をタッチ。これで2ページができます。

2ページの獅子の口を開けて口を動かすアニメを作ってみましょう。そのためには、アゴと一部の歯だけ選んで変形する必要がありますが身体が一緒に選択されてしまうため、選択されないように登録して隠します。

身体と模様だけ選ぶ

  1. 身体と模様を選んでから、点追加ボタン点追加ボタンをタッチ。図形全体がグループ化されているため、イラスト全部の点が表示されます。
  2. 身体と模様の一部の点の周りを線で囲むように指で書いて選びます。身体と模様の一部の点を選ぶ
  3. ここで、もう一度点追加ボタン点追加ボタンをタッチすれば選んだ点が含まれる図形だけが選ばれます。身体と模様だけが選ばれる

選択の邪魔になる図形を登録して隠す

  1. メニューを中に入れるをクリックしてメニュー全体を表示。
  2. 登録パレットの「+」登録パレットの「+」をタッチ。これで選んだ身体と模様がパレットに登録されます。
  3. 登録されたパレット登録されたパレットをタッチ。「隠す」をタッチ。これで身体と模様が見えなくなります。

下の歯とアゴを選択して口を開ける

  1. 同様にして下の歯とアゴだけ選びます。選択ボタン選択ボタンをタッチし、指で歯とアゴを選び、点追加ボタン点追加ボタンをタッチすれば点が表示されます。
  2. 下の歯とアゴの点の一部を線で囲むようにして選び、もう一度点追加ボタン点追加ボタンをタッチ。これで歯とアゴだけ選ばれた状態になります。歯とアゴだけ選ばれた状態
  3. メニューを半分外に出すをクリックして画面を拡大し、下の歯とアゴの点だけ線で囲んで選び、ドラッグして下に移動させます。これで口を開けることができました。スクリーンショット 2017-11-25 20.12.59.png

1ページに往復命令を入れる

  1. 前のページに移動するボタン前のページに移動するボタンをタッチして1ページに移動
  2. 「Input」メニュー「往復」をタッチ。往復命令を1ページに入れれば、1ページと2ページの間を往復します。
  3. プレイボタンを押してアニメを見て見ましょう。ストップボタン■を押せば止まります。プレイストップ

アニメGIF作成:無限ループの場合は時間を入れる

  1. アニメGIF出力するには、「File」メニュー「アニメGIF出力」をタッチします。
  2. 無限ループの場合は、時間の設定が必要です。この例では、1往復が2秒ですので、2を設定します。アニメGIF出力画面サイズは、2048x2048は大きすぎるので、400x400程度にするのが良いでしょう。「OK」ボタンをタッチしてしばらく待てば、カメラロールにアニメGIFが保存されます。

IMG_0003.GIF

身体と模様を選んで重なり順を下げる

アニメをよく見ると、身体の模様が口の上に残っています。元のイラストでは、模様と口が離れていたので、重なり順序が考慮されていなかったのですね。これは模様を選んで重なり順序を下にさげれば修正できます。

身体と模様は、2ページで登録されているので、それを使って簡単に選択できます。

  1. 2ページをタッチして2ページに移動。
  2. メニューを中に入れるをクリックしてメニュー全体を表示。
  3. 登録されたパレット登録されたパレットをタッチ。「選択する」をタッチ。これで身体と模様が選ばれます。シフトボタンシフトボタンをタッチすれば何が選択されているかわかります。
  4. メニューを半分外に出すをクリックして画面を拡大しましょう。
  5. 左側の重なり順序を下げるボタン重なり順序を下げるボタンを何回かタッチ。これで模様が口の下になります。
  • プレイボタンをタッチして再生してみればわかるのですが、1ページの重なり順序も下げる必要があります。これは1ページから2ページに変化するまでは、1ページの重なり順序が適用されるためです。
  1. 身体と模様は選ばれた状態で1ページに移動します。
  2. 重なり順序を下げるボタン重なり順序を下げるボタンを何回かタッチ。これで1ページの模様も口より下になります。プレイボタンプレイボタンをタッチしてみてください。
  3. アニメGIFをもう一度出力すればよいでしょう。

このように、9VAeきゅうべえは、途中の絵を描かなくて良いので簡単にアニメが作れます。

顔と胴体を別々のパーツに分けて動きをつけていけば、より面白い動きを作れるでしょう。身体を動かしてみたり、いろんな変化をつけてみてください。色も変化させられます。Openclipartのイラストはフリーデータなので、アニメ作品として自由に発表して構いません。

5. 9VAeきゅうべえ iPhone/iPad版の改良

9VAeきゅうべえのプロジェクトを修正すれば、画面デザインや「Help」メニューの中のサンプルアニメを差し替えることができます。
アニメソフト 9VAe をカスタマイズする方法」が参考になるでしょう。

キッズバージョンへの変更

  • 起動時のオプションを変更すれば、キッズバージョンに変更できます(Ver.0.4.14 ビルド1215以降の9VAeLibが必要)
  • 画面タッチのメニューがひらがなになります。
  • どのページでも「1.」ボタンを押せば書き順アニメが作れるようになります。書き順アニメの4コマ漫画が作れます。
  • 「2.」ボタンメニューから「続きのページを作る」がなくなります。もし「続きのページを作る」をしたければ、全部の図形を選択してから、次ページへのコピーボタンスクリーンショット 2017-12-15 12.28.01.png をタッチしてください。

キッズパージョンに変更するには、プログラムを2箇所修正します。

  1. Xcode プロジェクトを開き、左側の欄のQvaeView.m をクリック。QVAVIEW QvaeView.m が9VAeの画面を管理する Objective-C のプログラムです。
  2. (void)qvaInit という関数を探し、次の2行を見つけてください。2行修正 もし見つからなければ、9VAeLibプロジェクトの最新版を取得してください。
  3. 先頭の「//」を2箇所削除し、次のようにします。
[self askType:qVAnHIRAset];       //Set Language to Hiragana(Japanese)
[self askType:qVAnDRAWONset];     //Drawing sequence Animation Mode ON
  • 「//」はコメントのマークでこれを削除することで2つの命令が有効になります。
  • [self askType:qVAnHIRAset]; は画面表示を「ひらがな」にする命令です。
  • [self askType:qVAnDRAWONset];は書き順モードにする命令です。これらは、QvaeDef.h というファイルで定義されています。

Xcodeの上の実行ボタン右向き▶︎ボタンをクリックして実行してみてください。「2.」をタッチするとひらがなで「からのページをつくる」と表示されるはずです。

キッズバージョンは、小学校低学年向けに開発されたもので、キッズプラザ大阪のワークショップで使われます。


関連記事

9VAeきゅうべえ のご紹介

  1. 無料ソフトでアニメを作ってみよう(9VAe きゅうべえ)
  2. インストール方法
  3. スクラッチ、ビスケットの次は 9VAe=第3のプログラミング学習環境
  4. 9VAeきゅうべえを無料にする理由
  5. よくある質問
  6. 印刷用マニュアル

9VAeきゅうべえ 初級編

  1. 9VAe チュートリアル(1)ーページでタイムラインなし
  2. 9VAe チュートリアル(2)ー図形入力、選択、移動、サイズ変更
  3. 9VAe チュートリアル(3)ーアニメキャストを作る、時間調整
  4. 9VAe チュートリアル(4)ーアニメキャストの修正、往復
  5. 9VAe チュートリアル(5)ー動きグラフ、ページコピー、GIF作成
  6. 書き順アニメーションの作り方
  7. 9VAeきゅうべえ:長いアニメを作る方法

9VAeきゅうべえ 上級編

  1. AviUtil と 9VAeきゅうべえを使った簡単アニメ動画作成
  2. 動くLINEスタンプのAPNG作成:無料ソフト9VAeきゅうべえ
  3. 萌えキャラ デジたんを目ぱちさせるまで:APNGアニメの作り方
  4. openclipartの無料イラストをアニメ化する6つの手順
  5. イラストから動くLINEスタンプのようなアニメを簡単に作る方法
  6. 青少年のための科学の祭典で行った100名の連作アニメの作り方
  7. フリーソフト9VAeきゅうべえで簡単デジタルサイネージ
  8. Openclipart の 無料SVG をアニメにするテクニック
  9. 無料アニメソフト9VAeきゅうべえの裏技集

9VAeきゅうべえ サンプル作品

  1. 9VAeきゅうべえ」で絵を描かずに作れるGIFアニメ
  2. 9VAeきゅうべえで作成したSVGアニメーション

9VAeきゅうべえ 技術資料

  1. アニメソフト 9VAe をカスタマイズする方法
  2. イラストレータのデータを 9VAe(きゅうべえ)に変換する方法
  3. 9VAeをキッズプラザ大阪向けに改造する
  4. 9VAeきゅうべえにテクスチャを追加する
  5. 9VAe / 9svg データフォーマット解説
  6. ワコム筆圧ペンで太さが変わる線をひくアルゴリズム

ラズベリーパイ・Linux 資料

  1. Raspberry Pi 設定メモ、ワコムペンタブレットのつなぎ方
  2. ラズベリーパイを使ったWiFiローカルサーバーの作り方
  3. Raspberry Piとペンタブレットで毛筆描画アプリを作る
  4. Xtra-PCを日本語化して使ってみた
  5. OpenCV と Python を使ったアニメーション動画用紙のスキャン画像位置合わせ