うみの河童

ページ遷移について自分なりに調べてみた

先日(3月)にsonicjamさんの自主制作MTG
当日の様子
で発表したネタをこのタイミングでアップしました。

内容はページ遷移。

Flashでなくても派手目なサイトを作れる今日、
そんなか、ページ遷移が滑らかなページをよく見るようになりました。

僕の把握している中では2パターンの方法があって、
1.#(ハッシュ)
2.pushState
の2つ。

 

#(ハッシュ)
URLの後ろに#をつけてその後ろにパラメータをつける。
その値をjsやらで抽出して切り替えていく。

メリット
jsが動く環境であればレイアウト崩れは置いといて問題なく動く。

デメリット
実際にその画面がページとして存在しているわけではないので、
SEOに弱い。
バックエンドでゴニョゴニョしたら#付きでもいけるらしいけど、、、、
Ajaxコンテンツを検索エンジン(Google)にクロール・インデックスさせる方法

 

pushState
html5の機能。(IE10以上、モダンブラウザ)
ある程度テンプレート化されたHTMLをAjaxで読み込み、
その中から本文を抽出→表示中のHTMLに流し込む。
そのときに、jsでpushStateで疑似URLを渡してあげて、あたかもURLが切り替わったように見せる。
サンプル

メリット
実際にページが存在しているのでSEOとか特に気にしないでもいい。

デメリット
jsが動かない環境orIE9以下では滑らかなページ遷移が実現できない。
(aタグでリンクを実装していればページ遷移自体はいける)

 

ですかね。
僕のザザっと調べて、ザザっと触った感じでは。

今回の記事が全て正しいわけではないので、
信じる信じないはあなた次第、、、ということで、、、