Google Chart、Ajax、Project Zero、そして WebSphere sMash を使って賢いマッシュアップを作成する

ページオプション JavaScript を要するドキュメントオプションは表示されません サンプルコード 原文はこちら

レベル: 初級

Dan Jemiolo (danjemiolo@us.ibm.com), Advisory Software Engineer, IBM　

2008年 3月 25日

Google Chart は、開発者が単純な HTTP GET リクエストを使って図やグラフを生成できるという素晴らしいサービスです。このサービスではすべての機能が HTTP で使用できるようになっているため、Project Zero で作成された Web アプリケーションに簡単に統合することができます。この記事では、厄介な HTTP URL を構成しなくても Google Chart を使用できる Groovy スクリプトを例に、ユーザーが視覚的な方法で図やグラフを作成できる便利な Web インターフェースを作成する方法を実演します。Zero プラットフォームを使うといとも簡単にマッシュアップ・アプリケーションを作成できることを、このサンプル・プロジェクトを試すことで体験してください。

編集者からの注記: IBM® WebSphere® sMash および IBM WebSphere sMash Developer Edition は、非常に高い評価を受けた Project Zero のインキュベーター・プロジェクトをベースにしています。Project Zero は WebSphere sMash の開発コミュニティーであり、最新のビルドや、最新の機能、そしてコミュニティーのサポートを利用したアプリケーションを開発するための無料のプラットフォームを今後も提供していきます。

始める前に

この記事では、読者がすでに Project Zero M4 をダウンロードして、これを利用したアプリケーションを作成していることを前提とします。また、Zero のチュートリアルおよびサンプルで具体的に説明されている Groovy スクリプト、Ajax 手法、HTML についての基本を理解している必要があります。Project Zero および関連技術に関する入門資料へのリンクは、「参考文献」セクションを参照してください。

Project Zero コミュニティー Project Zero の Web サイトをざっと見て、Project Zero が最近の Web アプリケーションに強力な、しかも極めて単純な開発および実行プラットフォームをどのように提供するのかを確かめてください。コミュニティーではプロジェクト開発についての議論、開発者の支援を活発に行っています。あなたの意見もぜひお聞かせください。

はじめに: Google Chart API

Google Chart は、開発者が単純な HTTP GET リクエストで図やグラフを生成することができる素晴らしいサービスです。このサービスでは、クライアントが http://chart.apis.google.com/chart に、目的とするチャートのタイプを示すクエリー・パラメーターを 1 つ以上指定したリクエストを送信します。Google Chart API の開発ガイド (「参考文献」を参照) に記載されたクエリー・パラメーターの完全なリストを見るとわかるように、この API では現在、チャートのタイトル、レイアウト、色、軸、データ、凡例を含めた広範な属性を制御できるようになっています。図 1 に、API の簡単な実例を示します。

図の上で右クリックしてプロパティーを選択すると、そのチャートを生成するために使用された URL が表示されます。クエリー・ストリングのパラメーターが果たす個別の役割については以降のセクションで説明しますが、この URL の表示を調べて汲み取ることができる重要な点は、クエリー・パラメーターの名前はかなりありふれたものですが、すべてのパラメーターを組み合わせて 1 つの URL にすると長々とした扱いにくい URL になってしまうということです。そこで早速、次のセクションで Project Zero で実行される Groovy コードを使って、これらの複雑な URL を カプセル化します。

より RESTful なチャート API を公開する

ブラウザーでアドレス・バーだけを使ってチャートを作成できるのは便利ですが、実際にはこのことが、「はじめに」のセクションで説明した面倒の元となっています。アドレス・バーでチャートを作成できるということは開発者以外の目から見ると便利なようでも、サンプルが複雑になってくると、URL があまりにも長くなってしまうだけです。それよりも有効な設計手法は、HTTP POST と JSON を使ってチャートを作成する方法を公開し (開発者用)、それをベースにしたグラフィカル・インターフェースを提供することです (非開発者用)。こうすれば、開発者と非開発者の両方にとって、チャートのレイアウトやデータの問題をデバッグしやすくなります。Project Zero では、チャート URL の作成を Groovy スクリプトでカプセル化し、そのスクリプトを HTTP によって呼び出す Ajax ベースの Web インターフェースを作成することによって、この手法を実装することができます。

サンプル・プロジェクトの作成

作業成果を公開するためには、2 つのプロジェクトを作成する必要があります。1 つは Groovy ラッパー・コードを保持するプロジェクト、そしてもう 1 つはサンプル Ajax UI を保持するプロジェクトです。そこで、zero.charts と chart.maker という名前の 2 つの Zero アプリケーションを作成し、それぞれに Groovy コード、Ajax コードを持たせるようにします。このように 2 つのプロジェクトを別々にしておくと、さまざまなアプリケーションが簡単に Groovy コードを再利用できるようになります。それではまず、zero.charts アプリケーションでの作業に取り掛かりましょう。

Groovy でのチャート URL の生成

Groovy によるチャート作成の簡易化に向けた最初のステップは、チャートの詳細を指定するためのデータ構造を定義することです。Google Chart で使用しているパラメーター名ではなく、JSON を使ってより詳細なデータ構造を定義します。JSON を使うということは、標準データ型 (例えば、シリアライズしてカンマで区切った整数ではなく、整数の実際の配列など) に依存できるということなので、チャート・ジェネレーターに渡される値が確認しやすくなります。リスト 1 に、Ajax クライアントと Groovy スクリプト間での通信に使用するデータ構造を記載します。

                
    
    {
        title: "Sales for 1H 2008",
        type: "bvg",
        height: 300,
        width: 300,
        data: [34, 21, 28, 19, 48, 40],
        xaxis: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
        yaxis: [0, 40]
    }
      

リスト 1 に記載したような JSON オブジェクトは、開発時に FireBug や単純な JavaScript アラートなどのツールを使って検査することができます。そのため、例えば http://chart.apis.google.com/chart?cht=bvg&chs=500x600&chtt=Sales%20for%201Q%202008&
chd=t:134,219,188&chxt=x,y&chxl=0:|Jan|Feb|Mar|1:||300 のような長いストリングに比べ、デバッグと検証が遥かに簡単になります。

もちろん結局のところ、このような URL を Google のサーバーに送信しなければ希望のチャートを入手できないことには変わりありません。それには JSON オブジェクトのフィールド値をチャート URL にコピーする単純な Groovy メソッドを作成することになりますが、Groovy の GString 型の助けを借りれば、java.lang.StringBuilder を作成して値を 1 つずつ追加しなくても URL を 1 行にすることができます。この Groovy メソッドのコードはリスト 2 のとおりです。

                
      
    def create(chart)
    {
        return "http://chart.apis.google.com/chart?chxt=x,y" + 
               "&cht=${chart.type}&chs=${chart.width}x${chart.height}" + 
               "&chtt=${chart.title}&chd=t:${chart.data.join(',')}" + 
               "&chxl=0:|${chart.xaxis.join('|')}|1:|${chart.yaxis.join('|')}";
    }      
      

リスト 2 のコードの大部分では、直接 JSON オブジェクトから値を取り、($ 構文を使用して) URL に組み込んでいます。値を直接取っていないのは、JSON フィールドが配列の箇所だけです。この場合、配列の値は連結された単一のストリングにしなければなりませんが、join() メソッドを使えば簡単に値を連結することができます。

リスト 2 のコードは、/zero.charts/app/scripts/charts.groovy ファイルにコピーしてください。このコードを /app/scripts ディレクトリーに配置することによって、アプリケーション内の他のすべての Groovy スクリプトだけでなく、依存関係のリストに zero.charts を持つあらゆるアプリケーションがこのコードを使えるようになります。コードを簡単に再利用可能にするための最後のステップは、コードの Groovy バインディングを作成することです。こうすれば、開発者は Zero の汎用 invokeMethod() を使わなくても、自分たちのコードから直接 create() を呼び出すことができます。Groovy バインディングを追加するには、リスト 3 の Java™ クラス定義を /zero.charts/java ディレクトリーにコピーしてください。太字で記載した行は、このバインディングを提供しなかった場合に開発者が入力することになった行です。

                

    package zero.charts;

    import java.io.FileNotFoundException;
    import java.util.Map;

    import org.codehaus.groovy.runtime.MethodClosure;

    import zero.core.groovysupport.bindings.InvokeBindings;

    public class ChartsBindings extends InvokeBindings
    {
        public void addVariables(Map<String, Object> variables)
        {
            super.addVariables(variables);
            variables.put("create", new MethodClosure(this, "create"));
        }
        
        public Object create(Map<String, Object> chart) 
            throws FileNotFoundException, NoSuchMethodException
        {
            return invokeMethod("charts.groovy", "create", new Object[]{ chart });
        }
    }
      

先に進む前に、リスト 3 の create() に渡すパラメーターの型が java.util.Map であることに注意してください。Zero では、JSON オブジェクトと Map は同じことです。Zero のすべての入出力 API には、状況に応じて Map を JSON に、あるいは JSON を Map にシリアライズする方法があるので、JSON オブジェクトを操作するためだけの特別な API を学ぶ必要はありません。

リスト 3 の Java クラスを用意できたら、後はこのクラスを構成ファイルに登録して Zero にその存在を認識させるだけです。Groovy バインディングが機能して create() への呼び出しが適切に解決されることを確実にするためには、リスト 4 のテキストを /zero.charts/config/zero.config に追加してください。

                
    
    /config/bindings/.groovy += ["zero.charts.ChartsBindings"]
      

HTTP POST によるチャートの要求

URL 構成コードが準備できたので、後はこのコードを RESTful な API で公開すればよいだけです。その方法として、charts という名前の RESTful なリソース・タイプを作成し、HTTP POST メソッドを使ってチャート仕様 (JSON) を受け入れ、チャート URL を返します。この振る舞いは、RESTful なアプリケーションに通常実装される振る舞いとは少々異なります。一般的には、HTTP POST の結果として実行されるコードはリクエスト URI と同じドメインにリソースを作成し、その新しいリソースの URI を返します。しかしこの場合は、Google Chart サービスを指す URI を構成することによってリソースを「作成」し、その URI を辿ったクライアントがチャートを取得することになります。したがって、サービスによって実際に作成されて返されるのは、HTTP レスポンスの Location ヘッダーに含まれるチャート URI だけです。

リスト 5 に、charts リソースの Groovy コードを記載します。このコードの唯一の HTTP メソッドは、onCreate() メソッドに実装された POST だけです。このコードは、/zero.charts/app/resources/charts.groovy ファイルにコピーしてください。

                
    
    import zero.json.Json;
    
    /**
     *
     * @success 201 Returns the URI for the desired chart in the Location header.
     * @error 500 The chart definition in the request body was not valid JSON.
     * @format application/json
     *
     */
    def onCreate()
    {
    	def chart = Json.decode(request.input[]);
    	
    	def chartImageURL = create(chart);
    	
    	request.headers.out.Location = chartImageURL;
    	request.status = 201;
    }
      

ユーザー・インターフェースに取り掛かる前に、RESTdoc テスト・インターフェースを使ってこの REST API をテストしてください。まず、zero.charts アプリケーションを起動して (zero run)、Web ブラウザーで http://localhost:8080/resources/docs/charts にアクセスします。すると charts リソースには 1 つのメソッド (POST) があることがわかります。このメソッドをクリックするとテスト・フォーム (図 2 を参照) が表示されるので、リクエスト本文にリスト 1 の JSON データをコピーして Send をクリックしてください。表示されるレスポンスに含まれる Location ヘッダーには、Google Chart の URI が表示されるはずです。

アプリケーションで REST API を使用する準備はこれで整いました。次のセクションでは、Ajax を使ってビジュアル・チャート・ビルダーを作成する方法を説明します。

より便利なインターフェースを設計する

REST API は、開発者がチャートを簡単に生成できるようにするためには役立ちますが、その一方、コーディングは作成しないけれども、たまに文書やプレゼンテーション用に図やグラフを作成することがあるというコンピューター・ユーザーの 99% にとっては役に立ちません。そのようなユーザーのためには、HTML フォームと多少の JavaScript、そして最も単純な Ajax API である XMLHttpRequest を使って単純な Web ベースのチャート・ビルダーを作成することができます。このチャート・ビルダーは最終的には、図 3 のようにWeb ページの片側にユーザーがチャートの説明を入力すると、もう片側に生成されたチャートを表示することになります。

このユーザー・インターフェースに取り掛かるには、まず、chart.maker アプリケーションと zero.charts アプリケーションとの間に依存関係を作成する必要があります。それには、zero:zero.charts を /chart.maker/config/ivy.xml に追加してください。次の 2 つのセクションでは、このインターフェースに必要なマークアップとコードの最も重要な部分について説明します。完全なマークアップとコードを確認するには、この記事に付属のサンプル・プロジェクトをダウンロードして、chart.maker プロジェクトを調べてください。

ユーザー入力と API 入力との対応付け

図 3 を見るとわかるように、ユーザーがチャートの詳細を指定するために必要なフォームはかなり単純なものです。1 つの入力値を除き、フォーム上のすべての入力は比較的簡単に、必要な JSON フォーマットに変換することができます。追加のステップが必要となる唯一の入力はチャート・タイプ (Type) です。Google Chart API ではチャート・タイプを 2 文字または 3 文字の略語で表現する一方、フォームにはチャート・タイプの完全な記述が表示されます (折れ線グラフ (Line Graph)、棒グラフ － 垂直(Bar Chart - Vertical)、および棒グラフ － 水平 (Bar Chart - Horizontal))。そのため、HTML ドロップダウン・メニューでは、これらの記述と略語 (lc、bvg、および bhg) とを対応付けなければなりません。リスト 6 に、この HTML ドロップダウン・メニューに必要な定義を示します (チャート・タイプのコードは太字で記載)。これ以外のすべてのフォーム入力は、単純なテキスト・ボックスです (<input type="text"/>)。

                
      
    <select id="chartType">
      <option value="lc">Line Graph</option>
      <option value="bvg">Bar Graph - Vertical</option>
      <option value="bhg">Bar Graph - Horizontal</option>
    </select>   
      

ドロップダウン・メニューのマークアップに加え、このコントロールほどには馴染みのない項目のメニューから選択された値を取得するためのコードも提供します。単純なテキスト・ボックスとは異なり、コントロールの value プロパティーをそのまま読み取ることはできません。現在 selected の状態になっている値が見つかるまで、ドロップダウン・メニューの選択肢を繰り返し処理する必要があります。そのために必要なコードは、リスト 7 のとおりです。

                
    
    function getSelection(elementName)
    {
        var select = document.getElementById(elementName);
        
        for (var i = 0; i < select.options.length; i++)
            if (select.options[i].selected)
                return select.options[i].value;
        
        return null;
    }
      

フォームの下部に表示される Create It! ボタンも同じく重要な UI 要素です。このボタンを使ってフォームを送信する代わりに、ここでは REST API に対して Ajax リクエストを行う JavaScript 関数にこのボタンをリンクさせます。その方法は簡単で、JavaScript 関数呼び出しをボタンの onClick イベントに追加するだけです。リスト 8 で、ボタン・クリックによってリンクされる createChart() 関数は、次のセクションで実装します。

                
    
    <input type="button" value="Create It!" onClick="createChart();"/>
    

最後に詳細を説明する UI 要素は、生成されたチャートを表示する画像です。リスト 9 に、ページのロード時には表示されない HTML <img/> タグの作成方法を示します。JavaScript を使用して、タグのソースを生成されたチャートの URL に設定してからタグを表示させます。

                
    
    <img id="chartImage" style="display:none;" src=""/>
    

以上で説明したマークアップとコードをすべてまとめて確認するには、chart.maker サンプル・プロジェクトに含まれる /public/index.html ファイルを調べてください。次のセクションで説明する Ajax 指向の JavaScript (同じくこのファイルに含まれています) がこれらの UI 要素を操作し、ユーザーの入力を反映したチャートを表示します。

生成されたチャートのAjax による表示

REST API を利用するということは、createChart() 関数を実装して、この関数がすべてのフォーム入力値を読み取り、それらの値を JSON オブジェクトにパッケージ化し、パッケージ化された JSON オブジェクトを HTTP POST リクエストの一部として charts リソースに送信するということです。HTTP POST リクエストが完了すると、レスポンスの Location ヘッダーからチャート URL を読み取ってチャート画像のソースを (再) 設定することになります。そのためのコードをリスト 10 に記載します。

                
    
    function getHttpClient()
    {
        var hasXHR = window.XMLHttpRequest;
    	return hasXHR ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    }

    function createChart()
    {
        // step 1
    	var chart = {
    		title: getValue("chartTitle"),
    		type: getSelection("chartType"),
    		height: getValue("chartHeight"),
    		width: getValue("chartWidth"),
    		data: getValues("chartData"),
    		xaxis: getValues("xaxis"),
    		yaxis: getValues("yaxis")
    	};
        
        // step 2
    	var http = getHttpClient();
    	http.open("POST", "/resources/charts", true);
    	
        // step 3
    	http.onreadystatechange = function() {
    		if (http.readyState != 4)
    			return;
    		
    		var chartImage = document.getElementById("chartImage");
    		chartImage.src = http.getResponseHeader("Location");
    		chartImage.style.display = "block";
    	}
    	
        // step 4
    	http.send(JSON.stringify(chart));
    }
    

以下に、上記のコードについて順を追って説明します。

createChart() ではまず最初のステップで、適切な名前と値のペアを設定した JSON オブジェクトを作成します。getValue(s) メソッドは、リスト 7 の getSelection() メソッドと同様の単純なユーティリティーです。このメソッドの実装はかなり平凡なものなので、サンプル・プロジェクトに目を通せば理解することができます。ここで注意すべき重要な点は、フィールド名が /app/scripts/charts.groovy ファイルで要求される名前と一致し、値が適切なフォーマットであるということです。

2 番目のステップでは、XMLHttpRequest オブジェクトを作成し、HTTP POST リクエストを /resources/charts に対して送信します。getHttpClient() メソッドには、適切な Web ブラウザーの適切なクラスを確実にインスタンス化するための条件節がありますが、ここではその条件節は記載していません。

3 番目のステップでは、リクエストを送信してレスポンスを受け取った後の動作を定義します。この例では、Location ヘッダーの値を取得し、それを使って chartImage.src の値を設定することになります。続いて chartImage スタイルを変更し、チャートがユーザーに表示されるようにします。

最後のステップは、HTTP POST リクエストの送信です。これには JSON オブジェクトを HTTP POST リクエストの本文に配置可能なストリングに変換するという作業が伴います。JSON をストリングに変換する標準 API はないため、ここでは http://json.org のオープンソース・ライブラリーを使用しています。createChart() の最後にある JSON.stringify() API 呼び出しが定義されている json2.jsファイルは、http://www.json.org/json2.js から入手することができます。この JavaScript ライブラリーを http://json.org からダウンロードして、/chart.maker/public ディレクトリーに追加してください。このライブラリーを配置すれば、createChart() の最終行は問題なく実行されます。

まとめ

この記事では、巧妙なマッシュアップ・アプリケーションを作成し、その作成プロセスのなかで Google Chart API を Zero アプリケーション全体でより簡単に再利用できるようにする方法を説明しました。サンプルの Ajax インターフェースでは、ビジュアル・チャート・ビルダーで考えられる基本的な機能しか使っていませんが、サーバー・サイド・コードは他にも追加可能なあらゆるコードをサポートすることができます。価値の高いサービスとデータの前面に RESTful な API を配置する場合、またしても Zero による Groovy スクリプトの統合が大幅な時間の節約になることが実証されました。

上に戻る

ダウンロード

	ダウンロード形式について

参考文献

• Google Chart API が実現する内容を学んでください。
  
  
• Project Zero の入門編としては、「Get started with Project Zero and PHP」(Get started with Project Zero and PHP、2008年1月更新) がお勧めです。
  
  
• developerWorks Ajax resource center には、精巧な Ajax アプリケーションを今すぐ開発するためのツール、コード、そして情報が満載されています。
  
  
• Web development ゾーンには、開発世界で今注目を集めている Web 2.0 に関する資料が続々と追加されています。
  
  
• PHP エリアで PHP に関する最新情報を調べてください。
  
  
• developerWorks Project Zero スペースでは、Project Zero を使って今すぐ開発を始められるリソースを豊富に揃えています。
  
  
• developerWorks には Project Zero に関する記事が続々と増えています。
  
  

• Project Zero M4 をダウンロードして、この記事で説明したプロジェクトを再現してみてください。
  
  

• projectzero.org のディスカッション・フォーラムに参加してください。
  
  
• developerWorks blogs: developerWorks コミュニティーに参加してください。

著者について

		Dan Jemiolo はノースカロライナ州リサーチ・トライアングル・パークにある IBM の Project Zero チームの Advisory Software Engineer です。彼は現在、Zero プラットフォームの再利用可能コンポーネントとそのサービス・カタログに取り組んでいます。以前の職務には Apache Muse 2.0 の設計および開発、そして OASIS Web サービス標準化団体への参加などが含まれます。彼は Rensselaer Polytechnic Institute でコンピューター・サイエンスの修士号を取得した後、IBM に入社しました。

記事の評価

サイト改善のため、ご意見をお寄せください。こちらのフォームからお願いいたします。 この情報はお客様が目的を達成するうえで役に立ちましたか？ はい いいえ わからない   お気軽にご意見・ご感想をお寄せください。   この記事は役に立ちましたか？ 1 2 3 4 5 不充分・不完全である 大変素晴らしい

この記事を共有する del.icio.us newsing FC2ブックマーク Choix！ ニフティクリップ Yahoo!ブックマーク MM/memo CZブックマーク livedoorクリップ はてなブックマーク Buzzurl（バザール）

上に戻る