SPA/PWA/AMPってなに？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

SPAとは

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

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

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

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

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

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

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

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

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

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

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

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

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

差分検知されたコンテンツ（DOM）のみをサーバー側にリクエスト

サーバーから取得した差分のみのコンテンツ（DOM）を元にHTMLを描画

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

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

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

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

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

PWA/AMPとは

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

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

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

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

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

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

使おうPWA。

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

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

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

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

WegoのサンプルQRコード。

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

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

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

SPA/PWA/AMPってなに？

SPA/PWA/AMPってなに？

More Decks by namizatork

Other Decks in Programming

Featured

Transcript