サイボウズとAjax

読者の皆様はじめまして。cybozu.netの開発を担当していますyoshitakeです。先日プ レスリリースされたcybozu.netですが、現在開発メンバーはその公開に向けて必死で作 業を進めているところです。どうぞ公開まで今しばらくお待ちください。

さて、今回のプレスリリースで各種ニュースサイトやBlogなどで色々と反響をいただき ましたが、Ajaxというキーワードに反応をした方が結構多かったの が印象的でした。やはり旬なキーワードなんだなぁ、と改めて実感しました。

IT系の技術者の方は最近よく耳にしているキーワードだとは思いますが、それ以外の方 も大勢ごらんになっているかと思いますので、Ajaxとは何か? というのを簡単に説明し てみたいと思います。

Asynchronous JavaScript + XMLの略称。

JavaScript の組み込みクラスである XMLHttpRequest を利用した非同期通信を利用し て、ウェブブラウザ上で既存の枠組みにとらわれないインタフェースを実現するための 技術。実際には Ajax という技術が存在しているわけではなく、DHTML (JavaScript + CSS) と XMLHttpRequest にサーバーサイドのウェブアプリケーションとを加えたあわ せ技のことを Ajax と呼ぶようになった。

Ajax を用いて構築されたインタフェースの代表例として Google Suggest や Google Maps がある。

はてなダイアリー - Ajaxとは

弊社製品の サイボウズOfficeやサイボ ウズデヂエなどを含め、従来のWebアプリケーションでは何かアクションを起こす 際、その表示されているページ全体を更新する必要がありました。

例えば、サ イボウズOfficeのトップページでスケジュールが表示されているとします。このス ケジュールで次の週の予定が見たいと思ったとき、ボタンを押してスケジュール表示を 切り替えるわけですが、このときWebブラウザの動作としてスケジュールだけでなくペ ージ全体が更新されるため、例えば新着情報のチェックを行ったり、タイムカードのチ ェックを行ったり、リンク集を表示し直したり、スケジュールとは全く関係のない処理 も同時に実行されてしまいます。そのため、処理時間が余計にかかったりDBアクセスが 余計に発生してしまったりして、サーバーにも負荷がかかるしユーザーも待っている時 間が長くなりイライラの原因となったりします。

ところがAjaxを用いることで、必ずしもページ全体を更新する必要がなくなります。上 記の例でもしスケジュールの更新でAjax技術を利用したとすると、スケジュールの情報 のみサーバーから取得し、スケジュールの表示だけを更新することが可能になり、処理 時間もかからず、またサーバー負荷もかからないというメリットを享受することが出来 るようになります。

今回のcybozu.netで、サイボウズ製品としては初めてAjaxを利用したUIの設計に着手し ました。それは流行ものに流されたからというわけでは決してなく、Ajaxがユーザーに もサーバーにも優しい技術であるという判断があったからです。逆に、何でもかんでも Ajaxを利用したUIにした、というわけでもないです。Ajaxを使うと便利になるという判 断が出来た箇所のみ用いるようにしています。そのあたりのさじ加減がcybozu.netのポ イントの一つではないかと考えています。

※ちなみに上記のスケジュール更新の話は、あくまでもA jaxの説明のための例です。次バージョンのサイボウズOfficeでこういう機能が搭載さ れることが決定したわけではありませんので… あしからず。