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

スポイトができるまで

571

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
571
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "スポイトができるまで"

  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. おしまい
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×