JavaScriptを書かずにAjaxを実現するjMaki：CoolなEclipseプラグイン（22）（3/3 ページ）

» 2007年11月07日 00時00分公開

jMakiでJSONを使って通信するには？

　次に、JSONを利用してテーブルを表示してみましょう。index.jspを次のように変更します。

リスト2　JSONを利用したetableのサンプル

<%@ taglib prefix="a" uri="http://jmaki/v1.0/jsp" %>

              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

                  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

              <html>

              <head>

                  <meta http-equiv="Content-Type" content="text/html; 

                    charset=UTF-8">

                  <title>Default Page</title>

              </head>

              <body>

                  <h1>Default Page</h1>

              

                  <a:widget name="dojo.etable" service="data.json" />

              </body>

              </html>

　リスト2では、太字部分のserviceタグでJSONサービスへのURLを指定します。ここでは、静的なdata.jsonファイルとしてWebContentディレクトリに作成します。ファイルの文字コードはUTF-8にしておきます。UTF-8にしないと、文字化けするので注意してください。

リスト3　data.json

{columns : [

                  { label : '題名', id : 'title'},

                  { label :'著書', id : 'author'},

                  { label : 'ISBN', id : 'isbn'},

                  { label : '詳細', id : 'description'}

              ],

              rows : [

                  { title : 'LightWeightJava', author : '岡本隆史', 

                isbn: '4839917779', 

     description : 'JSF,Spring,Hibernateを利用したWeb開発の入門書'},

                  { title : 'Eclipseプラグイン開発 徹底攻略', author : '竹添直樹',

                isbn : '4839922195', 

     description : 'プラグイン開発の徹底解説本'},

                  { title : 'Javaプログラミング アプリケーション編', 

                author : '伊賀敏樹', isbn : '4774116122', 

     description : 'Java入門書'}

              ]

              }

　Eclipseの［サーバー］ビューからサーバを再実行すると、図9のような画面が表示されます。

図9　JSONを利用したdojo.etableの画面

　ここでは、data.jsonを静的なファイルとして用意しましたが、サーブレットやJSPなどで動的に生成するようにすることにより、動的なテーブルを作成できます。

GoogleマップをJSPから手軽に呼び出してみよう

　最後に、Googleマップのアプリケーションを作ってみましょう。［スニペット］ビューの［google］タブから［map］を選択し、index.jspへドラッグ＆ドロップでコピーし、リスト4のようにします。

リスト4　Googleマップのアプリケーション

<%@ taglib prefix="a" uri="http://jmaki/v1.0/jsp" %>

              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

                  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

              <html>

              <head>

                  <meta http-equiv="Content-Type" content="text/html; 

                   charset=UTF-8">

                  <title>Default Page</title>

              </head>

              <body>

                  <h1>Default Page</h1>

              

                  <a:widget  name="google.map"

                      args="{ centerLat : 35.658632, 

                              centerLon : 139.745411 }" />

              </body>

              </html>

　サーバを再実行して、画面を表示すると、次のような画面になります。

図10　GoogleマップをJSPから呼び出した画面

　リスト4のargsに経度と緯度の座標を入力しますが、デフォルトの値を変更して日本のある場所の座標にしています。どこの座標かは実際にサンプルを実行して確認してください。

楽してAjaxアプリケーションを作ろう

　簡単ではありますが、jMakiプラグインを利用したAjaxアプリケーションの開発について紹介しました。jMakiは日本語のドキュメントは皆無で英語のドキュメントもまだ十分とはいえず、今回のサンプルアプリケーションも手探りで作成しました。しかしながら、そのシンプルさに十分な将来性を感じられたと思います。

　以前、Ajaxのアジャイル開発をサポートするプラグインとしてProject Zeroを紹介しました。こちらは、GroovyとJavaScriptという2つのスクリプト言語でアプリケーションを組み立てていくというアプローチでしたが、jMakiはタグライブラリで完全にJavaScriptをラップして開発者は標準のJavaの開発スキルだけで開発できるようにしようとしています。

　今回は非常に簡単な使用例なので、複雑なアプリケーションになってくるとJavaScriptを記述する必要が出てくると思いますが、顧客と仕様を詰めるための簡易なプロトタイプ程度あれば、非常に簡単に作成できそうです。

　jMakiはJSFやStrutsなどの既存のJavaのWebアプリケーションフレームワークと組み合わせて利用できるので、すでにJavaアプリケーションの開発のノウハウが蓄積している開発部隊に対しては、いままでの延長でAjaxアプリケーションが開発できるjMakiの方が良さそうです。今後も、jMakiの動向に注目したいと思います。

「次回」へ

「CoolなEclipseプラグイン」バックナンバー