iPhoneカメラアプリ開発入門（第１回）

カメラアプリ開発入門
（第一回)
まずは基本の基本から
CoreImageを使った画像加工まで
2013/5/25 名古屋iPhone開発者勉強会
13年5月25日土曜日

大塚崇（おおつかたかし）
DJ / フリーランスのエンジニア・プログラマ
ハンドル名: takatronix
Facebook/Twitter/Skype/LINE/Weibo -> takatronix
http://takatronix.com
趣味興味：旅行、語学、筋トレ、LEGO、FX、心理学、
脳科学、宇宙
自己紹介

リリースしたアプリ
デカ目ミラー、SEXY SCAN、放射能汚染地
図、和牛スキャン ...
デカ目ミラー(SexyMirror)2013/1リリース
イギリスのiPhone総合で何故か１０位に、
現在４０万ダウンロード

iOSカメラAPI
UIImagePickerController
AVFoundation.framework
iOS4から、標準のカメラUIを使わない
アプリが作れる
よくあるカメラのUI
非常に簡単だが自由がない
リアルタイムエフェクトはできない
実装は結構大変だがなんでもできる

iOS画像処理方法
CoreImage (CPU/GPU)
OpenGL (GPU)
ピクセル処理 (CPU)
OpenCV (CPU/GPU)
vImage (GPU)

UIImagePickerController
の使い方
最初の一歩

プロジェクトの作成

適当に設定して

適当に画面を設計

ViewController.h に追加
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController <UIImagePickerControllerDelegate,UINavigationControllerDelegate>

ViewController.hに追加
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController <UIImagePickerControllerDelegate,UINavigationCon
@property IBOutlet UIImageView* imageView;
@end

フォトライブラリを開く処理
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;
// 編集可能にする場合はYES
imagePicker.allowsEditing = YES;
// 自分への通知設定
imagePicker.delegate = self;
// フォトライブラリを開く
[self presentViewController:imagePicker animated:YES
completion:^{
// 開いたタイミングに呼ばれる
NSLog(@"(1)フォトライブラリを開いた");
}];
}
}

撮影後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:^{
}];
}

imageViewを接続

ボタンに接続

ボタンを押して

あれ？(^_^;)？

シミュレータに画像がない場合
Safariで画像検索して保存してね

どぉーん

フィルタがないカメラアプリ
とか小学生までだよねー？

CoreImageを使う

CoreImage.frameworkを追加

#import "ViewController.h"
#import <CoreImage/CoreImage.h>
@interface ViewController ()
@end

モノクロフィルタを作る
// グレースケール画像を作成する
-(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;
}

フィルタを適用する
ViewController.mを修正
-(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary
*)info
{
! // 編集画像
if(editedImage){
}
else{
}
// モノクロフィルタを適用してから
// 選択された画像を表示
_imageView.image = [self monochromeFilter:savedImage];
}];
}

パラメータを変えてみよう
@"inputColor", [CIColor colorWithRed:1.0 green:0.7 blue:0.4],
@"inputColor", [CIColor colorWithRed:1.0 green:1 blue:0],

ケラレフィルタ（カメラの周辺光量落ち）
Instagramっぽい効果をだせます

ケラレフィルタを作る
// ケラレフィルタ（カメラの周辺光量落ち)
-(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にすれば半分の適用度になります
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;
}

-(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)in
{
! // 編集画像
if(editedImage){
}
else{
}
// モノクロフィルタ＋ケラレフィルタを適用し、画面に表示
_imageView.image = [self vignetteFilter:[self monochromeFilter:savedImage]];
}];
}
モノクロフィルタ＋ケラレフィルタを適用

ちょと味がでますね

カメラロールへ保存
-(void)image:(UIImage*)image didFinishSavingWithError:(NSError*)error contextInfo:(void*)contextInfo{
if(error){
NSLog(@"Error");
}else{
NSLog(@"保存した");
}
}
ViewController.mへ追加
-(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info
{
! // 編集画像
if(editedImage){
}
else{
}
// モノクロフィルタ＋ケラレフィルタを適用し、画面に表示
_imageView.image = [self vignetteFilter:[self monochromeFilter:savedImage]];
// カメラロールへ保存する
UIImageWriteToSavedPhotosAlbum(_imageView.image, self, @selector(image:didFinishSavingWithError:contextInfo:), nil);
}];
}

プロジェクトとこのスライドはここから
落とせますよ。
http://takatronix.com/tutorial/20130525.zip
次回から実機転送が必須（予定)になりますの
で、興味がある人は、Appleに開発者登録と実
機転送まで、済ましておいてください。

takatronix検索

ありがとうございました
takatronix検索

iPhoneカメラアプリ開発入門（第１回）

More Related Content

Viewers also liked

Similar to iPhoneカメラアプリ開発入門（第１回）

iPhoneカメラアプリ開発入門（第１回）