iPhoneアプリ開発者が知っておくべき「デザイン」について

「デザイン」というキーワードについて、もう少し踏み来んで、論理的に捉える必要がると思い、色々と情報収集中。最近見つけたものを紹介します。(技法的なネタはあまり含めていません。)

 

android nightの資料のようだが、androidに特化した内容ではなく、「デザイン」概念についての資料。

デザインとは「設計」すること

 

エンジニアのためのUX入門

アフォーダンス!
これもandroidを冠した資料だが、must read.  各種リソースリンク情報がたくさん紹介されている。

 
iOS design: a case study
View more presentations from Johan Ronsse
グラフィックデザイン寄り

社会へ繋がるためのUX
UXデザイン
slideshareはググっても出てこない良いネタが眠っている。
以下は、blogのエントリから。

小野和俊のブログ〜UX/UIデザインガイドライン 

Apple、Microsoft、Google、etc.のUX/UIデザインガイドラインリンク集

appleのiOSヒューマンインターフェースガイドライン(PDF)はおなじみかと思うが、MetroスタイルアプリのUXの設計パターンあたりは、いちどじっくり読んでおきたい。

 

Design Spice〜Appleが推奨するSkeuomorphic Designとそのメリットデメリット

現実世界のモチーフを模倣したデザインをよく見るようになりました。
 このようなデザインをSkeuomorphic Design(またはSkeuomorphic UI)と呼ぶそうです。

脱 Skeuomorphic UI の流れが、iPhoneアプリ界にも増えてきそうです。

 

長谷川恭久さんのBLOG〜習慣になるまでの UI と操作の変化

現実世界のメタファーUIは「習慣化されているから」直感的。

 

OVERKAST〜モードレスな UI としての Clear

モーダルとモードレスという概念。

 

サンフランシスコのWebコンサルティング会社 -ビートラックス- スタッフブログ〜米国のデザイン教育から学んだこと

デザインとは理論的なプロセス

 

WIRED Japanese edition〜ジョナサン・アイヴ、Appleのデザインを語る

「われわれの目標はとてもシンプルです。よりよい製品をデザインし、製造するということです。よりよいものが作れないなら、それは行いません。われわれの競合者はそのほとんどが、”何か違うことをする”ことに興味を持っています。あるいは、新しいと見られたがる。しかしそれらは、完全に間違った目標だと思います。プロダクトは本当に、よりよくなければいけないのです。それには真の鍛錬が必要です。われわれを動かしているのは、よりよいものを求めるという、心からの欲求なのです」

刺さる言葉。

 

 

appSEOとappCod.esを試してみた

@umeken123 さんのBLOGのエントリ App Store内のSEO最適化について調べてみた

を見て、appSEOとappCod.esを試してみたので、メモ。

 

appSEO

  • 1週間は1アプリ無料で試せる。
  • 1アプリ目は無料、2アプリ目から$20/月
  • 競合アプリ分析の課金構造が解りにくいのだが、1課金アプリに対し3つまでは競合アプリ分析が可能。それ以降は1競合アプリ追加毎に$3かかる模様。
  • もう一つ、気をつける必要があるところとしては、課金は1アプリ毎に$20だが、アプリとAppStoreのマーケット(国)の組み合わせ毎に1アプリと換算される。どいういうことかというと、Aというアプリについての分析を日本マーケットとアメリカマーケットそれぞれ分析したい場合、2アプリとして、$20×2の課金が必要となる。(競合アプリオプションも当然別)
  • Dailyで集計データメールが飛んでくる。
 

appCod.es

  • お試し期間はなし。課金しないと試せない。
  • PayPal払いで、$14.95/月。PayPalの毎月自動引き落とし?となり、放っておくと毎月PayPalで自動的に支払いされてしまう。
  • appSEOと比較すると、機能は物足りない。appSEOにない機能としては、競合アプリの登録キーワード推測機能くらい。
正直、月$15の価値はないかと。。。

両方試してみて、改めて理解したことは、AppStore むけSEOとして出来ることは少ないということ。

対策としてできることは、結局のところ
  • アプリ名
  • キーワード定義
をいじることだけなので、当然と言えば当然。

紹介したどちらのサービスも、狙ったキーワードに対し、自分のアプリがどの辺りのランクにいるかを調べるツール。

狙った(狙いたい)キーワードでのランクアップをする具体的な術は先の2点以外にはなく(不明だという意味)、先の2点を実施しても検索ランキング上位が無理な場合は諦めて、他のキーワードを盛り込めという考え方であり、果たしてこれが本当に効果的かどうか?は、アプリのジャンルによると思う。(メジャーなキーワードはほぼ埋まっているので、ニッチなキーワードを見いだす必要があるが、そのニッチかつ有効なキーワードを見いだす具体的術もあまりなく、また、ニッチなキーワードで検索上位を取れたとしても、それがどれだけダウンロード数に影響するかという点も微妙な気がする。)

ということで、否定的なコメントとなってしまいましたが、appSEOで自分の設定したキーワードがどれだけ有効か?を知っておいて損はないでしょう。

 

PureData書籍紹介: “Making Musical Apps”と”Pd Recipe Book ―Pure Dataではじめるサウンドプログラミング”

以前に作りかけとなっていた音楽系アプリの開発を再開しようと、いろいろと調べていたところ、PureData(pd)がiOSで動くようになってるではないですか。

しかも、つい最近、書籍も出てるじゃないですか!

ということで、入手した書籍2つご紹介。

 

Making Musical Apps

O’REILLY本です。英語版のみ。



 

目次
Chapter 1 Introduction
- A Great Investment
- Resources
- Prerequisites
Chapter 2 Making Noise with Pure Data
- Installing Pure Data
- A First Patch
- Adding Audio Input
- Sample Rates and Audio Channels
- Control Rate Objects and Messages
- Sending and Receiving Messages
- More About Messages
- Using MIDI with Pd
- Further Topics
Chapter 3 When Not to Make Musical Apps
- Creating RjDj Scenes
- Anatomy of an RjDj Scene
- Patching for RjDj
- Deploying an RjDj Scene
- Receiving Sensor Input
- Controlling Graphics and Text
- Using rjlib
Chapter 4 Embedding Pure Data with libpd
- Introducing libpd
- API Overview
- Opening Patches
- Finding Resources
- Sending Messages to Pd
- Receiving Messages from Pd
- Reading and Writing Arrays in Pd
- MIDI Support in libpd
- Odds and Ends
- Externals in libpd
- Audio Glue
- Launch Sequence
Chapter 5 Pd for Android
- Setting Up the Development Environment
- Creating a Musical App: Part I
- Creating a Musical App: Part II
- Improving the User Interface
- Building Externals for Android
Chapter 6 Pd for iOS
- Setting Up the Development Environment
- Creating a Musical App: Part I
- Creating a Musical App: Part II
- Improving the User Interface
Chapter 7 Outlook

PureDataの簡単な説明から始まり、RjDjのパッチの作成方法、iOSでPureDataを動かすためのlibpdの導入方法から、実際の使い方の簡単な説明まで記載されています。(Android向けの解説もあるが読んでない)

PureDataそのものの説明は、簡単なものなので、PureDataも初めてという人向けではないですが、iOSへの導入は、記載の通りに勧めて行けば実際に動かすことができる内容となっています。

 

PureDataそのものをマスターするには、こちらがオススメ。

“Pd Recipe Book ―Pure Dataではじめるサウンドプログラミング”

著者:松村 誠一郎(www.low-tech-ism.com



 

目次:
CHAPTER 1 Introduction
INTERVIEW Frank Barknecht
CHAPTER 2 Basic
2.1 Pdのパッチを作る
2.2 Putメニュー/ヘルプファイル
2.3 オブジェクトとヘルプファイル
2.4 各種メニューの詳細
INTERVIEW Gunter Geiger
CHAPTER 3 Rhythm Machine
3.1 リズムマシンの概要
3.2 step 1 音ファイルを読み込む
3.3 step 2 Arrayに読み込んだ音データを再生する
3.4 step 3 シーケンスを記録する
3.5 step 4 シーケンスを再生する
3.6 step 5 音の再生パートとシーケンスのループ再生パートを合体する
3.7 step 6 見やすいようにサブパッチ化する
3.8 step 7 音の状態を見るオシロスコープをつける
3.9 step 8 パッチを開いた時に動作する
3.10 step 9 トラック数を増やす
INTERVIEW Chun Lee
CHAPTER 4 Synthesizer
4.1 シンセサイザーの概要
4.2 step 1 シンプルなサイン波シンセサイザーを作る
4.3 step 2 音の立ち上がりと消える部分を作る
4.4 step 3 音の立ち上がりと消える時間を自由に設定する
4.5 step 4 音の立ち上がりと消える間の音量の変化
4.6 step 5 エンベロープジェネレータ(EG)の改良
4.7 step 6 スライダーを配置する
4.8 step 7 エンベロープジェネレータ(EG)パートをAbstractionにする
4.9 step 8 音のON/OFF、Pitch、Velocityのシーケンサーを作る
4.10 step 9 サイン波シンセサイザーとシーケンサーを合体する
4.11 step 10 音量にモジュレーションをかける
4.12 step 11 エフェクトをかける
4.13 step 12 オシレータの波形を変更する
4.14 step 13 いろいろなシンセサイザー音源を作る
4.15 step 14 フィルタをかける
INTERVIEW Aymeric Mansoux
CHAPTER 5 Interactive System
5.1 フリールーパー(Free Looper)
5.2 時間経過とランダムな音
5.3 声で楽器音をコントロール
5.4 声の高さで映像をコントロール
5.5 Webカメラでエアドラミング
5.6 音の高さと長さを自由自在にチェンジして再生
5.7 フレーズスライサー(Phrase Slicer)
REPORT Pd-conレポート
APPENDIX:Pdオブジェクトリファレンス

まだ最後までいっていないですが、かなり丁寧というか、音楽系のプログラミングが初めての人もスコープにした記載となっています。

パッチの構成方法を一つづつ丁寧に解説してくれており、順にすすめると最終的には、目次の通り、リズムマシンやシンセサイザー、シーケンサが完成するという構成。

 

という事で、PureData + iOSで夢が広がるかも!?

 

iPhoneアプリ(.Sched 3)のプロモーションのためにやったこと

これまで、iPhoneアプリのリリースに際して、プロモーションと言えるような活動はほとんどしてこなかったのですが、さすがに頑張ってリリースしたアプリが誰にも知られず見向きもされないという状況は寂しすぎるので、色々とプロモーション対策を検討し実践してみました。

※活動の甲斐あってか、おかげさまで、.Sched 3 は仕事効率化で最高2位、総合で22位をマークすることができました!

実際にやってみたこと/考えたことについて既出のネタが多いですが、紹介します。

 

1. リリース日の検討

2. 期間限定値下げ

3. プロモビデオ作成

4. iPhoneアプリ紹介サイトへのレビュー依頼(日本国内)

5. 海外対策

6. BlogとTwitter開始

 

1. リリース日の検討

こんな情報をたまたま見かけました。

iPhone Game Cast アプリ1週間チャレンジ11日目「発売日が4月5日に決まった理由」http://www.gamecast-blog.com/archives/65659014.html

これは、あまり知られていないことだが、AppStoreのシステム上、ランキングの集計は1週間で集計され、木曜にリセットされるのだ。リセット直後の木曜日に一定以上のダウンロード数を確保すれば、ランキングの上位に来てDLされやすくなる。何気なく新作発表を見ている方も多いと思うが、毎週木曜日にリリースされるゲームが多いのはこれが理由なのである。

初めて聞いたんで、直近で話題になった、アプリのリリース日を調べてみました。

Clear for iPhone  2/16 木曜日

Sparrow for iPhone 3/15 木曜日

なんか、本当っぽい?!ということで、これ以上深追いすることはやめ、木曜日に決定! (ちなみに、木曜日を選択した効果があったのかどうかは解りません。。。)

アプリのリリース日は、iTunes Connectへの申請時に「Appleの承認が通り次第リリース」と「Appleの承認後に自分でリリース」が選択可能ですが、前者の場合、レビューがいつ完了するかは解らない(コントロールできない)ので、当然後者を選んでおく必要があります。

 

2. 期間限定値下げ

おそらく、一番効いたのはこれじゃないかと思うのですが、、、、、

価格設定については、fladdictさんの

スマホアプリの売り上げと、セールの相関関係レポートhttp://fladdict.net/blog/2012/01/sale-and-sales.html

を見て、tier 2に決定。(適当)

 

3. プロモビデオ作成

無いよりあったほうがいいだろう、というか無性に作りたくなって作成。

※ビデオの作成方法について、本BLOGで紹介してます。

.Sched3の紹介動画作成 Reflection +QuickTime +QuartzComposer +iMovie +GarageBand

.Sched3の紹介動画作成(後半)QuartzComposerあたりを中心に紹介

本BLOGでは散々掲載していてくどいですが、一応あらためて載せておきます。

 

4. iPhoneアプリ紹介サイトへのレビュー依頼(日本国内)

プロモコードをアプリ紹介サイトの方々に配布し、紹介ビデオとあわせてレビュー/紹介エントリの掲載を依頼しようと考えていました。

ところが、想定外だった点が1つ、、、、、、、

.Sched 3 は.Sched2からのバージョンアップリリースなのですが、バージョンアップの場合は「Appleの承認後に自分でリリース」を選択していても、プロモコードはリリース済バージョンの分に対してしか発行できない!つまり、新バージョンをリリースしないと、新バージョンのプロモコードが発行できない!ということが、いざプロモコードを発行しようとして判明。ということで、しょうがないので新バージョンをリリースし、急いでアプリ紹介サイトの方々に依頼メールを書きました。

ちなみに、紹介頂いたサイトは以下。(この場をお借りして改めて御礼申し上げます。ありがとうございましたっ!)

 

リニューアル式 http://d.hatena.ne.jp/renewal49/20120329/1332987850

AppBank http://www.appbank.net/2012/03/29/iphone-application/390488.php

iPhone女史 http://www.iphone-girl.jp/sale-info/178533.html

アップス!!! http://www.appps.jp/archives/1913717.html

リンゴノコト。http://mickymac.blog2.fc2.com/blog-entry-1394.html

 

これは、反省点ですが、依頼にあたっては、ぐっとくるキャッチコピーは考えた上でお願いするのがベター。また、掲載する側がAppStoreの文章を基礎情報とするのは当然なので、AppStoreの文章にもキャッチコピーとなりうる表現盛り込んでおくべきですね。

 

5. 海外対策

海外についても同様にアプリ紹介サイトにレビュー/紹介エントリの依頼をお願いしましたが、結果はゼロでした(今のところ)。応答ナシか、あるいは「いっぱいレビュー依頼があるから、レビューできるかわかんないよ!」的なメールのBOT自動返信があったのみ!全く風がふかず、惨敗。

依頼するタイミングが遅れた(アプリがリリースされた後に依頼し、かつ、日本国内の依頼を優先したため)とか、依頼の英文がグダグダとか、反省点はいろいろあるのですが、得たノウハウをせっかくなので紹介しておきます。

 

その1

依頼先のリストアップ作業もなかなかの一苦労なのですが、以下のサイトが非常に参考になりそうです。

BuySellAds http://buysellads.com/buy/all-things-apple/pn/1

Web広告の売ります/買いますサイトなのですが、ここの画面左メニューで「All Things Apple」を選択すると、iPhone/iPad紹介サイトがリスティングされます。さらに、画面右上のリスト表示を選択すると、各サイトのMonthly Impression数が表示されるので、各サイトのパワーも一目瞭然です。

 

その2

prMac(http://prmac.com/member/services)というプレスリリースを拡散してくれるサービスを利用してみました。基本無料でOK、拡散先を増やしたり、ビデオニュースリリースするなどの有料オプションがあります(http://prmac.com/member/services)。当初は無料でいいやと思っていたのですが、Extended Distributionという有料オプションが$19.95だったので、利用しました。(このオプションを適用すると、本来は登録してからプレスリリースが出るまで数日かかるのが、翌日発行されるとのことでしたが、実際には数時間後には発行されてました。)ちなみに、発行直後には、いくつかのアプリレビューサイトから、有料レビュー掲載の営業メールが届きました。(有料でのレビュー掲載は効果があまり無いという情報を多く目にしてるのでスルーしてます。)

prMac利用の結果としては、微風が吹いた感じです。

ちなみに、無料を選択していても私の怪しい英作文を微妙に修正してくれたりもしました。いい感じです。やっといて損はないでしょう。

 

その3

これは、後から知りましたが、とあるiPhoneアプリの企画からマーケティング戦略、結果までが紹介されている記事です。

http://www.repeattimerapp.com/how/

 

6. BlogとTwitter開始

本BlogとTwitterを始めました。(遅っ)

これははっきりいって即効性はないのですが、今後のためにも地道に頑張りまっす。

 

電子書籍がなかなか流行らない理由

紙の書籍 v.s 電子書籍 という1対1の構図にそもそも無理があるという話。

とりあえず、ざっと思いつきで、紙の書籍の種類と、それを電子化した際の最適形態についてずらずらと並べてみると、、、

 

雑誌 ⇒  メルマガ、Webサイト、紙媒体

小説 ⇒  いわゆる電子書籍

マンガ ⇒ 専用画像ビューワアプリ?

ビジネス書籍 ⇒ いわゆる電子書籍、blog、メルマガ

写真集 ⇒ 紙媒体がよい?

実用書 ⇒ 専用アプリ、マルチメディアコンテンツアプリ

辞書 ⇒ 専用アプリ

百科事典 ⇒ 専用アプリ、マルチメディアコンテンツアプリ

教科書 ⇒ 専用アプリ、マルチメディアコンテンツアプリ

 

音楽や動画ほどには書籍の電子化がなかなか広がらない理由として、商流の問題はよく議論としてみかけますが、それよりも、紙書籍のコンテンツの多様性(電子情報化する際の最適形態の多様性)ゆえに、電子書籍という形態が必ずしも最適ではない(そう考えると「電子書籍」というネーミングがそもそもよくないのかも。)という点が1つ目。

 

書籍=テキスト情報であると狭義に捉えると、そのテキストが、小説などの「文章そのものにバリューがあるテキスト」と、情報誌、一部ビジネス書籍などでの「情報そのものにバリューがあるテキスト」「情報をタイムリーに得ることにバリューがあるテキスト」では、最適な流通形態が全く異なります。後者はweb,blog,rss,twitterなども含めた、現在のインターネット/Webそのものであり、コンテンツ提供者個人がビジネスとして成立させるための形としてblog+アフィリエイトや、メルマガという形態があると捉えることができます。

 

そう考えると、

紙の書籍 v.s. 電子書籍

ではなく、実態は、

紙の書籍 v.s. 電子書籍 v.s. インターネット

という構図であると捉えるほうが自然な気がします。

 

電子書籍は一部領域(例えば小説のようなコンテンツや、あるテーマでそれなりのページ数ボリュームがあることにバリューがあるテキストコンテンツなど)でのみは立ち位置を確立するものの、紙の書籍/電子書籍/インターネット、それぞれの共存は続くのでしょう。きっと。

 

という切り口での議論をあまり見た事がないので、書いてみた。

(そもそも電子書籍というジャンルをちゃんと追っかけてるわけではないので知らないだけかも。)

 

追伸

こうやって、書籍の分類をして眺めてみると、AppleのNewsStandや、iBooks Authorは、いわゆる電子書籍(Kindleや昔のiBooks)でのカバーがいまいちな書籍コンテンツ領域をカバーすべく、必然的に投入されたアイテムであるということが読み取れますね。

.Sched 3 で予定をタップした時の背景をぼかすアニメーションの実装方法

.Sched 3 で予定をタップした時に、背景をぼかすアニメーションを実装してるのですが、今回はこの実装方法について紹介します。

紹介ビデオの 0:12,0:35,0:45あたりのやつです。


.Sched 2 の時も、メニュー表示時にこのアニメーションを利用してました。

 

どうやっているかというと、CALayerのCABasicAnimationで、rasterizationScaleの値を変化させています。

ボカシたいタイミング、ボカシをもどしたいタイミングで以下を実行します。

ボカシ処理開始時。

layer.shouldRasterize = YES;
CABasicAnimation *myAnimation = [CABasicAnimation animationWithKeyPath:@"rasterizationScale"];
myAnimation.fromValue = [NSNumber numberWithFloat:1.0];
myAnimation.toValue = [NSNumber numberWithFloat:0.07];
myAnimation.duration = 0.3;
//アニメーション終了時にエフェクトが元に戻らないようにしておく
myAnimation.removedOnCompletion = NO;
myAnimation.fillMode = kCAFillModeForwards;
[layer addAnimation:myAnimation forKey:@"myAnimation"];

 

ボカシを終了して戻す時

CABasicAnimation *myAnimation = [CABasicAnimation animationWithKeyPath:@"rasterizationScale"];
myAnimation.fromValue = [NSNumber numberWithFloat:0.07];
myAnimation.toValue = [NSNumber numberWithFloat:1.0];
myAnimation.duration = 0.3;
myAnimation.removedOnCompletion = NO;
myAnimation.fillMode = kCAFillModeForwards;
[layer addAnimation:myAnimation forKey:@"myAnimation"];

これだけです。

アニメーション適用対象レイヤーのレイヤーツリー配下の全てレイヤーがアニメーション対象となるため、フォーカスしたい部分は、指定レイヤーのレイヤーツリー配下にないようにしておく必要があります。

当初、予定詳細表示時のアニメーションとして、画面がパカーンと割れてスライドするアニメーション(iPhoneのフォルダを開いた時のアニメ)を実装したんですが、上下に割れる形にすると、パフォーマンス的にいまいちだし、思ったほどマッチしなかったので、今回のアニメーションに変更しました。

 

.Sched3のUI/UXデザイン:操作系と機能の割り当て

BlogのサブタイトルにUI/UXデザインとか書いてるので、今回はそのようなネタを。

ちなみに、デザインと呼ばれる領域について体系的に学んだ経験は全くないので、完全に我流です。.Schedの実装では、自分の感覚と合理性(意味付け)の間をいったり来たりしています。

 

本題ここから。

iPhoneでは、タップ、ダブルタップ、スワイプ、長押し、ドラッグ、ピンチイン、ピンチアウトといった操作で機能をトリガーします。iPhoneアプリでは、どの機能のトリガーにどの操作を割り当てるのか?というデザイン(設計)が必要となります。

.Sched 3では、おおよそ以下としています。

 

●予定の参照系の機能

タップ、スワイプ(操作コストの低い、単純な操作)

●予定の追加/修正/削除などの機能

長押し、ドラッグ、2アクション以上の組み合わせ(操作コスト高め)

追加/修正については、長押し(+ドラッグ)、削除については2アクション以上の組み合わせをアサインするようにしています。

 

ここで、「操作コスト」という表現をしてますが、コストの高さは色々な軸があって、

  • 単純に手数(アクション)が必要
  • 操作してから反応するまでのラグがある(長押し系)
  • 片手で操作できない(ピンチイン、ピンチアウト)
というような操作は、コストが高いと位置づけられると思ってます。

 

ついこないだ話題になったTo do アプリのClear for iPhoneですが、リスト階層の移動にピンチイン/ピンチアウトをアサインしており、ビジュアル的には、ベストマッチの操作割り当てなのですが、Todoアプリとして片手で操作できないピンチイン/ピンチアウトは実用的ではないなぁと感じました。(大きくスワイプで階層移動する、操作エイリアスも用意されていますが、操作感としてはもう一つ。)

 

話を戻し、コストの高い操作に対しては、そのコストの高さ故に利用者が感じるストレスを軽減する見返りのようなものを割り当てる必要があるのかなと思ってます。

例えば、写真参照アプリでのピンチイン/ピンチアウトを例に上げると、操作に対してリアルタイムに画像のズームイン/アウトするアニメーションの気持ちよさがあり、ズームイン/ズームアウトすることがそもそも目的なので、これは全くストレスにはなりません。(先のClearの例では、デモしたりUI操作を楽しむという面においてはストレスはありませんが、Todo情報に素早くアクセスしたいという目的を前提にするとストレスに感じてしまいます。)

この点を考慮し、.Sched3の追加/修正/削除のコストが高い操作に対しては、「アニメーションを使う」「長押してそのままドラッグすると時間調整ができて便利」というような操作コストのストレス軽減策を極力盛り込んだつもりです。

 

でも最終的にストレスと感じるか否か?は私の感性で決めているので、その結果として、そこが「いい」と言ってくれる方もいれば、そこが「ダメ」という方もいて、まだまだだなぁと感じる今日この頃です。

 

.Sched3の紹介動画作成(後半)QuartzComposerあたりを中心に紹介

前回の.Sched3の紹介動画作成 Reflection +QuickTime +QuartzComposer +iMovie +GarageBand の続きです。

紹介動画はコチラ

上記のムービー作成の流れは、

  1. ReflectionというアプリでiPhoneの画面をMacで表示
  2. Reflectionで表示された画面をQuick Time X でキャプチャ
  3. Quartz Composer に、iPhone4の3Dモデルを読み込ませ、画面部分にキャプチャした動画をはりつけ
  4. Quartz Composerでカメラアングルやライティングをコントロールして動画書き出し。
  5. 最後に、iMovieで体裁整え。音楽はGarageBandで。
という感じで、前回のエントリでは2まで紹介しましたので、今回は続きの3あたりから。Quartz Composer周りはもうちょっと詳しく紹介します。

 

Quartz Composerって?

GUIでプログラミングできるビジュアルプログラミング環境です。マウスでパッチと呼ばれる機能の固まりの箱をつないで、プログラミングします。

従来はXcodeに付属してましたが、つい最近Xcode4.3になってからは、個別にインストールが必要となりました。Appleのダウンロードセンターからダウンロードできます。(GraphicTools for Xcodeに含まれてます。)

 

Quzrtz Composer step1 Lightingパッチ

Quartz Composer を起動し、まずは、Lightingパッチを配置します。
照明を制御するパッチです。

 

Quartz Composer Step2  3D Transformationパッチ

次に、Lightingパッチをダブルクリックして、3D Transformationパッチを配置します。パッチは階層構造を取る事ができます。
3D Transformationパッチは、サブパッチの3D変形を行なうパッチです。

 

Quartz Composer Step3  Spriteパッチ, Meshrendererパッチで素材を配置

3D Transformationパッチをダブルクリックして、サブパッチを配置します。
ここでは、3つのパッチを配置しました。
  • Spriteパッチ(1)
  • Spriteパッチ(2)
  • Mesh Rendererパッチ
Spriteパッチは、2Dの四角形を描画するパッチです。1つはiPhoneの画面用、もう一つはiPhone画面のステータスバーのマスク用(Refrectionで表示した画面のステータスバーはAirPlay中で青色になってしまうので、通常の黒いステータスバー画像でマスクします。)

フィールドに、先にキャプチャーした.movのファイルをドラッグすると、Movie Importerパッチ(動画を出力するパッチ)が生成されます。超簡単です。

パッチには右側と左側に白いポッチがあるのですが、左のポッチが入力、右のポッチが出力です。.movのファイルをドラッグしてできたMovie ImporterのImage出力をSpriteのImage入力にドラッグで接続すると、なんと、四角い箱に動画が表示されます。

同様に、マスク用の画像ファイルをフィールドにドラッグドロップするとImageパッチができるので、この出力を別のSpriteのImage入力に接続します。

Mesh Rendererパッチは、3Dモデルを描画するパッチです。iPhoneの3Dモデルは、Google SketchUpギャラリーから入手。そのままだと、.skpというSketchUp用のファイル形式でQuartz Composerに読み込ませることができないので、SketchUpをインストール(free版でOK)し、.skpファイル読み込んで、.daeという形式で書き出します。
この書き出した.daeファイルをQuartz ComposerのWindowにドラッグドロップすると、Mesh Importerという3Dモデルの読み込みパッチができます。この出力(Mesh)をMesh Rendererの入力(Mesh)に接続すると、3Dオブジェクトが表示されます。
素材の準備は以上で、動画のSpriteBoxが、iPhoneの3Dオブジェクトの画面部分にちょうどフィットするようにSprite、Mesh ImporterのX,Y,Z Position,Rotation,Scaleを調整します。

 

Quartz Composer Step4 3D Transformationでアングル操作

3D Transformationパッチにもどり、このパッチのTransition, Rotationパラメータをいじると、アングルを変更できます。さらに、アングル変更を時間軸で自動制御するために、Timelineパッチを接続します。
Timelineパッチは、上のイメージのように、時間軸での値の変化をグラフで定義することのできるパッチです。

こいつで、カメラアングルをグリグリ制御すればよいのですが、かなりしんどいので、実際には、「固定アングル決める」⇒「固定アングルで.mov書き出し」を繰り返し、様々な固定アングルの.movを書き出しました。(あとで、iMovieで切り貼りすることにした。)

1つ省略してしまいましたが、このままだと、背景がない状態なので、Root階層に背景用画像を表示するSpriteを配置してます。

 

iMovieで編集

以上で準備した色々なアングルの.movなファイル素材をiMovieにぶっ込み、切り貼りして、title/ending、BGMをくっつけて完成となりますが、1つ問題がありました。

Quartz Composerで.movで動画ファイルに出力ができるのですが、そのままでは、iMovieに読みこませる事ができません。.movのファイル情報をみると、codecが”Quartz Composer”となってます。

そこで、変換処理が必要となるのですが、変換には、QuickTime 7 Proを利用しました。OSX Lion付属のQuickTimeは、X(ten)ですが、変換処理には、有償のQuickTime 7 Proが必要のようです。(すみません、ここでも有償ソフトを使ってました。)QuickTime 7 Proは、ここで入手できます。QuickTime 7 は、QuickTime Xと同居可能。 Proのライセンスが3400円です(私は過去にProライセンスを購入していたので、ライセンスコードを過去のメールから掘り起して使いました)。
QuickTime 7 Proで変換したファイルをiMovieにぶっ込み、編集して完成となります。
以上となります。
完全に我流で作成しましたが、以外となんとかなるもんですね。

.Sched3 リリース (.Sched2からの更新内容)

.Sched3ですが、ようやくAppleのレビューも終わり、本日3/28リリースしました。(AppStoreへの反映にはもう少し時間がかかるかも。)

 

メジャーバージョンアップ記念ということで、期間限定セールします!!

通常価格 500円のところを170円にて!

 

紹介動画はこちら



 

 

以下、.Sched 3 の.Sched2からの機能差分情報です。

 

スライドナビゲーションメニューを採用

従来のオーバーレイメニューを廃止し、左右にスライドでメニューを表示するようにしました。(Facebookや、Pathなどのアレです。)これに伴い、月送りは、縦方向固定となりました。


日表示モード

ドラッグで予定時刻の変更が可能な日表示モードを登載しました。



予定をタップすると、詳細情報が表示されます。詳細情報画面では、タイトル部タップで「タイトルのクイック修正モード」や、左右にスライドで「アクションボタン表示」、「場所指定がある場合は場所をタップでマップアプリを起動」、「タイトルタップでタイトルの簡易修正モード」などの機能を盛り込んでます。

言葉で説明してもよくわからないかと思いますので、上の動画を見ていただければと思います。



 

ちなみに、従来のリスト表示も残しており、画面下部のボタンで日表示モードと切り替えできます。リスト表示も操作系を見直しています。

 

日時表示フォーマット見直し

全体的に日時表示フォーマットを見直しました。

基本的には、iOS本体の言語や日時フォーマットに従った表示となります。24Hや12Hの切り替えも、アプリ内切り替えオプションを排除し、iOS本体の設定に依存する形としました。

唯一、月タイトルや、週ラベルの表示言語については、「英語」か「iOS本体のシステム設定言語」を選択可能な様になっています。

 

その他

カレンダー色変更のカラーピッカーを更新しました。

Yomoappの中の方の作成された、iOS用ColorPickerを使わさせてもらいました。ありがとうございます!)

アイコン変更

設定項目の見直し/再配置

右側メニュー下部に、ランダムで”Words of wisdom”を表示

パフォーマンスチューニング

バグ修正(いろいろ)

あと、内部的には、ARC化、deprecatedなmethod対応、iOS5.1対応などなど。

 

さらに、無料版を再開します。(表示期間の制限をなくしました。ただし、予定の追加/修正/削除は引き続き制限されます。)

 

上記に記載していない微細な機能拡張もまだありますが、更新内容としては、おおよそこんなところです。無料版もありますので、興味をもたれた方はぜひともお試し願います。

 

既に、.Sched 4の構想も出来つつあるのですが、.Sched3として盛り込みたい機能がまだ多少残っているので、しばらくは.Sched3としてのUpdateを行なって行く予定です。

 

.Sched3の紹介動画作成 Reflection +QuickTime +QuartzComposer +iMovie +GarageBand

3/18 に.Sched3をiTunes ConnectにSubmitしました。ずぅっと”Waiting for Review”状態ですが、一週間たったので、そろそろIn Reviewになっていいころでしょうか。。。

とりあえず、.Sched3の紹介動画を作成しましたのでアップ。



せっかくですので、この動画の作成方法について簡単に紹介します。

はっきり言ってこの様な作業はまったくの素人ですので、完全に試行錯誤しながらの作業です。

初めは、実際にカメラで撮影しようかと思ったのですが、思い描く絵にまったたくならず、早々にあきらめました。iPhoneの操作画面撮りは、ライティングが難しいです。

で、どうしたかというと、CGで頑張ってみることにしました。3DCGって、どうやって作るの?という調査から開始。ソフトの値段もピンキリのようで、いきなり高価なものに手を出すわけにもいかず、極力コストをかけずにやるという方針に決定。最終的には以下のような形となりました。

  1. ReflectionというアプリでiPhoneの画面をMacで表示
  2. Reflectionで表示された画面をQuick Time X でキャプチャ
  3. Quartz Composer に、iPhone4の3Dモデルを読み込ませ、画面部分にキャプチャした動画をはりつけ
  4. Quartz Composerでカメラアングルやライティングをコントロールして動画書き出し。
  5. 最後に、iMovieで体裁整え。音楽がGarageBandで。

ReflectionでiPhoneの画面をMacで表示

無料で10分試すことができます。Macでこのソフトを起動し、iPhone側でAirPlayの設定をするだけ。非常に簡単です。画質はさほどよくないですが、反応は思ったより悪くないです。ちょっと試している間に10分の時間切れとなり、有償ライセンス購入しました。14.99USD(Paypal払い)です。

 

Reflectionで表示された画面をQuick Time X でキャプチャ

OSX付属のQuick Time X で画面の動画キャプチャができることを皆さんご存知でしょうか?

メニューの「ファイル」>「新規画面収録」で、画面の動画がキャプチャできます。全画面or任意の領域指定が可能です。

iPhone4Sでアプリを起動操作する様をReflectionでMacに表示し、それをQuickTimeXで撮影。この撮影した動画をQuartz Composer上のiPhone4の3Dモデルの画面部分に張りつけて。。。。。。。。という感じでまるまる1日使い、14.99USDの出費で何とかひとまず完成させました。

カメラアングルとか、コマ割りとか、もうちょっと色々と凝りたいところですが、やり出すと永遠に終わらない予感がしたので、ひとまず決着(完了)させました。

(動画作成後半戦のQuartz Composer以降内容については、また、後日記載するかも)