iPhoneカメラアプリ開発入門(第1回)

20,399 views
20,269 views

Published on

0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
20,399
On SlideShare
0
From Embeds
0
Number of Embeds
8,790
Actions
Shares
0
Downloads
26
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

iPhoneカメラアプリ開発入門(第1回)

  1. 1. カメラアプリ開発入門(第一回)まずは基本の基本からCoreImageを使った画像加工まで2013/5/25 名古屋iPhone開発者勉強会13年5月25日土曜日
  2. 2. 大塚 崇(おおつか たかし)DJ / フリーランスのエンジニア・プログラマハンドル名: takatronixFacebook/Twitter/Skype/LINE/Weibo -> takatronixhttp://takatronix.com趣味興味:旅行、語学、筋トレ、LEGO、FX、心理学、 脳科学、宇宙自己紹介13年5月25日土曜日
  3. 3. リリースしたアプリデカ目ミラー、SEXY SCAN、 放射能汚染地図、和牛スキャン ...デカ目ミラー(SexyMirror)2013/1リリースイギリスのiPhone総合で何故か10位に、現在40万ダウンロード13年5月25日土曜日
  4. 4. iOSカメラAPIUIImagePickerControllerAVFoundation.frameworkiOS4から、標準のカメラUIを使わないアプリが作れるよくあるカメラのUI非常に簡単だが自由がないリアルタイムエフェクトはできない実装は結構大変だがなんでもできる13年5月25日土曜日
  5. 5. iOS画像処理方法CoreImage (CPU/GPU)OpenGL (GPU)ピクセル処理 (CPU)OpenCV (CPU/GPU)vImage (GPU)13年5月25日土曜日
  6. 6. UIImagePickerControllerの使い方最初の一歩13年5月25日土曜日
  7. 7. プロジェクトの作成13年5月25日土曜日
  8. 8. 適当に設定して13年5月25日土曜日
  9. 9. 適当に画面を設計13年5月25日土曜日
  10. 10. ViewController.h に追加#import <UIKit/UIKit.h>@interface ViewController : UIViewController <UIImagePickerControllerDelegate,UINavigationControllerDelegate>13年5月25日土曜日
  11. 11. ViewController.hに追加#import <UIKit/UIKit.h>@interface ViewController : UIViewController <UIImagePickerControllerDelegate,UINavigationCon@property IBOutlet UIImageView* imageView;@end13年5月25日土曜日
  12. 12. フォトライブラリを開く処理ViewController.mに追加// フォトライブラリを開く- (IBAction)openPhotoLibrary:(id)sender {// フォトライブラリが使えるかチェック// カメラを開く場合// UIImagePickerControllerSourceTypePhotoLibrary を// UIImagePickerControllerSourceTypeCamera に変更! if([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypePhotoLibrary])! {// UIImagePickerControllerを作成し初期化 new = alloc + init! ! UIImagePickerController* imagePicker = [UIImagePickerController new];// カメラを開く場合 sourceType = UIImagePickerControllerSourceTypeCamera;imagePicker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;// 編集可能にする場合はYESimagePicker.allowsEditing = YES;// 自分への通知設定imagePicker.delegate = self;// フォトライブラリを開く[self presentViewController:imagePicker animated:YEScompletion:^{// 開いたタイミングに呼ばれるNSLog(@"(1)フォトライブラリを開いた");}];}}13年5月25日土曜日
  13. 13. ViewController.mに追加撮影後orサムネイル選択後に呼ばれる処理テキスト// 写真撮影後orサムネイル選択後に呼ばれる処理-(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info{! // オリジナル画像! UIImage* originalImage = (UIImage *)[info objectForKey:UIImagePickerControllerOriginalImage];! // 編集画像! UIImage* editedImage = (UIImage *)[info objectForKey:UIImagePickerControllerEditedImage];UIImage* savedImage;if(editedImage){savedImage = editedImage;}else{savedImage = originalImage;}// 選択された画像を表示_imageView.image = savedImage;// 開いているカメラ・フォトライブラリを閉じる[self dismissViewControllerAnimated:YES completion:^{}];}13年5月25日土曜日
  14. 14. imageViewを接続13年5月25日土曜日
  15. 15. ボタンに接続13年5月25日土曜日
  16. 16. ボタンを押して13年5月25日土曜日
  17. 17. あれ?(^_^;)?13年5月25日土曜日
  18. 18. シミュレータに画像がない場合Safariで画像検索して保存してね13年5月25日土曜日
  19. 19. どぉーん13年5月25日土曜日
  20. 20. どぉーん13年5月25日土曜日
  21. 21. フィルタがないカメラアプリとか小学生までだよねー?13年5月25日土曜日
  22. 22. CoreImageを使う13年5月25日土曜日
  23. 23. CoreImage.frameworkを追加13年5月25日土曜日
  24. 24. ViewController.mに追加#import "ViewController.h"#import <CoreImage/CoreImage.h>@interface ViewController ()@end13年5月25日土曜日
  25. 25. モノクロフィルタを作るViewController.mに追加// グレースケール画像を作成する-(UIImage*)monochromeFilter:(UIImage*)image{// UIImageをCoreImageに変換するCIImage* ciImage = [[CIImage alloc] initWithImage:image];// CoreImageフィルタを作成するCIFilter* ciFilter = [CIFilter filterWithName:@"CIColorMonochrome"keysAndValues:kCIInputImageKey, ciImage,// パラメータ:入力色(RGBのフィルタ係数)// セピア色にするなら [CIColor colorWithRed:1.0 green:0.7 blue:0.4]@"inputColor", [CIColor colorWithRed:1.0 green:1.0 blue:1.0],// パラメータ(度合い)// 0.5にすれば半分の適用度になります@"inputIntensity", [NSNumber numberWithFloat:1.0],nil];// CoreImageのコンテクストを作成CIContext* ciContext = [CIContext contextWithOptions:nil];// フィルタを適用CGImageRef cgImage = [ciContext createCGImage:ciFilter.outputImage fromRect:[ciFilter.outputImage extent]];// CGImageRefをUIImageに変換UIImage* retImage = [UIImage imageWithCGImage:cgImage scale:image.scale orientation:UIImageOrientationUp];// CGImage開放CGImageRelease(cgImage);return retImage;}13年5月25日土曜日
  26. 26. フィルタを適用するViewController.mを修正// 写真撮影後orサムネイル選択後に呼ばれる処理-(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary*)info{! // オリジナル画像! UIImage* originalImage = (UIImage *)[info objectForKey:UIImagePickerControllerOriginalImage];! // 編集画像! UIImage* editedImage = (UIImage *)[info objectForKey:UIImagePickerControllerEditedImage];UIImage* savedImage;if(editedImage){savedImage = editedImage;}else{savedImage = originalImage;}// モノクロフィルタを適用してから// 選択された画像を表示_imageView.image = [self monochromeFilter:savedImage];// 開いているカメラ・フォトライブラリを閉じる[self dismissViewControllerAnimated:YES completion:^{}];}13年5月25日土曜日
  27. 27. パラメータを変えてみよう@"inputColor", [CIColor colorWithRed:1.0 green:0.7 blue:0.4],@"inputColor", [CIColor colorWithRed:1.0 green:1 blue:0],@"inputIntensity", [NSNumber numberWithFloat:0.5],13年5月25日土曜日
  28. 28. ケラレフィルタ(カメラの周辺光量落ち)Instagramっぽい効果をだせます13年5月25日土曜日
  29. 29. ケラレフィルタを作る// ケラレフィルタ(カメラの周辺光量落ち)-(UIImage*)vignetteFilter:(UIImage*) image{// UIImageをCoreImageに変換するCIImage* ciImage = [[CIImage alloc] initWithImage:image];// CoreImageフィルタを作成するCIFilter* ciFilter = [CIFilter filterWithName:@"CIVignette"keysAndValues:kCIInputImageKey, ciImage,//@"inputRadius", [NSNumber numberWithFloat:2.0],// パラメータ(度合い)// 0.5にすれば半分の適用度になります@"inputIntensity", [NSNumber numberWithFloat:1.0],nil];// CoreImageのコンテクストを作成CIContext* ciContext = [CIContext contextWithOptions:nil];// フィルタを適用CGImageRef cgImage = [ciContext createCGImage:ciFilter.outputImage fromRect:[ciFilter.outputImage extent]];// CGImageRefをUIImageに変換UIImage* retImage = [UIImage imageWithCGImage:cgImage scale:image.scale orientation:UIImageOrientationUp];// CGImage開放CGImageRelease(cgImage);return retImage;}ViewController.mに追加13年5月25日土曜日
  30. 30. // 写真撮影後orサムネイル選択後に呼ばれる処理-(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)in{! // オリジナル画像! UIImage* originalImage = (UIImage *)[info objectForKey:UIImagePickerControllerOriginalImage];! // 編集画像! UIImage* editedImage = (UIImage *)[info objectForKey:UIImagePickerControllerEditedImage];UIImage* savedImage;if(editedImage){savedImage = editedImage;}else{savedImage = originalImage;}// モノクロフィルタ+ケラレフィルタを適用し、画面に表示_imageView.image = [self vignetteFilter:[self monochromeFilter:savedImage]];// 開いているカメラ・フォトライブラリを閉じる[self dismissViewControllerAnimated:YES completion:^{}];}モノクロフィルタ+ケラレフィルタを適用13年5月25日土曜日
  31. 31. ちょと味がでますね13年5月25日土曜日
  32. 32. カメラロールへ保存-(void)image:(UIImage*)image didFinishSavingWithError:(NSError*)error contextInfo:(void*)contextInfo{if(error){NSLog(@"Error");}else{NSLog(@"保存した");}}ViewController.mへ追加// 写真撮影後orサムネイル選択後に呼ばれる処理-(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info{! // オリジナル画像! UIImage* originalImage = (UIImage *)[info objectForKey:UIImagePickerControllerOriginalImage];! // 編集画像! UIImage* editedImage = (UIImage *)[info objectForKey:UIImagePickerControllerEditedImage];UIImage* savedImage;if(editedImage){savedImage = editedImage;}else{savedImage = originalImage;}// モノクロフィルタ+ケラレフィルタを適用し、画面に表示_imageView.image = [self vignetteFilter:[self monochromeFilter:savedImage]];// カメラロールへ保存するUIImageWriteToSavedPhotosAlbum(_imageView.image, self, @selector(image:didFinishSavingWithError:contextInfo:), nil);// 開いているカメラ・フォトライブラリを閉じる[self dismissViewControllerAnimated:YES completion:^{}];}13年5月25日土曜日
  33. 33. プロジェクトとこのスライドはここから落とせますよ。http://takatronix.com/tutorial/20130525.zip次回から実機転送が必須(予定)になりますので、興味がある人は、Appleに開発者登録と実機転送まで、済ましておいてください。13年5月25日土曜日
  34. 34. takatronix検索http://takatronix.com13年5月25日土曜日
  35. 35. ありがとうございましたtakatronix検索http://takatronix.com13年5月25日土曜日

×