最近気になっている ページ遷移のはなし

最近気になっている

ページ遷移のはなし

蔵下雅之

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

実際の案件で使わないとわからない ...

おしまい