このページの本文へ

前へ 1 2 次へ

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

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

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

2019年06月20日 11時00分更新

文● 大平かづみ 編集 ● 羽野/TECH.ASCII.jp

  • この記事をはてなブックマークに追加
  • 本文印刷

 本稿では、先日開催された 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を構成

前へ 1 2 次へ

カテゴリートップへ

この連載の記事
  • 角川アスキー総合研究所
  • アスキーカード