PICK UP

jsを使ってFlashのように滑らかなページ遷移をさせるには?

LAB

蔵下 雅之

jsゴリゴリのサイトが普通に見られるようになってきた今日この頃。
ソース的にも表現的にもイケテルサイトもたくさんありますね。
そんな中で、Flashのようにページ遷移に表現を加えているサイトがあります。
しかも、普通のページ遷移のようにURLも変わっている!なぜだ?

主な2種類の実装方法

いろいろなサイトを見た結果、主に2種類の実装方法に分けられることがわかりました。

# (ハッシュ)

ルンバ800シリーズ | iRobot ロボット掃除機ルンバ スペシャルサイト

グローバルメニューなどクリックしてみてください。
ルンバの可愛らしさを引き出しているcoolなページ遷移です。

# (ハッシュ)って?

ページ遷移した後にURLをご覧ください。後ろの方に#(ハッシュ)がついていることを確認できると思います。
URLに値を渡してあげて、それをjsで読み込む。その読み込んだ値ごとのページ遷移の処理を実行してあげる。
という仕組みになっています。

値を渡してあげているだけなので、実際にはページ遷移はしていません。ですので、HTML1つで実装されています。

メリット

  • jsが動く環境であれば動作する。

デメリット

  • 実際にその画面が存在するわけではないので、検索エンジンが見てくれない。→SEOに弱い。 バックエンドで検索エンジンが見てくれるようにできるらしいですが。。
    Ajaxコンテンツを検索エンジン(Google)にクロール・インデックスさせる方法
  • HTMLが1つしか存在しないので、基本的に設定できるOGPも1つ
  • ブラウザの「進む」「戻る」でページ遷移をコントロールできない

pushState

LiveAreaLabs

シンプルだけど流れがあって綺麗なページ遷移です。

pushStateって?

HTML5で導入されたURLを操作するAPIです。
こちらもページ遷移した後にURLをご覧ください。なにも変わったものはついていないですね。
普通のURLです。
表示させたいHTMLをAjaxで読み込み、表示中のHTMLに流し込む。
(どちらのHTMLも構造を揃えていないと、うまくいきません。。)
これだけで見た目は切り替わるのですが、pushStateでURLを疑似的に変えることで、
あたかもページ遷移したように見せることができるのです。

メリット

  • 実際にHTMLが存在しているのでSEOについて特別なことはしないでもいい。
  • それぞれのHTMLにOGPを設定できる。
  • ブラウザの「進む」「戻る」でもページ遷移をコントロールできる。

デメリット

  • jsが動かない環境やpushStateをサポートしていない環境(IE9以下など)では思い通りの動きは実現できない。
    (クリックできる領域をaタグにしておけば、遷移は行われる)

実際にpushStateを触ってみました

サンプル
※好きなうどん屋さんの紹介もかねて

一応、目指していた動きは実装できました。
ページ遷移するタイミングで画像が上下にスライドしていく。そしてURLも変わる!

ですが、実装するには気を付けないといけない部分が、、、

  • ブラウザの戻る・進むのイベントは取れるが、判別できない
  • 実装したいページの階層が異なっているとややこしい(絶対パスにするといいかもしれません)

うまいことやってくれているライブラリがあるぞ!

これはFacebookでコメントいただいたんですが、下記のライブラリがよさそうです。
(ご紹介いただいておきながらまだ試せておらずすみません。。)

pjax

pjax こちらはけっこう有名どころですね。
WEB系雑誌でもよく取り上げられているので、pushStateの入口に入りやすいと思います。

jQuery.LazyJaxDavis

jQuery.LazyJaxDavis
ライブラリ名の通り、jQueryライクな作りになっています。
使いやすそう!

Kazitori.js

Kazitori.js
ネーミングがピカイチ!
CoffeeScriptでの実装が推奨されています。

まとめ

レガシーブラウザを考慮して、まだ#が使われたサイトが多い気がしますが、
とにかくモダンな環境で表現とSEOのどちらも考えたい!となるとpushStateを選択することをお勧めします!