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.1k
もう細かいレビューは したくない、されたくない
namizatork
0
1.1k
PHPの静的解析 ついでにLarastan
namizatork
0
410
Laravel8.xまでの大きな変更点を振り返る
namizatork
0
390
Livewireは魔法??コードリーディング してみた
namizatork
1
250
Laravelワカンネ(゚⊿゚)から「完全に理解した()」までステップアップ
namizatork
0
870
Laravelの「Hello World」を 表示するまでの処理を追ってみた
namizatork
0
1.2k
Laravel Hands-on
namizatork
0
320
Other Decks in Programming
See All in Programming
[技育CAMPアカデミア]アイディアを形に!【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
380
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
140
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
1
110
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
360
Node.js v22 で変わること
yosuke_furukawa
PRO
9
3.5k
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
350
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
650
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
810
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
23
15k
雑に思考を整理する技術と効能
konifar
60
29k
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
190
"config" ってなんだ? / What is "config"?
okashoi
0
240
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
Happy Clients
brianwarren
92
6.4k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
What's in a price? How to price your products and services
michaelherold
237
11k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Raft: Consensus for Rubyists
vanstee
132
6.3k
We Have a Design System, Now What?
morganepeng
43
6.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
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。
ご静聴ありがとうございました。