こんにちは。「本が好き!」などを担当している根岸です。

【01】改めて、Ajax って、なんだろう?


最近は、Ajax を使用したサイトが増えてきました。
Ajax とはブラウザ内(リロードレス)でサーバー側との非同期通信(同期可)を行い、その結果、インタラクティブ性の高いユーザーインターフェースを構築する仕組みを指します。
2005年に登場した、 Google Maps や、 Google Suggest から一気に広まりました。
Ajaxとは、そもそも「 Asynchronous JavaScript + XML 」の略です。直訳すると「非同期な JavaScript と XML」となりますが、「なんじゃそりゃ?」で すよね。
昔ながらのWebサイトは、

(A)ウェブブラウザがページのリクエストをする
(B)ウェブサーバーがリクエストされたページを HTML 形式で返す

という通信を、キャッチボールのように繰り返します。

ウェブブラウザとウェブサーバが同期しているので、ユーザーはアクセスのたびにページのリロードを待たなければなりません。

しかし、Ajax を用いるとサーバー側へのリクエスト処理をウェブブラウザのバックグラウンドで行い、返ってきたレスポンスをリロードレスで受け取ることができます。その受け取った結果を表示中の HTML (特定の要素)に流し込めば、ユーザーから見たインタラクティブ性を考えたときにボトルネックとなりがちであったリロードという作業を取り除くことができます。また Ajax だけではなく、Javascript を効果的に使用すればデスクトップアプリケーションにより近い操作性を持ったサービスをブラウザ内で実現することができます。Google の Google Docs は Ajax アプリケーションの代表例としてよく取りざたされますね。ライブドアのサービスでは、livedoor Reader が Ajax アプリケーションとしてよく知られています。


【02】Ajax 開発を簡単にする


ただ、Ajax アプリケーションの作成には、JavaScript の高度な知識が必要です。

(1)バックグランドでサーバと非同期通信する
(2)サーバからうけとったレスポンス(例:json , xml)を解析する
(3)表示中の HTML を解析し、動的に書き換える

といったことをしなければなりません。
しかも、Internet Explorer や Firefox、Safari、Opera といったウェブブラウザごとに JavaScript の機能は微妙に異なっており、互換性を保つのが困難です。
ただし、フルスクラッチで Javascript のコードを記述せずとも、ブラウザごとの互換性を吸収し、なおかつ Javascript によるプログラミングをより強力にしてくれるライブラリを活用すればその問題に頭を悩ませることはありません。
もっとも普及しているライブラリは「prototype.js」で、もちろん Ajax の機能もサポートしています。ただし普及しているとはいえ正直なところ「prototype.js」は Javascript に慣れた開発者には便利なものでも、初心者に対する敷居を下げるようなものではないと思います。
この状況に救いの手を差し伸べたのが「jQuery」です。ほとんどのライブラリがプログラミングの知識が豊富なプログラマ( Web でいうならバックエンドエンジニア)が使うことを想定していますが、jQuery はプログラミングには疎くても HTML と CSS さえ知っていればある程度使えるよう設計されています。
普通のプログラミングでは、変数の処理や条件判断や繰り返し処理を組み合わせます。jQuery は、これらを極限まで減らしてくれます。ここでは詳しく述べませんが、サーバとの非同期通信も恐ろしく簡単になります。シンプルな処理なら1行から数行で書けてしまいます。しかも、処理もけっこう速い。
jQuery にある、極度に抽象化されたメソッドを用いれば、普通の Javascript プログラミングで行うところの繰り返し処理やイベントの登録も、ほんの数行書くだけで実現できます。もちろんサーバとの非同期処理においても同様です。

「HTML と CSS はできるけど、JavaScript は難しい」というWebデザイナーも「Perl や PHP はできるけど、JavaScript は苦手」というWebプログラマーも、jQuery を使えば、実現できることが、一気に増えます。

【03】導入事例「映画を語ろう 2.0β」


ここで、jQuery導入の実例として、4月2日にリニューアルオープンした
映画を語ろう 2.0β」をご紹介します。
 
「映画を語ろう」は、僕が東京グルメ(現 livedoor グルメ)の姉妹サイトとして作った映画批評コミュニティです。
東京グルメをライブドアに営業譲渡して僕もライブドアの社員になったときに、なかば勝手に持ち込んで、「livedoor ムービー 映画を語ろう」として運営してきました。ただ、ご存じのようにlivedoor ムービーがニュースチームに吸収されたりして、立場が微妙になってきたため、僕の個人会社・有限会社ずばぴたテックで運営をひきとることにしました(僕は、現在は独立し、業務委託でライブドアの仕事をしています)。
 
今回、「映画を語ろう」を引き取るに当たり、プログラムをすべてゼロから作り直しました。
そして、2008年現在にサービスインするに相応しい機能を持ったサイトを目指すことにしました。

(1) なるべくピュアな XHTML で記述することで、SEO とアクセシビリティの両立をめざす。
(2)Ajax を積極的に取り入れることで、複雑なサイトのナビゲーションや、映画と人名(スタッフや俳優)の登録作業を単純化する。
(3) データベース構造を再設計・最適化することで、プアなサーバでも良好なパフォーマンスを実現する。
 
ずばぴたテックは、僕の個人会社で予算もないので、サイトデザインも、 HTML と CSS のコーディングも、サーバーサイド(PHP)のプログラミングも、サーバ設定も、全部自分一人でやる、オレオレ開発です。
JavaScriptは、もっとも苦手な分野で Ajax もほとんど経験がありませんでした。
しかし、jQuery に出会ったことで、一気に道が開けました。
「映画を語ろう 2.0β」では、現在以下の機能に jQuery を使っています。

(1) カテゴリ選択用の右カラムの2段階アコーディオンメニュー
(2) 右カラムの映画検索および、映画登録画面での人名登録のサジェスト機能
(3) 映画登録画面でのカテゴリ設定用横方向2段階階層メニュー
(4) アマゾンの関連商品検索と登録
(5) HTMLの基本レイアウトの生成

jQuery には、ユーザーインターフェイス用のプラグインが多数存在し、それらを組み込むだけでもリッチなインターフェイスを構築できます。
ただ、映画を語ろう(とlivedoor グルメ)の特徴である、3階層カテゴリに対応できる2段階アコーディオンや横方向メニューは存在しなかったため、結局自分で作ってしまいました。
以前では、そんなことは考えられませんでした。jQuery のおかげです。


(4)では、ウェブブラウザが「映画を語ろう」のサイトを通さず、直接アマゾンと通信する、いわゆるクロスドメインの処理を行っています。
(セキュリティリスクがあるので、JavaScript では通常クロスドメインの通信はできない)

これは、jQuery 1.2以降の jsonp 公式サポートにより実現した機能です。これによって、「映画を語ろう」のサイトの負荷を減らせます。

(5)は、何をやっているかというと、HTML のレイアウトの動的な再構成をしています。
現在の「映画を語ろう 2.0β」は右カラム付きの2カラム構成です。一般的なレイアウトと HTML ではありますが、レイアウトのために使われている HTML タグは、検索エンジンのロボットや、音声ブラウザを使っている視覚障害者のユーザーさんには、余分なものです。
そこで、レイアウト用のタグは、元の HTML のソースには含めず、ウェブブラウザに読み込まれた段階で、jQuery を使って、レイアウト用のタグを追加して右カラムレイアウトを実現しています。
これによって、左レイアウトに変えたり、カラム数を増やしたりすることも簡単にできます。
また、HTML からレイアウト向けの情報を省くことで情報の純度をあげることで、SEO にもなるんじゃないかと期待しています。
 
jQuery を導入することで、開発工数を少なくしつつ、Ajaxによる動的なユーザーインターフェイスと純度の高い XHTML が実現できるのです。※
 
 
※偉そうなことを書いていますが、4月2日時点では、まだ XHTML 化できてないところがいくつかあります。
サービスインが間に合いそうもなくて、HTML に CSS のスタイルをハードコーディングしちゃった部分もあるんですが、落ち着いたら、外部スタイルシートに落としていきます。
CSS の外部ファイル化を焦ると、あとでメンテしにくくなるので、落ち着いたときにやるほうが良策だと思っています(<言い訳ですが)
 
関連URL