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.5k
もう細かいレビューは したくない、されたくない
namizatork
0
1.3k
PHPの静的解析 ついでにLarastan
namizatork
0
520
Laravel8.xまでの大きな変更点を振り返る
namizatork
0
480
Livewireは魔法??コードリーディング してみた
namizatork
1
300
Laravelワカンネ(゚⊿゚)から「完全に理解した()」までステップアップ
namizatork
0
1k
Laravelの「Hello World」を 表示するまでの処理を追ってみた
namizatork
0
1.3k
Laravel Hands-on
namizatork
0
330
Other Decks in Programming
See All in Programming
『品質』という言葉が嫌いな理由
korimu
0
160
Unity Android XR入門
sakutama_11
0
160
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
100
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
120
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
6
4k
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
150
昭和の職場からアジャイルの世界へ
kumagoro95
1
380
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
Domain-Driven Transformation
hschwentner
2
1.9k
SwiftUI Viewの責務分離
elmetal
PRO
1
240
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
190
動作確認やテストで漏れがちな観点3選
starfish719
6
1k
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
330
Docker and Python
trallard
44
3.3k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Six Lessons from altMBA
skipperchong
27
3.6k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Statistics for Hackers
jakevdp
797
220k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
How to train your dragon (web standard)
notwaldorf
91
5.8k
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。
ご静聴ありがとうございました。