最近気になっている ページ遷移のはなし
DESCRIPTION
最近気になっているページ遷移を自分なりにまとめてみました。 pushState使いたい!という内容です。TRANSCRIPT
![Page 1: 最近気になっている ページ遷移のはなし](https://reader031.vdocuments.pub/reader031/viewer/2022020207/559223411a28abab068b46ab/html5/thumbnails/1.jpg)
最近気になっている
ページ遷移のはなし
蔵下雅之
![Page 2: 最近気になっている ページ遷移のはなし](https://reader031.vdocuments.pub/reader031/viewer/2022020207/559223411a28abab068b46ab/html5/thumbnails/2.jpg)
adidas Originalshttp://adidasoriginals.tumblr.com/
![Page 3: 最近気になっている ページ遷移のはなし](https://reader031.vdocuments.pub/reader031/viewer/2022020207/559223411a28abab068b46ab/html5/thumbnails/3.jpg)
とか
![Page 4: 最近気になっている ページ遷移のはなし](https://reader031.vdocuments.pub/reader031/viewer/2022020207/559223411a28abab068b46ab/html5/thumbnails/4.jpg)
LiveAreaLabshttp://livearealabs.com/
![Page 5: 最近気になっている ページ遷移のはなし](https://reader031.vdocuments.pub/reader031/viewer/2022020207/559223411a28abab068b46ab/html5/thumbnails/5.jpg)
流行っているっぽい
![Page 6: 最近気になっている ページ遷移のはなし](https://reader031.vdocuments.pub/reader031/viewer/2022020207/559223411a28abab068b46ab/html5/thumbnails/6.jpg)
同じようでこいつら違うんです
![Page 7: 最近気になっている ページ遷移のはなし](https://reader031.vdocuments.pub/reader031/viewer/2022020207/559223411a28abab068b46ab/html5/thumbnails/7.jpg)
# ( ハッシュ )
adidas Originalshttp://adidasoriginals.tumblr.com/
![Page 8: 最近気になっている ページ遷移のはなし](https://reader031.vdocuments.pub/reader031/viewer/2022020207/559223411a28abab068b46ab/html5/thumbnails/8.jpg)
URLの後ろに# ( ハッシュ ) をつけ、index.html に値を渡している。
↓js で取得して、ごにょごにょ動かす
HTMLは 1つ
![Page 9: 最近気になっている ページ遷移のはなし](https://reader031.vdocuments.pub/reader031/viewer/2022020207/559223411a28abab068b46ab/html5/thumbnails/9.jpg)
pushState
LiveAreaLabshttp://livearealabs.com/
![Page 10: 最近気になっている ページ遷移のはなし](https://reader031.vdocuments.pub/reader031/viewer/2022020207/559223411a28abab068b46ab/html5/thumbnails/10.jpg)
ふつうのURLみたい。遷移先のHTMLを js で読み込んで、
違う部分だけ差し替える↓
疑似的にURLを切り替えて、遷移したように見せる。HTMLはコンテンツごとに存在する
![Page 11: 最近気になっている ページ遷移のはなし](https://reader031.vdocuments.pub/reader031/viewer/2022020207/559223411a28abab068b46ab/html5/thumbnails/11.jpg)
HTML5の機能らしい
![Page 12: 最近気になっている ページ遷移のはなし](https://reader031.vdocuments.pub/reader031/viewer/2022020207/559223411a28abab068b46ab/html5/thumbnails/12.jpg)
何が違う?
![Page 13: 最近気になっている ページ遷移のはなし](https://reader031.vdocuments.pub/reader031/viewer/2022020207/559223411a28abab068b46ab/html5/thumbnails/13.jpg)
1 つの HTML 内で js や CSS でかっこよく動かす。
ページ構成各画面でHTML(URL) を持てる。HTML設計をある程度統一する必要あり。
js が動作する環境であれば問題なし。jsOFF 完了だと戦闘不能。
対応環境
HTML5の機能のため、レガシーな環境 (IE9以下など ) は未対応。遷移自体は機能するので、コンテンツとしては成立する
JSが動作する環境であれば、マシンスペックの影響はあれど、見え方は統一できる
演出対応しているブラウザのみリッチ表現。その他は、遷移面での演出は切る。
#! といった形から始めれば、JS生成されたURLでもGoogle が拾ってくれる ( らしい )バックエンドがめんどくさそう、、、
SEOそれぞれの画面で HTML が存在するため、特に気にかけなくてもいい。
バックエンドでパラメータを見て、OGPを出し分ける必要あり。
OGPそれぞれの画面で HTML が存在するため、特に気にかけなくてもいい。
# (ハッシュ ) pushState
![Page 14: 最近気になっている ページ遷移のはなし](https://reader031.vdocuments.pub/reader031/viewer/2022020207/559223411a28abab068b46ab/html5/thumbnails/14.jpg)
pushStateの方がしっくりきた
![Page 15: 最近気になっている ページ遷移のはなし](https://reader031.vdocuments.pub/reader031/viewer/2022020207/559223411a28abab068b46ab/html5/thumbnails/15.jpg)
触ってみた
![Page 16: 最近気になっている ページ遷移のはなし](https://reader031.vdocuments.pub/reader031/viewer/2022020207/559223411a28abab068b46ab/html5/thumbnails/16.jpg)
ひっかかったところ
![Page 17: 最近気になっている ページ遷移のはなし](https://reader031.vdocuments.pub/reader031/viewer/2022020207/559223411a28abab068b46ab/html5/thumbnails/17.jpg)
戻る・進むを判別できない
![Page 18: 最近気になっている ページ遷移のはなし](https://reader031.vdocuments.pub/reader031/viewer/2022020207/559223411a28abab068b46ab/html5/thumbnails/18.jpg)
HTMLの階層が違うとややこしい
![Page 19: 最近気になっている ページ遷移のはなし](https://reader031.vdocuments.pub/reader031/viewer/2022020207/559223411a28abab068b46ab/html5/thumbnails/19.jpg)
思ったこと
![Page 20: 最近気になっている ページ遷移のはなし](https://reader031.vdocuments.pub/reader031/viewer/2022020207/559223411a28abab068b46ab/html5/thumbnails/20.jpg)
SEO対策が必要ならpushState
![Page 21: 最近気になっている ページ遷移のはなし](https://reader031.vdocuments.pub/reader031/viewer/2022020207/559223411a28abab068b46ab/html5/thumbnails/21.jpg)
PHPダメな環境はpushState
![Page 22: 最近気になっている ページ遷移のはなし](https://reader031.vdocuments.pub/reader031/viewer/2022020207/559223411a28abab068b46ab/html5/thumbnails/22.jpg)
実際の案件で使わないとわからない ...
![Page 23: 最近気になっている ページ遷移のはなし](https://reader031.vdocuments.pub/reader031/viewer/2022020207/559223411a28abab068b46ab/html5/thumbnails/23.jpg)
おしまい