検索
連載

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

[志田裕樹，アークウェブ株式会社] PC用表示 関連情報
Share
Tweet
LINE
Hatena
前のページへ | 次のページへ

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

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

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

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

サンプル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ファイルを修正します。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

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

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

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

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

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

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

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

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

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

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

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

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

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

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　このメソッドは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を紹介します。

Copyright © ITmedia, Inc. All Rights Reserved.

前のページへ | 次のページへ
ページトップに戻る