App EngineをjQueryでAjax化しBigtableをCRUD操作：Google App Engineで手軽に試すJavaクラウド（3）（1/4 ページ）

» 2009年06月24日 00時00分公開

[清野克行，有限会社サイバースペース]

BigtableはCRUD処理ができるんです！

　連載第1回の「EclipseでJava版App Engineを始めるための基礎知識」では環境設定が中心でしたが、連載第3回となる今回は、「Google App Engine for Java（以下、GAEj）」上で動作するJSPのユーザーインターフェイス（以下、UI）をAjax/JavaScriptでリッチにし、「Bigtable」でCRUD（登録・参照・更新・削除）処理を行ってみます。

　今回の解説では、Ajax/JavaScriptライブラリのjQueryのバージョン1.3.2を使用したCRUD処理画面の操作内容と、そのJavaScriptでのプログラム処理を最初に見ていき、その後Bigtableに対するJavaサーブレットからのCRUD処理を見ていきます。jQueryについて詳しく知りたい方は、以下の連載も参考にしてください。

連載インデックス「jQueryで学ぶ簡単で効果的なAjaxの使い方」 - ＠IT via kwout

　Bigtableは、もともとGoogleの巨大データストアでのデータ管理とアクセスをベースとしているため、RDB（Relational DataBase）と比較した場合の操作上の制限などが話題になっていますが、CRUD処理は問題なく行えます。今回は、その処理内容をプログラムレベルで紹介します。

　なお、前半はjQueryでのAjax化したクライアント処理の解説なので、特にBigtableに興味があるという読者は後半から読んでいただいても十分役立つと思います。

ボタン操作不要で非同期通信するGAEjサンプル

　CRUD処理がAjax（jQuery）の適用でどのように変わるのか、その画面操作を最初に見ていきます。まずは、今回のサンプルを動かしてみましょう。

http://4.latest.cybersample5.appspot.com/

図1　サンプルの社員マスタ管理画面

　図1は、社員情報をメンテナンスするマスタ管理画面で、この画面から社員情報の登録・参照・更新・削除処理をすべて行えます。

（1）登録処理

　最初に登録処理ですが、図1の初期表示画面で上部のラジオボタンが登録モードにセットされており、このまま登録処理を行えます。

図2　登録処理（社員情報入力）

　登録処理では、図2のように社員情報を入力した後に［Alt］キーを押すことによって完了し、図3のような画面に戻ります。

図3　登録処理完了（［ALT］キー押下で登録実行）

Ajaxを使う2つの利点

　ここまでの処理でWebブラウザクライアントにAjaxを適用した場合の、従来のHTMLフォーム処理との主な違いが2点あります。

　第1点は、登録処理を行っても画面遷移は行われず、登録した画面のままになっていることです。

　これは、Ajaxでのサーバ通信が非同期で行われることによるもので、このように画面遷移のないAjaxは「SPI（Single Page Interface）」と呼ばれることもあり、従来のHTMLフォームはサーバ通信により必ず画面遷移が発生することから「MPI（Multi Page Interface）」といわれることもあります。

　もう1つは、この画面には登録用などのボタンがまったくないことです。

　登録は［Alt］キーの押下で実行されましたが、Ajax/JavaScriptでは任意のキーにファンクションを割り当て、キー入力からマウス操作に手を持ち替えないで処理を完了させることもできます。これは処理件数が少ない場合はあまり違いがないようにも見えますが、マスタ登録などで、大量のデータ登録処理などが要求される場合には、操作スピードの点で大きな違いが出てくるものです。

　このようにAjax（jQuery）を使うことによって、どのようなイベントからでもサーバとの非同期通信を開始でき、UIの操作性を向上できます。