最近気になっているページ遷移を自分なりにまとめてみました。 pushState使いたい！という内容です。

1. 最近気になっている
ページ遷移のはなし
蔵下雅之

2. adidas Originals
http://adidasoriginals.tumblr.com/

3. とか

4. LiveAreaLabs
http://livearealabs.com/

5. 流行っている
っぽい

6. 同じようで
こいつら
違うんです

7. ＃ ( ハッシュ )
adidas Originals
http://adidasoriginals.tumblr.com/

8. URL の後ろに＃ ( ハッシュ ) をつけ、
index.html に値を渡している。
↓
js で取得して、ごにょごにょ動かす
HTML は 1 つ

9. pushState
LiveAreaLabs
http://livearealabs.com/

10. ふつうの URL みたい。
遷移先の HTML を js で読み込んで、
違う部分だけ差し替える
↓
疑似的に URL を切り替えて、遷移したように見せる。
HTML はコンテンツごとに存在する

11. HTML5の
機能らしい

12. 何が違う？

13. 1 つの HTML 内で js や CSS でかっこよく
動かす。
ページ構成
各画面で HTML(URL) を持てる。
HTML 設計をある程度統一する必要あり。
js が動作する環境であれば問題なし。
jsOFF 完了だと戦闘不能。
対応環境
HTML5 の機能のため、レガシーな環境 (IE9
以下など ) は未対応。
遷移自体は機能するので、コンテンツとして
は成立する
JS が動作する環境であれば、マシンスペッ
クの影響はあれど、見え方は統一できる
演出
対応しているブラウザのみリッチ表現。その
他は、遷移面での演出は切る。
#! といった形から始めれば、JS 生成された
URL でも Google が拾ってくれる ( らしい )
バックエンドがめんどくさそう、、、
SEO
それぞれの画面で HTML が存在するため、
特に気にかけなくてもいい。
バックエンドでパラメータを見て、OGP を
出し分ける必要あり。
OGP
それぞれの画面で HTML が存在するため、
特に気にかけなくてもいい。
＃ ( ハッシュ ) pushState

14. pushState
の方が
しっくりきた

15. 触ってみた

16. ひっかかった
ところ

17. 戻る・進むを
判別できない

18. HTMLの
階層が違うと
ややこしい

19. 思ったこと

20. SEO対策が
必要なら
pushState

21. PHPダメな
環境は
pushState

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

23. おしまい