CoffeeScriptベストプラクティス集 ブラウザ向けJavaScript編(2)

CodeZine / 2012年5月11日 14時0分

図2 Googleが使用しているCSSスプライト用の画像(出典)

 最近話題の新言語『CoffeeScript』をとりあげた連載「CoffeeScriptによるモダンなWebアプリケーション開発」。今回からはベストプラクティス編として、CoffeeScriptでブラウザ向けJavaScriptを開発する際によく使われる実用的な開発手法を4回に分けて紹介します。CoffeeScriptの歴史や概要については過去の連載も参照ください。

■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ファイルを読み込むようにします。

[リスト1]Sammy.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の#以降に対してマッチします。

[リスト2]Sammy.jsでルーティングを行う
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の検索結果に出すためにはこの決まりに従う必要があります。具体的には以下の手順で対応できます。

注1:クローラー
 Webをくまなく巡回してあらゆるコンテンツを収集するプログラム。一番有名なものはGooglebot(グーグルボット)と呼ばれるGoogleのクローラーで、Googlebotが収集したデータは検索用のインデックスが作成されてGoogleの検索結果に登場するようになる。



●#の代わりに#!を使う

 リンク先のURLに#!が含まれていると、Googleはそのコンテンツがクロール可能なAjaxであると見なし、決められた手順でコンテンツの収集を試みます。#!はhashbang(ハッシュバング)などと呼ばれています。

●代替URLでコンテンツを提供する

 URLの#!を?_escaped_fragment_=に置き換えたURLに対してGoogleがリクエストを送ってくるので、該当するページ全体のHTMLを返すようにします。

URL置換前
http://www.example.com/ajax.html#!key=value
URL置換後
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による日本語の解説もありますので、より詳しい情報はそちらを参照してください。



■関連記事
CoffeeScriptベストプラクティス集 ブラウザ向けJavaScript編(3)
CoffeeScriptベストプラクティス集 ブラウザ向けJavaScript編(2)
CoffeeScriptベストプラクティス集 ブラウザ向けJavaScript編(1)
CoffeeScriptベストプラクティス集 Node.jsアプリケーション編(4)
CoffeeScriptベストプラクティス集 Node.jsアプリケーション編(3)

■記事全文へ

CodeZine

トピックスRSS

ランキング