Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Webアプリのようにモバイルアプリを作りたい / Overview of Cordova & PWA

D3f673bee1c7b59b8bdade8f6db61282?s=47 radiocat
August 20, 2018

Webアプリのようにモバイルアプリを作りたい / Overview of Cordova & PWA

2018.8.20 Mobile Act OSAKA #6

D3f673bee1c7b59b8bdade8f6db61282?s=128

radiocat

August 20, 2018
Tweet

Transcript

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

  2. おしごと 現職:株式会社 ラクス 所属:楽楽精算 開発チーム リーダー/スクラムマスター 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
  3. お知らせ 東京で勉強会やります 社内でも勉強会をやっています https://news.mynavi.jp/kikaku/20180801-662693/ https://rakus.connpass.com/event/97795/

  4. モバイルアプリ • 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で読み取 る • 交通費精算に使う
  5. サービスをとりまく人々 時々使う 時々使う 日々使う 外勤社員 営業社員 経理社員 内勤社員 時々使う 時々使う

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

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

  8. Cordova 解決策その1

  9. Apache Cordova https://cordova.apache.org/ • HTML5やJSの技術でモバイルアプリを開発するフレームワーク • ニトビ・ソフトウェア社がPhoneGapとして開発 • その後アドビ社が買収、ソースコードをApacheに寄贈したもの •

    マルチプラットフォーム対応(iOS/Android/Windows Phone/Tizenなど)
  10. アーキテクチャ • アプリを起動するとWebViewが立 ち上がりWebアプリがロードされ る • ネイティブ機能はPlugin経由で呼 ばれる https://cordova.apache.org/docs/en/latest/guide/overview/index.html

  11. UIフレームワーク Cordova上でモバイル向けのWebアプリを動かすためのUIフレームワーク • OnsenUI ◦ https://ja.onsen.io/ ◦ 日本製(アシアル社) • Ionic

    ◦ https://ionicframework.com/
  12. Cordovaでのモバイルアプリ開発 良いところ • Webアプリのお作法でUIを作り込める • OnsenUI/Ionicを使えばリッチなUIが容易に実現 課題 • プラグインを扱うにはネイティブの知識が必要 •

    JSライブラリの更新時にアプリの配信が必要 • Webアプリとのすみ分けが難しい
  13. モバイルアプリが使いたい のではなく モバイルでサービスを使いたい はず

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

  15. PWA 解決策その2

  16. Progressive Web Apps(PWA)とは • モバイルのUX向上を目的とした仕組み ◦ インストール不要 ◦ オフラインで動作 ◦

    プッシュ通知に対応 ◦ ネイティブアプリのような UI • 主な技術要素 ◦ WebManifest ◦ Service Workers ◦ PushNotification ※技術的にはモバイルに限定したものではない
  17. Google I/O 2016 の公式サイトがPWA化

  18. アプリの構成例 ├── 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ファイル)
  19. Web App Manifest • アプリの情報を記述 ◦ ホーム画面に追加するアイコンの情報など ◦ マニフェストファイルの仕様 (

    https://developer.mozilla.org/ja/docs/Web/Manifest ) • htmlの<head>にリンクを追加する <link rel="manifest" href="/manifest.json">
  20. Service Worker • PWAの動作を担うJS • インストールされてバックグラウンドで動作 ◦ オフライン動作や通知が可能 // enable

    service worker if ('serviceWorker' in navigator) { // register service worker navigator.serviceWorker.register('/service-worker.js'); // 省略 } ※main.jsでServiceWorkerをインストールする実装例
  21. オフライン動作 1. Service Worker登録後、リソースを 要求 2. Service Workerがリクエストを乗っ 取る 3.

    カスタムしたレスポンスを返す https://developer.mozilla.org/ja/docs/Web/API/ServiceWorker_API/Using_Service_Workers
  22. 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
  23. Chrome DevTools PWAとしてのデバッグに対応 参照:Service Worker のデバッグ | Web | Google

    Developers https://developers.google.com/web/fundamentals/codelabs/debugging-service-workers/?hl=ja
  24. PWAでモバイル対応 良いところ • WebアプリのままでモバイルのUXを向上できる • 各JSフレームワークのサポートも充実 課題 • ブラウザからは使えないネイティブの機能がある •

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

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

  27. PWA+Cordova 解決策その3

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

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

  30. 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に対応
  31. PWA+Cordovaでモバイルアプリ開発 良いところ • モダンなWeb技術を最大限活用できる • モバイルアプリでありながらWebのUI/UXを維持可能 課題 • やはりネイティブの知識は必要 •

    技術トレンドの変化が激しい • サーバ/フロント/ネイティブのすみ分けが難しい
  32. まとめ

  33. Webアプリのようにモバイルアプリを作りたい人の選択肢 • Cordova ◦ モバイルアプリもHTML5/CSS/JSで作りたい人 ◦ WebのUI/UXを活かしつつモバイルアプリをリリースしたい人 ◦ ネイティブアプリの知識がある人 •

    PWA ◦ アプリとしてリリースしなくてもいい人 ◦ 一部のネイティブの機能が使えなくてもいい人 • PWA+Cordova ◦ Web技術のトレンドの変化に追従できる JavaScriptカウボーイな人 ◦ Webとモバイルの両方の技術を駆使して自分でなんとかできる人
  34. Thank you

  35. References & Credits • サンプルコードで学ぶPWA - Qiita ◦ https://qiita.com/radiocat/items/034904a094d07c389a4f •

    Unsplash ◦ https://unsplash.com/photos/SYTO3xs06fU