アークウェブ ビジネスブログ

以下、各ステップについて軽く解説です。

まず、STEP2に関して。
ここでは、SWFAddressというのを使います。
# Jaxerでパースエラーがでたりするため、@IT記事では、「Really Simple History」に切り替えるかも。

SWFAddressについては、うちの竹村さんが「つくるぶ」で紹介していますので、よろしければ、見てみてください。

　参考) つくるぶガイドブログ: SWFAddress2.0を利用した「状態」による機能制御

STEP3では、STEP2での、Ajaxによって変化される各状態のHTMLを静的なHTMLとしてあらかじめ用意しておき、

　<a href='Aをクリックした状態用にあらかじめ用意したHTML'
　　　onclick='Aをクリックされた時の処理; return false'>Aをクリック</a>

のようにしておくことで、JavaScript Offの場合は、画面全体をあらかじめ用意したHTMLに切り替える、というアイディアです。

この段階で、SEOやアクセシビリティ対策が改善されます。

ただ、この各状態に応じた静的なHTMLをあらかじめ用意する、というのが大変ですよね。
検索を行うAjaxアプリなど、結果ページが無数にあるようなものでは現実的には無理になってしまいます。

そこで、次のSTEP4では、この各状態のHTMLの作成を、サーバーサイドJavaScript実行で動的に行わせるものです。

サーバーサイドJavaScriptの実行にはAptana Jaxerを使用します。
Jaxerは@ITでも紹介されています。

　参考) Ajaxはじめて物語、そしてサーバでも動くJavaScript（1/2）- ＠IT

簡単に説明すると、PHPのように、サーバーサイドで、プログラムを実行して動的に生成されたページを返すしくみなんですが、そのプログラミング言語がJavaScriptになります。

JavaScriptなので、もともとはクライアントサイドで実行される予定だったJavaScriptコードを、同じコードのままサーバーサイドで実行させて、Ajaxが生成するのと同じ結果を得られるようにする、というのがこのSTEPのアイディアです。

Aptana Jaxerは、Linux版がでたばかりで、現状だとレンタルサーバーなどには入っていませんので、試す場合は自分でインストールできるサーバー環境が必要です。
それと、実際にいろいろ試してみると、jQueryのメソッドの一部が動かなかったり、と問題もいくつかあったりするようですが、
でも、AjaxのSEOやアクセシビリティの一つの切り口になるのではないかと思います。いかがでしょう。。。

以上。詳しいコードやサンプルについては@ITを是非ご覧ください!!