2014年5月29日木曜日

アプリのプロモーション動画の作り方

先日、Timesheet アプリをリリースした際、プロモーション用動画 を作成しました。
どんな感じで作ったか をご紹介しようとおもいます!

作成した プロモーション動画 ↓



よいサンプルを見る


どんなものを作るといいのか? を考えるために、よいサンプルを見るのが大事ですよね。
参考にしたのはこちら。

プロのお仕事だなー という感じ。素敵です。
自分だと、そこまでクォリティ高いものが作れない苛立ちで悶々としてしまいますが、ぐっとこらえて自分でできそうなことを想像します。

ここで思ったのはテンポ良くすること。飽きないの大事。
長さは、1分ぐらい...長くても1分半ぐらい。

内容を理解してもらうのではなくて、イメージを掴んでもらう ということに集中すること。
↑これ、難しい! どうしても説明用動画っぽくなっちゃう。

操作動画はちょっとスピードアップするとよりテンポがでるかなー と考えたり。
↑ 短縮した場合は、その旨の表記がいるらしい (Appleマーケティングガイドライン 3.6)

画面をズームして見せたいものを大きくみせるのもありだなー と考えたり。

(結局自分のセンスや時間の問題で、凝ったものは全然できなかったなぁ....無念)


ツールを揃える


操作している動画を撮影 するには
  1. デジカメで、操作しているiPhone端末を撮影する
  2. 操作画面を直接録画できるツールを使う
の方法がありますが、1. であっても、画面の内容を綺麗に見せたいのであれば、2. のものも作っておいて合成したほうがいいのではないかーと思います。

「技術がない人は、良いツールが必要」
...ですが、お値段と、できる事の兼ね合いですよね。
ケチっては本来ダメなところですが、私は結局、手元にあるツール+自作ツールでカバーしました。 

Reflectior $12.99
操作している画面の動画作成にて使用。
iPhoneの画面を、AirPlay経由でMacに表示し、録画もできます。
アプリデモを見せる時にも使えるので、あって損はないものだと思う。

iMovie 無料
MacOSで使える動画編集ソフト。
動画/静止画を結合したり、トランジションを設定したり、音楽を入られます。
文字も入れれますが、位置は自由には設定できないようです。
これだけ高機能なものが無料で使えるなんて、Apple様ありがとう。

その他、買わなかったですが以下のツールもあります。

タップしたところがわかるようなマークとかも付けれるらしい。
シミュレータで動かして録画するタイプ。

Sound Stage はダウンロードできなくなっていた。
4インチには対応していないらしいし、もう開発中止になったのかな。

AfterEffect
動画職人には有名なAdobeのソフト。
撮影した動画をいろいろ加工できる(使っていないので想像)
Adobe Creative Cloudに入っているのであれば使うべし。


素材、情報を揃える


プロモーション動画の場合、少しでも素敵 に見せたいので、
背景画像や、表示する文字も画像にして用意しました。

を読んで、規約を把握し、iPhone端末画像や、AppStoreのバッチを頂きます。

ガイドラインから、
  • AppStoreのバッジは1回だけ表示する
  • ビデオの終わりに、Appleのクレジットを入れる
とのことなので、守りましょうー。


操作動画を撮影する


ストーリーに沿って、いくつかシーンを分けて別々に動画を作成し、あとでiMovieでつなぐのがおすすめです。
撮影しなおしとかも楽なので。

3.4 ステータスバー
ステータスバーがはっきりと見える場合は、バッテリー残量やWi-Fiアイコンがフルの状態であること、通信会社名が表示されていないことを確認してください。


(これ、今、守れていないので作りなおさないといけないところ... アップルさん、ちょっとまってね!)

動画の上に、ステータスバーダミー画像を載せて合成しようとしたのですが、動画にすると色味がちょっと変わってしまうようで自然に載せられず、諦めました。
真っ白 or 真っ黒 のステータスバーのアプリなら大丈夫かもしれません。

キャリアを非表示にするのは、脱獄しないとできないようで、そうなるとAirplaneモードが選択肢。
ReflectorはiPhoneとMacOSが同一Wifiにないとダメなので、設定画面で一旦AirplaneモードにしてからWifiをONにするといけそうです。
(最近、コントロールセンターでずっと操作していたので気付かなかったぁ)

シミュレータであればキャリアという文字はでるものの、実際のキャリア名は出ないので、シュミレータで撮影する方法を選択した方がよいのかも? (不明)

ということで、iPhone端末で撮影する場合は、
  • 撮影前にはiPhoneのバッテリーをフル状態にしておく。
  • Airplaneモードにしておく。(もしくは脱獄?)
を事前に忘れずに!


操作動画と背景画像を合成する


今回の動画では、背景画像 + iPhone端末画像 + 動画 + 文字画像の移動アニメーション を合成しています。

AfterEffect とかつかえば簡単にできるはず、多分!

今回はケチって自作ツールで作ってしまいましたが、
iOSのAVFoundationフレームワークを使って今回用にごりっと書いで行数にして300行くらいの小さなもの。
自由にLayerを作って重ねて、動きをつける ということがAVCompositionなどを使うと結構楽にできるようになっています。

試していないのですが、iMovieでクロマキーの合成ができるようです。

操作しているiPhoneをデジカメで動画撮影する場合、これでやるのも手かも。


iMovieで各シーンを合成する


作った動画と、静止画 をiMovieでつなぎ合わせます。
各シーンの繋ぎ目は、iMovieのトランジションを使って自然に切り替えしてみます。

3.5 トランジション
動画の場合は、フェードやディゾルブなどシンプルなトランジションを使用してください。動画では、iOS デバイスのマルチタッチ・ジェスチャーを模したトランジションを使用しないでください。
とあるので、フェードかディゾルブが無難。



AVFoundationを使って自作ツールつくったのならば、このつなぐ処理も自作でつくったらええやん? って思いました?
はい、できるんですけどもね。
静止画部分や、トランジションの長さって、いろいろ変えて、いい塩梅をみつけていくのですが、そんな作業にはやっぱりUI上で設定⇔確認の繰り返しがすぐにできるのが大事なのです。

iMovie上でmovieの書き出しをすれば、動画作成の完了です!

レビューサイトへの掲載依頼をする時、動画があるのと無いのでは大きな差があるはず。
会社で開発しているなら、やっぱりプロにお願いするのがいいと思うけど、
個人で開発していても、作ると効果大だと思うので、ぜひ。



• • •

2014年5月28日水曜日

Timesheet アプリ リリースしました!


Flask LLP から新作アプリをリリース いたしました!




Timesheet
Time Tracker for iPhone


さてさて、このアプリは、作業時間を記録していくタイムトラッカーです。

タイムトラッカーは、個人的に長年探し求め続けているもの。
会社員時代でもオレオレアプリ(ASlimTimer) を作ったりしてましたが、フリーランスになってから、より強く欲しいと思うようになってきました。
  • 作業に集中してしまい、いつも時間つけるの忘れる
  • ストップウォッチってつけ忘れるし、止め忘れる
  • 年に数回、時間をつけようと心にキメるがいつも3日坊主
ということ、ありませんか?
私はこれの繰り返しでーー。

昨年、またまた時間をちゃんとつけようと心にキメて、
手軽にiPhoneで使えるのはmustだけど、PC上でもみたり記録したりしたいなー。
でもそのサービスにデータ預ける形になって、取り込まれて、抜き出しできないとか嫌!
そうだ! (iOS or Google)カレンダーに記録していこう!

と、しばらくつけてみるとやっぱり面倒....

カレンダーへ簡単に入力できるアプリがほしい!
しかも見た目が綺麗なやつ! 

というのが、開発を始めたきっかけです。

この経緯もあり、このアプリのデータ保存先は カレンダー になっています。
iCloudカレンダーなどを使えば各端末に自動的に同期されますし、オフラインでも大丈夫。
その他、
  • アプリを消しても、カレンダーに情報は残っている。
  • カレンダーから自由にデータを取り出せる道がある。
  • (カレンダー以外の)サーバーを経由していない安心感。

という裏(?)メリットもあります。




登録方法は2種類。


時間を直接入力する方法と、ストップウォッチ機能で計測する方法。
私の場合の使い分けをご紹介。


お仕事タイム
お仕事は集中してあれこれやってしまうので、作業が一段落し、ふーーっと一息ついたアイドルタイム時に、ざっくり時間入力していくパターンの使い方をしています。

はじめに○○やるぞー! と始めても、ふっと別の情報が目について脱線してしまったり とか多いので。
脱線はだいたい30分くらいだったな とか思い出しつつ、ポチポチ登録しています。
そもそも脱線はよくないんじゃ?という話もありますが(笑

素早く目的が達せられる(=登録できる)ために、以下がこだわり。
  • 入力済み情報を見ながら、新規登録できる (前の終了時間とかみたい)
  • プロジェクト名などの事前登録なし。(すぐに入力したい)
  • 過去数ヶ月の情報から、名前の候補がでる。(Keyboard使用は最小限に)
  • 初期値は前回入力値。開始時間は前回の最後の時間に。


お勉強タイム
今、WWDCに向けて英語お勉強タイムを最近設けているのですが、こちらは脱線せず集中できるので、ストップウォッチ機能で開始してからお勉強を始めています。

ストップウォッチでは、繰り返しアラームが指定できるようになっています。
たとえば、20分に設定すれば、20分、40分、60分....と20分毎にアラームが鳴ります。
集中して作業する時間を決めてやるときとか、ストップウォッチの止め忘れとかに便利です。

私の英語のお勉強タイムは、1時間はやりたいと思っているので、繰り返しアラームを30分毎に設定して、2回アラームがなるまで頑張るっ ...という感じにつかってます。

ストップウォッチは以下がこだわり。

  • 止め忘れ防止のために、繰り返しアラームや、アプリにバッジがつく
  • 開始中は時計アイコンの芯がぐるぐる回って可愛さUP!


いろんな切り口でグラフを。


すぐに簡単に作業時間をメモれる。 というのが主目的のアプリなのですが、
やっぱり、集計してどれにどれくらい時間がかかったのかを知りたい。そしてグラフ大好き!
ということで、時間集計、パーセンテージが見れるグラフがあります。

プロジェクト毎の集計を見て、このプロジェクト利益率イマイチ! と思ったり、
タグ毎の集計をみて、メールを割く時間がすっごく多いっ と気づいてみたり。
実際の記録をみるのって改善に役立つし、楽しいですね。

もっといろんなパターンで集計してみたい とか、レポート出してみたいとか、いろいろ欲望が出て来るところ。
今後、意見を聞いて、もりっと入れてみたいところなので、使ってみての感想要望とかもらえると嬉しいです!


Timesheet は お手頃価格の 200円でございます。
よければお使いくださいませ!


最後に...

出来上がったものをみると、シンプルなUI/機能のアプリなのですが、
開発途中では、UIをごそっと変えたり、機能を追加したり、消したり...復活したり...といろいろモミモミ、ズルズル。
一つの画面の構成を考えるだけでもかなーり難しい。実際作って、動かしてみないと判断できないこともまだまだ多い。

でも、こうやってモミモミできるのも自分たちのアプリならでは! ということで嬉しかった。結局リリース日は目標より半年延びてしまいましたが。
受託だとなかなかできないですよねーー。

プロトを何十個も作って検討した というアプリの話とかをたまーに聞くけど、そんな太っ腹な開発ができるようになりたいw


• • •

2014年5月1日木曜日

AutoLayoutをもっと使う気になってきた

iOSのAutoLayout。

Appleサマがおすすめしている感じが凄くするのでバリバリ使えるようになりたいと思いつつも、メリットがイマイチ分からずボチボチとしか使っていなかった。

ステータスバーからの相対位置の指定として、topLayoutGuideが使えるのは便利だなと思いつつも、その他はAutoResizingMaskでまかなえるじゃん? と思っていたから。

AutoLayoutは、Layout処理が終わる前に任意のviewをコードから追加は出来ないし、一度設定したConstraints をコードから値だけ変更しなおしとか出来いようだし、使うの難しいなーと思っていた。

んが、なんかやっとで使うメリットが分かった気がする。

AutoLayout では、サイズをコンテンツに合わせる 事ができる。

いや、できる というより、
AutoLayoutでは、デフォルトが「コンテンツに合わせる」になる。
width, heightのConstraintsを明示的に指定すれば「コンテンツに合わせない」に変えた事になる。

コンテンツに合わせて変える...とは、
LabelやButtonの文字が動的に変わる場合がある。つまり、サイズを変える必要がある。
横幅を広げたいときもあるし、1行から2行の高さになる時もある。
そんな時に、文字の内容によってviewの幅、高さを変える事。

AutoResizingMaskでは、コード上で sizeToFit() などでサイズを指定して、位置を再設定していた。

確かにこれは嫌だった。
Storyboard,XIBを使っているのであれば、レイアウトに関するものは全てStoryboardなどでまかないたい。コードに分散したくない。

AutoLayoutを使えば、
・サイズはコンテンツに合わせて自動的に変更し、
・配置するX位置は画面の中心に
・Y位置は画面の下から20pxに
というのが、Storyboardだけの設定で完結できる。

このコンテンツに合わせる前提だと、AutoResizingMaskでは出来ない事が多い。
あるViewからの相対的な位置指定などは必要不可欠になる。
...このViewとの間に5pxの間を空けて配置する、中心に配置するなど。

これまで、英語、日本語とでレイアウトが変わる時、
Storyboard,XIBを別々にするか、コードでレイアウトを動的に設定しなおすか悩ましいときが度々おきたが、AutoLayout使うとそんな悩みが無くなる事ありそうだ。

ただ、コードでViewを作成して追加していく場合。
追加先のコンテナviewは、AutoLayoutで無い方がやっぱり使いやすい気がする。
追加するviewの中はAutoLayoutの方がよいのだけども。
混在させるのは果たしてアリなのか、無しなのか。

悩ましい。

• • •