TOPシステム開発> はじめに
Ruby on Rails入門
Ruby on Rails入門

第5回:Ajaxアプリケーションの作成
著者:アスタリクス  大西 正太   2006/6/21
1   2  3  4  次のページ
はじめに

   今回はRuby on Rails(以下、Rails)を用いてAjaxアプリケーションを作成します。まずはAjaxについて、簡単におさらいしましょう。
Ajaxの隆盛

   ご存知の通りここ1年余りAjaxは多くのメディアで取り上げられ、注目が集まっています。Ajaxは「Asynchronous JavaScript + XML」の略称で、その名の通りXMLとJavaScriptを用いた非同期通信技術のことです。

   Ajaxを用いることでサーバアクセスをバックグラウンド化することができ、シングルページでアプリケーションを作成することができます。「サーバアクセス=画面全体更新」であった従来のWebシステムに比べて、効率的でユーザビリティの高いシステムを実現する手法として注目されています。

   また現在ではXMLの利用や通信の発生がなくても、JavaScriptを用いてリッチなUIを実現していればAjaxと呼ばれるようになりつつあります。AjaxはRIA(Rich Internet Application)、つまりはリッチクライアント技術の一種であると捉えられつつあるのです。


Ajax普及の理由

   FlashやEclipse RCPなどが乱立しているRIA技術の中で、Ajaxの知名度が高まっている理由として、表1に示すような複数の要素が相乗的に効果をあげた結果といえるでしょう。

技術 JavaScript、CSS、DHTMLなどの旧来の技術によって成り立っている
動作環境 実行環境なしで動作可能である
マーケティング Google、Web 2.0などの潮流に乗っている

表1:Ajaxの特徴

   特に「旧来の技術の上に成り立っている」という理由が大きく、少し掘り下げて考えてみると表2のような効果が見えてきます。

  • 既存ページの段階的な移行や部分的な適用が容易
  • 開発者の技術修得が容易
  • 従来動かなかった画面要素を動かせるというインパクト

表2:「旧来の技術」が普及を促進した理由

   イノベーション(まだ普及していない新しい商品や技術など)が普及していく過程では、アーリーマジョリティ(比較的慎重で追随的な採用行動を行うユーザ)をいかに取り込むかが重要なポイントであるといわれています。

   RIAというイノベーションにおいては、Ajaxの「旧来の技術の上に成り立つ」という特徴がアーリーマジョリティの取り込みに一役買っており、普及に結びついているといえるのではないでしょうか。


RailsのAjaxサポート

   本来、RailsとAjaxに直接の関係はありません。しかしRailsとAjaxの出現したタイミングが近かったこともあり、デフォルトの設定でAjax対応のライブラリが同梱されています。そしてこれまで解説してきたのと同様に、Railsを用いればAjaxは驚くほど少ないコードで構築できるのです。

   Railsは「prototype.js」「script aculo.us」というJavaScriptのAjaxライブラリを同梱しています。これらのライブラリのヘルパーメソッドによって表3に示すようなAjax処理を実現します。

名称 概要 対応Railsメソッド
オートコンプリート フォームに入力を行うと候補が表示される text_field_with_auto_complete
auto_complete_for
インクリメンタルサーチ 検索フォームに入力を行うと動的に検索結果が絞り込まれていく form_remote_tag
グラフィカルエフェクト フェードアウトなどの効果を表現する visual_effect
ドラッグアンドドロップ、ソート 画面上の要素をマウスで操作できる draggable_element
sortable_element
オートセーブ フォームに入力中のデータを定期的にサーバへ自動保存する periodically_call_remote

表3:Railsで実装可能なAjax処理の例

Ajaxに関する詳しい内容については、連載「Ajaxが開く未来」を参照してください。

1   2  3  4  次のページ


株式会社アスタリクス  大西 正太氏
著者プロフィール
株式会社アスタリクス  大西 正太
JavaEEフレームワークの設計構築や開発プロセス策定などの業務を経て、現在は新規ビジネス創生に携わる。Ruby on Rails上に構築したオープンソースのCMS「Rubricks」(http://rubricks.org/)のコミッタ。


INDEX
第5回:Ajaxアプリケーションの作成
はじめに
  Ajaxの実装
  内部の動作
  Ajaxのテスト