SlideShare a Scribd company logo
1 of 35
Download to read offline
カメラアプリ開発入門
(第一回)
まずは基本の基本から
CoreImageを使った画像加工まで
2013/5/25 名古屋iPhone開発者勉強会
13年5月25日土曜日
大塚 崇(おおつか たかし)
DJ / フリーランスのエンジニア・プログラマ
ハンドル名: takatronix
Facebook/Twitter/Skype/LINE/Weibo -> takatronix
http://takatronix.com
趣味興味:旅行、語学、筋トレ、LEGO、FX、心理学、 
脳科学、宇宙
自己紹介
13年5月25日土曜日
リリースしたアプリ
デカ目ミラー、SEXY SCAN、 放射能汚染地
図、和牛スキャン ...
デカ目ミラー(SexyMirror)2013/1リリース
イギリスのiPhone総合で何故か10位に、
現在40万ダウンロード
13年5月25日土曜日
iOSカメラAPI
UIImagePickerController
AVFoundation.framework
iOS4から、標準のカメラUIを使わない
アプリが作れる
よくあるカメラのUI
非常に簡単だが自由がない
リアルタイムエフェクトはできない
実装は結構大変だがなんでもできる
13年5月25日土曜日
iOS画像処理方法
CoreImage (CPU/GPU)
OpenGL (GPU)
ピクセル処理 (CPU)
OpenCV (CPU/GPU)
vImage (GPU)
13年5月25日土曜日
UIImagePickerController
の使い方
最初の一歩
13年5月25日土曜日
プロジェクトの作成
13年5月25日土曜日
適当に設定して
13年5月25日土曜日
適当に画面を設計
13年5月25日土曜日
ViewController.h に追加
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController <UIImagePickerControllerDelegate,UINavigationControllerDelegate>
13年5月25日土曜日
ViewController.hに追加
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController <UIImagePickerControllerDelegate,UINavigationCon
@property IBOutlet UIImageView* imageView;
@end
13年5月25日土曜日
フォトライブラリを開く処理
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)フォトライブラリを開いた");
}];
}
}
13年5月25日土曜日
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日土曜日
imageViewを接続
13年5月25日土曜日
ボタンに接続
13年5月25日土曜日
ボタンを押して
13年5月25日土曜日
あれ?(^_^;)?
13年5月25日土曜日
シミュレータに画像がない場合
Safariで画像検索して保存してね
13年5月25日土曜日
どぉーん
13年5月25日土曜日
どぉーん
13年5月25日土曜日
フィルタがないカメラアプリ
とか小学生までだよねー?
13年5月25日土曜日
CoreImageを使う
13年5月25日土曜日
CoreImage.frameworkを追加
13年5月25日土曜日
ViewController.mに追加
#import "ViewController.h"
#import <CoreImage/CoreImage.h>
@interface ViewController ()
@end
13年5月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日土曜日
フィルタを適用する
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日土曜日
パラメータを変えてみよう
@"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日土曜日
ケラレフィルタ(カメラの周辺光量落ち)
Instagramっぽい効果をだせます
13年5月25日土曜日
ケラレフィルタを作る
// ケラレフィルタ(カメラの周辺光量落ち)
-(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日土曜日
// 写真撮影後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日土曜日
ちょと味がでますね
13年5月25日土曜日
カメラロールへ保存
-(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日土曜日
プロジェクトとこのスライドはここから
落とせますよ。
http://takatronix.com/tutorial/20130525.zip
次回から実機転送が必須(予定)になりますの
で、興味がある人は、Appleに開発者登録と実
機転送まで、済ましておいてください。
13年5月25日土曜日
takatronix検索
http://takatronix.com
13年5月25日土曜日
ありがとうございました
takatronix検索
http://takatronix.com
13年5月25日土曜日

More Related Content

Viewers also liked

Git for iOS beginner
Git for iOS beginnerGit for iOS beginner
Git for iOS beginnerbibmeke
 
第16回iPhoneアプリ開発勉強会発表資料
第16回iPhoneアプリ開発勉強会発表資料第16回iPhoneアプリ開発勉強会発表資料
第16回iPhoneアプリ開発勉強会発表資料Ke Ta
 
第26回名古屋iPhoneアプリ開発勉強会アンケート結果
第26回名古屋iPhoneアプリ開発勉強会アンケート結果第26回名古屋iPhoneアプリ開発勉強会アンケート結果
第26回名古屋iPhoneアプリ開発勉強会アンケート結果Takatoshi Hattori
 
RubyMotionでiOS開発
RubyMotionでiOS開発RubyMotionでiOS開発
RubyMotionでiOS開発Masakuni Kato
 
Uicollectionview
UicollectionviewUicollectionview
Uicollectionviewtowaki777
 
第16回勉強会のビギナー資料
第16回勉強会のビギナー資料第16回勉強会のビギナー資料
第16回勉強会のビギナー資料towaki777
 
SQLiteを手軽に・セキュアに
SQLiteを手軽に・セキュアにSQLiteを手軽に・セキュアに
SQLiteを手軽に・セキュアにTomotsune Murata
 
iOS の動画アプリ開発に Xamarin を使ってみた @JXUG #2 East
iOS の動画アプリ開発に Xamarin を使ってみた @JXUG #2 EastiOS の動画アプリ開発に Xamarin を使ってみた @JXUG #2 East
iOS の動画アプリ開発に Xamarin を使ってみた @JXUG #2 Eastirgaly
 
日曜プログラマーが
1週間くらいで通信対戦ゲームを作ってみた
日曜プログラマーが
1週間くらいで通信対戦ゲームを作ってみた日曜プログラマーが
1週間くらいで通信対戦ゲームを作ってみた
日曜プログラマーが
1週間くらいで通信対戦ゲームを作ってみたYuusuke Takeuchi
 
Photos vs Assets Library - いまさら始めるPhotos.framework
Photos vs Assets Library - いまさら始めるPhotos.frameworkPhotos vs Assets Library - いまさら始めるPhotos.framework
Photos vs Assets Library - いまさら始めるPhotos.frameworkKaname Noto
 

Viewers also liked (13)

Git for iOS beginner
Git for iOS beginnerGit for iOS beginner
Git for iOS beginner
 
第16回iPhoneアプリ開発勉強会発表資料
第16回iPhoneアプリ開発勉強会発表資料第16回iPhoneアプリ開発勉強会発表資料
第16回iPhoneアプリ開発勉強会発表資料
 
第26回名古屋iPhoneアプリ開発勉強会アンケート結果
第26回名古屋iPhoneアプリ開発勉強会アンケート結果第26回名古屋iPhoneアプリ開発勉強会アンケート結果
第26回名古屋iPhoneアプリ開発勉強会アンケート結果
 
No smokingplus
No smokingplusNo smokingplus
No smokingplus
 
Cos0419
Cos0419Cos0419
Cos0419
 
RubyMotionでiOS開発
RubyMotionでiOS開発RubyMotionでiOS開発
RubyMotionでiOS開発
 
Uicollectionview
UicollectionviewUicollectionview
Uicollectionview
 
第16回勉強会のビギナー資料
第16回勉強会のビギナー資料第16回勉強会のビギナー資料
第16回勉強会のビギナー資料
 
SQLiteを手軽に・セキュアに
SQLiteを手軽に・セキュアにSQLiteを手軽に・セキュアに
SQLiteを手軽に・セキュアに
 
Diverse会社概要
Diverse会社概要Diverse会社概要
Diverse会社概要
 
iOS の動画アプリ開発に Xamarin を使ってみた @JXUG #2 East
iOS の動画アプリ開発に Xamarin を使ってみた @JXUG #2 EastiOS の動画アプリ開発に Xamarin を使ってみた @JXUG #2 East
iOS の動画アプリ開発に Xamarin を使ってみた @JXUG #2 East
 
日曜プログラマーが
1週間くらいで通信対戦ゲームを作ってみた
日曜プログラマーが
1週間くらいで通信対戦ゲームを作ってみた日曜プログラマーが
1週間くらいで通信対戦ゲームを作ってみた
日曜プログラマーが
1週間くらいで通信対戦ゲームを作ってみた
 
Photos vs Assets Library - いまさら始めるPhotos.framework
Photos vs Assets Library - いまさら始めるPhotos.frameworkPhotos vs Assets Library - いまさら始めるPhotos.framework
Photos vs Assets Library - いまさら始めるPhotos.framework
 

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

iTamabi 13  第3回:iPhoneアプリ実践開発講座 1 画像ファイルの読み込み 画像でアニメーションを作成する
iTamabi 13  第3回:iPhoneアプリ実践開発講座 1 画像ファイルの読み込み 画像でアニメーションを作成するiTamabi 13  第3回:iPhoneアプリ実践開発講座 1 画像ファイルの読み込み 画像でアニメーションを作成する
iTamabi 13  第3回:iPhoneアプリ実践開発講座 1 画像ファイルの読み込み 画像でアニメーションを作成するAtsushi Tadokoro
 
UIImagePickerController よもやま話
UIImagePickerController よもやま話UIImagePickerController よもやま話
UIImagePickerController よもやま話Kei Kusakari
 
メガドラ実機で自作のROMファイルを動かしてみた話
メガドラ実機で自作のROMファイルを動かしてみた話メガドラ実機で自作のROMファイルを動かしてみた話
メガドラ実機で自作のROMファイルを動かしてみた話Yuma Ohgami
 
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
AI x OpenCV x WebAR: Selfie Segmentationを使ってみようAI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
AI x OpenCV x WebAR: Selfie Segmentationを使ってみようTakashi Yoshinaga
 
あの言語で画像処理する ライブラリを作った件
あの言語で画像処理する ライブラリを作った件あの言語で画像処理する ライブラリを作った件
あの言語で画像処理する ライブラリを作った件Sakiyama Kei
 
AI x WebAR! MediaPipeの顔認識を使ってみよう!
AI x WebAR! MediaPipeの顔認識を使ってみよう!AI x WebAR! MediaPipeの顔認識を使ってみよう!
AI x WebAR! MediaPipeの顔認識を使ってみよう!Takashi Yoshinaga
 
Uiテスト@yidev
Uiテスト@yidevUiテスト@yidev
Uiテスト@yidevYusuke Kita
 
Build your AR app by using AR Foundation samples
Build your AR app by using AR Foundation samplesBuild your AR app by using AR Foundation samples
Build your AR app by using AR Foundation samplesHirokazu Egashira
 
I phonedevws20121028ci filter
I phonedevws20121028ci filterI phonedevws20121028ci filter
I phonedevws20121028ci filterZuQ9Nn
 
AI x WebAR MediaPipeの顔認識を使ってみよう! in 織りなすラボ
AI x WebAR MediaPipeの顔認識を使ってみよう! in 織りなすラボAI x WebAR MediaPipeの顔認識を使ってみよう! in 織りなすラボ
AI x WebAR MediaPipeの顔認識を使ってみよう! in 織りなすラボTakashi Yoshinaga
 
JCROM で Android の「真の力」を解き放て
JCROM で Android の「真の力」を解き放てJCROM で Android の「真の力」を解き放て
JCROM で Android の「真の力」を解き放てandroid sola
 
Firefox os simulatorについて
Firefox os simulatorについてFirefox os simulatorについて
Firefox os simulatorについてHiroki Kakuno
 

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

iTamabi 13  第3回:iPhoneアプリ実践開発講座 1 画像ファイルの読み込み 画像でアニメーションを作成する
iTamabi 13  第3回:iPhoneアプリ実践開発講座 1 画像ファイルの読み込み 画像でアニメーションを作成するiTamabi 13  第3回:iPhoneアプリ実践開発講座 1 画像ファイルの読み込み 画像でアニメーションを作成する
iTamabi 13  第3回:iPhoneアプリ実践開発講座 1 画像ファイルの読み込み 画像でアニメーションを作成する
 
UIImagePickerController よもやま話
UIImagePickerController よもやま話UIImagePickerController よもやま話
UIImagePickerController よもやま話
 
メガドラ実機で自作のROMファイルを動かしてみた話
メガドラ実機で自作のROMファイルを動かしてみた話メガドラ実機で自作のROMファイルを動かしてみた話
メガドラ実機で自作のROMファイルを動かしてみた話
 
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
AI x OpenCV x WebAR: Selfie Segmentationを使ってみようAI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
 
あの言語で画像処理する ライブラリを作った件
あの言語で画像処理する ライブラリを作った件あの言語で画像処理する ライブラリを作った件
あの言語で画像処理する ライブラリを作った件
 
AI x WebAR! MediaPipeの顔認識を使ってみよう!
AI x WebAR! MediaPipeの顔認識を使ってみよう!AI x WebAR! MediaPipeの顔認識を使ってみよう!
AI x WebAR! MediaPipeの顔認識を使ってみよう!
 
Uiテスト@yidev
Uiテスト@yidevUiテスト@yidev
Uiテスト@yidev
 
Build your AR app by using AR Foundation samples
Build your AR app by using AR Foundation samplesBuild your AR app by using AR Foundation samples
Build your AR app by using AR Foundation samples
 
I phonedevws20121028ci filter
I phonedevws20121028ci filterI phonedevws20121028ci filter
I phonedevws20121028ci filter
 
AI x WebAR MediaPipeの顔認識を使ってみよう! in 織りなすラボ
AI x WebAR MediaPipeの顔認識を使ってみよう! in 織りなすラボAI x WebAR MediaPipeの顔認識を使ってみよう! in 織りなすラボ
AI x WebAR MediaPipeの顔認識を使ってみよう! in 織りなすラボ
 
JCROM で Android の「真の力」を解き放て
JCROM で Android の「真の力」を解き放てJCROM で Android の「真の力」を解き放て
JCROM で Android の「真の力」を解き放て
 
Firefox os simulatorについて
Firefox os simulatorについてFirefox os simulatorについて
Firefox os simulatorについて
 
Android Hacks - Hack30
Android Hacks - Hack30Android Hacks - Hack30
Android Hacks - Hack30
 

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