Webアプリのように モバイルアプリを 作りたい 2018.8.20 / @radiocatz Mobile Act OSAKA #6

おしごと 現職：株式会社 ラクス 所属：楽楽精算 開発チーム リーダー／スクラムマスター About me radiocat Twitter : @radiocatz Android派／Vim派／野球派／ KIRINビール派 HTC DesireからAndroidユーザー Blog : http://radiocat.hatenablog.com/ Qiita : https://qiita.com/radiocat GitHub : https://github.com/radiocat TVCM放映中！ https://youtu.be/8J-ZTQVKWMw

お知らせ 東京で勉強会やります 社内でも勉強会をやっています https://news.mynavi.jp/kikaku/20180801-662693/ https://rakus.connpass.com/event/97795/

モバイルアプリ ● iOSアプリ ● 領収書をカメラで撮影すると OCRで日付や 金額を自動入力して登録する ● 経費精算に使う https://itunes.apple.com/jp/app/%E6%A5%BD %E6%A5%BD%E7%B2%BE%E7%AE%97/id 1352852886 https://play.google.com/store/apps/details?id=jp.c o.rakus.sazabi.nativeapp.ic&hl=ja ● Androidアプリ ● 交通系ICカードの乗車履歴を NFCで読み取 る ● 交通費精算に使う

サービスをとりまく人々 時々使う 時々使う 日々使う 外勤社員 営業社員 経理社員 内勤社員 時々使う 時々使う モバイルアプリの利用者

Web機能の一部を切り出して モバイルアプリを 作りたい Webエンジニアの悩み

Webエンジニアが モバイルアプリを 作りたい 大人の事情

Cordova 解決策その1

Apache Cordova https://cordova.apache.org/ ● HTML5やJSの技術でモバイルアプリを開発するフレームワーク ● ニトビ・ソフトウェア社がPhoneGapとして開発 ● その後アドビ社が買収、ソースコードをApacheに寄贈したもの ● マルチプラットフォーム対応（iOS/Android/Windows Phone/Tizenなど）

アーキテクチャ ● アプリを起動するとWebViewが立 ち上がりWebアプリがロードされ る ● ネイティブ機能はPlugin経由で呼 ばれる https://cordova.apache.org/docs/en/latest/guide/overview/index.html

UIフレームワーク Cordova上でモバイル向けのWebアプリを動かすためのUIフレームワーク ● OnsenUI ○ https://ja.onsen.io/ ○ 日本製（アシアル社） ● Ionic ○ https://ionicframework.com/

Cordovaでのモバイルアプリ開発 良いところ ● Webアプリのお作法でUIを作り込める ● OnsenUI/Ionicを使えばリッチなUIが容易に実現 課題 ● プラグインを扱うにはネイティブの知識が必要 ● JSライブラリの更新時にアプリの配信が必要 ● Webアプリとのすみ分けが難しい

モバイルアプリが使いたい のではなく モバイルでサービスを使いたい はず

Webアプリの技術で作る ではなく Webアプリのように作りたい Webエンジニアの悩み

PWA 解決策その2

Progressive Web Apps(PWA)とは ● モバイルのUX向上を目的とした仕組み ○ インストール不要 ○ オフラインで動作 ○ プッシュ通知に対応 ○ ネイティブアプリのような UI ● 主な技術要素 ○ WebManifest ○ Service Workers ○ PushNotification ※技術的にはモバイルに限定したものではない

Google I/O 2016 の公式サイトがPWA化

アプリの構成例 ├── favicon.ico ├── （省略） ├── images ├── index.html ├── js │ ├── main.js (Service Workerをインストールしているプログラム） │ └── offlinepage.js ├── manifest.json　 (Web App Manifestファイル) ├── offline │ └── index.html └── service-worker.js (Service Workerファイル)

Web App Manifest ● アプリの情報を記述 ○ ホーム画面に追加するアイコンの情報など ○ マニフェストファイルの仕様 ( https://developer.mozilla.org/ja/docs/Web/Manifest ) ● htmlのにリンクを追加する

Service Worker ● PWAの動作を担うJS ● インストールされてバックグラウンドで動作 ○ オフライン動作や通知が可能 // enable service worker if ('serviceWorker' in navigator) { // register service worker navigator.serviceWorker.register('/service-worker.js'); // 省略 } ※main.jsでServiceWorkerをインストールする実装例

オフライン動作 1. Service Worker登録後、リソースを 要求 2. Service Workerがリクエストを乗っ 取る 3. カスタムしたレスポンスを返す https://developer.mozilla.org/ja/docs/Web/API/ServiceWorker_API/Using_Service_Workers

JSフレームワークでのPWAサポート ● React ○ React PWA：PWA化されたテンプレート ■ https://www.reactpwa.com/ ● Vue ○ vue-pwa-boilerplate：Google I/O 2017で公開されたPWAのテンプレート ■ https://github.com/vuejs-templates/pwa ○ @nuxtjs/pwa：Nuxt.js（Vue.jsのユニバーサルフレームワーク）の PWAモジュール ■ https://www.npmjs.com/package/@nuxtjs/pwa ● Angular ○ @angular/pwa：Angular 6から追加されたPWAモジュール ■ https://www.npmjs.com/package/@angular/pwa

Chrome DevTools PWAとしてのデバッグに対応 参照:Service Worker のデバッグ | Web | Google Developers https://developers.google.com/web/fundamentals/codelabs/debugging-service-workers/?hl=ja

PWAでモバイル対応 良いところ ● WebアプリのままでモバイルのUXを向上できる ● 各JSフレームワークのサポートも充実 課題 ● ブラウザからは使えないネイティブの機能がある ● モバイルアプリではない

モバイルアプリを リリースしたい 人もいるはず 大人の事情

モバイル対応 ではなく モバイルアプリを作りたい Webエンジニアの悩み

PWA+Cordova 解決策その3

実現イメージ まとめて開発 Cordovaでビルドし てアプリとして配信 そのままサーバへ デプロイ

Ionic PWA Toolkit https://github.com/ionic-team/ionic-pwa-toolkit ● Ionicフレームワークを使ってPWAを作るためのツールキット ● まだBetaなので現時点ではIonicでビルドしたモバイルアプリをそのままPWA化できる ほどツールとして整備されてない

PWA+Cordovaできるフレームワーク SPA/SSR/PWA対応/マテリアルデザインなどのUIコンポーネントなど全部入り ● Framework7 ○ https://framework7.io/ ○ Vue.jsとReact.jsに対応 ● Nuxt7：Nuxt.js+Framework7 ○ https://github.com/nuxt-community/nuxt7 ● Quasar ○ https://quasar-framework.org/ ○ Vue.jsに対応

PWA+Cordovaでモバイルアプリ開発 良いところ ● モダンなWeb技術を最大限活用できる ● モバイルアプリでありながらWebのUI/UXを維持可能 課題 ● やはりネイティブの知識は必要 ● 技術トレンドの変化が激しい ● サーバ/フロント/ネイティブのすみ分けが難しい

まとめ

Webアプリのようにモバイルアプリを作りたい人の選択肢 ● Cordova ○ モバイルアプリもHTML5/CSS/JSで作りたい人 ○ WebのUI/UXを活かしつつモバイルアプリをリリースしたい人 ○ ネイティブアプリの知識がある人 ● PWA ○ アプリとしてリリースしなくてもいい人 ○ 一部のネイティブの機能が使えなくてもいい人 ● PWA+Cordova ○ Web技術のトレンドの変化に追従できる JavaScriptカウボーイな人 ○ Webとモバイルの両方の技術を駆使して自分でなんとかできる人

Thank you

References & Credits ● サンプルコードで学ぶPWA - Qiita ○ https://qiita.com/radiocat/items/034904a094d07c389a4f ● Unsplash ○ https://unsplash.com/photos/SYTO3xs06fU