japan.internet.com翻訳記事

Jersey、AJAX、JSONを使ってRESTに挑戦しよう

RESTのメリットをJavaコードに簡単に取り込む方法

2009/12/09 14:00

ポスト

ダウンロードソースコード (30.3 KB)
ダウンロードカード画像ディレクトリ (56.4 KB)

JSON形式の画像をブラウザにレンダリングする

　ブラウザDOMに返されたJSON形式のオブジェクトRestCardに情報を設定する機能を提供するAJAXコールバックJavaScript関数を、リスト7に示します。コールバック関数の名前は、非常に単純ですがcallback()となっています。

リスト7　AJAX HttpRequestが正しく処理された場合に呼び出されるJavaScriptコード

function callback(){
  if(xmlhttp.readyState==4){
    //Create the card JSON object
    var card = eval( "(" + xmlhttp.responseText + ")" );
    //Get the <img> element
    var img = document.getElementById("cardViewer");
    //Apply the Base64 string, telling the image element about the nature of
    //the data
    img.src="data:image/" + card.fileFormat + ";base64," + card.image;
    //Put the card code in the image alt text
    img.alt = card.code;
    //Get the hidden element and apply the shoeId value
    var shoeId = document.getElementById("shoeId");
    shoeId.value = card.shoeId;
    //Also, display the shoeId value on the page          
    var shoeIdDiv = document.getElementById("shoeIdDiv");
    shoeIdDiv.innerHTML = card.shoeId;
    //Display the card code on the page          
    var cardCodeDiv = document.getElementById("cardCodeDiv");
    cardCodeDiv.innerHTML = card.code;
  }
}

　基本的に関数callback()は、RESTサーバから返された文字列であるxmlhttp.responseText（正式にはXMLHttpRequest.ResponseText）に対し、Javascriptであるeval()メソッドを実行します。eval()を実行することにより、文字列がJSON形式のRestCardオブジェクトに変換されます。文字列をオブジェクトに変換した後、JavaScriptは、Webページ上の関連するDOMオブジェクトを検出し、JSON形式のRestCardオブジェクトからの対応する値をDOMに代入します。上のJavaScriptから引用した、以下のコード行に着目してください。

img.src="data:image/" + card.fileFormat + ";base64," + card.image;

　このコードにより、コールバックの中のJavaScriptは、Base64文字列を画像としてWebページにレンダリングできます。この短いコードで、多くの処理が行われます。バイト列を、実行時に画像としてWebページに表示するという処理は、簡単な作業ではありません。これができるのは、data URLスキームを使用しているからです。

　data:[<mediatype>][;base64],<data>は、URLを純粋なデータとして定義するURLスキームです。これによって、Base64エンコードされた文字列を実行時に画素に変換できるのです。

コードの取得

　最後に、このプロジェクトで使用したJavaおよびJavaScriptソースコードを紹介します。表2は、各コードへのリンクの一覧です。また、各リンクの説明も示されています。

表2　CardDealerプロジェクトのソースコード

コードファイル名	説明	レイヤ
index.html	ランダムにカードを表示するWebページ	Webサイト
CardDealerRest.java	RESTサービスを公開するJersey Javaリソースクラス	REST
RestCard.java	カード画像としてBase64文字列を公開するファサードオブジェクト	REST
Card.java	カードを表すPOJO（Plain Old Java Object: 普通のJavaオブジェクト）	サービス
CardDealerHelper.java	ホストコンピュータ上の画像ファイルへのアクセスを提供するヘルパークラス	サービス
EmptyShoeException.java	Shoeの中のカードが空である場合に発生する例外	サービス
InvalidCardDeckException.java	画像ディレクトリに、必要な画像ファイルが揃っていない場合に発生する例外。画像ファイルはそれぞれ1枚のカードに対応し、ファイル名はCardDealerのカードコード命名規則に従って命名されている。	サービス
Shoe.java	カジノで見られるカードシューを抽象化したPOJO。ShoeにはShoeFactoryを介してアクセスする。	サービス
Shoeable.java	Shoeが提供する基本サービスを表すインターフェイス	サービス
ShoeFactory.java	Shoeオブジェクトを作成、提供、管理するシングルトン	サービス

まとめ

　以上、長い道のりを経て、やっとWebページにトランプのカードを表示することができました。しかし、ページ上にカードを表示するという処理は、RESTとJerseyの重要性と使い方を示すためのごく初歩的な例にすぎません。RESTはこれからも活躍の場を広げ、Jerseyはますます使用されるようになるでしょう。この記事では、JerseyアノテーションとURLパスの基本を習得すれば、非常に簡単にRESTのメリットをJavaコードに取り込めるということを示しました。この記事の内容が、読者の皆さんにとって有意義なものであったとすれば幸いです。

CardDealerサンプルプロジェクトのインストール

　この記事のサンプルプロジェクト「CardDealer」は、Mavenプロジェクトとして完全に構成されています。そのため、このコードを実行するには、使用しているマシンにMavenをインストールする必要があります（Mavenは、Windows、Linux、およびMac OSXにおいてサポートされています）。プロジェクトを起動するには、以下の手順に従ってください。

プロジェクトのソースコードzipファイル（card-dealer-1.0.zip）と、カード画像ディレクトリのzipファイル（card-deck.zip）をダウンロードします。
プロジェクトコードzipファイル（card-dealer-1.0.zip）をマシン上にunzipします。
プロジェクトの画像ディレクトリzipファイル（card-deck.zip）をマシン上にunzipします。
ファイル/YOUR_INSTALLATION_DIRECTORY/card-dealer-1.0/card-dealer-rest/src/main/webapp/WEB-INF/spring-context.xmlの中のノード<property name="imageDirectoryLocationFileSpec" value="LOCATION_OF_IMAGE_DIR_ON_YOUR_MACHINE" />に、画像ディレクトリの場所を設定します。
図5に示したように、ローカルなMavenリポジトリにコードをインストールします。
図6に示したように、Mavenの下でJettyWebサーバを起動します。
ブラウザで、http://localhost:9090/card-dealer-rest/index.htmlというURLを入力します。