ガンズターン 公式サイト

楽しいことに、まじめです。 ——ガンズターンアプリ研究所公式サイト

無料でAppストア用の動画を作成する方法について(ぱずもぐ備忘録5回目)

Pocket

ひとまず「ぱずもぐ備忘録」の最終回とします

お疲れ様です。ガンズターンのRyosukeです。
ぱずもぐの申請を出してからもう4日が経過しました。(まだWaiting For Reviewです)
その間、とにかく鉄は熱いうちに打てとばかりに書き続けてきた「ぱずもぐ備忘録」も5回を数える今回の記事でひとまず最終回にしたいと思います。

これまでに書いた記事を一度おさらいしておきますね。

  1. アプリ1つ作るのに、たった一人でやらなきゃならなかったことリスト
  2. In-App-Purchase(App内課金) が Waiting For Review にならない時の対処法!
  3. プッシュ通知機能実装に必要な証明書ファイルの取得方法
  4. Appアイコンのきれいな枠(角丸)の作り方

そしてこの記事が5回目の最終回というわけです。
もしまたなにか思い出したら急に追記することもあるかと思いますが、ひとまずのところは。

無事通ったにしろ、リジェクトされたにしろ、審査の結果がなにかしら出たらブログなりTwitterでご報告しますので、お楽しみに(?)

それではさっそく記事の本題へ。
タイトルにもある通り、Appストアに登録できる動画ファイルの具体的な作成方法(しかも無料!)について記していきたいと思います。

なお、この記事に書かれているのは、2015/06/30時点での情報ですので、今後もっとよい方法が出てきたり、ここに書かれている方法がそのままでは使えなくなってしまったり、Appストアの仕様が変わる可能性すらありますので、そのあたりはご承知おきのうえで読み進めてください。

1. 動画の守るべきフォーマット

Appストアに登録できる動画のフォーマットは、以下参考サイトを見ればわかります。

ただ、これからわたしが紹介する方法では、これらのことをなにも知らなくても、自動的にフォーマットを(ほぼ)満たす動画が作れるはずですので、上記サイトを読んでもよくわからなかった、という方でもご安心してこの先を読んでいただければと思います。

ツール以外で必要になるのは、動画作成のために半日消費してもよいという気概と、使ったことないツールでも躊躇なく使い方を覚えようとする好奇心の2つだけです。

2. 作成に必要なツール

基本的に、これから紹介する方法はすべてフリーウェア(もしくはMacさえ持っていれば最初からインストールされているもの)だけを使用しています。
以下にどんなものが必要になるのか列挙しますので、事前になんとなく理解しておいてください。

  1. Mac本体(要OS X Yosemite)とWindowsPC(もしくはBootcamp)
    Windowsについては、この先紹介するフリーウェアを使用するために使います。

  2. App Previews に対応したiOS端末(実機)
    今のAppストアに動画をアップロードできるのは「iPhone5、5S、6、6plus」および「iPad」に対応した解像度だけなので、これらいずれかの実機が必要です。(シミュレータでもできるかもしれませんが、ここで紹介する方法ではむりです)

  3. QuickTime Player(MAC)
    Macの「OS X」に自動的にくっついてくるソフト。iOS端末上の画面をキャプチャして元動画を作るのに用います。(OS X Yosemite へのアップデートは必須です)

  4. AviUtl と その他関連プラグイン(Windows)
    「3.」のツールで作成した元動画を編集して、ストアへアップロード可能な形式にするために用います。フリーウェア。導入方法は以降の記事で紹介します。

はい。必要になるのはこれらだけです。
通常、iOSアプリ開発者であれば1〜3までは自動的にぜんぶ揃っていることかと思います。

ちょっと導入障壁が高いのは「4. AviUtl」ですが、この後紹介する動画を参考にインストールすれば、とにかく簡単に使えるようになります。

……まあ、多少の時間はかかりますが。

何しろ無料で使える動画編集ソフトの中ではピカイチの性能を誇るこのソフト。
高いお金を出して有料ソフトを買うつもりがないのなら、ぜひ使い方を覚えておいたほうがよいかと思います。

んでは、以降からは具体的な動画作成方法の紹介をば。

3. QuickTime Player で元動画を作成する

まず「QuickTime Player」をそもそも開いたことがないという方。
ご安心ください。
Macのアプリケーションフォルダを普通に開けば、こんなアイコンのアプリがすでに存在しているはずです。

QuickTIme Playerのアイコン

アプリケーションフォルダの中に入ってます。


(お使いのMacがOS X Yosemite 以降じゃない場合は、先にOSのアップデートをしておいてくださいね)

このアイコンを見つけたら躊躇せずクリック。

するとファイルを開くダイアログが開くと思うので、とりあえず「完了」を押してダイアログを閉じてください。(最初にダイアログでない人もいるかと思いますが、そんな時は気にせず次のステップへ)

それからメニューの「ファイル」→「新規ムービー収録」を選択。

すると多分、Macのディスプレイいっぱいにご自身の顔が大写しになると思います。(とくにMacbook使ってらっしゃる方は)
なぜなら、カメラの入力が、デフォルトでディスプレイの上部についたカメラになっているからです。

この状態になったら(その前からでも大丈夫ですが)、ライトニングケーブルでお使いのiOS端末とMacを接続します。

それから、こんな感じで映像(カメラ)と音声(マイク)の入力元をiOS端末に切り替えます。

QuickTime Playerの画面

録画ボタンの右の「>」を回転させたようなやつをクリックしてみてください。

すると……

QuickTIme Playerの画面

iOS端末の画像にカメラ入力が切り替わったところ

こんな風に、iOS端末の画像が画面に表示されるようになったと思います。

あとは、自作アプリを起動して、QuickTime Playerの録画ボタン(操作パネル真ん中の赤い丸)をクリックするだけ。

録画が終わったら同じく停止ボタンを押して、メニュー「ファイル」から「保存」を選ぶ。

……これだけで、あっという間にiOSの画面キャプチャ動画が作成できます。

簡単ですよね?

このようにして自作アプリを操作している動画を録画し、いろんなパターンのものを何本かストックしておきます。

しかし、この時点で作成した動画ファイルは、そのままではAppストアにアップロードできません。
そこで、次項で説明するAviUtlを使って、ファイル形式の変換と編集作業を同時にやってしまいましょう。

4. AviUtlを導入する

AviUtl自体は、非常に有名なツールであり、ひょっとしたらすでに使ったことのある人も多いかもしれません。
けれど、おそらく使ったことのない人が大半を占めると思いますので、そんな場合は以下の動画を見て導入してください。(所要時間:PC操作も含めておよそ1〜2時間)

おっと。
「動画ファイル作成の知識すらないのにいきなりAviUtlに手を出すのはちょっと……」
という方もご安心を。

PCの基本的な操作さえマスターしていれば、ただ見るだけでどなたでもAviUtlを使えるようになるすごい動画です。(本当に、丁寧に作られた素晴らしい動画なのです。作者さんに感謝を捧げます)

[ニコニコ動画版]
AviUtlをインストールする方法 2015 Part1
AviUtlをインストールする方法 2015 Part2
AviUtlをインストールする方法 2015 Part3
AviUtlをインストールする方法 2015 Part4

[Youtube版]
AviUtlをインストールする方法 2015

ニコニコ動画のアカウントを持っているのであれば、ユーザのコメントも非常に参考になるのでニコニコ動画版をご覧になることをお勧めします。

動画を見るだけで1時間近くかかりますが、たったそれだけで何も深く考えることなくAviUtlが使える環境になるのは非常に大きなメリットです。

下手な有料ソフトよりも自由度の高いソフトですから、使い方を知っているだけでいろんな面で有利になります。

さて。

上記動画の通りにAviUtlと拡張x264出力、および拡張編集のインストールができましたでしょうか?

ここまで準備できたらいよいよ動画作成も大詰め。
動画編集とファイル形式の変換(エンコード)に進みたいと思います。

5. 動画を編集する(15〜30秒の間におさめる)

「3. QuickTime Player で元動画を作成する」で作成した動画ファイルは、「.mov」という拡張子だったかと思います。

まずは、作成した「.mov」ファイルをすべて、AviUtlのインストールされたWindowsのハードディスク内にコピーしてください。

動画の容量やコピーの仕方によってはけっこう時間かかるかと思いますが、まあなんとか気長に待ちましょう。(ちなみにわたしは、Dropboxの有料アカウントを持ってますのでそれを経由してコピーしました。Dropboxは月1,000円でなんと1TBも自由に使えるサービスですので超オススメです。あらゆるファイルのバックアップ方法についてあれこれ悩まなくてよくなりました)

コピーが完了したら、AviUtlの拡張編集の画面を開いて、「.mov」ファイルを一つずつレイヤーにドラッグ&ドロップしていきます。

あとはもう、先ほどの動画で学んだ編集方法を応用して、煮るなり焼くなりお好きなように。
ちなみにアップロードできるファイルの時間は15〜30秒の間と決められてますので、その通りの時間になるよう調整しましょう。
実際にやってみるとわかりますが、この30秒という時間設定、めちゃくちゃ短く感じます。

あんまり丸投げ過ぎるのもアレなので、自分なりに自然な動画を作るコツをいくつか。

  1. 場面が切り替わる時は必ずシーンチェンジを挿入する。
  2. 場面が切り替わる時は必ず音声レイヤーに「フェードイン」「フェードアウト」をかける。
  3. 時間が限られているので、タイトル画面とかロゴとかは思い切って削る。(なぜならストア画面で表示される映像なので、ユーザは動画を見る前から「どんなアプリの映像」なのかなんとなくわかっているからです)

……まあ、ざっとこんな感じです。

シーンチェンジっていうのは、場面切り替え時のエフェクトのことですね。
ページめくりっぽい演出だったり、フェードイン・フェードアウトだったり、前の画面が砕け散って後ろから次の画面が出てくるとかもできます。
あるとないとじゃ見栄えが大きく変わるので、ぜひシーンチェンジを活用しましょう。

ちなみにAviUtlを使ったシーンチェンジの挿入方法はこちらの動画が詳しいです。

[ニコニコ動画]
AviUtlをインストールする方法 Ver2012 Part3

6. 動画ファイルを変換して書き出す(.mp4)

さて。

ここまで順調に来れたでしょうか?

AviUtl拡張編集のタイムライン上で30秒以内の動画が作成できたら、いよいよ最後の工程、ファイルの書き出しに移ります。

まず最初に、QuickTime Player で撮影した動画はデフォルトで約60fps(わたしの環境では58.88fpsでした)なので、これを半分のフレームレートに落とします。

やり方は、AviUtl本体のメニューから「設定」→「フレームレートの変更」→「15fps <- 30fps (1/2)」を選ぶだけ。

これだけで、出力されるmp4ファイルのフレームレートが約30fpsになります。
厳密に30fpsにしたいところですが、今の所だいたい30fpsであれば問題ないみたいです。
ちなみに先日わたしがアップロードしたファイルは29.440fpsでした。

上記設定が終わったら、AviUtlのメニューから「ファイル」→「プラグイン出力」→「拡張x264出力GUI(EX)」を選ぶ。
↑この表示が出てこないひとは正しく「拡張x264出力」がインストールできてませんので、めんどうでももう一度、先ほど紹介した動画をチェックしなおしてみてください。

以降の操作は箇条書きで。
(あくまでわたしはこう設定したというだけの話なので、動画作成に詳しい方はもっとお好みの設定でやってください。ひょっとしたらそちらのほうが綺麗に仕上がるかもしれません)

  1. 「ビデオ圧縮」を選択して「拡張x264出力」の設定画面を開く。
  2. プルダウンから「自動マルチパス」を選択。
  3. 「自動マルチパス数」は「2」にする。
  4. 「上限ファイルサイズ」にチェックして「100.0」にする。
  5. 「上限ファイルビットレート」にチェックして「1000.0」にする。
  6. 「目標映像ビットレート」を「-1:自動」にする。
  7. 画面右「音声」タブの「モード」から「ABR(AAC)ビットレート指定」を選ぶ。
  8. その右の欄に「128」kbpsを入力。
  9. 上記まで設定を終えたら「OK」を押して設定ダイアログを閉じる。
  10. 「ファイル名」を指定して、「保存」を押す。
  11. 自動的にファイルのエンコード・保存が始まる。

こうしてできたファイルは拡張子が「.mp4」になっているはずです。
解像度やフレームレート、ビットレートなどもAppleのガイドラインを自動的に満たすものになっているかと思いますので、あとはこのファイルをiTunesConnectの画面からスクリーンショットの項目にドラッグ&ドロップするだけ。

何も問題がなければ、24時間以内にはiTunesConnect上から再生して確認できるようになります。

7. ざっとこんな感じです

はい。今日も長い記事になりましたね。
お疲れさまでした&最後まで目を通してくださりありがとうございました。
以上が、Appストアに動画をアップロードするまでの手順になります。

最初はMacに備え付けのiMovieだけでいけるかな、と思ったんですが、なんとiMovieは横長の解像度にしか対応していないらしく、せっかく使い方覚えたのにAppストアへのアップロード用途には使えなくて断念……

いろいろ調べたら有料のソフトを使えばなんとかMacだけでも動画作成ができるらしいとわかったんですが、そんなことなら別にMacだけでの作業完結にこだわらずともよいじゃないかと思いまして。

かねてより、たま〜に使用していたAviUtlを活用させていただくことにしました。

いや〜……。
しかし本当に世の中すごいです。
こんなに便利で、なんでもできちゃう動画編集ソフトがフリーウェアで誰でも使えちゃうとは……。

ソフトの作者さん&参考動画の作者さんには心のそこから感謝の念を捧げたいと思います。

ありがとうございました!!

明日からはほんの少し更新ペースを緩めまして、アプリ開発以外の点でブログ記事に残しておきたい事柄なんかを、思い出しながらぼちぼち更新していきたいと思います。

それではまた!
これから土鍋でご飯を炊こうとしているRyosukeでした!! m(_ _)m

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

トラックバックURL: http://www.gunsturn.com/2015/07/04/puzzmog_devlog_5/trackback/