読者です 読者をやめる 読者になる 読者になる

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

iOS Swift

開発部の@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 ControlsDribbbleを漁ったりもしました。他にもawesome-iosawesome-ios-uiといった最近流行りの(?)ライブラリやUIのキュレーションリポジトリにも目を通し、参考にできそうなものを試しつつ実装を進めて現在のUIに落ち着いています。

技術的チャレンジの効果

型安全で堅牢なコードを書けるSwiftならではのメリットに加え、MVVMでViewModelにプレゼンテーションロジックを集約したり、新しいライブラリを導入するといった試みによりバグにも素早く対応できテスタビリティの高いコードになっています。

もちろんタイトなスケジュールの中で新技術や慣れないUIを手探りで作るためハマった点も多いです。しかし結果としてメンテナンスしやすいコードを残す事ができ、実際5.0.0のリリース直後に実施したパッチアップデートも素早くこなすことができました。

さいごに

大型アップデートの裏側で我々iOSエンジニアが取り組んできた事について紹介しました。トレタでは現在こうした新機能追加をただこなすだけでなく、コードの問題を解決するために新しい技術を取り入れたり、エンジニアからも細かいUI・UXの提案を出しながらこだわりを持って作っています。

そんな弊社ではiOSエンジニアを始め他の職種も絶賛募集中です。とにかくモノづくりが好きな人、最新技術を試しながら最高のプロダクトを作っていきたいという人、もしトレタに興味が湧いたら話を聞きにきてください。

© Toreta, Inc.

Powered by Hatena Blog