パターンとライブラリで作るAjaxおいしいレシピ
連載一覧へ
パターンとライブラリで作るAjaxおいしいレシピ（6）

Aptana Jaxerで解決するAjaxのSEO対策とは？


アークウェブ株式会社
志田 裕樹
2008/5/9

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

- PR -

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

　次のサンプルは状態が変化するたびに、URLの#（シャープ）以降を書き換えることで、状態変化ごとにURLを変更しています。#（シャープ）以降はページ内リンクで利用されるものなので、この部分が書き換わっても画面遷移が発生しません。
サンプル2（タブA、B、Cを押して見てください。拡大表示はこちら、拡大表示のほうがURLの違いを確認しながら試せます。Safari、Operaでは正しく動作しない場合があります。）

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

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

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

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

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

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

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

図1　SWFAddressのページ
図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を紹介します。

1-2-3-4

　INDEX
パターンとライブラリで作るAjaxおいしいレシピ（6）
Aptana Jaxerで解決するAjaxのSEO対策とは？
  Page1
今回はAjaxの問題点であるSMO、SEOへの対応
ステップ1：SMO、SEO対応を行っていないサンプル
Page2
ステップ2：SMO対応を行ったサンプル
  Page3
ステップ3：SEO対応を行ったサンプル
ステップ4：Aptana Jaxerを使ってSEO対応を行う
  Page4
Hello Jaxer！から始めてみよう
Aptana Jaxerを使ってSEO対応を行ったサンプルの解説
Aptana Jaxerの現状、今後に要注目

パターンとライブラリで作るAjaxおいしいレシピ バックナンバー 連載インデックスへ»


リッチクライアント＆帳票 全記事一覧へ

TechTargetジャパン

リッチクライアント & 帳票 フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH