PWAのビジネス活用まとめ

1. 1URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
PWAのビジネス活用まとめ
アシアル株式会社
Monacaプログラミング教育アドバイザー
岡本 雄樹

2. 2URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
自己紹介

•

•
•
•

3. 3URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
PWAとは何か？

4. 4URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
ストアを経由せずにアプリ配信できる技術
• 審査不要
• 手数料不要
• 更新も自由にできる！

5. 5URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
つまり
• 審査不要なので『組長サイト(注1)』もア
プリとして配信できる
• 決済方法にAmazon Pay使ってもOK
• 審査待ちせずに『恥ずかしい不具合』を今
すぐFix
※注1 組長サイトの作り方
https://www.slideshare.net/lilyfan/kumicho

6. 6URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
どうすればPWAでアプリが作れるの？
• HTML5技術を採用すればPWAア
プリが作れます
• WordPressならプラグイン一発
で（一応）PWA対応できます。

7. 7URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
PWAの仕組み
• PWAはブラウザ側の技術
•
•

8. 8URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
PWAの仕組み - Cordovaとの違い
• 中間レイヤーが不要
•
•

9. 9URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Apache Cordovaはこんな感じ
ネイティブコード
HTML
コンテンツ
アプリ本体はHTML5で実装
ネイティブアプリ形式で配布
ハードウェア機能を利用可能
プラグインでネイティブ
機能を拡張

10. 10URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
PWAはこんな感じ
HTML
コンテンツ
アプリ本体はHTML5で実装
『Service Worker』で色々できる
コンテンツのキャッシュやPushなど

11. 11URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
比較表

12. 12URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
ビジネス的なインパクト
• アプリ開発の世界
•
•
•
•

13. 13URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
ビジネス的なインパクト
• Webの世界
•

14. 14URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
PWAを導入しているサイトの例

15. 15URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
PWAを採用しているサイトの例
• Google Maps Go
• SUUMO
• 日経電子版
• CROWDFARM

16. 16URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Google Maps Go
• PWA版 Google Maps
•
• なんとストアで配信中

17. 17URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
CROWD FARM
• 普通の通販サイト
• WordPress
• WooCommerce
• SUPER PWA