CoolなEclipseプラグイン（22）

JavaScriptを書かずにAjaxを実現するjMaki

岡本隆史
2007/11/7

　Ajaxアプリケーションを開発するには、JavaScriptとJavaの2つの性質の異なる言語を利用する必要があり、開発者を悩ませています。今回は、Ajaxアプリケーションの開発を簡単にするライブラリjMakiとそのEclipseプラグインについて解説します。

便利なJavaScriptライブラリが悩みのタネ？

今回の主な内容 ・ jMaki Java版の4つの主な特徴 ・ jMaki用Eclipseプラグインのセットアップ ・ Hello jMakiアプリケーションの作成 ・ jMakiでJSONを使って通信するには？ ・ GoogleマップをJSPから手軽に呼び出してみよう ・ 楽してAjaxアプリケーションを作ろう

　Ajax開発に欠かせないJavaScriptには現在prototype.js、ｊQuery、Dojo、script.acul.us、Yahoo UI Libraryなど実にさまざまなライブラリ（フレームワーク）が提供されていて、その利便性から開発の役に立っています。しかし、これらのライブラリを組み合わせて利用するには、各ライブラリの利用方法を習得する必要があり、開発者の悩みのタネになることもあります。

編集部注：Ajaxライブラリについて詳しく知りたい読者は、リッチクライアント＆帳票フォーラムの記事「Webアプリに使えるAjaxライブラリ8選！」をご参照ください。

■ JavaScriptを「巻き」込むjMakiとは？

　jMakiは、これらのJavaScriptライブラリをラップしてJava、Ruby、PHP、Phobos（軽量で、スクリプト言語と親和性の良いWebアプリケーションの実行環境です。詳細はこちらをご覧ください）から簡単に利用できるようにするライブラリです。jMakiのMakiは、日本語の「包み込む」という意味を持つ「巻」に由来し、正に既存のJavaScriptライブラリを巻いて使いやすくしたライブラリといえます。

ｊMakiのプロジェクトサイト

　そして、jMakiは現在Java用の配布とPHP用の配布が提供されていて、Java版に関してはNetBeansやEclipseで利用できるプラグインを提供しています。ここでは、Java版のEclipseプラグインを利用して、jMakiの簡単なアプリケーションを作成してみます。

jMaki Java版の4つの主な特徴

　jMaki Java版には、次のような特徴があります。

■ 【1】JavaScriptライブラリを透過的に扱えるタグライブラリを提供

　1つのWebアプリケーション内で複数のJavaScriptライブラリを利用する場合、ライブラリによっては利用方法が異なったり、インクルードするJavaScriptファイルがたくさんあったりと、手間が掛かります。jMakiを利用すると、jMakiのタグライブラリをインクルードしてカスタムタグを利用するだけで利用できます。

■ 【2】JavaScriptを意識しない開発が可能

　Javaを利用してAjaxアプリケーションを開発するには、通常JavaとJavaScriptの2つの言語の知識が必要となります。JavaScriptフレームワークを利用したとしても、ある程度JavaScriptのコーディングが必要となってしまいます。

　jMakiを利用するとカスタムタグを利用してJavaScriptライブラリを利用するので、JavaScriptを意識することなしに、Ajaxアプリケーションを記述できるようになります。例えば、Dojoのテーブルを表示するコードは次のように非常にシンプルになります。

jMakiのJSPでの記述例

<%@ taglib prefix="a" uri="http://jmaki/v1.0/jsp" %> …（略）… <a:widget name="dojo.table" service= "/data.json" />

■ 【3】HTTPプロキシを提供

　イントラネットなどで、各端末から外部のネットワークにアクセスできないような環境の場合、マッシュアップアプリケーションなどで、インターネット上のほかのWebサービスを利用するのは困難です。かといって、外部のネットワークへの接続を許可すると、セキュリティレベルが下がってしまいます。

　jMakiでは、HTTPプロキシクライアントを用意しており、セキュアに外部のWebサービスを利用できます。

■ 【4】開発ツールを提供

　EclipseやNetBeansで利用できる開発ツールをプラグインとして提供しています。Ajaxアプリケーションを作成する際には、JavaScriptやCSSをプロジェクトに配置してHTML／JSPの中でインポートする必要があります。また、複数のJavaScriptフレームワークを利用する場合、配置やインポートだけで手間になりますが、jMaki用のプラグインを利用すると利用したいウィジットを配置するだけで自動的に必要なJavaScriptやCSSファイルをプロジェクトへコピーしたり、JSP／HTML内でインポートを行ってくれます。

　それではEclipseを利用しながら、簡単なjMakiアプリケーションを作成してjMakiの使用方法を修得しましょう。

jMaki用Eclipseプラグインのセットアップ

　まず、プラグインのインストール、サーバの設定、プロジェクトの作成を通して、開発を行う準備を行います。本稿では、Eclipse IDE for JavaEE 3.3.1にPleiades1.2.0を適用して日本語化したEclipseを利用して検証しました。

　Eclipse IDE for JavaEEとPleadesをあらかじめインストールしておいてください（参照：CoolなEclipseプラグイン（特別編）「徹底解剖!! Eclipse3.3 Europaの“新世界”」）。

■ プラグインのダウンロード＆インストール

　こちらのアップデートサイトから、jMakiプラグインをインストールします。本稿では、jMakiプラグイン 1.0を利用しました。

■ アプリケーションサーバの設定

　WTP（Web Tools Project）で利用するアプリケーションサーバを設定します。サーバの作成は、通常のWTPでサーバの設定を行う手順と同じで、Eclipseのメニューの［ファイル］→［新規］→［サーバー］から作成します。

編集部注：WTPについて詳しく知りたい読者は、「Webアプリのための標準プラグイン「WTP」」をご参照ください。

　ここでは、Tomcat 6.0.14を利用して検証しました。jMakiプラグインでは、Servlet 2.5／JSP 2.1に準拠したアプリケーションサーバに対応する設定ファイルを出力します。Servlet 2.5／JSP 2.1に対応したアプリケーションサーバを利用してください。

編集部注：Tomcat 6.x系について詳しく知りたい読者は、「“安全”のためにTomcatを理解し、構築し、動作させる」をご参照ください。

■ 動的Webプロジェクトの作成

　プラグインのインストール、サーバの設定が完了したらプロジェクトを作成しましょう。Eclipseのメニューの［ファイル］→［新規］→［プロジェクト］→［Web］→［動的Webプロジェクト］（図1）を選択します。

図1　［動的Webプロジェクト］の選択

　［プロジェクト名］を入力、［ターゲット・ランタイム］で［Apache Tomcat v6.0］を選択します（図2）。ここでは、［プロジェクト名］を「sample」とします。

図2　動的Webプロジェクトの作成

　プロジェクト・ファセット（要素）の設定画面で［jMaki Ajax］にチェック（図3）を入れ、［終了］をクリックします。

図3　プロジェクト・ファセットの設定

　では、次のページからjMakiを使ったAjaxアプリケーションの簡単な作り方を解説します。

1-2-3

INDEX
	Page1
	便利なJavaScriptライブラリが悩みのタネ？ jMaki Java版の4つの主な特徴 jMaki用Eclipseプラグインのセットアップ
	Page2
	Hello jMakiアプリケーションの作成
	Page3
	jMakiでJSONを使って通信するには？ GoogleマップをJSPから手軽に呼び出してみよう 楽してAjaxアプリケーションを作ろう

Java Solution全記事一覧

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）