iPhoneアプリでカメラアプリが作りたいなあ、と昨日唐突に思いました。
以前からやりたい、やりたいと思っていたのですが、カメラ関係はやったことなく、勉強するにも腰が重かったのですが、最近いろいろ相談も受けているのでちょこっとやってみることに。
プログラム関係については、個人ブログなどでソースコードを公開されている方が多くいらっしゃいます。
新しいことの勉強というと概念から理解して、となりがちですが、作っちゃってから概念や理論を覚えても良いのかと思っています。
ということで、今回は人様のブログを拝見（拝借）し、実際に自分で使いやすいソースコードの端々をいただいて簡易カメラアプリを作ってみました。（かけた時間は数時間です。）
THE囚人カメラです。
単なるカメラ合成アプリです。
ソースコードも掲載しますので、そのままコピペしていただければなんとなく簡単なカメラ合成アプリは作れると思います。
※Storyboardの使い方とか基本的なことは知っていることを前提にしていますので、そんなに親切ではありません。
アイデアは持っていても形にしなければ意味ありません。
作ったもの勝ちなんです。
目次
0. まずは概念の理解より自分でカスタマイズしやすいソースコードを探す
これは自分だけかも知れませんが、とにかく作る！という目標があった場合、概念の理解ももちろん必要ですが、自分に要所要所が理解出来て変更を加えられるソースコードを探して概念や細かいことは後回しにするのが一番近道です。たとえば、カメラアプリで使用するimagepickerとはなんぞや、みたいなところから入ると心が折れてしまいます。
とにかくコピペして実行してみてエラー出したり落としたりしながら、進めていきましょう。
1. カメラを起動する処理を作ります。
ちなみにカメラアプリは実機をつながないとエミュレータでは起動しませんでした。(やり方あるのかも知れませんが、急いでいるので実機を繋いで出来る方法で最短で。)
●やりたいこと：
檻のイラストを表示しながらカメラ撮影をしたい。
●使わせていただいたサイト：
「iOS 5の顔検出機能とカメラを使ったiPhoneアプリを作る」
「カメラビューの上に画像を重畳する」
●実際のソースコード
このコードをボタンが押された時など任意のタイミングで実行します。
(とりあえず処理だけを掲載します。)
//カメラが利用できるか確認
if([UIImagePickerControllerisSourceTypeAvailable:UIImagePickerControllerSourceTypeCamera]) {
UIImagePickerController *imagePickerController = [[UIImagePickerControlleralloc] init];
//カメラかライブラリからの読み込み指定。カメラを指定
[imagePickerController setSourceType:UIImagePickerControllerSourceTypeCamera];
//トリミングなどを行うか否か、今回は編集はしません。
[imagePickerController setAllowsEditing:NO];
//檻のイラストをカメラビューで確認しながら撮影します。
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@”ori.png”]];
imageView.frame = CGRectMake(0, 0, 320, 480);
imagePickerController.cameraOverlayView = imageView;
//カメラの設定完了
[imagePickerController setDelegate:self];
//カメラビューを起動
[selfpresentViewController:imagePickerController animated:YEScompletion:nil];
}
とりあえずこれを実行するとこうなります。
ボタンが変なとこに出ていたりしますが、まずは放っておき次へいきます。
こういったカスタマイズは基本的なことができてからじっくり調べれば良いのです。
2. 撮影した写真に檻のイラストを合成する。
●やりたいこと：撮影した写真に檻のイラストを合成してアルバムに保存したい。
●使わせていただいたサイト：
【画像を合成する】アプリ開発日記（7/2）
iPhoneアプリ開発の虎の巻
[iPhone]画像をカメラロールに保存する方法
●実際のコード
撮影した写真を決定する時に呼び出されるコードです。
写真と檻のイラストを合成してそのままアルバムへ保存します。プレビューなどは端折っています。
こういったユーザー配慮などについても、このアプリを仕上げる時にやれば良いでしょう。
– (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info {
//撮影した写真を取得します
UIImage *originalImage = (UIImage *) [info objectForKey:UIImagePickerControllerOriginalImage];
//合成する素材を定義します。
UIImage *photo = originalImage; //撮影した素材の変数
UIImage *ori = [UIImage imageNamed:@”ori.png”]; //合成する檻のイラストを入れる変数
//320×480で書き出します。（撮影した写真）
CGFloat photoWidth = 320;
CGFloat photoHeight = 480;
//檻のイラストはそのままのサイズで
CGFloat oriWidth = CGImageGetWidth(ori.CGImage);
CGFloat oriHeight = CGImageGetHeight(ori.CGImage);
//合成します。
UIGraphicsBeginImageContext(CGSizeMake(photoWidth, photoHeight));
[photo drawInRect:CGRectMake(0, 0, photoWidth, photoHeight)];
[ori drawInRect:CGRectMake(0, 0, oriWidth, oriHeight)];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
//編集した画像を保存します。
UIImageWriteToSavedPhotosAlbum(image, self, @selector(image:didFinishSavingWithError:contextInfo:), nil);
// カメラUIを閉じます。
[selfdismissViewControllerAnimated:YEScompletion:nil];
}
//この処理がないと保存したときにアプリが落ちます。
– (void)image:(UIImage*)image didFinishSavingWithError:(NSError*)error contextInfo:(void*)contextInfo {
if(!error){
NSLog(@”success”);
}else{
NSLog(@”error”);
}
}
で、実行すると以下のような写真が保存されます。
※当人に掲載許可とっています。当社のエースデザイナーです。
デザイン終わるまで帰れない感がすごいですね。
作ってみて重要だと思うこと。
とにかく実行してみるプログラマーの性格は熱しやすく冷めやすいです。
鉄は熱いうちに打て、ではありませんが、とにかくやる気のある時に最短で形にする。
そのためには概念やディテイルは置いておいて、とにかくやりたいことの概略を形にしてみることが大事だと思います。
いったん動くものが出来ると、ディテイル調整やリリースするアプリとしての体裁を整えるモチベーションも上がってきます。
プログラムスキルより検索力
物事知っているより、検索をうまく使って人のコードを組み合わせる力っていうのは重要かと思います。
もちろん、ゼロベースで作れればそれに越したことはないのですが、私のような中途半端なスキルの人間にとっては検索力のほうが大事だったります。
====
この手のアプリはたくさんあると思います。
正直リリースはどうしようか迷ってます。。
