トレタ開発者ブログ

飲食店向け予約/顧客台帳サービス「トレタ」、モバイルオーダー「トレタO/X」などを運営するトレタの開発メンバーによるブログです。

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

開発部の@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エンジニアを始め他の職種も絶賛募集中です。とにかくモノづくりが好きな人、最新技術を試しながら最高のプロダクトを作っていきたいという人、もしトレタに興味が湧いたら話を聞きにきてください。

トレタで開発者ブログ始めます。

トレタの増井です。風呂グラマーIT芸人という名前で知られていますが本職はこっちです。

トレタでは、社名と同じ「トレタ」という、飲食店の予約を管理するアプリを提供しています。 ウェブ予約のページも提供しているので、そこで名前をみたことがある、実際に使ったことがあるという方もいらっしゃるかも知れません。

しかし、多くのエンジニア、デザイナにとってトレタは接点が少なく、いまいち何をしているのか分からないサービスだと思います。

しかしその裏側で動いている仕組みはWeb系でよく見るシステムですし、開発・ビジネスとしても非常に面白いサービスになっていると自負しています。

私も前にto Cサービスを開発していましたが、それに比べてto Bサービスの面白さは「お客さまの役に立つモノを提供し、その声を直接聞ける」という所です。使った人全員に「使って良かった」と言ってもらえるサービスを作る事ができるというのはto Bの面白さだと感じています。

直接のお客さんは飲食店ですが、その先にいる一般消費者にとって役に立つ事も視野に入れて開発していますので、"B to B"よりは"B to B to C"と言えます。

このブログでは、トレタの開発で培ったノウハウや仕事の面白さなどをエンジニアやデザイナが書いて行きます。

トレタはiPad(Swift/ObjC) + Web(AngularJS) + Restful API(Rails) + AWS(EngineYard)といったto C Web系と同じ技術を使っているので、多くのWebエンジニアにとってなじみやすい記事が多くなると思います。

技術的な事以外、組織論、ご飯や趣味の話など直接開発には関係のない話も飛び出すと思いますが、「こんな人達がトレタを作っているんだな」と思って読んでいただければ幸いです。

トレタの社内インタビューのページでは、仕事の様子やエンジニアの思いなども公開していますので、こちらも合わせてご覧下さい。

一つ目の技術記事も本日公開しています!

トレタのアプリ新機能開発の舞台裏 tech.toreta.in

以後、よろしくお願いします。

© Toreta, Inc.

Powered by Hatena Blog