Ajaxコンテンツのルーティング
ページ遷移を行わずにAjaxでコンテンツを部分的に読み込んでどんどん表示していくタイプのページでは、ブラウザをリロードすると、それまでユーザーに表示されていた内容がすべて振り出しに戻ってしまうことがあります。リロードしても適切なコンテンツに戻ってくるようにするには、URLの#
(ハッシュ)以降の文字列を変えておき、リロードした時にその値を読んで適切なコンテンツを表示するという手法があります。この手法はIE6などの古いブラウザでも問題なく使えます。
TwitterのWebサイトもこの方式を利用しており、https://twitter.com/#!/iizukanaoといったURLにアクセスした場合、最初に共通部分だけを読み込み、その後で#
以降に該当するコンテンツを部分的に読み込んでいます。ページ内のリンクのほとんどはURLの#
以降の変更のみで行い、ページ遷移を挟まずに必要最小限のコンテンツを取得して表示しています。このようにすると毎回コンテンツ全体を読み込むのに比べてサーバやネットワークの負荷を軽減でき、またコンテンツの表示切り替えも素早くなります。
Sammy.js(MITライセンス)というライブラリを使うと、このような#
を使ったコンテンツの制御が簡単にできます。
Sammy.jsの使い方
Sammy.jsのWebサイトから最新のライブラリをダウンロードします。Sammy.jsはjQueryに依存しているため、先にjQueryを読み込んでからSammy.jsを読み込むようにします。</body>
の直前に<script>
要素を置いてこれら2つのライブラリを読み込み、その後に自分のjsファイルを読み込むようにします。
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <div id="main"> main </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="js/sammy-latest.min.js"></script> <script src="js/main.js"></script> </body> </html>
そしてリスト2のようにURLと、そのURLが呼び出された時に実行する関数をセットで定義します。このセット1つ1つをルート(route)と呼び、URLに応じて適切なルートに振り分けることをルーティング(routing)と呼びます。ルートに#
から始まる文字列を指定すると、URLの#
以降に対してマッチします。
Sammy -> # #!/ のみにマッチ @get '#!/', -> # 実行する処理 console.log 'home' # #!/about のみにマッチ @get '#!/about', -> console.log "about" # URLの最後に-testが付く場合にマッチ(正規表現で指定) @get /-test$/, -> console.log "test" # #!/item/文字列 にマッチ(文字列は / を含まない) # 例: #!/item/3 #!/item/abc # ただし #!/item/3/ や #!/item/3/abc にはマッチしない @get '#!/item/:id', -> console.log "user id: #{@params.id}" # #!/route/文字列1/文字列2 にマッチ # 文字列はいずれも / を含まないもの # 例: #!/route/tokyo/osaka @get '#!/route/:from/:to', -> console.log "route from #{@params.from} to #{@params.to}" # 上のいずれにもマッチしなかった場合 @get '', -> # #!/ をリクエストされたものとして実行 @app.runRoute 'get', '#!/' .run()
AjaxコンテンツをGoogleの検索結果に出す
Ajaxのアプリケーションは基本的にGoogleなどの検索エンジンには登録されません。現在Googleのクローラー(注1)は一部のJavaScriptを実行してコンテンツを収集していますが、すべてのJavaScriptを完全に実行することは難しいためです。ただし、一定の決まりに従ってサイトを作ることでGoogleのクローラーにAjaxコンテンツを収集させることができる仕組みが用意されています。標準化された仕組みではなくGoogleに限定された仕組みではありますが、AjaxコンテンツをGoogleの検索結果に出すためにはこの決まりに従う必要があります。具体的には以下の手順で対応できます。
Webをくまなく巡回してあらゆるコンテンツを収集するプログラム。一番有名なものはGooglebot(グーグルボット)と呼ばれるGoogleのクローラーで、Googlebotが収集したデータは検索用のインデックスが作成されてGoogleの検索結果に登場するようになる。
#の代わりに#!を使う
リンク先のURLに#!
が含まれていると、Googleはそのコンテンツがクロール可能なAjaxであると見なし、決められた手順でコンテンツの収集を試みます。#!
はhashbang(ハッシュバング)などと呼ばれています。
代替URLでコンテンツを提供する
URLの#!
を?_escaped_fragment_=
に置き換えたURLに対してGoogleがリクエストを送ってくるので、該当するページ全体のHTMLを返すようにします。
http://www.example.com/ajax.html#!key=value
http://www.example.com/ajax.html?_escaped_fragment_=key=value
サーバ側ではこの_escaped_fragment_
を含むURLのリクエストに対して、変換前のURLであるhttp://www.example.com/ajax.html#!key=valueを訪れた時にユーザーが見るHTML全体と同じコンテンツをレスポンスとして返すようにします。するとGoogleはそれが変換前のURLに該当するコンテンツであるとして収集します。収集されたコンテンツはやがて検索結果に出てくるようになります。
Googleによる日本語の解説もありますので、より詳しい情報はそちらを参照してください。