Ajaxを適用した理由

Ajaxを適用した理由

   このサービスのユーザはおもに運送会社の社員とヤマトリースの営業担当者であり、パソコンの操作に慣れていない人も多い。したがって、そのような人 でも戸惑うことなく利用するための「わかりやすさ」と日々の業務ですばやく使いこなすための「操作性」が要求される。

   さらに、実際にトラックを売買する運送会社のユーザにこのサービスを繰り返し使ってもらうため、「使っていて楽しいシステムにしたい」という要望がヤマトリースから提示された。

   従来の単純なHTMLよりも操作性や表現力に優れたWebアプリケーションはRIA（Rich Internet Applications）と呼ばれているが、その実装手法にはいくつかあり、FlashやAjaxが有名である。

   HOWSは、Ajaxという言葉が広まる以前からJavaScriptベースのコンポーネントの開発を行っており、すでにこのシステムにマッチする 様々なコンポーネントを持っていた。これらのコンポーネントを利用すれば、ロジックを1から作る必要がなく、開発期間を大幅に短縮できる可能性があった。

   このサービスがまだ企画の段階にあるとき、HOWSは自社で開発しているWebページ作成ツールを使ってコンポーネントを組み込み、「動かせるデ モ」を作ってプレゼンを行った。このデモは従来のWebアプリケーションに慣れていた人にはかなりインパクトのあるものであり、特にパソコンの操作に慣れ ていない人にウケがよかった。

   さらに、コンポーネントを利用していたことで、まだ企画の段階であるにも関わらず完成品とおなじイメージで操作可能なデモができていることに対して の評価が高く、Ajaxの採用が決定した。なお、このデモはWebページ作成ツールを使って、プログラミング経験ゼロの人がコンポーネントを利用して作成 した。

図2：コンポーネント利用形態

   このシステムは多くのコンポーネントを使って開発されており、すべてを紹介することはできないが、一例としていくつかを紹介する。

非同期通信を利用したリスト表示

   従来のWebアプリケーションで多数のデータをリスト表示する場合、まずは最初の何件かをサーバから取得し、ユーザから次のデータを見たいという指示があれば次の何件かのデータを再びサーバに取りに行くという動作をしていた。

   また、リストをソート（並び替え）できる機能があった場合も、従来の方法では並び順を変更するたびにサーバへのアクセスが発生していた。

   今回のシステムには、クライアントサイドでリストの生成を行うコンポーネントが組み込まれている。これは、サーバから非同期で取得した全データをク ライアントのJavaScriptでページ分けとソートを行って、リストを生成するというものである。これにより、一度リストを表示すれば、改ページや ソートを行った際にサーバへのアクセスが発生しないため、ほとんど一瞬で改ページ処理やソート処理が完了する。

   これにより、ローカルのアプリケーションに近い感覚での操作が可能となる。また、改ページ処理の際にリスト部分をなめらかにスクロールさせて次のリ ストを表示する処理を行うことで、ページを切り替えるだけでも利用者の視覚に優しく、見ていて楽しいユーザインターフェースを実現している。

   さらにこのコンポーネントは、サーバのデータが更新されたかどうかを非同期で監視している。最初に取得するデータを全データではなく前後1ページ分 のデータだけをあらかじめ取得しておき、改ページが行われたタイミングでその先のページのデータを非同期で取得するというように、システムによって様々な オプション機能が選択できるようになっている。