クラウドから「エッジ」への動きが加速：Build／de:code 2019レポート 第14回

de:code 2019でFIXERの社内カフェアプリの全貌を紹介

PWA、ML Ops、マイクロサービス――最も”今どき”なスマホアプリ開発を実演

　本稿では、先日開催された de:code 2019の中から、FIXERの横山依子さん、鈴木章太郎さん、市岡 由偉さん、千賀大司さんによるセッション「Vue.jsとFirebase、AKSでのクラウドネイティブなスマホアプリの作り方 ＋ ML OpsによるAIモデルの作り方」をレポートします。

　このセッションでは、FIXER社内で運用を開始したというFIXER Cafeのスマートフォンアプリを例に、アプリケーションを素早く、且つ継続的に開発する術について紹介されました。

FIXER Caféアプリ

　ここでの開発のポイントは3点。

• PWAを用いた迅速なアプリ開発
• CI/CDを利用した継続的な開発
• Automated Machine Learningを用いた予測機能の精度向上

　また、これらはAzureに限ることなく一般的な開発手法であるものの、Azureを使うことによってより効率的に実現できる旨が話されました。

FIXERの横山依子さん（左）と市岡由偉さん（右）

PWAを用いた迅速なアプリ開発

　FIXER Cafeアプリは、スマートフォンからコーヒーなどのドリンクを注文でき、登録したクレジットカードを利用して、アプリ上で決済が完了するアプリです。また、アカウント認証が可能で、購入履歴も見ることができます。

　ネイティブアプリのように見えますが、実はPWA(Progressive Web Apps)を用いたWebベースの造りになっています。PWAを採用した理由は、社員のみの利用が目的でストアへの公開をしないためですが、Webだからとはいえ侮れません。

FIXER Cafeアプリのアーキテクチャ

FIXER CafeアプリはPWAを採用

　開発はFigmaというUIデザインツールでプロトタイミングを行い、PWAの実装に適したJavaScriptのフレームワークVue.jsおよびNuxt.jsを採用。Nuxt.jsは多くのパッケージが提供されており、後述の外部サービスとの連携も容易です。

　アカウント認証にはFirebase、クレジットカード決済にはStripe、プッシュ通知にはOneSignalなど、mBaaSやSaaS型のサービスを利用することで、開発期間を短縮することができたといいます。

　ソースコードはGitHubで管理し、Azure Pipelinesを連携してあるそうです。プルリクエストがマージされると自動的にAzure Pipelinesでビルドが行われ、マネージャーのチェックを経てFirebase HostingにリリースされるようにCI/CDが構成されていました。

　Azure Pipelinesは、Azure DevOpsに含まれるCI/CDのサービスです。Microsoft製品に限らず連携できます。無償でも十分な利用枠があり、CI/CDサービスとしては後発ながら注目されています。

Azure Pipelinesを使ってCI/CDを構成