トレタ開発者ブログ

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

ng-japanにスポンサーとして参加しました

こんにちは、トレタでウェブフロントエンド開発をしている@teyoshです。
3/21に開催されたng-japan 2016にトレタはスポンサーとして参加させていただきました。

2015年に続き、2度目のカンファレンス開催です。

AngularJSも公開されてから4年以上経ち今年はAngular2がリリースされる予定です。

当日は200名を超す参加者の登録や合計5時間にも及ぶ12本もの発表がありました。
発表はAngular2がまだベータであるというのにも関わらず、5本もありサテライト会場も埋まるほどの熱量の多い発表になりました。
AngularJSはAngular2に置き換わっていくことは確定しているものの利用者は多数おり、まだまだ開発は進んでいくため、学びは多いと感じました。

Angularに関しては古い情報などで誤解していることも多かったり、Angular2に関する懸念事項や疑問も多数あり、啓蒙活動は重要なのだと感じました。

その他にもAngular2での開発には欠かせないTypeScriptやVisual Studio Codeに関する発表やこれからのWebが楽しくなりそうなProgressive Web Appsの解説などがありました。

発表はYouTubeにて公開されているので見てみて下さい。

www.youtube.com

  1. 0:03:40 Angular1.5 新機能 / 金井 健一
  2. 1:03:33 Progressive Web Apps / 浅井 智也
  3. 2:03:46 Angular2を書くためのAngularJSの書き方 / 吉田 徹生
  4. 3:23:26 エンタープライズAngularの取り組み / 林 裕一郎
  5. 4:23:13 RxJS概要とリアクティブアーキテクチャの考察 / 高岡 大介
  6. 5:22:10 Angular1.5 Component & ngComponentRouter / 佐川 夫美雄

www.youtube.com

  1. 0:05:01 Angular2の失敗しない始め方 / 稲富 駿
  2. 1:04:43 Microsoft Openness TypeScriptとAngular,そしてVisual Studio Code / 井上 章
  3. 2:04:31 Angular2実践入門 / 白石 俊平
  4. 3:23:00 クリエイティブの視点から探るAngular2の可能性 / 池田 泰延
  5. 4:20:00 ngUpgradeと移植戦略 / 奥野 賢太郎
  6. 5:23:00 Angular1.4で作られた自社マイクロサービスをAngular2へマイグレー­ション / 林 優一

トレタでは先日の記事

tech.toreta.in

のようにAngularを使ったプロダクトを作成しています。
これからももっとAngularを使い倒していきたいと思っています。

トレタ(Web版)のこと

はじめまして。予約/顧客台帳サービス「トレタ」のWeb版を開発をしているフロントエンドエンジニアの堀口です。

ブログが始まったばかりですので、今回はトレタのウェブ版がどのようなものか、簡単に紹介します。

トレタといえばiPadアプリやWeb予約が注目されるけど、Web版もしっかりあるんだよー、ということをお伝えしたいです。

Web版はiPadの移植ではない

トレタのアプリにはiPadとWebの2つがあり、それぞれカバー領域が違います。簡単にいうと、iPadは現場での利用を想定していて、Webは現場というよりはバックオフィスや本部での利用を想定しています。

以下の画像は、それぞれの領域を表したマトリクスです。

f:id:ryotah:20160325152115p:plain (縦軸: 顧客との距離 | 横軸: いつの予約か)

iPadアプリとWeb版、いくつか同じ機能があります。ただ、まったく同じではなく、利用者・利用シーンに合わせて、細かい仕様を変更しています。

f:id:ryotah:20160325150842p:plain 予約入力画面 (左: iPadの簡単入力画面 | 右: Webの入力画面)

分析機能

iPadアプリとWeb版の違いの一つとして「分析機能」があります。これはWeb版でのみ提供している機能で、予約データの集計や分析をすることができます。

f:id:ryotah:20160325143128p:plain (左: 予約件数/人数の推移 | 右: 常連客比率がわかる来店回数の集計)

データの取得にはBigQueryを利用しています。トレタのアプリはiPadもWebも同じAPIサーバーを利用しているのですが、分析機能はBigQueryを利用しています。

BigQueryのおかげで、SQLを書けば大抵のデータは取得できます。新機能の追加も、本体のAPIサーバーに変更を加えることなく、柔軟で速い対応ができるようになっています。

f:id:ryotah:20160325150844p:plain

使っている技術

  • AngularJS (1.5) / Karma / Protractor
  • TypeScript
  • Sass
  • Grunt
  • Bugsnag
  • CircleCI

この辺りは、特に目新しいことはないですね。SassやGruntは今後どうするかわかりませんが、Angular(2も含む)やTypeScriptは今後も使っていきたいです。

Angularは1.5になってからコンポーネントベースでの開発がしやすくなったので嬉しいです。

最後に

簡単ですが、初回ということで、トレタWeb版の紹介をさせていただきました。

今後はもっとフロント側の技術、Angular2や、それにあわせて、RxJSとかReduxとか、そういった話をしていきたいなーと思っています。 というわけで、今後もよろしくお願い致します。

高い互換性と寿命の長いWebAPIをつくるには

Web APIの開発を担当しているswdyhです。 以前からWebサービスのサーバサイドの開発をしていたんですが、トレタに入るまでアプリのためのWeb APIの開発というのはしていませんでした。トレタに入って2年半くらいずっとアプリのためのAPIを開発していて、同じサーバサイドの開発でも、それまでとの開発とは違う点があり、悩ましくも面白く感じたのでまとめてみました。

サービスとアプリの話

トレタで提供しているサービスは、飲食店むけの予約管理サービスで、電話などで予約を受け付けたときに、iPadのアプリを操作して予約を入力してもらい、実際にお客さんが来店したときにはiPadを見て案内するというふうに使ってもらうものです。他にもいろんな機能やこだわりポイントがあるサービスなんですが、そのへんはWebサイトを見てみてください。

トレタのアプリはiPadのネイティブアプリで、ほぼ全てのデータをサーバ上のDBに入れていて、WebAPIを通して利用しています。WebAPIが動いていなければ、なにもできなくなりますが、複数のデバイスで利用でき、ローカルデータを同期しようとして、おかしくなるということもないという造りにしています。

Web APIと古いバージョンのアプリ

Web API開発にとって、相手がアプリであることの特徴は、古いバージョンのクライアントが残り続けるということにつきます。古いバージョンが残るということは、古いバージョンを使い続けられるようにするには、古いバージョンが想定しているAPIを維持しておく必要があるということです。

これはアプリではなくても、公開用のWebAPIを作る場合に似ていますが、公開用の場合は機能を絞ったり、安定して長く使ってもらうように準備して作る点がちょっと違います。トレタのようなサービスをつくるにあたっては開発スピードが重要で、WebAPIもどんどん開発する必要があり、それをしながら互換性を維持するのはより大変です。

互換性の話

実例ではないんですが、互換性についてかんたんな例をあげてみます。電話番号のデータを文字列で用意していたとします。

{ "phone": "090-1111-2222" }

ところが開発が進んでやっぱり複数必要だよね、っていう話になったとします。

{ "phones": ["090-1111-2222", "090-1111-2223"] }

単純にこう変えてしまうと、最初のWebAPIを使う前提でつくられたアプリがリリース済の場合、そのアプリが使えなくなってしまいます。あたり前すぎますが、これはアプリ向けのWebAPI開発にとって一番重要なことだと思っています。この例は単純なですが、日々これの積み重ねで進んでいくので、常に気を配る必要があります。

この問題の対処方法としては

  • 別のAPIとして提供し、古い方をdeprecate扱いにする
  • 両方の値をいれてphoneの方をdeprecate扱いにする

deprecate扱いにするというのは、アプリを作るひとむけに次のバージョンからは使わないように作ってもらうということになります。APIドキュメントを整備したり、アプリをつくるひととのコミュニケーションが大事かなと思います。

古いバージョンを開いた場合、アプリを開いたときに「アップデートをしてから使ってください」というメッセージをだして、使えなくしてしまう。という手もありますが、なかなかそういうわけにはいかない場合が多いと思いますし、トレタでもユーザの不便さを考えてしていません。

Web/WebViewアプリ/ネイティブアプリ

もうひとつWebViewやWeb技術でUIをつってもこの問題を解決できます。トレタのアプリでも一部WebViewを使うところはありますし、過去WebViewだった部分もあります。

ここの議論だけでも大きな話なので、トレタでどうしているかだけ紹介します。飲食店の現場のオペレーションで使う場合には、電話を受けながらでも素早い入力できるUIやデバイスのマイクをつかった録音機能などのネイティブの機能をフルに活かしたアプリを提供し、モバイル用途やオーナー/チェーン店本部むけの機能についてはWebでつくるという使い分けをしています。

計測とAPIの停止

ちょっと話を戻すと、互換性を維持するのが大事という話しをしました。今のところトレタのWebAPIは互換性を維持し続けていて、最初のアプリをリリースしたのは2年以上前ですが、そのときのアプリを起動してもきちんと動作するようになっています。更に言うと、最初のバージョンだけでなく、最初のリリースから今までの間に約40回のリリースをしていて、40バージョンのアプリがそれぞれ動作するようにWebAPIを保守しています。

とはいえ、互換性を維持し続けるコストもかかるので、どこまで互換性を維持しつづけるのかを考えておく必要があると思っています。そのためには、どのバージョンのアプリがどれくらい使われているかを知るというのが大事です。

トレタではすべてのWebAPIのアクセスのログをGoogle BigQueryに保存していて、いつでも簡単に検索したり集計できるようになっています。アプリのバージョンやiOSのバージョンの割合を調べたり、どの店舗さんが古いバージョンを使っているのかというのも調べたりしています。

今のところトレタのWebAPIは実際に停止するところまではやっていないんですが、ログの集計からdeprecateなAPIを使うバージョンのアプリからのアクセスが一定期間ないことや、deprecateにしてからの期間を基準にして、実際に停止するということをやっていこうかと考えています。

B2Bならでは

またトレタでは実際に営業担当が飲食店さんとのつながりをもっているので、古いバージョンやバグのあるバージョンを使っている場合に、担当者を通じてアップデートをお願するということもしています。地道な方法ですがそうやって古いアプリをなくしていくとともに、新しいバージョンの機能を知ってもらうようにしています。これはコンシューマ向けのサービスではあまりないことかなと思うのと、営業と開発の距離が近く、協力して問題を解決していけるといのもトレタでの開発の面白さの一つだと思っています。

まとめ

互換性を中心にトレタでのWeb API開発で得た知見をまとめてみました。互換性以外にも考えるべきことはたくさんあって、トレタでは外部連携先がかなりの勢いで増えつつあり、外部連携用のAPIをどう設計して運用するかが今もっとも悩ましくて面白いと思っています。いまの試行錯誤からよさそうなパターンや知見をみつけて、まとめられればいいなと思っています。

Web APIの開発(おもにRails)、Web APIをささえるインフラ(devOps)、iOSアプリの開発(Swift移行中)など、トレタではエンジニアを募集しています。

© Toreta, Inc.

Powered by Hatena Blog