Save 37% off PRO during our Black Friday Sale! »

SPA/PWA/AMPってなに?

 SPA/PWA/AMPってなに?

2019.06.08

1998b7a88550e8c58f7efb17d7b72a29?s=128

namizatork

June 08, 2019
Tweet

Transcript

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

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

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

  4. ナミザト 沖縄出⾝だよ。 Like プログラミング バスケ ボルダリング Work サーバーサイドエンジニア Activity バスケサークル

    エンジニア飲み会 Age 25歳なってもうた。
  5. 本題に⼊る前に普通のWEBサイトを学ぶ

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

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

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

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

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

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

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

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

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

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

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

  17. SPAとは

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

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

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

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

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

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

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

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

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

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

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

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

  30. 表⽰が変わる部分のみをリクエスト。 ⑥JSデータでレスポンス ②リクエスト WEBページ ①ページを更新 WEBサーバー ④データを⽤意する ⑤データをレスポンス ③必要なデータのみを要求 JavaScript

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

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

    サーバーから取得した差分のみの コンテンツ(DOM)を元にHTMLを 描画
  33. つまりコンテンツが変わる部分のみを更新している。 普通のWEBサイト HOME CONTENT CANTACT TOPページ

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

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

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

    クライアントとサーバーが分離される事でメンテナンス性が向上する 端末や環境に左右されずどの環境で も同じ様に動作することができる。
  37. 使おうSPA。 代表的なフレームワーク/ライブラリ Angular React Vue.js

  38. PWA/AMPとは

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

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

    アプリの様に仕えるのにOSごとの個別対応が不要
  41. プッシュ通知機能。 普通のWEBサイト HOME画⾯に追加 Push通知 Push通知

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

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

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

  45. 使おうPWA。

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

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

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

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

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

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

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

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