HMCREATION

サンプルプログラムを作成

iPhoneアプリを作る会

iPhoneアプリ作りたい人達が集まって、アプリを作る会みたいなのを月1で開催してるのですが、年明け1回目はせっかくなのでお正月にちなんだアプリをみんなで作ろうということになりました。

そこで題材は「福笑い」。
（ちなみに昨年はおみくじアプリ）

福笑い

福笑いのルールとしては、面の輪郭の上に散らばってる目や口、鼻などの部品を、目隠しをした人が適当な位置に置いていき、滅茶苦茶な顔が出来上がっていくのを周りで見てる人たちは楽しむって感じですよね。

iOSらしい操作が必要になりそうで、開発の勉強にもなってちょうど良さそうというのもポイントでした。

ノンプログラマ向け

参加者にはノンプログラマな人たちも多く、当日ゼロから作ってたら終わらないだろうということで、私が事前にサンプルプログラムを用意しておくことになりました。
これをベースに各自で自由にカスタマイズしてもらえれば良いかなと。

ありがたいことに顔パーツ画像は他の参加者の中でデザイナの方が用意してくれることになりました。

 

ちょっと工夫しておいたところ

基本的にサンプルコードなので細かいところは各自で頑張ってもらおうと思いつつ、当日手間取る人がでるだろうなーと予想されるいくつかの箇所については少しこだわって作っておきました。

回転処理

まずは顔部品の回転処理にはUIRotationGestureRecognizerを使ってます。

が、単純にそのrecognizerを回転させたい顔部品ViewにaddGestureRecognizer:した場合、回転ジェスチャーを検知するには指２本がそのView上に乗っかってないといけないですよね。

でも福笑いなので目隠ししてやることになるだろうから、そもそも小さい顔部品の上にピンポイントで２本の指を乗せることは難しそう。だからどちらか１本でも乗っかってたらそのViewを回転対象として認識して操作できるようにしました。

顔部品の選択

内部的に操作対象のViewを決定していますが、2本の指がたまたま別々のパーツに乗っかった場合、最初の指が乗っかった方の部品を選択状態とするため、touchesBegan:withEvent:メソッドも併用しています。

UIGestureRecognizer系だけではタッチ時（touch down）のイベントを扱いにくかったからです。

効果音

もうひとつ、現実の福笑いと違って、部品を手で触った感触で目なのか鼻なのか、どこの部品かを判断することができないので、部品をタッチしたときに効果音を出すようにしてみました。

当初は、効果音の音源ファイルをAVAudioPlayer使って再生しようかと考えてましたが、音源を用意するのも面倒だなーと思いつつちょっと調べてみたら、いつの間にかテキストの音声読み上げできるようになってるんですね。

それを紹介してくれてるサイトを見つけたので参考にさせてもらいました。

iOS 7で追加された音声読み上げ機能(AVSpeech Synthesizer)でiPhoneにお喋りさせる

これで、「右まゆげ」とか「鼻」とかのテキストを音声読み上げできるようになりました。これ使ってみたら面白い。便利。

顔部品のシャッフル

画面の遷移を省いた分、顔部品の位置をシャッフルするタイミングがなく、ボタンを配置するのも邪魔なので、motionBegan:withEvent:メソッドを使い、デバイスを振ると顔部品がそれぞれランダムに移動されるようにしました。

 

ちょっと手抜いたところ

あえてiPhoneのみ対応

福笑い的には画面は大きいほうがいいだろうけど、普段、参加者の中でiPadを開発機として使ってる人は少ないのでiPhone限定に。

Universalにしたいなら、そこは各自でカスタマイズしてもらおうという意図です。（レイアウトが面倒だったし）

Autolayout

Autolayoutがonだと、顔パーツを指でぐりぐり移動させたいと思ったときに意図した挙動を出しにくかったのでoffに。

この辺は後日きっちり調べたいところ。

 

サンプルプログラム

以下、私が作ったサンプルプログラムがこちら。

福笑いiPhoneアプリサンプルプログラム Objective-C版

2015/03/27追加
福笑いiPhoneアプリサンプルプログラム Swift版

サンプル、ということで細かい怪しい挙動には目を瞑ってください。

大したコードではないですが、自由に使ってもらって結構です。

怪しいところや、もっとこうした方が効率的とか、
このサンプルをベースにこういうアプリを作ってみました！！とか、
いろいろご意見いただければ嬉しいなー。