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
510
Laravel8.xまでの大きな変更点を振り返る
namizatork
0
470
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
20241217 競争力強化とビジネス価値創出への挑戦:モノタロウのシステムモダナイズ、開発組織の進化と今後の展望
monotaro
PRO
0
270
「とりあえず動く」コードはよい、「読みやすい」コードはもっとよい / Code that 'just works' is good, but code that is 'readable' is even better.
mkmk884
6
1.4k
『改訂新版 良いコード/悪いコードで学ぶ設計入門』活用方法−爆速でスキルアップする!効果的な学習アプローチ / effective-learning-of-good-code
minodriven
28
3.9k
月刊 競技プログラミングをお仕事に役立てるには
terryu16
1
1.2k
テストコード書いてみませんか?
onopon
2
320
menu基盤チームによるGoogle Cloudの活用事例~Application Integration, Cloud Tasks編~
yoshifumi_ishikura
0
200
Findy Team+ Awardを受賞したかった!ベストプラクティス応募内容をふりかえり、開発生産性向上もふりかえる / Findy Team Plus Award BestPractice and DPE Retrospective 2024
honyanya
0
140
functionalなアプローチで動的要素を排除する
ryopeko
1
190
為你自己學 Python
eddie
0
510
Simple組み合わせ村から大都会Railsにやってきた俺は / Coming to Rails from the Simple
moznion
3
2k
ドメインイベント増えすぎ問題
h0r15h0
2
560
PHPカンファレンス 2024|共創を加速するための若手の技術挑戦
weddingpark
0
130
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
328
21k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
30
2.1k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.7k
The Invisible Side of Design
smashingmag
299
50k
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。
ご静聴ありがとうございました。