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.3k
もう細かいレビューは したくない、されたくない
namizatork
0
1.3k
PHPの静的解析 ついでにLarastan
namizatork
0
480
Laravel8.xまでの大きな変更点を振り返る
namizatork
0
460
Livewireは魔法??コードリーディング してみた
namizatork
1
290
Laravelワカンネ(゚⊿゚)から「完全に理解した()」までステップアップ
namizatork
0
970
Laravelの「Hello World」を 表示するまでの処理を追ってみた
namizatork
0
1.3k
Laravel Hands-on
namizatork
0
320
Other Decks in Programming
See All in Programming
Jakarta Concurrencyによる並行処理プログラミングの始め方 (JJUG CCC 2024 Fall)
tnagao7
1
240
Server Driven Compose With Firebase
skydoves
0
400
Generative AI Use Cases JP (略称:GenU)奮闘記
hideg
0
160
シールドクラスをはじめよう / Getting Started with Sealed Classes
mackey0225
3
400
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
440
詳細解説! ArrayListの仕組みと実装
yujisoftware
0
490
Kubernetes for Data Engineers: Building Scalable, Reliable Data Pipelines
sucitw
1
200
Dev ContainersとGitHub Codespacesの素敵な関係
ymd65536
1
130
From Subtype Polymorphism To Typeclass-based Ad hoc Polymorphism- An Example
philipschwarz
PRO
0
170
讓數據說話:用 Python、Prometheus 和 Grafana 講故事
eddie
0
350
推し活としてのrails new/oshikatsu_ha_iizo
sakahukamaki
3
1.7k
[PyCon Korea 2024 Keynote] 커뮤니티와 파이썬, 그리고 우리
beomi
0
110
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.6k
BBQ
matthewcrist
85
9.3k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
3
370
Adopting Sorbet at Scale
ufuk
73
9k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.4k
Making Projects Easy
brettharned
115
5.9k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.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。
ご静聴ありがとうございました。