検索
連載

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

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

Hello Jaxer！から始めてみよう

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

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

　ほぼ見慣れた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ソースを見ると、次のように表示されます。

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

　「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の現状、今後に要注目」に挙げた問題があり、読み込みに失敗するため）。

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

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

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

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

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

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

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

■ コントローラーの修正

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

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

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

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

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

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

　以上の修正だけで、サンプル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おいしいレシピ 」バックナンバー
前のページへ | 　　　　　　

Copyright © ITmedia, Inc. All Rights Reserved.

ページトップに戻る