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

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

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

Hello Jaxer！から始めてみよう

　ここでは、サーバサイドでDOM操作を行って「Hello Jaxer!」という文字を追加するサンプルを紹介します。まずは、「hello.jaxer」ファイルのソースコードを見てください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd">

      <html xmlns="http://www.w3.org/1999/xhtml">

      <head>

        <meta http-equiv="content-type" 

          content="text/html; charset=utf-8" />

        <title>Hello Jaxer!</title>

        <script type="text/javascript" runat="server">

          function hello_jaxer() {

              document.getElementById('hello').innerHTML = 'Hello Jaxer!';

          }

        </script>

      </head>

      <body onserverload="hello_jaxer();">

        <div id="hello" />

      </body>

      </html>

　ほぼ見慣れたHTMLとJavaScriptだと思いますが、2カ所注意する点があります。

■ runat属性

　<script>タグのrunat属性は、Aptana Jaxerサーバに、そのJavaScriptプログラムがどのタイミングで実行されるべきかを示すものです。

　runatには、次のバリエーションがあります。

server
この指定で記述されたJavaScriptコードはWebブラウザで実行されるのではなく、Webブラウザにページが返される前にサーバ上で実行される。プログラムの内容はWebブラウザに返される際に削除されるので、プログラムの内容をユーザーに見られることがない
client
この指定で記述されたJavaScriptコードは、従来どおりWebブラウザ上で実行される。従来どおりコードはユーザーにも見ることができる
both
この指定で記述されたJavaScriptコードは、サーバ上とクライアント上の両方で実行される
server-proxy
この指定で記述されたJavaScriptコードは、サーバ上に定義され、クライアントには、そのサーバ上コードを呼び出すための記述が用意される。これにより、クライアントから透過的にデータベースへアクセスしたりすることが可能になる

　Aptanaのサイト上にあるこちらの図はAptana JaxerのJavaScript実行タイミングをイメージするのに有用です。

■ onserverload属性

　「Hello Jaxer!」のサンプルでは、<body>タグに、「<body onserverload="hello_jaxer();">」と書かれています。これは、「<body onload="hello_jaxer();">」と似たような指定で、onserverloadの記述を利用することでサーバサイドでAptana Jaxerにページが読み込まれたときに実行させたいハンドラを指定できます。

■ 「Hello Jaxer！」の実行結果

　この「hello.jaxer」ファイルをJaxerがインストールされたサーバにアップロードして、そのURLを表示すれば、実行結果を確認できます。

　Aptana Jaxerのインストールに関しては今回は割愛します。Linuxの既存のApacheにAptana Jaxerをインストールする手順は「Jaxer Installation Guide (Linux Standalone) | Aptana」を参考にしてください。

　アップロードしたファイルにWebブラウザでアクセスし、右クリックなどでHTMLソースを見ると、次のように表示されます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd">

      <html xmlns="http://www.w3.org/1999/xhtml">

      <head>

        <script 

          src="/jaxer/framework/clientFramework_compressed.js?version=

      0.9.6.2428">

        </script>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        <title>Hello Jaxer!</title>

      </head>

      <body>

        <div id="hello">Hello Jaxer!</div>

      </body>

      </html>

　「runat="server"」ですので、HTMLファイル内に書いておいたJavaScriptのプログラムの記述は消えています。また、<body>タグのonserverloadの記述も消えています。<div id="hello">の中に、DOM操作によって「Hello Jaxer!」の文字が埋め込まれていることが確認できます。

■ Aptana Jaxerの特徴（2）

　非常に簡単ですが、Aptana Jaxerの基本的な解説は以上にします。Aptana Jaxerには以下のような、非常に魅力的な特徴がたくさんあり、ここでは到底紹介し切れません。ぜひAptana Jaxerのサイト上を見てみてください。

PHPなどと同様にサーバサイドでMySQLなどのデータベースにアクセスするような、サーバサイドプログラミングの基本的な機能も備わっている
使い慣れたprototype.jsなどのライブラリをサーバサイドプログラミングでも活用できる
サーバサイドとクライアントサイドで同じコードを使えるので、開発コストが削減できる

Aptana Jaxerを使ってSEO対応を行ったサンプルの解説

　ここからは、今回のSEO対応のサンプルの解説をしていきます。

■ HTMLの修正

　まず、SWFAddress以外を「runat="both"」としました（SWFAddressは、記事の最後の「Aptana Jaxerの現状、今後に要注目」に挙げた問題があり、読み込みに失敗するため）。

  <script runat="both"   type="text/javascript" 

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

        </script>

        <script runat="client" type="text/javascript" 

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

        </script>

        <script runat="both"   type="text/javascript" 

          src="javascripts/app/controllers/ajaxrecipe/smo_seo_sample_cont

      roller.js">

        </script>

        <script runat="both"   type="text/javascript" 

          src="javascripts/app/models/ajaxrecipe/smo_seo_sample.js">

        </script>

        <script runat="both"   type="text/javascript" 

          src="javascripts/app/views/ajaxrecipe/smo_seo_sample_view.js">

        </script>

　下記のように、タブのアクティブ状態や、タブに対応するコンテンツはサーバ側で動的に設定されるので、設定する必要はなくなりました。また、JavaScriptがOFF時の状態ごとのURLはクエリストリングを使って表すようにしています。

  <a href="?path=/tab-a/#/tab-a/" class="tab active" id="tab-a">

          タブA</a>

        <a href="?path=/tab-b/#/tab-b/" class="tab inactive" id="tab-b">

         タブB</a>

        <a href="?path=/tab-c/#/tab-c/" class="tab inactive" id="tab-c">

         タブC</a>

      

      ……【略】……

      

        <div id="contents">AAAAA</div>

      

      ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

      

        <a href="?path=/tab-a/" class="tab" id="tab-a">タブA</a>

        <a href="?path=/tab-b/" class="tab" id="tab-b">タブB</a>

        <a href="?path=/tab-c/" class="tab" id="tab-c">タブC</a>

      

      ……【略】……

      

        <div id="contents" />

　以下の2つの処理を行う関数を作成しました。

URLのクエリストリングから状態を取得
コントローラーのonChangeTabを呼び出してタブの初期設定を行う

　下記のように、サーバサイドでonserverloadのイベントが発生した際に、この関数が呼び出されるようにしました。

   <script runat="server" type="text/javascript">

          function setTab() {

              var query = window.location.search.toQueryParams();

              if (query.path == undefined) {

                  query.path = '/';

              }

              // SWFAddressEventインスタンスと同じ構造を作成

              event = {path: query.path}; 

              ajaxrecipe.controller.onChangeTab(event);

          }

        </script>

      

      ……【略】……

      

        <body onserverload="setTab()">

■ コントローラーの修正

　swfaddress.jsはクライアントサイドでのみ読み込まれますので、SWFAddressはサーバサイドでは定義されていません。コントローラーのコードはクライアントとサーバで同じものを使用しますので、次のような判定で、定義があればリスナ登録をするようにし、未定義なクラスのメソッドを呼び出すことによるエラーが発生しないようにしました。

    if (window.SWFAddress != null) {

              SWFAddress.addEventListener(SWFAddressEvent.CHANGE,

                  this.onChangeTab.bind(this));

          }

　また、下記のように、コントローラーのインスタンスを変数にセットするようにしました。

ajaxrecipe.controller = new ajaxrecipe.SmoSeoSampleController();

　サーバサイドでの実行の際、onserverloadイベントから、onChangeTabメソッドが以下のように呼び出せるように修正しました。

ajaxrecipe.controller.onChangeTab(event);

　以上の修正だけで、サンプル3のコードをAptana Jaxerを使ってSEO対応させることができました。

Aptana Jaxerの現状、今後に要注目

　今回は、Ajaxの弱点であるSMO、SEOに対する対応策を紹介しましたが、いかがだったでしょうか。いずれもリッチなサイト構築が一般的になりつつある最近ではよく直面する問題だと思います。SEOに対応したAjaxアプリケーションは必然的にアクセシビリティも向上しますので、今後もニーズは増えていくと思われます。

　Aptana Jaxerはまだ2008年1月にリリースされたばかりの新しいプロジェクトです。このため、共用ホスティングで気軽に利用できるような状況ではありません。利用するためには自分自身でサーバにインストールしなければなりません。

　また、著者もまだ試し始めたばかりですが、以下のように必ずしもクライアント上のコードがそのままの形でサーバサイドでも実行できるようになるわけではないケースがあるようですので、導入の際は、プログラムの調整が必要になります。

window.locationやwindow.historyなどは読み込み専用
window.setTimeoutやwindow.setIntervalなども動作しない

　また、JavaScriptコード内に、文字列として、「</script>」といった記述があると、サーバサイドでのJavaScriptのパースが失敗してしまうなど、細かなバグもあるようです。

　また、大規模サイトに導入するには、パフォーマンスなどの検証も十分に行う必要があるでしょう。以上のような不安要素はいくつか残されている現状ではありますが、Aptana Jaxerの導入のメリットは今回の記事で紹介したとおり非常に大きいので、導入のケースは増えていくものと思われます。今後のAptana Jaxerの動向は要注目です。

　このように、Aptana Jaxerはまだ不安要素も多少ありますが、それでも導入を検討することは十分可能だと思います。ぜひ、今回の記事で紹介したテクニックを一度お試しください。

　今回のすべてのソースコードはこちらになります（サンプルのライセンスはGPL 2となります）。

著者紹介

プロフィール：志田裕樹（しだゆうき）

株式会社アークウェブ取締役。Webシステムのシステムエンジニアとして開発に従事している。
Ajax、Ruby on Rails等を使用したWeb 2.0的システムの開発実績を持つ。
オープンソースのECサイト用CMS、Zen Cartの日本語コミュニティでコミッターとして活動している。

「パターンとライブラリで作るAjaxおいしいレシピ」バックナンバー

Ajaxはじめて物語、そしてサーバでも動くJavaScript
Ajax うきうき Watch（30）　今回は連載30回記念として「Ajaxはじめて物語」をお届け。さらにAptana JaxerやSocial Graph、GoogleマップとVirtual Earthの違いなど全8トピック
アクセス解析ツールを比べてみよう
特集：アクセス解析ツール比較　Webサイトの利用増で、ユーザーのアクセス状況を分析することが重要になっている。市場のツールを比較してみよう
古くて新しいAjaxの真実を見極める
「Webインターフェイスの新しい手法」「画期的なWebアプリケーションの仕組み」であるとして開発者たちの人気を集めるAjaxとは何なのか、その真実を見極めてみよう
Ajax解体新書
よりAjaxを深く理解するために、ブラウザ上の「見た目」だけに注目するのではなく、実際に目に見えない舞台裏の通信内容をモニタリングしてみよう
・第1回 Ajax技術の目に見えない通信内容をのぞいてみよう
・第2回 Ajaxの特徴に潜むリスクをサンプルアプリで確認しよう
・第3回 Webアプリに使えるAjaxライブラリ8選！
JavaScriptプログラミング再入門
　Ajax全盛のいま、オブジェクト指向ベースのJavaScript知識は不可欠。過去を振り返りつつ、まずは最新開発事情をチェック
・第1回 JavaScriptの復権
・第2回 JavaScriptの関数をマスターしよう
・第3回 JavaScriptにおける変数の宣言とスコープ
・最終回 JavaScriptでオブジェクト指向プログラミング