2010年10月11日月曜日

美容師向けアプリ hair Concierge(ヘア・コンシェルジェ)の技術解説

私が開発に参加した初めての iPhoneアプリがリリースされました。美容師向けに特化した顧客管理アプリです。


知人の会社から無料アプリとして公開されています。

写真などのサンプルデータが初めから用意されているのでダウンロードすればすぐに試すことができます。美容師では無い人も無料なので良かったら試してみてください。アニメーションを使ったちょっとしたギミックが盛り込まれたアプリになっています。効果音も付いているので試すときは音も聴いてみてください。


アプリの紹介は公式サイト他に任せるとして、このブログではアプリで使った技術的な内容について紹介します。


体制と期間


  • 開発はプログラマ1人、デザイナー1人、ディレクター1人の3人体制
  • 私はプログラマとして参加
  • 期間は実質3ヶ月くらい
  • 開発の為に MacBookPro を新調し開発

以下、技術トピック。



顧客リスト



スライドアニメーション
顧客情報をタップするとボタンと詳細情報が載ったトレイがスライドして現れる。UITableView のセルの高さを変えるだけでいい具合のアニメーションができる。

検索機能
UISearchDisplayController を利用している。以下,関連記事。
Cocoaの日々: UISearchDisplayController 調査
Cocoaの日々: UISearchDisplayController と NSFetchedResultContoller を組み合わせる (3) 考察
Cocoaの日々: UISearchDisplayController で用意される UITableView を扱う上での注意点
Cocoaの日々: UISearchDisplayBar を初期状態では隠しておく

未登録時
顧客が未登録の場合、専用のカスタムセルを用意して表示している(通常のセルと同様フリックして上下に動かせる)。


顧客情報


カスタムセル
UITableView でカスタムセルを用意し外観をすべて独自のデザインにしている。


他の画面も同じカスタムセルを使ったデザインとなっている。




ヘッダの開閉


UITableView上の開閉する画像は UITableView.tableViewHeaderを使っている。UITableView.tableViewHeader は表示後に高さを変えても見た目が変化せず、アニメーションしない。それをうまくアニメーションさせて開閉しているように見せるためにダミーセルを使う。
Cocoaの日々: UITableView のヘッダの高さを変える(その2:アニメーション)


カルテ詳細


カスタムセルに、カスタムセクションヘッダを使用。


(旧) Cocoa Touch の日々: NSFetchedResultsController でグルーピング(Section分け)


カルテ情報


2ステップアニメーション
ヘッダをタップすると2ステップで開閉するアニメーションが始まる。



横並びサムネイル画像の循環スクロール

横並びサムネイル画像は以前紹介した実装が入っている。この横並び画像は指で循環スクロールし、一定時間操作が無いと自動的に横スクロールが始まる。
Cocoaの日々: 画像を横に並べたスクロールビューアの作成 [1] アイディア



カルテ設定


上段の選択状態によって「詳細設定」のドロアーが上下に開閉する。



設定 - 使用状況とエクスポート


CSV作成とZIP圧縮
CSV生成後に ZIP圧縮してメール送付する。


Cocoaの日々: Objective-Zip を使って ZIP圧縮する
Cocoaの日々: 拡張子から MIME Type を取得する
メールへファイルを添付する際に指定する MIME type を取得するのに利用。

Cocoaの日々: CoreData - 大量データを扱う場合のメモリ利用量を減らす
仕様として掲げた 6,000件のカルテデータの CSV書き出し時にメモリ不足でクラッシュした問題の対応方法。

Cocoaの日々: ファイル書き出し
Cocoaの日々: CSVの改行コードなど


オリジナルダイアログ



Cocoaの日々: 下からせり上がってくる非モーダルなカスタムダイアログを作る (2)二段構え


画像ビューア





Cocoaの日々: UIScrollView - 拡大縮小
Cocoaの日々: UIScrollView - フリックで画像(ページ)をめくる
Cocoaの日々: ステータスバー、ナビゲーションバー、ツールバーを半透明にする
Cocoaの日々: 簡易スライドビューア [1]基本動作


画面ロック


パスコード入力で3回失敗すると表示される。「ギリギリ」と音を立てながら中央のシャッターが閉まる。UIImageViewのアニメーションで実現。



画像系


Cocoaの日々: iOS4からデバイス毎・解像度毎に用意した画像を自動選択する仕組みが導入された


効果音系


Cocoaの日々: 効果音を鳴らす

Cocoaの日々: 効果音販売サイトの紹介と iTunesを使ったMP3からAIFFへの変換方法

Cocoaの日々: オーディオフォーマット変換 afconvert


UITableView


Cocoaの日々: UITableView - 編集モードで左側のアイコンを消す

Cocoaの日々: UITableView の背景に画像を表示する


日付関連


Cocoaの日々: NSCalendar - 2つの
日付間の日数を取得する



NSFetchedResultController


アプリのリスト画面はすべて NSFetchedResultController を利用している。

Cocoaの日々: NSFetchedResultsController のおさらい

Cocoaの日々: UISearchDisplayController と NSFetchedResultContoller を組み合わせる

Cocoaの日々: NSFetchedResultsControllerDelegate を使う

Cocoaの日々: -[NSFetchedResultsController performFetch:] でクラッシュ


データ


Core Data を使っている。マスタは XML で用意しバンドルしている。

Core Data 集計系
Cocoaの日々: CoreData - 最大値をもつ NSManagedObject を取得するコード見本

Cocoaの日々: CoreData - 集計関数

Core Data モデリング
Cocoaの日々: Core Data - Unidirectional Relationships(単方向関連)について

Core Data その他
Cocoaの日々: -[NSFetchedResultsController performFetch:] でクラッシュ

その他、紹介してきたすべてがノウハウとして使われている。
Cocoaの日々: Core Data
(旧) Cocoaの日々: coredata
(旧) Cocoa Touch の日々: CoreData

マスタ
XMLでバンドルしている。Category.plist のイメージ。



アニメーション


遅延実行の Blocks化は2ステップアニメーションなどで役立った。
Cocoaの日々: 遅延実行を Blocksで記述する


その他


Cocoaの日々: Xcode - Build And Analyze

Cocoaの日々: Xcode - Build And Analyze 〜 問題の例

Cocoaの日々: Subversion で @ を含むファイルを扱う

Cocoaの日々: NSUserDefaults - アプリケーション出荷時設定

Cocoaの日々: アプリのバージョン番号を取得する(メモ)


Xcodeプロジェクト構成


おまけで公開。




お世話になった本




UIKitでやりたいこと、困ったことがあればこの本が役に立つ。




最初の一歩を踏み出すのに役立った。




表題・表紙と裏腹に意外と実用的。




広く浅くだが実用的でなかなか役立つ。

0 件のコメント:

コメントを投稿