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のトレンド背景を考える

1,265 views

Published on

概念的で難しいPWAの捉え方を、どうやったらわかりやすく理解できるか考えた資料です。

Published in: Business
  • Be the first to comment

  • Be the first to like this

PWAのトレンド背景を考える

  1. 1. PWAってなに? トレンドの背景を考えてみる TAM 角谷 仁
  2. 2. 自己紹介 角谷 仁 すみやひとし @hitoshisum ・PWA Nightコミュニティ運営 ・ディレクター11年 ・開発チーム30名のマネージャ ・デジタル戦略の立案、開発案件のPMなど ・趣味は釣り TAM 取締役
  3. 3. PWAをただしく認識してみよう
  4. 4. Wikipediaに「PWA」がない!
  5. 5. 概念的すぎてよくわからない ごちゃごちゃややこしい説明例
  6. 6. ごちゃごちゃややこしい説明例 「ネイティブアプリみたいな」は分かりやすいけど 実際のところPWAが何かがよくわからない
  7. 7. ごちゃごちゃややこしい説明例 機能面で理解しようとすると、 「オフライン対応とプッシュ通知」だけがPWAとおもってしまう
  8. 8. ごちゃごちゃややこしい説明例 技術面だけで理解しようとすると 「Service Worker」や「Manifest」をいれてれば PWAっておもっちゃう。
  9. 9. 本質は「よりよいウェブ体験」を作っていくこと。 これにつきる。 みんなでいいウェブの世界を 作っていこうね~
  10. 10. これでどうだろう? PWAは「(最新の環境に合わせた)先進的なWebアプリケーション」 のこと Googleが提唱した概念で、 ・ネットワークに依存せず(Reliable) ・表示が早くて、アクションもスムーズで(Fast) ・プッシュ通知やホームボタンに追加できる(Engaging) というこれまでにない新しいUXを提供するWebアプリケーションを目指しています。 最低限これを対応したらPWAというガイドラインもあります。 参考) Progressive Web App Checklist(Baseline Progressive Web Apps Checklist) https://developers.google.com/web/progressive-web-apps/checklist Progressive Web App https://developers.google.com/web/progressive-web-apps/
  11. 11. 先進的ってどういうこと?
  12. 12. いままでもできたこと 最近できるようになってきたこと これからできるようになること ブラウザ環境は絶えず進化している Service Worker/Web App Manifestが使えるように。 ・ブラウザプッシュ通知 ・ホームボタン追加の案内 ・ブラウザでキャッシュのコントロールができるように。 … ブラウザのAPIが充実 ・Badging API、Payment Request API… よりネイティブ機能へのアクセスが充実していく ・cssでのリッチな表現 ・JSでつるつる動くサイト(SPA等) ・非同期でのデータ通信 … [ブラウザにできること]
  13. 13. Progressive=進歩的、先進的、段階的「よりよくしていこう」
  14. 14. 思い出そう 「Progressive Enhancement」
  15. 15. 2012年頃の話
  16. 16. https://codepen.io/matuzo/pen/Emddvx
  17. 17. あくまでPWAは手段 よりよいWeb体験を作っていくのが大事だよ
  18. 18. 進歩的なウェブっていうのを体感してみよう
  19. 19. 実際にPWAを触って、 少し先に進んだウェブ体験を実感してみよう https://voice.ameba.jp/
  20. 20. ・オフラインでもサイト表示 ・記事の下書き保存 ・音声録音 ・オフラインレコーディング ・オフライン検知-通知 ・録音開始/終了時バイブレーション ・デスクトップPWA スライドはこちら https://t.co/N8othfvV2O やってること
  21. 21. https://mobile.twitter.com/ Twitter Lite https://www.instagram.com/ Instagram
  22. 22. デスクトップPWA (Spotify) https://open.spotify.com/browse/featured?utm_source=pwa_install
  23. 23. トレンドはどんな感じでやってきそうか
  24. 24. いまPWAが来てる感じって 2012年頃にレスポンシブが来た時にすごく良く似てる。
  25. 25. 最近リリースされた有名なPWA
  26. 26. https://appsco.pe/ このサイトにたくさんPWA事例のってる
  27. 27. iOSでプッシュ通知が できるようになったら できること増えてきたら 要因1.ブラウザがより進化すれば、前に進む力が働く。
  28. 28. 要因2.クロスプラットフォームアプリとしてのPWA iOS:Objective-C、Xcode Android:Java, Eclipse Windows:C#、Visual Studio
  29. 29. MicrosoftもPWA押し。
  30. 30. こんなツールもでてきた。 https://www.glideapps.com/

×