Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SPA/PWA/AMPってなに?
Search
namizatork
June 08, 2019
Programming
1
17k
SPA/PWA/AMPってなに?
2019.06.08
namizatork
June 08, 2019
Tweet
Share
More Decks by namizatork
See All by namizatork
PHPのエラーを理解して適切なエラーハンドリングを学ぼう
namizatork
1
3.4k
もう細かいレビューは したくない、されたくない
namizatork
0
1.3k
PHPの静的解析 ついでにLarastan
namizatork
0
490
Laravel8.xまでの大きな変更点を振り返る
namizatork
0
460
Livewireは魔法??コードリーディング してみた
namizatork
1
290
Laravelワカンネ(゚⊿゚)から「完全に理解した()」までステップアップ
namizatork
0
980
Laravelの「Hello World」を 表示するまでの処理を追ってみた
namizatork
0
1.3k
Laravel Hands-on
namizatork
0
320
Other Decks in Programming
See All in Programming
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
250
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
100
Arm移行タイムアタック
qnighy
0
340
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
900
色々なIaCツールを実際に触って比較してみる
iriikeita
0
330
OnlineTestConf: Test Automation Friend or Foe
maaretp
0
120
最新TCAキャッチアップ
0si43
0
200
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
480
距離関数を極める! / SESSIONS 2024
gam0022
0
290
エンジニアとして関わる要件と仕様(公開用)
murabayashi
0
300
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
1k
CSC509 Lecture 11
javiergs
PRO
0
180
Featured
See All Featured
Gamification - CAS2011
davidbonilla
80
5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Being A Developer After 40
akosma
87
590k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Code Review Best Practice
trishagee
64
17k
10 Git Anti Patterns You Should be Aware of
lemiorhan
655
59k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
The Language of Interfaces
destraynor
154
24k
RailsConf 2023
tenderlove
29
900
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
Transcript
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側で検知
表⽰が変わる部分のみをリクエスト。 ⑥JSデータでレスポンス ②リクエスト WEBページ ①ページを更新 WEBサーバー ④データを⽤意する ⑤データをレスポンス ③必要なデータのみを要求 JavaScript
差分検知されたコンテンツ(DOM) のみをサーバー側にリクエスト
表⽰が変わる部分のみをリクエスト。 ⑥JSデータでレスポンス ②リクエスト WEBページ ①ページを更新 WEBサーバー ④データを⽤意する ⑤データをレスポンス ③必要なデータのみを要求 JavaScript
サーバーから取得した差分のみの コンテンツ(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。
ご静聴ありがとうございました。