Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

PWA 4 Business

288 views

Published on

PWAのビジネス活用まとめ

Published in: Software
  • Be the first to comment

  • Be the first to like this

PWA 4 Business

  1. 1. 1URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. PWAのビジネス活用まとめ アシアル株式会社 Monacaプログラミング教育アドバイザー 岡本 雄樹
  2. 2. 2URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 自己紹介  •  • • •
  3. 3. 3URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. PWAとは何か?
  4. 4. 4URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. ストアを経由せずにアプリ配信できる技術 • 審査不要 • 手数料不要 • 更新も自由にできる!
  5. 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. 6. 6URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. どうすればPWAでアプリが作れるの? • HTML5技術を採用すればPWAア プリが作れます • WordPressならプラグイン一発 で(一応)PWA対応できます。
  7. 7. 7URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. PWAの仕組み • PWAはブラウザ側の技術 • •
  8. 8. 8URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. PWAの仕組み - Cordovaとの違い • 中間レイヤーが不要 • •
  9. 9. 9URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. Apache Cordovaはこんな感じ ネイティブコード HTML コンテンツ アプリ本体はHTML5で実装 ネイティブアプリ形式で配布 ハードウェア機能を利用可能 プラグインでネイティブ 機能を拡張
  10. 10. 10URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. PWAはこんな感じ HTML コンテンツ アプリ本体はHTML5で実装 『Service Worker』で色々できる コンテンツのキャッシュやPushなど
  11. 11. 11URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 比較表
  12. 12. 12URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. ビジネス的なインパクト • アプリ開発の世界 • • • •
  13. 13. 13URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. ビジネス的なインパクト • Webの世界 •
  14. 14. 14URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. PWAを導入しているサイトの例
  15. 15. 15URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. PWAを採用しているサイトの例 • Google Maps Go • SUUMO • 日経電子版 • CROWDFARM
  16. 16. 16URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. Google Maps Go • PWA版 Google Maps • • なんとストアで配信中
  17. 17. 17URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. CROWD FARM • 普通の通販サイト • WordPress • WooCommerce • SUPER PWA

×