SPA/PWA/AMPってなに？

2019.06.08

Transcript

1. SPAとPWA/AMPってなに？
   (ITあるあるの3⽂字略語を少しだけ克服する)
   2019.06.8
   

   View Slide

2. #アジェンダ
   1. とは⾔えまずは⾃⼰紹介。
   2. 本題に⼊る前に普通のWEBサイトを学ぶ
   3. SPAとは
   4. PWA/AMPとは
   

   View Slide

3. とは⾔えまずは⾃⼰紹介。
   

   View Slide

4. ナミザト
   沖縄出⾝だよ。
   Like プログラミング バスケ ボルダリング
   Work サーバーサイドエンジニア
   Activity バスケサークル エンジニア飲み会
   Age 25歳なってもうた。
   

   View Slide

5. 本題に⼊る前に普通のWEBサイトを学ぶ
   

   View Slide

6. ④データをレスポンス
   ②HTTPリクエスト
   WEBページ
   ①ページを更新
   WEBサーバー
   ③データを⽤意する
   普通のWEBサイトの仕組みはこんな感じ
   ?
   

   View Slide

7. つまりこういうこと。
   普通のWEBサイト
   

   View Slide

8. (ページ遷移すると) 真っ⽩になる。
   

   View Slide

9. 実はサーバーにページを要求している。
   ページが⾒たい（リクエスト）
   

   View Slide

10. 要求されたデータ(HTMLやCSSファイル)を⽤意
    WEBサーバー
    このIPだからこれか...。
    

    View Slide

11. ⽤意したデータをクライアントに渡す。
    はい。ページ（レスポンス）
    

    View Slide

12. そのデータを元にページを表⽰する。
    普通のWEBサイト HOME CONTENT CANTACT
    

    View Slide

13. この流れをページ遷移するたびに繰り返す。
    普通のWEBサイト
    ！
    HOME CONTENT CANTACT
    

    View Slide

14. ページを遷移すると....。
    普通のWEBサイト HOME CONTENT CANTACT
    

    View Slide

15. 真っ⽩になる。(以下略)
    ...。
    

    View Slide

16. このもどかしさを解決してくれるのがSPA
    ！
    

    View Slide

17. SPAとは
    

    View Slide

18. Single Page Application (シングルページアプリケーション)
    SPAとは、初めに1つのHTMLを読み込み、以後はユーザーインタラクション
    に応じてAjaxで情報を取得し、動的にページを更新するWEBアプリケーショ
    ンまたはWEBサイトのこと。
    通常のWEBアプリではページ遷移を⾏う際は都度サーバーへアクセスしてコ
    ンテンツの読み込みが必要だが、SPAではクライアントサイドでページ遷移
    を⾏うため、オーバーヘッドが軽減され、⾼速に動作が可能になる。
    Vue.js⼊⾨ より引⽤
    

    View Slide

19. ?
    …という気持ちも理解できますが、後ほど図で説明しますので、
    もうしばらく活字とお付き合いください。
    

    View Slide

20. SPAを使うメリット
    1. 通常のWEBページでは体験できないUXを提供できる
    2. ⾼速なページ遷移を実現できる
    3. クライアントとサーバーが分離される事でメンテナンス性が向上する
    4. クロスブラウザ対応
    5. あとなんかナウい
    

    View Slide

21. SPAを使うデメリット
    1. SEO対応が難しい（というか答えがない）
    2. 簡単なWEBサイトではオーバースペックになってしまう
    3. UI/UXを含む設計を通常のWEBサイトより詳細に⾏う必要がある。
    ※2019/05/08にChrome74に対応したためクローラーがSPAに対応した
    

    View Slide

22. 普通のWEBサイトだとこんな感じだった。
    ④データをレスポンス
    ②HTTPリクエスト
    WEBページ
    ①ページを更新
    WEBサーバー
    ③データを⽤意する
    

    View Slide

23. SPAに対応するとこんな感じになる。
    ⑥JSデータでレスポンス
    ②リクエスト
    WEBページ
    ①ページを更新
    WEBサーバー
    ④データを⽤意する
    ⑤データをレスポンス
    ③必要なデータのみを要求
    JavaScript
    

    View Slide

24. なんか余計ややこしくなってない？
    皆さんの思ってる事を代弁しよう。
    そんなことはないので、次のページで説明しよう
    

    View Slide

25. SPAをユーザー⽬線で⾒てみよう。
    普通のWEBサイト HOME CONTENT CANTACT
    

    View Slide

26. 先ほど同様ページ遷移してみる。
    普通のWEBサイト HOME CONTENT CANTACT
    

    View Slide

27. 真っ⽩にならない。
    普通のWEBサイト HOME CONTENT CANTACT
    ！
    ロード中…
    

    View Slide

28. 中⾝だけが変更された。(しかも速い)
    普通のWEBサイト HOME CONTENT CANTACT
    ！?
    別ページが開いた
    

    View Slide

29. 先ほどの仕組みを⾒返してみる。
    ⑥JSデータでレスポンス
    ②リクエスト
    WEBページ
    ①ページを更新
    WEBサーバー
    ④データを⽤意する
    ⑤データをレスポンス
    ③必要なデータのみを要求
    JavaScript
    

    View Slide

30. 表⽰が変わる部分のみをリクエスト。
    ⑥JSデータでレスポンス
    ②リクエスト
    WEBページ
    ①ページを更新
    WEBサーバー
    ④データを⽤意する
    ⑤データをレスポンス
    ③必要なデータのみを要求
    JavaScript
    リクエストされたページの共通部分
    を除く、差分（変更が必要なDOM）
    をJS側で検知
    

    View Slide

31. 表⽰が変わる部分のみをリクエスト。
    ⑥JSデータでレスポンス
    ②リクエスト
    WEBページ
    ①ページを更新
    WEBサーバー
    ④データを⽤意する
    ⑤データをレスポンス
    ③必要なデータのみを要求
    JavaScript
    差分検知されたコンテンツ（DOM）
    のみをサーバー側にリクエスト
    

    View Slide

32. 表⽰が変わる部分のみをリクエスト。
    ⑥JSデータでレスポンス
    ②リクエスト
    WEBページ
    ①ページを更新
    WEBサーバー
    ④データを⽤意する
    ⑤データをレスポンス
    ③必要なデータのみを要求
    JavaScript サーバーから取得した差分のみの
    コンテンツ（DOM）を元にHTMLを
    描画
    

    View Slide

33. つまりコンテンツが変わる部分のみを更新している。
    普通のWEBサイト HOME CONTENT CANTACT
    TOPページ
    

    View Slide

34. 中⾝が変わるたびに差分を更新。
    普通のWEBサイト HOME CONTENT CANTACT
    CONTENTページ
    

    View Slide

35. SPAを使うメリットを振り返る。
    1. 通常のWEBページでは体験できないUXを提供できる
    2. ⾼速なページ遷移を実現できる
    3. クライアントとサーバーが分離される事でメンテナンス性が向上する
    4. クロスブラウザ対応
    5. あとなんかナウい
    細かな説明は省くが
    ここはほとんど同じ意味。
    ユーザーはストレスなくページ遷移
    をできるためアプリの様に使える。
    

    View Slide

36. SPAを使うメリットを振り返る。
    1. 通常のWEBページでは体験できないUXを提供できる
    2. ⾼速なページ遷移を実現できる
    4. クロスブラウザ対応
    5. あとなんかナウい
    3. クライアントとサーバーが分離される事でメンテナンス性が向上する
    端末や環境に左右されずどの環境で
    も同じ様に動作することができる。
    

    View Slide

37. 使おうSPA。
    代表的なフレームワーク/ライブラリ
    Angular React Vue.js
    

    View Slide

38. PWA/AMPとは
    

    View Slide

39. Progressive Web Apps(プログレッシブウェブアプリ)
    モバイル向けWEBアプリをネイティブアプリの様に使える仕組みのこと。
    PWAとはそれ⾃体が特殊な⼀つの技術というわけではなく、
    レスポンシブデザイン/HTTPS化などGoogleが定める要素または
    基準を満たしたWEBアプリのことを指す。
    PWAに対応することにより、プッシュ通知やホーム画⾯へのアイコン追加など
    従来ネイティブアプリでしか出来なかった機能を実現する事ができる。
    これにより、UX向上やユーザーエンゲージメントの改善にも繋がるという事で注⽬されてい
    る。
    

    View Slide

40. PWAに対応すると出来る事
    1. プッシュ通知が可能
    2. キャッシュ機能を使えるので読み込み速度が向上し、オフラインでも動作可能
    3. ホーム画⾯追加を促す事ができる
    4. ホーム画⾯に追加するとアプリの様なアイコンになり、上の検索窓がなくなる
    5. アプリの様に仕えるのにOSごとの個別対応が不要
    

    View Slide

41. プッシュ通知機能。
    普通のWEBサイト
    HOME画⾯に追加
    Push通知
    Push通知
    

    View Slide

42. ホーム画⾯に追加を促す機能。
    普通のWEBサイト
    HOME画⾯に追加
    HOME画⾯に追加
    

    View Slide

43. 上部に検索窓がなくなる。
    普通のWEBサイト
    HOME画⾯に追加
    http://sample.com
    

    View Slide

44. PWAに対応するために必要なこと
    1. HTTPS化の対応必須
    2. レスポンシブ対応必須
    3. プッシュ通知やオフラインキャッシュを使いたければServiceWorkerを使う必要がある
    

    View Slide

45. 使おうPWA。
    

    View Slide

46. Accelerated Mobile Pages(アクセルレイテッドモバイルページ)
    2015年GoogleとTwitterが協同して⽴ち上げたオープンソースプロジェクト
    モバイル端末のサイト閲覧を⾼速化させるための技術の事を指す。
    通常のWEBアプリだとHTML/CSS/画像ファイルを読み込むが、
    AMPに対応したWEBアプリは事前にGoogleやTwitterのサーバーにキャッシュする事ができ、
    ページを⾼速で読み込む事ができる。
    ⼀⽅、全てのコンテンツのリソースサイズを静的に規定するなど
    「読み込みに時間がかかることはさせない」という厳しい⽅針で仕様が策定されている。
    

    View Slide

47. AMPに対応すると出来る事
    1. モバイル検索からの流⼊時に静的ページを⾼速に表⽰することができる
    2. Google検索結果でカルーセル表⽰になったり⚡のマークが付いたりする
    3. 読み込みが早いのでユーザがストレスなく使⽤でき、滞在時間が⻑くなる
    

    View Slide

48. Google検索でカルーセル表⽰で⽬⽴つ。
    ニュース
    ニュース
    

    View Slide

49. ページの読み込みが早い。
    h=p://test.com
    旅⾏関連のWEBアプリ「Wego」
    を例にすると…
    12秒かかってた読み込み速度が1秒台に
    ⾃然検索からのトラフィック12%UP
    サイト内検索したユーザのCVが39%UP
    

    View Slide

50. WegoのサンプルQRコード。
    

    View Slide

51. AMPに対応するために必要なこと
    1. AMPのルールに則ったHTMLタグで記述しなければいけない
    2. CSSは全てhead内に記述しなければいけない（外部読み込みは不可）
    3. JSはかなり制限されており、ほとんど使⽤できない
    4. 画像はあらかじめサイズを指定しておく必要がある
    

    View Slide

52. （もう少し使い勝⼿が良くなったら）使おうAMP。
    

    View Slide

53. ご静聴ありがとうございました。
    

    View Slide