なぜ今PWAがきているのか　トレンドの背景

Transcript

1. なぜ今PWAがきているのか トレンドの背景 TAM 角谷 仁

2. 自己紹介 角谷 仁 すみやひとし @hitoshisum ・PWA Nightコミュニティ運営 ・プロジェクトマネージャ/ディレクター11年 ・父親歴1.5年 ・開発チーム30名のマネージャ

   ・デジタル戦略の立案、開発案件のPMなど ・趣味は釣り TAM プロデューサー

3. このセッションのゴール ・PWAをただしく理解すること ・PWAを身近に感じてみること

4. ちなみに今日来てる人？ ・職種 ・PWAへの関わり度

5. PWAってなに？

6. https://mobile.twitter.com/ Twitter Lite https://www.instagram.com/ Instagram 触ってみよう！

7. 身近なPWA

8. https://appsco.pe/

9. PWA、なんとなくはわかるけど なんと説明したらいいかよくわからない…

10. 概念的すぎてよくわからない ややこしい説明例

11. 「ネイティブアプリみたいな」は分かりやすいけど 実際のところPWAが何かがよくわからない ややこしい説明例

12. 機能面で理解しようとすると、 「オフライン対応とプッシュ通知」だけがPWAとおもってしまう ややこしい説明例

13. 技術面だけで理解しようとすると 「Service Worker」や「Manifest」をいれてれば PWAっておもっちゃう。 ややこしい説明例

14. 本質は「よりよいウェブ体験」を作っていくこと。 みんなでいいウェブの世界を 作っていこうね～

15. こう説明するのがいいと思う。 PWA＝（最新の環境に合わせた）先進的なWebアプリケーション Googleが提唱した概念で、 ・ネットワークに依存せず（Reliable） ・表示が早くて、アクションもスムーズで（Fast） ・プッシュ通知やホームボタンに追加できる（Engaging） というこれまでにない新しいUXを提供するWebアプリケーションを目指しています。

16. 先進的ってどういうこと？

17. いままでもできたこと 最近できるようになってきたこと これからできるようになること ブラウザは絶えず進化している Service Worker/Web App Manifestが使えるように。 ・ブラウザプッシュ通知 ・ホームボタン追加の案内

    ・ブラウザでキャッシュのコントロールができるように。 … ブラウザのAPIが充実 ・Badging API、Payment Request API… よりネイティブ機能へのアクセスが充実していく ・cssでのリッチな表現 ・JSでつるつる動くサイト（SPA等） ・非同期でのデータ通信 … [ブラウザにできること]

18. Progressive=進歩的、先進的、段階的「よりよくしていこう」

19. 思い出そう 「Progressive Enhancement」

20. 2012年頃の話

21. https://codepen.io/matuzo/pen/Emddvx

22. よりよいWeb体験を作っていこう！

23. トレンドをつかもう

24. いまPWAが来てる感じって 2012年頃にレスポンシブがトレンドになった時とすごく良く似てる。

25. None

26. ・ブラウザが進化したことで普及した点 ・クロスプラットフォーム対応の方法である点 ・Googleさんが推進している点 何が似てる？

27. iOSでプッシュ通知が できるようになったら… できること増えてきたら ブラウザが進化したことで普及した。

28. ブラウザはどんどん進化している ブラウザでよりネイティブに近い体験ができるようになっていってる。

29. クロスプラットフォーム対応の方法である点 iOS: Objective C, Xcode Android: Java, Eclipse Windows: C#,

    Visual Studio

30. ネイティブあるある ・アプリを開発できる優秀なエンジニアが給料の高い会社に転職 ・ネイティブアプリを作ったけど、ダウンロード数が1000以下 ・低評価→ダウンロードされない ・最初だけでなくすべてがダブルコスト。ちょっとしたことで予算がなくなる ・２つあるがために、改善するサイクルが遅くなってしまう ・OSのバージョンアップに伴う対応 / 新しい画面サイズ対応 ・改修の度にいちいち審査が必要

31. MicrosoftもPWA押し。

32. Googleさんが推進している点

33. None

34. Googleフォト Google Map Go Google 検索

35. None

36. このPWA Nightでも・・・

37. こんなツールもでてきた。 https://www.glideapps.com/

38. 僕はPWAはウェブに関わる人の未来と思ってます。 PWAは一過性のものではなく 大きなトレンドととらえて みんなで一緒に勉強していきましょう！