UP TO DATE・バックナンバー>>
UP TO DATE Ajax
Webのなめらか操作を実現する古くて新しい技術
本ページの内容をPDFファイルでダウンロードできます >> PDFダウンロード


マピオンをはじめGoogleローカル、Yahoo地図帳などの地図サービスが人気を集めています。この地図サービスで、以前と比べると、地図の操作や表示がスムーズになっていることにお気づきでしょうか。ネットやCPUが速くなった、それらも要因ですが、実はWeb技術によるところが大きいのです。その主役がAjax(Asynchronous JavaScript XML:エイジャックス)です。Web2.0で主流となっている対話型Webページに欠かせないWebアプリケーション技術です。スムーズなWeb表示、ローカル環境に近い操作感を実現し、ネットワーク越しに操作するアプリケーションを実用域に引き上げました。今回は、このAjaxの概要を紹介します。

ページのトップへ▲

Ajaxとは

Ajaxという言葉は、2005年2月18日アメリカAdaptivePath社のジェシー・ジェームス・ギャレットによる「Ajax: A New Approach to Web Applications」の中で使われたのが最初です。ところがその内容は真新しいものではありませんでした。

Ajaxは古くて新しい

Ajaxは、Asynchronous(非同期(通信))、JavaScript(ジャバスクリプト)、XML(eXtensible Markup Language)を組み合わせたWeb技術です。組み合わせられる個々の技術自体は、この言葉が最初に使われた時点でも新しいものではありませんでした。JavaScriptはNetscape Navigator 2.0に実装されたのが始まりですし、XML1.0がW3C(World Wide Web Consortium。 World Wide Webで使用される各種技術の標準化を推進するために設立された非営利団体)から勧告されたのは1998年です。Ajax風のサーバとクライアント間の通信も使われていました。Ajaxはこうした従来からある技術を組み合わせて開発する手法につけられた新しい名称です。

「Ajax」という言葉の誕生以前から、同様の技術を組み合わせたWebアプリケーションは存在していたのですが、そうした手法に統一された名称がありませんでした。Webアプリケーション自体の性能も十分とは言えませんでした。JavaScriptはCPUの処理能力を必要とし、ダイヤルアップ接続では非同期通信も思うにまかせません。また、統一された名称がないため、開発ノウハウが個人や企業レベルにとどまり、統一的な手法やライブラリ、技術情報の交換が進んでいませんでした。

それが、Ajaxと名付けられたことで一躍表舞台に登場しました。インターネットへの接続もダイヤルアップからブロードバンド、常時接続へ移行が進み、CPUもマルチコア化、高速化など性能が向上し、Ajaxが動作するためのインフラが整ったタイミングです。折しも、Web2.0の台頭で、見るだけサイトから利用するサイトへと変化し、動きのあるサイト、ユーザー参加型サイト、対話型サイトが求められていました。情報量豊かなリッチコンテンツを扱うサイトが多くなり、従来の手法ではブロードバンドといえどもWebサイトの操作性は満足できるものにはなりません。さらに、Web2.0の巨星GoogleやAmazonがこの技術を使っていたこともあって、急速に注目度が上がりました。

Ajaxは何をする

そのAjaxが実現するのは、ローカルのPCで動作しているかのようなWebページの滑らかな動作と効率的なデータ通信です。JavaScriptが、ユーザーの操作に応じて自律的にサーバと通信してデータを要求し、それを受け取って画面表示を変更し、動的なWebページを実現します。AjaxでないWebページでは、ユーザーがリンクやボタンなどをクリックして、はじめて通信が開始され、データの要求、サーバからのデータ送信が行われます。従って、データ要求から受信までの待ち時間が発生し、その間、ブラウザは表示を固定したまま待ち続けることになります。
Ajaxを用いたWebページとそうでないページを比較すると、次のようになります。


従来のページとAjaxのページの比較 http://www.keyman.or.jp/3w/prd/90/30001590/

理解へのキーワード

Ajaxがどのように実現されているか、動作原理を理解するには、「非同期」「JavaScript」「XML」「DHTML」の4つの技術がキーワードになります。Ajaxはこれらの技術の組み合わせで動作しています。

Ajaxを理解するための4つのキーワード
名称 説明Ajaxでのはたらき
非同期 リンクのクリックなどユーザーの操作と同期しないサーバとの通信 ユーザーの操作を待たずに通信してデータを先取りして、次に表示する画面データを準備
JavaScript ほとんどのブラウザで、プラグインや専用アプリケーションなしで動作する簡易なプログラム言語 Ajaxのエンジン
通信の制御、データの解釈、DHTMLデータの書き換え、ユーザーインターフェース
XML 汎用データ記述言語。タグ付きのテキスト。タグが拡張でき複雑な表現が可能 サーバから送られてくるデータ形式
DHTML HTMLの一種。動的なWebページの表示を実現する 表示中のHTMLの一部を動的に書き換えることで画面表示を変更する
  • 非同期
    「非同期」通信とは、ユーザーのクリックやキー操作によらず、JavaScriptによって任意のタイミングでサーバとやりとりすることを言います。Ajax以前のWebページは同期通信を行っており、ユーザーがリンクをクリックしてはじめてサーバとの通信を開始します。通信開始からデータを受け取るまでの待ち時間をなくすことはできず、しかも、この待ち時間中にブラウザは何の動作も行うことができないのです。
  • JavaScript
    「JavaScript」は、ブラウザで動作するスクリプト言語(簡易なプログラム言語)です。簡単なものはボタンの上をマウスポインタが通過するとボタンの色が変わるようなしくみに使用されています。Netscape (Navigator) をはじめ、Internet Explorer、Opera、Mozilla といったほとんどのブラウザがJavaScript を解釈して実行するスクリプトエンジンを搭載していますので、あらためてプラグインやアプリケーションを用意する必要がありません。このほとんどのブラウザが標準的に対応しているということがAjax普及の主因となっています。
  • XML
    「XML」は拡張可能なマークアップ言語と訳される汎用のデータ記述言語です。テキストベースなので、機種やプラットフォームを気にすることなく扱うことができます。また、タグを拡張できるため複雑な記述や階層構造の表現が可能で、汎用性が高く、エディタや文法チェックなどのXMLツールが普及していること、XMLで構築された地図情報やネットショップなどの大規模データベースの利用が可能なこと、などの理由で採用されたものと考えられます。
    JavaScriptがデータとして扱えるのはXMLだけではありません。最近のAjaxではXMLの変わりにJSON(JavaScript Object Notation:ジェイソン)というJavaScript専用のデータ記述言語の使用が多くなっています。JSONもテキストベースですが、JavaScript専用なので、データの記述が簡潔で、読み込みも高速、CPUの負荷も小さいというメリットがあります。
  • DHTML
    「DHTML」はDynamic HTMLの略で、動的なHTMLと訳されます。HTMLは静的にWebページを表示します。表示を変更するためには、ページ全体のHTMLをサーバから受け取ることになります。DHTMLは、JavaScriptとサーバから受け取るXMLデータによって、HTMLやスタイルシートの一部を書き換えることで、Webページの表示を変更し、動的な表現を実現します。

Ajaxは以上の4つの技術の組み合わせで、ネット越しのWebアプリケーションになめらかな動作を実現しています。次にAjaxの特徴を見てみましょう。

ページのトップへ▲

Ajaxの特徴

同様なWebアプリケーションを実現できる開発環境は他にも優れたものがあります。その中でAjaxが選ばれるのはなぜか、特徴をまとめてみましょう。留意点にも触れます。

なぜAjaxなのか

Ajaxが選ばれる最大の理由は、使用環境にプラグインや専用アプリケーションが不要であることです。AjaxのエンジンであるJavaScriptはほとんどのブラウザが標準的にサポートしています。扱うデータ形式も、XMLにしろJSONにしろテキストベースなので機種やプラットフォームに依存しません。原則的にブラウザさえ動作すれば利用可能です。
Ajaxと同じことはAdobeのFlashでも実現できます。FlashベースのFLEXという開発環境も同社から無償で提供されています。しかし、Ajaxは、プラグインが不要で、開発環境や使用環境が1社に独占されないことなどから、現在の主流になったと推測されます。

通信遅延を補う機能も大きな特長で、待ち時間を感じさせない操作感は対話性を求めるWebページに必須となっています。これは、サーバとの非同期通信と、効率的な通信方法で実現しています。Ajaxでは通信時に従来のHTMLのように全ページ分ではなく、変更部分のデータのみを要求し受信しているのです。
ブラウザが処理プログラムを持っているため、操作に対する応答性が良いことも人気の理由です。軽微な処理はJavaScriptがユーザーとやり取りを行います。少量のデータをソートして表示し直す、メニューによって異なる表示をするといった処理は、サーバに頼ることなくJavaScriptが処理することで、応答性を向上させるだけでなく、不要な通信をしないことでサーバやネットワークの負荷を減らしています。

Ajaxの留意点

JavaScriptはブラウザによって動作が微妙に異なりますし、サポートしないブラウザもあり、実行不可に設定することもできます。しかし、最近ではWebサイト側で対応が進んでいますので、不便を感じることは少なくなっています。また、Ajaxはユーザーの知らない間にサーバと通信を行うためセキュリティ面の不安も指摘されています。具体的な被害は見当たりませんが、不審なWebサイトには近づかないなど通常のWebサイト同様の注意が必要です。Web制作者からはJavaScriptがテキスト形式で記述されるため、プログラムソースが隠せない点に不満の声もあります。

ページのトップへ▲

これからのWebアプリケーション

Ajaxの現状と将来について簡単に触れておきましょう。

ブラウザが実現するオフィスにもたらすもの

Ajaxの代表的な適用例がGoogleの「Google Docs & Spread Sheets」です。ブラウザ上で動作するワープロと表計算ソフトです。ローカルで動作するオフィスソフト並の軽快さとまではいかないにしても、ネット経由でここまでできることに驚かされ、ネット越しのアプリケーションが実用域に達したことを感じさせます。


Google Docsとファイルメニュー
作成した文書はHTML、RTF、Word、OpenOffice、PDF、TXT形式で保存できる。

MicrosoftもAjaxの採用が進んでおり「Windows Live」などで見ることができます。簡単な操作でタブやコンテンツを追加することができます。同様の機能はGoogleのiGoogleでも実現されています。


Microsoft Windows Live
Microsoftのインターネットベースのソフトウェアサービス

以上のような例を見ると、Ajaxを採用したWebアプリケーションのレベルの高さを実感することができます。今日、こうしたAjaxの適用例をインターネット上で数多く見ることができます。今後、Webアプリケーションの機能がさらに強化され、実用性に磨きがかかってくると、市販のアプリケーションとどのように棲み分けするか、インターネットとIT業界全体に大きな変革をもたらすことになるかもしれません。

Ajaxのこれから

プラグインが不要で、機種・プラットフォームを意識することなく、リッチなユーザーインターフェースを備えたWebアプリケーションが構築できるAjaxは、ユーザーだけでなく開発者やWeb提供者にとってもたいへん魅力的です。Web2.0などWebアプリケーションの需要はますます高くなっており、Ajaxが今後さらに普及していくことは間違いありません。

一方で、現在のところAjaxの業務システムへの実装はそれほど多くないと言われています。開発環境が十分でないこと、急速な普及に対してJavaScriptの開発者が不足していること、見かけ以上にプログラミングが複雑であること、セキュリティなど未解決の問題があることなどが主な原因です。AjaxはもともとOSやブラウザなどのユーザーの環境を限定できない世界で発展してきた技術です。それに対して企業の業務システムはOSやブラウザなどのユーザー環境を限定することは比較的容易なので、開発環境やサポートの確かな「.NET Smart Client」やFlashベースの「FLEX」なども、現時点では企業にとっては有効な選択肢と言えます。しかし、インターネット上では今後もAjaxが普及していくことは確実で、そうなると、使い勝手の良い開発環境やフレームワークが登場し、生産性の向上やノウハウの蓄積が進んでいくことは間違いないでしょう。AjaxはWeb2.0の次にくるインターネットへの重要なキーワードなのかもしれません。

参考URL

ページのトップへ▲

All Rights Reserved, Copyright(C) FUJITSUファミリ会