トレタのアプリ新機能開発の舞台裏

開発部の@horimislimeです。普段は@y_koh さんとiPadアプリ開発をさせてもらっています。

先日トレタはメジャーアップデートとなるver5.0.0で、飲食店従業員の方が店内のテーブル配置を作成し、空間的にテーブルを見ながら予約を取れる「テーブルレイアウト」機能をリリースしました。

テーブルレイアウト機能

この機能の詳細や、開発にあたっての想いは弊社ブログのエントリも御覧ください。

トレタ新バージョン「5.0.0」とモノ作りの話 : TORETA（トレタ）ブログ

トレタとして大規模なアップデートとなるver5.0.0でしたが、その裏ではiOS開発チームとして新しいチャレンジもありました。それが以下の二点です。

Swiftと新しいパラダイムの導入
これまでのトレタには無かったUIの実現

まずiOS開発チーム内でこの新機能からSwiftを導入し、合わせてMVVM風な設計を取り入れつつ実装を進める方針を取りました。このテーブルレイアウト機能は予約を入れたりテーブルの空き状況を確認するコアとなる画面(前述の画像を参照)と、お店のレイアウトを作成する設定画面の2つに分かれています。これらのうち前述の操作画面を@y_koh さんが、設定画面を自分が担当しそれぞれSwiftでほぼ全て実装しました。

ふたつめに、自分が担当した設定画面ではこれまでトレタでやった事がなかったインタラクティブなUIを実装しました。具体的には以下のように指でテーブルの絵をなぞって簡単にレイアウトを作成できる設定画面です。

f:id:horimislime:20160201034459g:plain

今回はiOSチームとして行ったSwift導入とMVVMな設計への移行と、じぶんが担当した設定画面を作る上でやった事について紹介します。

Swiftの導入

トレタでは夏頃からSwift導入の話は上がっていたものの、WWDC2015で発表された2.0の内容は1.xから劇的な変更が加えられており、導入のタイミングを伺っている状態でした。

そこに今回の大型アップデート実施が決まり、着手のタイミングが10月頃とXcode7正式リリースに重なったので、キリ良く今回からSwiftを導入する事になりました。おかげで1.x系からの移行コストもゼロに。

新しい設計とライブラリの導入

トレタのアプリは一見シンプルなように見えますが、飲食店での様々なオペレーションに対応するため各画面でかなり多くの機能を提供しています。そのため、どうしてもプレゼンテーション層のコードが分厚くなりがちという問題を抱えていました。

この現状を打開する一手として、iOSチームではSwift導入に加え今後の機能開発ではMVVM風な設計を導入することにしました。View-ViewModelのつなぐライブラリにはSwiftBondを使っています。その他、トレタの古いコードではAPIレスポンスとModelプロパティのひも付けを独自のコードでやっていた為、今回SwiftでModelを実装する部分からObjectMapperを使い始めています。

また、テーブルレイアウトではお店の1F、2Fといった複数のレイアウトを作成できるよう、タブ型のUIを採用しています。この部分ではTZStackViewを使って動的に増減するタブUIを実装しました。

f:id:horimislime:20160201034349g:plain

心地よいUIの実現を目指して

指でテーブルを動かしてレイアウトを作成する設定画面はプレゼンテーション作成ツールと似た要素を持っているため、PowerPointやKeynoteといったアプリの挙動を参考にしています。

f:id:horimislime:20160201034826g:plain

また普段作る機会が少ないタイプのUIだったので、似たようなものが無いか、細かいアニメーション効果で参考になるものはないかCustom ControlsやDribbbleを漁ったりもしました。他にもawesome-iosやawesome-ios-uiといった最近流行りの(?)ライブラリやUIのキュレーションリポジトリにも目を通し、参考にできそうなものを試しつつ実装を進めて現在のUIに落ち着いています。