cocos2d-xとか使ってる開発者向けアプリ紹介動画作成方法

先日アプリ動画作ったのでその方法をご紹介します。

概要

ここではアプリの動画撮影を簡単にできる方法を2つあげ利点や欠点について説明します。しかし、長い動画や凝った動画には向かないので、実況動画とかは作れません。個人制作アプリとかでちょっと紹介動画作ってみたいという人向けです。
また、iOSやAndroidの開発環境があることが前提です。開発者にとっては特に新しくアプリやソフトを導入しないので、すでに以下の必要な物がそろっていればすぐ撮影できます。
ちゃんとした録画用のアプリやソフトもあるので、もっと凝ったものをという場合はそちらを調べた方が良いでしょう。
最初の例ではmacを使うのでcocos2d-xとかクロスプラットフォームで開発している人向きかもしれません。

必要な物

音は別途録音するのでマイクのケーブルが必要です。
DSC_0003こういうやつ。
iOSシミュレータを使う場合はmacとXcodeが必要です。
Android4.4 KitKatの機能を使う場合はAndroid4.4が動く端末が必要です。

iOSのシミュレータを使う

Xcode入れたらついてくるiOSのシミュレータを使うと簡単に動画が撮れます。macにはQuickTime Playerが入っているのでそれを使うと特に準備や費用無しですぐ動画を作れるので便利です。ちなみにAndroidのSDKに入ってるエミュレータはすごく遅いのでお勧めできません。

やりかたは
1. macのマイク入力とスピーカー出力をケーブルで直結する
アプリの音を録音するためにmacのスピーカー出力をそのままマイク入力につなぎます。音の無いアプリでは必要ありません。
機種によっては直接録音できるかもしれませんが、うちのmac miniではエミュレータの音を直接QuickTimeで録音できなかったのでそうしました。同じ物から出て入るのはなにか納得いきませんがうまくはいきます。

2. iOSシミュレータを立ち上げる
XcodeからiOSシミュレータを立ち上げ、アプリを起動します。音の調整をするので音の鳴る画面にしておくといいですね。

3. QuickTime Playerを立ち上げ録画、調整する
システム環境設定からサウンドを選び、入力をライン入力にして入力音量を調整します。
qtss2
スピーカー出力をマイクに入れてしまっているので音が聞こえずちょっと難しいかもしれません。テスト的に一度録音してみて後で調整しなおすのが確実です。
次にQuickTimeからファイル>新規画面収録を選び録画を開始します。そのときドラッグして録画領域を選べます。
qtss1

4. 停止・ファイル保存
メニューバーの停止ボタンを押し終了してファイルを保存します。

5. 編集
macならiMovieが入っていると思いますので、そこで新規プロジェクトを作り、撮影した動画ファイルをドラッグアンドドロップすれば編集できます。YouTubeへとアップロードしてくれる機能もあるので便利です。
スクリーンショット 2014-07-17 14.04.24

そんな風にして撮った動画がこちらです。

このゲームについてはこちらへ

利点:
・準備いらずで手軽
 すでにiOS開発している人なら新たにいるのはケーブルぐらいです。あとはmacの標準的な機能で試せます。
・時間制限無し
 macのハードディスクがいっぱいにならない限り録画できます。

欠点:
・負荷の高いアプリだと動作がカクカクになる
 シミュレータなのでどうしても処理は遅いです。負荷のかかるアプリだとFPSが1/3とかになります。処理が軽いアプリだと問題なく撮影できます。上で紹介したゲームはもとは動作の遅いjavascript用のゲームで、いろいろと負荷軽減できるようにゲームデザイン段階で工夫してあるため特に問題なく撮影できました。

・マウスカーソルが映る
 モバイルデバイス上では無いはずのマウスカーソルが映るのでちょっと不自然です。動画だとむしろわかりやすい気もします。
 
・マルチタッチ対応など端末の機能を使うアプリは難しい
 マウス操作なのでマルチタッチをもたつかずに撮影するのは難しいです。同様にその他GPSや傾き検知などの端末機能を活用するアプリは難しいです。

・解像度低め
 端末に比べると解像度は低めになります。シミュレータの画面を大きくして撮影、あとで編集とかすればうまく調整できるかも知れませんが、負荷やファイルの容量があがるので難しいでしょう。

問題はありますが、ミニゲームやツール系のアプリだと問題ないと思います。時々見かける端末を別のカメラで直撮りして画面がよく見えないようなのよりは、わかりやすい動画ができると思います。

Android4.4KitKatから追加された録画機能を使う

Android4.4からは録画機能が追加されているので、それを使って録画することができます。
以下ではmacを使った方法を紹介しますが、録画・録音ソフトをMovie Makerなどに読み替えればwindowsでも同じ方法で撮影できます。

1. 端末の確認
Android4.4以降でなければ撮影できません。国内キャリアの端末だとなかなかOSのアップグレードしてくれなかったり、見捨てられたりするので4.4になっていないかもしれません。

2. 端末とmacをつなぐ
開発環境はすでに整っており、adbが使える物とします。USBで接続するのはもちろん、録音の必要があるので端末の音声出力をmacのマイク入力につなぐ必要があります。

3. macで録音開始
macの方でQuickTime Playerの「新規オーディオ収録」から録音します。録音レベルは端末側の音量で調整できます。

4. adbで撮影開始
コンソールで
adb shell
コマンドを実行し端末上のshellを立ち上げます。次にcdで録画ファイルを置く場所に移動します。たとえば
cd /sdcard
などです。動画用にフォルダを作っておいてそこに移動した方が良いかもしれません。
あとは
screenrecord hoge.mp4

とするとhoge.mp4という動画ファイルができてそこに録画されます。このコマンドの詳細はscreenrecord -helpを実行すると確認できます。

5. アプリ実行
180秒しか録画できないのですばやく必要な動作をしましょう。

6. 録画終了、ファイルの移動。
コンソールでctrl+cで録画終了できます。同時に録音も終了させてファイルを保存します。できたファイルは上の例では/sdcard/hoge.mp4にあります。ところがなぜか私の環境ではmacのAndroid File Transferからファイルが表示されなかったので、普段使っているESファイルエクスプローラーというAndroidのファイル管理ソフトからGoogle Driveに送ってmacに持ってきました。見えなかった理由はよく分かりません。権限か何かでしょうか。いずれにせよAndroidからは送れますので致命的な問題では無いです。

7. 編集
iMovieでプロジェクトを作り、動画ファイルと録音ファイルをドラッグアンドドロップで取り込みます。あとは音ズレを修正したり余計な場面をカットしたりして完成です。

そんな感じで作ったのがこちらの動画です。

このゲームについてはこちらへ

利点:
・負荷が高いアプリでも大丈夫
 どこまで大丈夫か試してはいませんが、シミュレータでは20FPSになってしまう上のアプリが問題なく録画できています。

・十分な解像度
 端末の解像度で録画されるので、ストアで掲載されて同じく端末で再生するには十分な解像度となります。

・マルチタッチなどの端末機能を使うアプリでも大丈夫
 実機なのでどんな端末の機能を使っても基本問題ありません

欠点:
・時々遅くなる
 おそらくガーベージコレクタが走るようでたまに遅くなります。上の動画だと1:09で遅くなります。撮影していないときは遅くならないので、録画コマンドの問題と思われます。

・180秒しか録画できない
 録画コマンドの制限で180秒しか録画できません。上の動画も最後ぎりぎり切れてしまいました。開発者が三分間継ぎ目無しのプレイ動画がどうしても必要な場合はあまりないと思いますが、ちゃんと計画を立てないと途中で切れます。タイトルに開発者向けと書いてあるのでここまで読んでいる人にはいないと思いますが、もしゲーム実況動画を作ろうとしているならそれはまず無理です。
 
・音は別途録音・編集しなければならない
 音は別途録音編集する必要があります。ゲームは一般に1/60単位ぐらいで動くので音ズレを調整するのは地味に大変です。

終わりに

アプリ開発で重要なのはやはりアプリ自体の内容で、動画は副次的な物です。実際動画無しでも人気のあるアプリはたくさんあります。しかし、たとえば既存のゲームとは違うルールのゲームなどでは、動画があればプレイヤーにとってわかりやすいです。またレビューサイトの運営者が動画があるとやはり紹介が書きやすいという話をしているのを聞いたこともあります。
全てのアプリに紹介動画がある必要は無いですが、「このアプリは紹介動画あった方が良いかな」と思ったときに、あらためにそのためだけにソフトを導入して使い方を覚えて、というのは大変です。
そんなときにここで紹介したような方法がお役に立てば幸いです。

Share

コメントする