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

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


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

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>
- PR -

　ほぼ見慣れた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となります）。

■ ＠IT関連記事


Ajaxはじめて物語、そしてサーバでも動くJavaScript
Ajax うきうき Watch（30）　今回は連載30回記念として「Ajaxはじめて物語」をお届け。さらにAptana JaxerやSocial Graph、GoogleマップとVirtual Earthの違いなど全8トピック
「リッチクライアント ＆ 帳票」フ ォーラム 2008/2/25
アクセス解析ツールを比べてみよう
特集：アクセス解析ツール比較　Webサイトの利用増で、ユーザーのアクセス状況を分析することが重要になっている。市場のツールを比較してみよう
「リッチクライアント ＆ 帳票」フ ォーラム 2007/2/21
古くて新しいAjaxの真実を見極める
「Webインターフェイスの新しい手法」「画期的なWebアプリケーションの仕組み」であるとして開発者たちの人気を集めるAjaxとは何なのか、その真実を見極めてみよう
「Web Client & Report」フ ォーラム 2005/8/2

Ajax解体新書

よりAjaxを深く理解するために、ブラウザ上の「見た目」だけに注目するのではなく、実際に目に見えない舞台裏の通信内容をモニタリングしてみよう

最終更新 2006/11/22

JavaScriptプログラミング再入門

　Ajax全盛のいま、オブジェクト指向ベースのJavaScript知識は不可欠。過去を振り返りつつ、まずは最新開発事情をチェック

最終更新 2007/9/25

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

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

 

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