スポイトができるまで

730 views

Published on

Capture video on iPhone

Published in: Self Improvement
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
730
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

スポイトができるまで

  1. 1. スポイトができるまで  アイデアがAppStoreに並ぶまで   Hiroyuki‐Fujikawa. (cqa02303)
  2. 2. アイデア段階 •  Webで使うカラーコードって直感的に分からん  •  逆に色見てコードにするのはもっと大変  •  カメラってRGBにして保存するよね  •  カメラって写真だけじゃないよね  – バーコードリーダーとかあるし  → カラーピッカー欲しいなぁ(漠然とした想い) 
  3. 3. きれいなカメラ •  UIImagePickerController  – UIView.subviews  – [UIView removeFromSuperView:]  → 一瞬見えるゴミが駄目!使えない!
  4. 4. きれいなカメラ(リベンジ) •  PLCameraController  – Norio Nomuraさんが一瞬で調べた物  – 成果を知らずに自力で調べてたよ (ガーン) 
  5. 5. カメラの呼び出し方 •  Classをclassと思わない傍若無人な関数が!  objc_getClass();          // クラス取得  objc_msgSend();          // メソッド呼出し  object_setInstanceVariable();  // クラス変数設定   – ダミー継承クラス要らないじゃん!  – 面白いから、全部そういう書き方にしてみる 
  6. 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. 7. PLCameraControllerをロードする PrivateFramework/CameraFrameworkに存在  •  XcodeのFrameworkに入れる?  •  dlopen()してリンクする?  →両方バレバレじゃないか? 
  8. 8. PLCameraControllerをロードする UIImagePickerControllerを呼出せばOK!  •  このコードすら書くの面倒になった  →xibにやらせてしまえ! ここに追加しただけ!!
  9. 9. ビットマップの値取得 •  画面コピー  – _createCGImageRefRepresenta`onInFrame:  •  どなたに教えて教えて頂いたのか忘れてしまいました。  –  (ごめんなさい) •  当時はclass‐dumpを使う事に夢中  •  ビットマップ値取得  – CGBitmapContextCreate();  •  へにゃ社長(sorasorasoraさん)に教えてもらう 
  10. 10. さて、色配列は召し捕った •  細かい計算めんどくさい  •  ごまかしの手法を検討  – 16 x 16 の領域から平均値取得 (256個だから)  – RGBに分解して全部足し算  – 8bit 右シフトで平均値にする  – 各RGB値を255.0fで割ってCGFloat化  256個の平均値 : N / 256 = N >> 8 だよね?
  11. 11. カラーピッカー出来た! 
  12. 12. でも… つまらないよね
  13. 13. 凄いだけじゃ つまらない •  平べったくて見たい所に向けるモノはなに?  – 虫眼鏡だ!  •  色が分かったらどう見せるか?  – 実用的なもの → カラーコード  – 直感的じゃない → 色も見せる 
  14. 14. 方針は決まった!
  15. 15. リソースを作成 •  動かしてみる  •  けど、なんか変だよ! こんなイメージ? ⇒
  16. 16. 虫眼鏡が虫眼鏡に見えない •  レンズっぽさをつける  – 「てかり」があるはず  – フチが見えにくいと良い  •  ハイライトで立体的に  – まっすぐ持つだけじゃない  •  余計不自然になるし…  – それっぽく動くだけでいい  •  ハイライトを回転させる 
  17. 17. 重力に従って回転するUIView •  回転はCGAffineTransformMakeRota2on();  – これはCGAffineTransformMake()のラッパ?  – Sin() , cos()を削減する為にRota2onは使わない 
  18. 18. 回転の元ネタはAccelerometer – X−Y方向の値を使用  – 合成ベクトル長を1.0にして回転方向疑似値に 疑似X 疑 似 Y 長さ1の円 加速度の値
  19. 19. カラーコードだけじゃつまらない •  色を吸い取るのに使うのはなに?  – スポイトだ! – スポイトは下に向けて吸うよね 
  20. 20. •  FireWorks大活躍  – 楕円と長方形で構成  •  アウトラインの結合  •  グラデーション  •  半透明  レイヤーの重なり スポイトらしさの追求 ここの色を  加工して変更
  21. 21. 色みほんにも注意を払う •  色みほんの実態はUIView  •  backgroundColorを変更  ⇒ ただの四角はつまらんがな  •  Frontに絵をおけば良いじゃん BG Front
  22. 22. 楕円運動はめんどくさい •  CoreAnima`onは直線運動  – 直線運動は立体的に見えないんだ 
  23. 23. 楕円運動はめんどくさい •  そもそも吸った後、下向けたら垂れるYO!  •  回転運動も追加だ!  – 回転+直線運動  でいい動き  …錯覚なんだけどね 
  24. 24. 虫眼鏡は拡大出来なくちゃ •  どうやる?  –  UIViewを拡大するだけ  •  入力は?  –  傾き? Z軸加加速度? ⇒ 複雑過ぎ  •  UISliderで実装  –  操作難しすぎ!!!  •  UISegmentedControlに変更  –  しっくり来た! ずれると  ダメ!
  25. 25. InterfaceBuilderで定義(View側) 定義する部品  •  カメラ画像用View [IBOutlet : カメラへの指示用]  •  虫眼鏡  •  ハイライト [IBOutlet : 回転用]  •  グリップ濃度 [IBOutlet : 濃度調整用]  •  スポイト移動枠 [IBOutlet : 移動+回転用]  –  影  –  着色部 [IBOutlet : 色変更用]  –  スポイト <独自View指示 : タッチ検知用>  –  押しアニメ [IBOutlet : 押しアニメ用]  •  色みほん [IBOutlet : 着色用]  •  (色みほん:右) [IBOutlet : 着色用]  •  固定文字 “COLOR”  •  色コード:左 [IBOutlet : 変更用]  •  倍率ボタン (‐> ac`onのselectorを指示)  •  色コード:右 [IBOutlet : 変更用]  •  スポイト内の色:元画像 [IBOutlet : 加工時の参照用] 
  26. 26. InterfaceBuilderで定義(定義側) UIViewで階層構造  1.  背景+虫眼鏡  –  その他の情報  2.  スポイト  3.  着色データ  ①  ②  ③ 
  27. 27. アイコンも大事 •  縮小だけじゃ駄目よ  – 虫眼鏡の太さなどを微調整してあります 同じ大きさで比較 アプリアイコン AppStoreアイコン
  28. 28. で、完成 •  ここまで3日(PLCameraControllerから)  spuIt / スポイト
  29. 29. みんなに楽しんで欲しい •  AppStoreに申請してもRejectされるよね?  – とりあえず出してウケを狙え!  •  元々 受けを狙う為のアプリなんだ  →と、言う事で  真澄を呑みながら申請手続きをしました。 
  30. 30. なぜか Ready for Sale 考察  •  実は、評価が甘いアプリがある  – 独自性のあるアプリ  – 必然性のある使い方  – Macで使えるPrivateのうち、iPhoneSDK側のDocに 記述されたAPI  •  もしかしたら、見逃してくれたのかも! 
  31. 31. おしまい

×