2012年1月23日月曜日

PicTack:デザイナーさんとの共同作業の巻

iPhoneアプリはいくつか作成していましたが、今回のPicTackでは始めてデザイナーさんとの共同作業 という挑戦をしました。

PLACES inc. は、私も含め3人在籍していて、分担としては以下。
- プログラムを行う人 (私)
- 画面UIデザインを行う人
- 回答サンプルや音を作成する人

私以外の2人はデザイナーさんなので、プログラムは書いたことがない ましてや XCodeを触るのは始めて という状態。
ただし、Subversionは使ったことがある という感じです。

【チャレンジ内容】
- みんながXCodeで実行できて、自分の端末で実行できること。
- 自分がやる作業はXCode上で自分で組み込みが出来ること。

画面デザイン

画面デザインを行なってもらうためにまずやったことは、InterfaceBuilderで画面UIをつくること。
(個人で作成しているアプリではInterfaceBuilderを使わず、コードですべて作成していました。)
今回は、InterfaceBuilderをつかって、まずは大枠の部分をデザイン無しで私が作成。
出来あがったXIBファイルを直接触ってもらう方向にしました。

基本、問題なく触ってもらえました。
問題点としては、InterfaceBuilderでできないことはコード上で実装しないといけない点。
もともと想定していた所.... 参加ユーザ数に応じて結果画面の表示を切り替えるとか...については、個別のXIBを用意して組み込みしていたので大丈夫でしたが、ちょっとしたところがInterfaceBuilderで出来ないのが惜しい感じ。

例えば、
  1. ラベルの文字列を国際化できない (もう一つXIB作るのは嫌だー)
    InterfaceBuilder上でも、NSLocalizedString使わせて欲しい。
  2. 右5度に傾ける とかができない
  3. 内部状態により表示/非表示の切替ができない
    ピクタクの場合は、シングルプレイはキャンセルボタンを表示するが、マルチプレイの時には表示しない ということをしたかった。

InterfaceBuilderでできないことは、Controllerのコード上にUIViewをマッピングさせて操作する感じになるので、
どんどんControllerが汚く...
ココらへんは、できるだけ、Controllerが大きくならないようにコードをわけたりする技が必要になってきますね。

コンテンツ(回答サンプル)の登録

お題カテゴリのメタ情報用のplistを1つ作成。
お題のメタ情報用のplistをカテゴリ毎に作成。
画像ファイルとのマッピングは、メタ情報内のタイトル属性と同じ名前で登録 という名前のルールを決めて行いました。

これで、直接 plist を触って、画像を組み込んでもらいました。
plistはXCode上に編集用のUIがあるので、こちらも問題なくやってもらえた。

画像が多いのでコンパイルに時間がかかってしまうという問題はありますが....

まとめ

できるだけ、デザインと実装コードを分けたかったんだけど、どんどん処理コード(Controller)にUIViewの参照を付け加えていくはめになってちょっと、嫌な感じ。
でも、InterfaceBuilderを使わなかった時と比べて、さすがにControllerはスッキリとしたコードになるので、あー、XIBのデザインはアリだなーとも思った。
オススメは、InterfaceBuilderを使わずコードで実装して仕組みを理解してから、InterfaceBuilderを使うこと!
よくわからずInterfaceBuilderを使っていると、なぜ動かないのか? ということが判断できなくなって、嫌になっちゃうのでw

デザイナさんの感想を聞いてみたら、「カーテンを閉めて画面遷移する... とか、そういう動きも絡んだ所を触りたい!」とのこと。わかる。動いたら楽しいもんねー!
[UIView animateWithDuration]でアニメーション書くのは簡単なので、ぜひデザイナさんにも触ってもらって楽しんでもらいたい。
そういう部分を触りやすいように部品化して、触りやすくするのは、プログラマの役目かなーと。
そういうデザイナーとプログラマーの隙間を埋めていく試みも今後チャレンジしてみたい。

ちなみに、審査結果待ちの時に時間がかかった場合、カーテンの後ろから、ちらっと ペンのキャラが見え隠れするようなコードを密かに入れまして....
発見された時には、興奮していただけた模様。みなさんは、みることは出来たかな?!?!

最近、iPhoneを触っていて気持ちがいいUIと感じるのは、静的なデザインだけでなく、動的なデザイン が多い気がする。
もっと 気持ちがいい! 触りたい!と思えるようなアプリを今後、作っていきたいです。

次回は、Bluetoothで接続して通信 した所のお話を書いてみますー!


PicTack
価格 : 無料 (一部のお題は有料)
カテゴリ : ゲーム
対応機種 : iPhone
対応OS : iOS4.1以上
サポートページ : http://pictack.places-inc.com/
リリース日 : ver1.0 2012/01/16


• • •