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

パターンとライブラリで作るAjaxおいしいレシピ(6):Aptana Jaxerで解決するAjaxのSEO対策とは? (4/4)

[志田裕樹,アークウェブ株式会社]
前のページへ 1|2|3|4       

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つの処理を行う関数を作成しました。

  1. URLのクエリストリングから状態を取得
  2. コントローラーの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の日本語コミュニティでコミッターとして活動している。


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

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。