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

by Hitoshi Sumiya

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

自己紹介角谷仁すみやひとし @hitoshisum ・PWA Nightコミュニティ運営・プロジェクトマネージャ/ディレクター11年・父親歴1.5年・開発チーム30名のマネージャ・デジタル戦略の立案、開発案件のPMなど・趣味は釣り TAM プロデューサー

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

PWAってなに？

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

身近なPWA

Slide 8

Slide 8 text

https://appsco.pe/

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

いままでもできたこと最近できるようになってきたことこれからできるようになることブラウザは絶えず進化している Service Worker/Web App Manifestが使えるように。・ブラウザプッシュ通知・ホームボタン追加の案内・ブラウザでキャッシュのコントロールができるように。 … ブラウザのAPIが充実・Badging API、Payment Request API… よりネイティブ機能へのアクセスが充実していく・cssでのリッチな表現・JSでつるつる動くサイト（SPA等）・非同期でのデータ通信 … [ブラウザにできること]

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

思い出そう「Progressive Enhancement」

Slide 20

Slide 20 text

2012年頃の話

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

トレンドをつかもう

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

MicrosoftもPWA押し。

Slide 32

Slide 32 text

Googleさんが推進している点

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

Googleフォト Google Map Go Google 検索

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

このPWA Nightでも・・・

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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