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