Aptana Jaxerで解決するAjaxのSEO対策とは？：パターンとライブラリで作るAjaxおいしいレシピ（6）（2/4 ページ）

» 2008年05月09日 00時00分公開

[志田裕樹，アークウェブ株式会社]

ステップ2：SMO対応を行ったサンプル

　次に、ステップ1のサンプルにSMO対応を行います。Ajaxで作ったページを掲示板などで言及してもらうためには、Ajaxでも、状態変化ごとにURLを変更し、そのURLにアクセスされたら、対応する状態を表示するように対応させる必要があります。

　次のサンプルは状態が変化するたびに、URLの#（シャープ）以降を書き換えることで、状態変化ごとにURLを変更しています。#（シャープ）以降はページ内リンクで利用されるものなので、この部分が書き換わっても画面遷移が発生しません。

サンプル2（タブA、B、Cを押して見てください。拡大表示はこちら、拡大表示のほうがURLの違いを確認しながら試せます。Safari、Operaでは正しく動作しない場合があります。）

タブAが開いた状態のURL
http://sample.atmarkit.jp/fux/0805/09/step2/#/tab-a/
タブBが開いた状態のURL
http://sample.atmarkit.jp/fux/0805/09/step2/#/tab-b/
タブCが開いた状態のURL
http://sample.atmarkit.jp/fux/0805/09/step2/#/tab-c/

　このURLは掲示板などで張り付けられて、そこからアクセスされると対応する状態が表示されるようになっています。このように状態変化ごとのURLを変更する方法をAjaxデザインパターンでは、「Unique URLsパターン」といいます。

編集部注：Ajaxデザインパターンについて詳しく知りたい読者は、連載第1回「jQueryを使ってTwitterをおいしくマッシュアップ」の「Ajaxでデザインパターン？」をご参照ください。

　「ディープリンク」という呼び方も一般的になってきていますので、以降は「ディープリンク」と呼ぶことにします。

■ 「ディープリンク」を実現するライブラリ「SWFAddress」とは？

　今回は、ディープリンクを実現するライブラリとして、SWFAddressを使用します。「SWFAddress」にはさまざまな特徴がありますが、特に以下の2つに注目です。

AjaxだけでなくFlashの状態変化ごとのURL変更にも対応している
Webブラウザの［戻る］ボタンなどにも対応している

　SWFAddressは、Flashのディープリンク対応をさせるためのライブラリとして開発が始まり、現状はAjaxにも対応しています。このため、JavaScript用のライブラリとFlash用のライブラリの2種類が提供されています。

図1　SWFAddressのページ

　SWFAddressのサイトからライブラリをダウンロードし展開すると、「src/js/swfaddress.js」というファイルがあることが分かります。そのファイルを<script>タグで下記のように読み込むように、HTMLファイルを修正します。

    <script type="text/javascript"

            src="javascripts/lib/swfaddress.js">

          </script>

　また、SWFAddress以外にもディープリンクを実現するいくつかのライブラリがありますので、参考にしてください。

■ SWFAddress導入のためのコントローラー部分の修正

　コントローラーへの修正点を見てみましょう。なお、ビューのコード、モデルのコードには変更はありません。SWFAddressを使ってディープリンクを実現するためには、【1】クリックイベント発生→【2】タブの切り替え、という流れではなく、【1】クリックイベント発生→【2】URLの変更→【3】URLの変更イベントの発生→【4】タブの切り替え、といった流れに変わります。

■ URLの変更イベントのハンドラ設定

　まず、onLoadDOMメソッドで、以下のように、SWFAddressのaddEventListenerメソッドを使って、SWFAddressEvent.CHANGE（URLの変更イベント）にonChangeTabメソッドを設定しています。

    onLoadDOM: function() {

              $$('.tab').each(function(tab) {

                  tab.observe('click', this.onClickTab.bind(this));

              }.bind(this));

              SWFAddress.addEventListener(SWFAddressEvent.CHANGE,

                    this.onChangeTab.bind(this));

          },

　これにより、【3】の「URLの変更イベントの発生」時に、onChangeTabメソッドが呼ばれるようになります。

■ URLの変更イベントの発生

　onClickTabメソッドは以下のように、SWFAddressのsetValueメソッドにクリックされた要素のid値を指定して呼び出すだけに変更しました。

    onClickTab: function(event) {

              SWFAddress.setValue(event.element().id);

          },

　このsetValue()メソッドが【2】「URLの変更」の処理に当たります。

■ URLの変更イベントのハンドラの内容

　onChangeTabメソッドの内容は次のようになります。

    onChangeTab: function(event) {

              var tab;

              if (event.path == '/') {

                  tab = $$('.tab')[0].id;

              }
      else {

                  tab = event.path;

                  tab = tab.replace(/^\/(.*?)\/$/, "$1");

              }

              ajaxrecipe.SmoSeoSampleView.changeTab(tab);

          }

　このメソッドはSWFAddressEventオブジェクトをSWFAddressから受け取ります。このオブジェクトのpathプロパティには、onClickTabメソッド内で実行したsetValueメソッドに指定したタブの情報が入ります。

　例えば、クリックされた要素のid値が、「tab-a」だった場合は、「/tab-a/」という値をevent.pathから取得することができます。SWFAddressは最初にウィンドウを開いた際は、タブのクリックイベントが発生していなくとも、SWFAddressEvent.CHANGEイベントを1度発生させます。

　もし、アクセスしたURLが「step2/#/tab-b/」だった場合は、SWFAddessは、event.pathに「/tab-b/」を設定して、SWFAddressEvent.CHANGEイベントを発生させます。

　もし、URLの#（シャープ）以降が何もなければ、event.pathは「/」になります。onChageTabメソッド内では、event.pathが「/」である場合は、最初のタブをアクティブにします。そうでない場合は、与えられたevent.pathからアクティブにするタブのID値を正規表現で抜き出してビューのchangeTabメソッドに渡しています。

　さらに次ページからは、SMO対策に加えてSEO対応を行う方法を解説し、サーバサイドでJavaScriptを動かす技術Aptana Jaxerを紹介します。

ステップ3：SEO対応を行ったサンプル

前のページへ 1|2|3|4 次のページへ

SpecialPR