2012年5月21日月曜日

iPhoneアプリの作成の入り口

先日見ていた某USTで、
"MVCのcontrollerがでかくなっちゃって、modelどこいった? みたいなの ありがちw"
ってお話を聞いたので aqubi風の手順をPicTackを作った時を例にを書いてみよう! というエントリ。

手順は、作るモノによっても違うし、作り手によっても違うと思いますが、参考になったと思ってくれる人がいるのかもしれない という期待を込めて。



1.アプリのイメージを固める

まぁ当たり前ですねw
PicTackの場合は、一言でいうと、 "出されたお題にそって絵を書くアプリ"
"対戦にすることで、絵が上手い人だけでなく下手な人だって楽しく、盛り上がる!" というのが面白さ。
ということで対戦するのが必須の機能として作成を始めました

2.ワイヤーフレーム作成

どんな感じで画面がすすんでいくか? のイメージをざっくりと作成します。
cacooを使って作成しました。(お世話になっています)
実際この作業の完了タイミングは、後述の 3.プロトタイプ作成 が終わるまで続いていきます。

3.プロトタイプ作成

2.ワイヤーフレーム作成 って固まるまではそこそこ時間かかるので、 並行して プロトタイプを作成し始めました。
ポイントは、ブレが少なそうな所から固めていくこと。

3-1. 外部IOの調査

外部要因は思わぬ落とし穴があるもの。
新しく使うiOSの機能とか、外部のサービスをつかう とかの場合は調査をします。
PicTackの場合は、Bluetoothで送受信がどこまでできるか? という所でした。

このタイミングで決めるのは機能として必須となるもののみ。
twitterでツイートする とか補足的な機能は絶賛後回し! ここの切り分け重要。

このタイミングで、改めて分かる制限事項などがあるので、でてきたら、ワイヤーフレーム作成フェーズ中にフィードバック。

3-2. データモデル作成

最初はデータモデルを作成します。
データモデルはブレが少ないし、これがある程度あると後の画面の組立とても楽になります。
でも仕様が決まっていないと、完璧なものは出来ないので、ブレが無さそうな基本的な所を作っていきます。

設定項目用のデータモデルはだいたい作るので作成しますね。
単純な設定しか無い時はシングルトンにしたりもします。

PicTackの場合は、
「1回のゲーム」class の中に、「タイトル」「サンプル画像へのリンク」の情報が入っている
「参加者」class の中に、「参加者の名前」「書いた絵の情報」 の情報が入っている
というのが最初からなんとなく見えているので、なんとなくのレベルで作っていきます。
あるかなー ないかなー と悩むものは、作りこまないのが吉。
だけど、データの塊(RDBでいうとテーブルになりそうな部分)はクラスだけ作っておきます。

なんとなく.. というのが微妙とおもわれるかもしれませんが、この属性(変数)をどこかに書きたい! と思った時に、適切なデータモデルのクラスがあり、そこにすぐに書けるのはとっても大事と思います。
そうでないと、Controllerとか適当な所に書きたくなっちゃいますので。

3-3. InterfaceBuilderで画面をざっくり作成

2.ワイヤーフレーム作成 で 画面の流れがみえてきたなー と思ったらざっくり作り始めます。
内部の細かな実装は後回しで、画面遷移部分を最初にひと通り作って、仕様の考慮不足がないかを確認していきます。
なんかあれば、ワイヤーフレーム作成フェーズ中にフィードバック。
実際画面を動かしてみると見えてくるものが多いもんですw

3-4. 外部IOのデータモデル、データモデルのコントローラ作成

PicTackの場合は、Bluetoothの通信の基本部分の作成になりました。
Bluetoothの通信はバイナリで行うことにしたので、各タイミング毎にデータフォーマットを決めて、それをデータモデルに落とし込みます。
送受信のイベントを受け取り、データモデルに展開して使いやすくするような動作の部分も作成していきます。
そういう部分のところは、データモデルのコントローラ といっていいのかなー。
ここを使いやすく、テストもして正常動作を確認して、後で安心して使えるように用意しておきます。
Bluetoothの通信がおかしいときに、ここのバグが原因だとあとでめっちゃ混乱するのは目に見えているのでw

PicTackの時にはなかったのですが、外部のサーバーとのアクセスをする時には、 アクセスするための口(メソッド)は用意しておきます。
ネットワークアクセス開始した/終了したタイミング、システムバーの通信中のインジゲータのグルグルを開始したり止めたりしたいので、そこらへんが上手く動くように最初に作りこんでおきます。
非同期で基本動かすと思うので、ちゃんとカウントとってグルグルさせましょー!

3-5. イベントの整理

画面からのAction, 外部IOのcall、callback のイベントのメソッドを作っていきます。
このイベントの結果受け取りは、どうやって行うのか? をまとめていきます。
方法としては、以下のように色々ありますよねー。

  • delegateでやり取りする
  • observer的にやりとりする(NSNotificationCenterなど)
  • クラスの変数を保持しているので直接メソッド/プロパティをcallする
統一された作りになるように、全体をみつつ設計していきます。ここ、楽しい作業ですよ!
最初はメソッドの実装は空のまま、ザクザク必要そうなものを作っていくのがオススメ。
全体から俯瞰する というのに集中力がきれないように作成していけるので。
後の組立作業で、この箇所が上手く設計されていると やったった! という気分になります。

3-6. 主となる機能を実装

いままで下ごしらえしたものを、実際組み上げていきます。
PicTackの場合は、ゲームを開始して、書いて、結果が見える所まで。
プロトタイプで必要となる実装のみ、先程用意したメソッドの中にコードを書いていきます。
ここで、プロトタイプとしてレビューしました。
レビュー後、やっぱり欲しい画面とか機能とか追加して、ワイヤーフレーム作成フェーズとともにプロトタイプの完了。


ここまでのプロトタイプの作成で、手元のメモによると 5日かかった模様。
まぁ、アプリってそこからが長いんですけどもねーw

• • •