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）
• 本記事の文章、図、アニメは複製自由です。教材、解説記事にご利用ください。

 

 

細かい操作マニュアルが作れる無料アプリ：9VAeきゅうべえ

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

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

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

www.youtube.com

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

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

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

解説アニメの構造

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

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

２ページ（書き順アニメの入力）の中には以下のような８ページのアニメが入っています。

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

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

動くマニュアルの作り方

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

内容：

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

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

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

２．アニメキャスト（アニメーションの部品化）

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

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

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

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

３．アニメキャストの作り方

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

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

４．背景にアニメキャストを入れる

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

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

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

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

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

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

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

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

８．日本語と英語の文字の切替え

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

まとめ

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

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

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

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

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

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

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

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

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

9VAeきゅうべえの使い方

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

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

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

 

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

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

 

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

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

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

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

  次のようにします。

（１）点を選ぶ

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

（２）登録パレットに登録して隠す

1. 右側のをタッチ。選んだ図形がパレットに登録されます。

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

（３）追加したい点を選んで、登録パレットに「追加登録する」

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

   

   登録パレットに図形を登録しているところ

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

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

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

  

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

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

1. 右側の回転リールの点だけ選択。をタッチし、回転リールだけが選ぶ。

   

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

   
   

2. をタッチ。これで回転リールがきおくツールに移動します。

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

4. をタッチして後から選択しやすいよう登録。

６．回転するリールをつくる

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

   

   
   

７．９秒で時計周り逆回転させる

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

1. 回転リールをタッチ。選択の枠の中心「＋」をタッチ。メニューから「枠の角度０（時計回り）」をタッチ
2. 「3600」と入力。これで回転リールが3600度回転した状態になります。
3. ページの右側の をタッチ。メニューから「続きのページを作る」をタッチ。２ページめができます。
4. ２ページの回転リールをタッチ。選択の枠の中心「＋」をタッチ。メニューから「枠の角度3600（時計回り）」をタッチ
5. 「0」と入力。これで２ページでは0度回転した状態になります。
6. １ページの時間「１秒」をタッチ。メニューから「１秒長くする」を８回タッチして９秒にします。
7. ボタンで回転するようすを見てください。

   

   １ページを９秒3600回転、２ページを０回転に設定したところ

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

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

９．重ね順序の調整

1. をタッチ。これで「隠す」がリセットされ、全体が見えます。

2. テープを選んで、 をタッチし重ね順序を調整します。
   
   
3. 重ね順序の調整ではうまくいかないので、をタッチし、下のような凹型多角形を描きます。

   

   テープを隠すために多角形を入力。あとで色をつける。

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

   

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

   
   
   

１０．９秒かけて再生し、１秒で巻き戻すアニメをつくる

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

1. ページの右側の をタッチ。メニューから「続きのページを作る」をタッチ。２ページめを作ります。
2. １ページの左側のテープを選択して拡大し、右側のテープを選択して縮小します。
3. ２ページでは、左側のテープを縮小します。
4. １ページのページ番号「１」をタッチ。メニューから「ページを記憶する」をタッチ。これで記憶ツールに１ページがはいります。
5. ２ページの右側の をタッチ。メニューから「記憶したページを入れる」をタッチ。これで３ページができます。
6. ２ページの時間を１秒、３ページの時間を０秒にしましょう。

7. ボタンで動きをみてください。

   

   ２ページの内容

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

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

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

   

   最初はゆっくり、だんだん速くなる動きグラフ

4. また１秒で巻き戻しを行う２ページについて。回転がはやくてリールが見えないとして、中心に白い円をかぶせます。
5. ステージの上の太字「mixtape.svg」をタッチ。メニューから「このアニメにもどる」をタッチ。で動きをみてください。

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

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

   

   最初は速く、だんだんゆっくりになる動きグラフ

6. 元のアニメにもどって、で動きをみてください。

１３．アニメGIF出力

• ファイルメニュー＞「アニメGIF出力」で、好きなサイズのアニメGIFが作成できます。画像サイズが大きい場合や、秒間のコマ数が多いと作成に時間がかかります。
• 完成したファイルは、Androidの場合は、端末内の「9VAe」フォルダの中に「mixtape.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）
• 本記事の文章、図、アニメは複製自由です。教材、解説記事にご利用ください。

 

 

9VAeきゅうべえアンドロイド版で年賀アニメを作成

年賀アニメを作ってみました。9VAeきゅうべえアンドロイド版でもPC版、iPad版でもつくれます。製作時間は３０分くらいで、絵がうまくなくてもできます。作成方法を説明しましょう。

ほかのアニメの作り方はこちら。年賀アニメ：2024龍、うさぎ、 とら、うし、ねずみ、いのしし。

9VAeダウンロード

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

9VAeきゅうべえの使い方

猪のSVGイラストをOpenclipartから取得

1. こちら Openclipart - boar を使うことにしました。Openclipartは商用利用可能なSVGイラストサイトです。
2. boar（猪）を検索するとたくさん出てくるので、これを使うことにしました。

3. 

4. このページにある「Download」ボタンを長押しすると、メニューが表示されるので「リンクアドレスをコピー」をタッチします。

 

9VAeアンドロイド版でSVGイラストを開く

1. 9VAeきゅうべえアンドロイド版を起動
2. ツールメニュー＞「ネットからダウンロード」
3. httpアドレス入力欄を長押し＞「貼り付け」。これで上でコピーした猪のSVGアドレスが入力されます。
4. 左下の虫眼鏡ボタンで全体が表示されます。これをアニメーションにします。

   

   パソコン版9VAeきゅうべえの場合はいったんダウンロードしてから、読み込んでください。
5. 読み込んだ状態では、アニメキャスト（パーツアニメ）になっており、中身が編集できません。
6. 選択枠の中心の「＋」をタッチ。メニューから「アニメ（ｘｘｘ）を修正」をタッチ。これでSVGの中身が開きました。
7. ねんのため、ファイルメニュー＞「名前を付けて保存」で「boar」と名前をつけて保存しておきましょう。
8. ファイルメニュー＞「閉じる」。ファイルメニュー＞「開く」で「boar.svg」を読み込んでみてください。

地面を背景にする

猪を走らせたいので地面を分離します。

1. １ページの左側の「＜」をタッチ。メニューから「背景ページを入れる」をタッチ。
2. ２ページをタッチ。猪をタッチし、をタッチ。これで背景ページに猪がはいります。
   
   
3. １ページと２ページの間の「＞」をタッチ。「空白ページを入れる」をタッチ。これで１ページと３ページのリンクが切れるので、背景ページの点を自由に削除できるようになります。
4. １ページの背景をタッチ。猪をタッチして選び、点選択ボタンをタッチ。地面以外の点を選んで、削除ボタンをタッチして消していきます。
   

   
   

5. 細かい部分はの「＋」で拡大し、地面以外の点を削除します。

6.  背景の猪を消したら、３ページに移動し、地面の点を削除します。

地面をスクロールさせる

1. １ページの「背景」の文字をタッチ。「スクロール→」をタッチ

   

2. ２ページは不要なのでページ番号「２」をタッチし「ページを切り取る」をタッチ

3. をタッチすると地面が右に動くのが見えるでしょう。

猪の足や尾を変形

1. ２ページの右側の をタッチ。「続きのページを作る」。これで２ページが３ページにコピーされます。
2. 前足を選択し、選択枠の下の■をタッチ。「のばす」をタッチし、画面をドラッグして足の形を変えます。

   

3. 同様にほかの足や尾を動かします。
4. 全体を選択し、中心の「＋」から「ゴム変形」や「移動」なども使いました。

   

２ページに「往復」を入れて時間調整

1. ２ページに移動し、ツールメニュー＞「往復」
2. ２ページの時間をタッチし、「0.1秒短くする」をタッチ。2ページの時間を0.2秒に設定。

   

3. 尾が切れているので、ファイルメニュー＞「ページ設定」で横幅を拡大します。
4. 上書き保存でパーツの作成完了

１コマアニメーションで「猪突爆進」と入れる

1. ファイルメニュー＞「新規作成」
2. １コマアニメ作成ボタンをタッチ。okをタッチ
3. 「猪突爆進」と書いて、もう一度をタッチ。これで１コマアニメの完成。
4. 文字の形が気に入らない場合は点選択して形を修正できます。
5. ファイルメニュー＞「名前を付けて保存」で、「boartitle」と名前をつけて保存します。

パーツアニメを合成

1. ファイルメニュー＞「新規作成」
2. ツールメニュー＞「9VAeアニメを入れる」で「boar.svg」「boartitle.svg」を入れてレイアウト。
3. 画面サイズはファイルメニュー＞「ページ設定」で調整。
4. ページの時間を調整。文字タイトル「boartitle.svg」を選んでからページの時間をタッチすれば、タイトルを表示する時間（boartitleの時間）が表示されます。（猪「boar.svg」を選んだ場合、無限ループなので時間は表示されません。）
5. ファイルメニュー＞「名前を付けて保存」で、「boarmain」として保存。
6. 再生してみると、背景がスクロールしません。

実は、パーツアニメ（アニメキャスト）の中のスクロールは無視されるのです。そこで背景スクロールページを「boarmain」に移動させます。

きおくツールを使って背景ページを親のアニメに移動させる

1. アニメキャスト「boar.svg」を選択
2. 中心の「＋」をタッチ。「アニメ（boar.svg）を修正」をタッチ
3. 背景ページのページ番号「１」をタッチ。「ページを切り取る」をタッチ。これで背景スクロールページが右側のきおくツールにはいりました。
4. 太字 boarmain.svg > boar.svg の「boarmain.svg」をタッチ。「このアニメにもどる」をタッチ。boarmain に戻ります。
5. １ページの左側の「＜」をタッチ。「記憶したページを入れる」をタッチ。これで背景スクロールページがはいります。
6. 地面の場所を猪にあわせて移動させます。
7. スクロールページに書き込みをすれば、スクロールします。スクロールの方向、スピードはスクロールの矢印の向き、長さで調整できます。

アニメGIF出力

1. ファイルメニュー＞「アニメGIF出力
2. 画面サイズ、秒間コマ数を設定して「OK」。すこし時間がかかります。
3. 内部の「9VAe」フォルダとカメラロールのなかにアニメGIFができます。

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

 

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

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

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

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

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