Capture video on iPhone

1. スポイトができるまで
アイデアがAppStoreに並ぶまで
Hiroyuki‐Fujikawa. (cqa02303)

2. アイデア段階
• Webで使うカラーコードって直感的に分からん
• 逆に色見てコードにするのはもっと大変
• カメラってRGBにして保存するよね
• カメラって写真だけじゃないよね
– バーコードリーダーとかあるし
→ カラーピッカー欲しいなぁ（漠然とした想い）

3. きれいなカメラ
• UIImagePickerController
– UIView.subviews
– [UIView removeFromSuperView:]
→ 一瞬見えるゴミが駄目！使えない！

4. きれいなカメラ(リベンジ)
• PLCameraController
– Norio Nomuraさんが一瞬で調べた物
– 成果を知らずに自力で調べてたよ （ガーン）

5. カメラの呼び出し方
• Classをclassと思わない傍若無人な関数が！
objc_getClass(); // クラス取得
objc_msgSend(); // メソッド呼出し
object_setInstanceVariable(); // クラス変数設定
– ダミー継承クラス要らないじゃん！
– 面白いから、全部そういう書き方にしてみる

6. PLCameraController呼出し
// id camera = [PLCameraController sharedInstance];
id klass = objc_getClass("PLCameraController");
id camera = objc_msgSend(klass, @selector(sharedInstance));
// camera._cameraLayer = cView.layer;
object_setInstanceVariable(camera, "_cameraLayer", cView.layer);
// camera._previewView = cView;
object_setInstanceVariable(camera, "_previewView", cView);
// camera._delegate = self;
object_setInstanceVariable(camera, "_delegate", self);
// [camera _setupCamera];
objc_msgSend(camera, @selector(_setupCamera));
// [camera startPreview];
objc_msgSend(camera, @selector(startPreview));
→ PLCameraControllerをロードしていないのでエラー
同
意
味
ー

7. PLCameraControllerをロードする
PrivateFramework/CameraFrameworkに存在
• XcodeのFrameworkに入れる？
• dlopen()してリンクする？
→両方バレバレじゃないか？

8. PLCameraControllerをロードする
UIImagePickerControllerを呼出せばOK!
• このコードすら書くの面倒になった
→xibにやらせてしまえ！
ここに追加しただけ！！

9. ビットマップの値取得
• 画面コピー
– _createCGImageRefRepresenta`onInFrame:
• どなたに教えて教えて頂いたのか忘れてしまいました。
– (ごめんなさい)
• 当時はclass‐dumpを使う事に夢中
• ビットマップ値取得
– CGBitmapContextCreate();
• へにゃ社長(sorasorasoraさん)に教えてもらう

10. さて、色配列は召し捕った
• 細かい計算めんどくさい
• ごまかしの手法を検討
– 16 x 16 の領域から平均値取得 (256個だから)
– RGBに分解して全部足し算
– 8bit 右シフトで平均値にする
– 各RGB値を255.0fで割ってCGFloat化
256個の平均値 ： N / 256 = N >> 8 だよね？

11. カラーピッカー出来た！

12. でも…
つまらないよね

13. 凄いだけじゃ つまらない
• 平べったくて見たい所に向けるモノはなに？
– 虫眼鏡だ！
• 色が分かったらどう見せるか？
– 実用的なもの → カラーコード
– 直感的じゃない → 色も見せる

14. 方針は決まった！

15. リソースを作成
• 動かしてみる
• けど、なんか変だよ！
こんなイメージ？ ⇒

16. 虫眼鏡が虫眼鏡に見えない
• レンズっぽさをつける
– 「てかり」があるはず
– フチが見えにくいと良い
• ハイライトで立体的に
– まっすぐ持つだけじゃない
• 余計不自然になるし…
– それっぽく動くだけでいい
• ハイライトを回転させる

17. 重力に従って回転するUIView
• 回転はCGAffineTransformMakeRota2on();
– これはCGAffineTransformMake()のラッパ？
– Sin() , cos()を削減する為にRota2onは使わない

18. 回転の元ネタはAccelerometer
– X−Y方向の値を使用
– 合成ベクトル長を1.0にして回転方向疑似値に
疑似X
疑
似
Y
長さ１の円
加速度の値

19. カラーコードだけじゃつまらない
• 色を吸い取るのに使うのはなに？
– スポイトだ！
– スポイトは下に向けて吸うよね

20. • FireWorks大活躍
– 楕円と長方形で構成
• アウトラインの結合
• グラデーション
• 半透明
レイヤーの重なり
スポイトらしさの追求
ここの色を
加工して変更

21. 色みほんにも注意を払う
• 色みほんの実態はUIView
• backgroundColorを変更
⇒ ただの四角はつまらんがな
• Frontに絵をおけば良いじゃん
BG
Front

22. 楕円運動はめんどくさい
• CoreAnima`onは直線運動
– 直線運動は立体的に見えないんだ

23. 楕円運動はめんどくさい
• そもそも吸った後、下向けたら垂れるYO!
• 回転運動も追加だ！
– 回転＋直線運動
でいい動き
…錯覚なんだけどね

24. 虫眼鏡は拡大出来なくちゃ
• どうやる？
– UIViewを拡大するだけ
• 入力は？
– 傾き？ Z軸加加速度？ ⇒ 複雑過ぎ
• UISliderで実装
– 操作難しすぎ！！！
• UISegmentedControlに変更
– しっくり来た！
ずれると
ダメ！

25. InterfaceBuilderで定義(View側)
定義する部品
• カメラ画像用View [IBOutlet : カメラへの指示用]
• 虫眼鏡
• ハイライト [IBOutlet : 回転用]
• グリップ濃度 [IBOutlet : 濃度調整用]
• スポイト移動枠 [IBOutlet : 移動+回転用]
– 影
– 着色部 [IBOutlet : 色変更用]
– スポイト <独自View指示 : タッチ検知用>
– 押しアニメ [IBOutlet : 押しアニメ用]
• 色みほん [IBOutlet : 着色用]
• （色みほん：右） [IBOutlet : 着色用]
• 固定文字 “COLOR”
• 色コード：左 [IBOutlet : 変更用]
• 倍率ボタン (‐> ac`onのselectorを指示)
• 色コード：右 [IBOutlet : 変更用]
• スポイト内の色：元画像 [IBOutlet : 加工時の参照用]

26. InterfaceBuilderで定義(定義側)
UIViewで階層構造
1. 背景＋虫眼鏡
– その他の情報
2. スポイト
3. 着色データ
①
②
③

27. アイコンも大事
• 縮小だけじゃ駄目よ
– 虫眼鏡の太さなどを微調整してあります
同じ大きさで比較
アプリアイコン
AppStoreアイコン

28. で、完成
• ここまで３日(PLCameraControllerから)
spuIt / スポイト

29. みんなに楽しんで欲しい
• AppStoreに申請してもRejectされるよね？
– とりあえず出してウケを狙え！
• 元々 受けを狙う為のアプリなんだ
→と、言う事で
真澄を呑みながら申請手続きをしました。

30. なぜか Ready for Sale
考察
• 実は、評価が甘いアプリがある
– 独自性のあるアプリ
– 必然性のある使い方
– Macで使えるPrivateのうち、iPhoneSDK側のDocに
記述されたAPI
• もしかしたら、見逃してくれたのかも！

31. おしまい