Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Webアプリのようにモバイルアプリを作りたい / Overview of Cordova & PWA
Search
radiocat
August 20, 2018
Technology
0
830
Webアプリのようにモバイルアプリを作りたい / Overview of Cordova & PWA
2018.8.20 Mobile Act OSAKA #6
radiocat
August 20, 2018
Tweet
Share
More Decks by radiocat
See All by radiocat
EMの仕事、あるいは顧客価値創出のアーキテクト
radiocat
0
180
アジャイルを支える心理的安全性の守破離 / Psychological safety for Agile
radiocat
1
770
経験ゼロからはじめる!10年以上続くプロダクトのアウトカム創出戦略 / Challenges of product management
radiocat
1
4.4k
変化の時代に活かす「みんなのプロジェクトマネジメント」 / Utilize project management for change
radiocat
0
1.7k
「中小企業のエンジニアチームを”楽”にする」を目指す組織マネジメントの変わる勇気と変えない勇気 / Challenge to Scrum 4
radiocat
2
3.4k
関西的なノリで変化の波をノリこなすチームの取り組み / 3 Steps and Kansai-soul to Riding the Waves of Change
radiocat
2
3.1k
スクラムちゃうがなと言われてもやってみぃひん? / Challenge to Scrum 3
radiocat
4
9.4k
Re:ゼロから始めるアジャイル開発 / restart agile
radiocat
3
1.6k
スクラム開発について / What is Scrum?
radiocat
0
510
Other Decks in Technology
See All in Technology
大規模イベントに向けた ABEMA アーキテクチャの遍歴 ~ Platform Strategy 詳細解説 ~
nagapad
0
190
Findy Freelance 利用シーン別AI活用例
ness
0
300
Amazon Q Developerを活用したアーキテクチャのリファクタリング
k1nakayama
2
190
Claude Codeから我々が学ぶべきこと
s4yuba
9
2.2k
Google Agentspaceを実際に導入した効果と今後の展望
mixi_engineers
PRO
3
330
解消したはずが…技術と人間のエラーが交錯する恐怖体験
lamaglama39
0
190
マルチモーダル基盤モデルに基づく動画と音の解析技術
lycorptech_jp
PRO
4
520
LIFF CLIとngrokを使ったLIFF/LINEミニアプリのお手軽実機確認
diggymo
0
230
Claude CodeでKiroの仕様駆動開発を実現させるには...
gotalab555
3
900
AI時代の経営、Bet AI Vision #BetAIDay
layerx
PRO
1
1.8k
風が吹けばWHOISが使えなくなる~なぜWHOIS・RDAPはサーバー証明書のメール認証に使えなくなったのか~
orangemorishita
15
5.5k
S3 Glacier のデータを Athena からクエリしようとしたらどうなるのか/try-to-query-s3-glacier-from-athena
emiki
0
180
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
The Cult of Friendly URLs
andyhume
79
6.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
430
Documentation Writing (for coders)
carmenintech
73
5k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
A designer walks into a library…
pauljervisheath
207
24k
Fireside Chat
paigeccino
38
3.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Building Adaptive Systems
keathley
43
2.7k
Transcript
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の<head>にリンクを追加する <link rel="manifest" href="/manifest.json">
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