IBM®
本文へジャンプ
    Japan [変更]    ご利用条件
 
 
検索範囲検索：    
    ホーム    製品    サービス & ソリューション    サポート & ダウンロード    マイアカウント    
skip to main content

developerWorks Japan  >  Information Management | Web development  >

クライアントサイドAPIを利用したAlphabloxアプリ開発ガイド

developerWorks
ページオプション

JavaScript を要するドキュメントオプションは表示されません


レベル: 中級

播磨 直寛 (nharima@jp.ibm.com), 情報マネジメント技術/ソフトウェア開発研究所, IBM

2006年 1月 13日

Alphabloxアプリケーションの開発手法には、これまでの記事でご紹介したように、JSP中にスクリプトレットなどを用いたコーディングを行うサーバーサイドAPIを利用する手法と、JavaScriptからサーバーサイドのJavaオブジェクトと連携を行うクライアントサイドAPIを利用する手法とがあります。もちろん、サーバーサイドAPIとクライアントサイドAPIを組み合わせて、要件に最適なアプリケーションを開発することも可能です。今回は、開発容易性およびユーザビリティーを高めるクライアントサイドAPIを用いた多次元分析アプリケーションを開発する手法について解説します。

クライアントサイドAPIを利用したAlphabloxアプリケーション開発

DB2 Alphabloxでは豊富なAPIが提供されていることが魅力のひとつとして挙げられますが、そのAPIを利用するに当たって次の方法があります。

  • JSP中にスクリプトレットなどを用いてサーバーサイドAPIを利用する手法
  • JavaScriptからサーバーサイドのJavaオブジェクトと連携を行うクライアントサイドAPIを利用する手法

クライアントサイドAPIを用いると、例えば照会を行った際に画面全体を更新することなく（画面更新時に現れる真っ白な画面を表示させることなく）更新が必要な部分のみを再描画することが可能なため、Alphabloxを用いて分析を行うユーザーの思考を妨げることなく分析をすることが可能となります。

ここではクライアントサイドAPIの特色とその利用方法について解説します。以下のサンプルではDB2 Cube Viewsへの照会を行う例があります。DB2 AlphabloxとDB2 Cube Viewsとの連携については次のサイトを参照ください。

http://www.ibm.com/developerworks/jp/ysl/library/db2/y-db2-alphablox4/

クライアントサイドAPIの特色

クライアントサイドAPIでは、クライアントサイドのJavaScriptからサーバーサイドのJavaオブジェクトと強力な連携を行うことができます。

AlphabloxではクライアントサイドAPIを用いる方法として次の方法があります。

  • BloxAPIオブジェクトを利用する方法
  • 各BloxのJavaScriptオブジェクトを利用する方法

ここでは、これらのオブジェクトの利用方法について触れていきます。

BloxAPIオブジェクトの利用

ブラウザー上の各フレームには、クライアントサイドとサーバーサイド間のトラフィックをコントロールする１つのBloxAPIオブジェクトが存在します。このオブジェクトが存在することにより、bloxAPIオブジェクトを通してJavaScriptからサーバーサイドのオブジェクトと連携し、サーバーへのポーリングによるイベントの送信およびJSPの呼び出し、またはサーバーサイドBeanでメソッドを呼び出すといったことが可能となります。このBloxAPIオブジェクトに使用可能なメソッドはいくつかありますので、詳細は以下を参照してください。

http://publib.boulder.ibm.com/infocenter/ablxhelp/8.3/topic/com.ibm.db2.abx.ref.doc/sii-clientapi-40475.html

以下では、JavaScriptによるcallBeanメソッドを利用してサーバーサイドAPIを呼び出すサンプルを示します。

ここでは、地域ごとのデータを取得するようなHTMLボタンを追加してみます。

  1. DataBloxオブジェクトのsetQueryメソッドを呼び出します。 オブジェクト名はidで指定されたものとなります。 setQueryメソッドは、Bloxオブジェクト名、メソッド名、パラメーターを引数にします。 パラメーターはArray型を利用することに注意してください。
  2. DataBloxオブジェクトのupdateResultSetメソッドを呼び出し、データの取得、書き換えを行います。
  3. HTMLボタンを追加します。ボタンが押された時にupdateData関数のパラメーターに地域名を渡して実行します。 ここでは、関東地方のデータについて照会を行っています。 
<%@ taglib uri="bloxtld" prefix="blox"%>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="Shift_JIS"%>
<HTML>
<HEAD>
<TITLE>BloxAPI Sample</TITLE>
<blox:header/>
</HEAD>
<SCRIPT>
function updateData(area){
	var query = "SELECT {[CarSalesCube].[時間]} ON AXIS(0), {[CarSalesCube].[地域].[" + area + "].
	CHILDREN} ON AXIS(1) FROM [CarSalesCube]";
	var result ; 
	result = bloxAPI.callBean("bloxAPIData", "setQuery", "new Array(query)");	…………… (1) 
	result = bloxAPI.callBean("bloxAPIData", "updateResultSet");	………………………… (2) 
}
</SCRIPT>
<BODY>
<blox:present id="BloxAPIPresent"
	width="100%"
	height="100%">
	<blox:data
	dataSourceName="AbxCube"
	query="SELECT FROM [CarSalesCube]"/>
	<blox:chart title="全国"/>
</blox:present>
</BODY>
</HTML></blox:present>
<INPUT TYPE="button" value="関東地方" onClick="updateData('関東');">	………………………… (3) 
</BODY>
</HTML>

このようにJavaScriptからサーバーサイドのBloxオブジェクトを簡単に利用することができます。このコードによる出力結果は以下の図のようになります。


図 BloxAPIオブジェクトを利用した照会結果
図 BloxAPIオブジェクトを利用した照会結果

各BloxのJavaScriptオブジェクトの利用

bloxAPIオブジェクトを利用する方法では、関東地方のデータを取得したのにも関わらずChartBloxのタイトルが「全国」のままとなっています。これは<blox:present>内にネストされている<blox:data>や<blox:chart>では、idパラメーターを定義することができないため、callBeanメソッドが使えないからです。これにより、 bloxAPIのcallBeanメソッドではネストされたBloxオブジェクトとの連携を行えません。そこで、このような場合に利用可能なAlphabloxオブジェクトについてここでは解説します。




上に戻る


BloxのJavaScriptオブジェクトの作成

この機能を使うには、JavaScriptオブジェクトやメソッドを定義する必要があります。

  1. <HEAD>タグより上の部分にBloxを定義します。 PresentBloxなど可視Bloxの場合はvisible="false"を指定して表示させないようにします。 この場合は、PresentBloxの中にDataBloxをネストすることはできないので、別々に定義します。
  2. <blox:header>タグの中に<blox:clientBean>タグにより、JavaScriptオブジェクトを作成するBloxを指定します。 nameプロパティにはBloxのidで指定された名前を指定します。
  3. 使用するサーバーサイドAPIのメソッドを宣言します。 PresentBlox内のChartBloxのsetTitleメソッドを呼び出す場合は chart.setTitle とキーワードを付加して定義します。 ネストされたBloxのメソッドはこのようにして定義することができます。
  4. <blox:display>タグでPresentBloxを表示させます。 
<blox:data id="bloxAPIData"				………………………… (1) 
query="SELECT {[CarSalesCube].[時間]} ON AXIS(0), {[CarSalesCube].[地域].[関東].CHILDREN} 
ON AXIS(1) FROM [CarSalesCube]"
dataSourceName="AbxCube"/>
<blox:present id="BloxPresent" visible="false">	………………………… (1) 
	<blox:data bloxRef="bloxAPIData"/>
</blox:present>
<HTML>
<HEAD>
<blox:header>
	<blox:clientBean name="BloxPresent">		………………………… (2) 
		<blox:method name="chart.setTitle"/>	………………………… (3) 
	</blox:clientBean>
	<blox:clientBean name="bloxAPIData">		………………………… (2) 
		<blox:method name="setQuery"/>	………………………… (3) 
		<blox:method name="updateResultSet"/>	………………………… (3) 
	</blox:clientBean>
</blox:header>
</HEAD>
<BODY>
<blox:display bloxRef="BloxPresent"/>		………………………… (4) 
</BODY>
</HTML>




上に戻る


BloxのJavaScriptオブジェクトの利用

ここで、上記サンプルコードを用いて以下のようにBloxのJavaScriptオブジェクトを使う形に修正します。

  1. DataBloxオブジェクトのsetQueryメソッドでquery属性を定義します。 JavaScriptオブジェクト名はbloxAPIDataでなく、語尾に'API'キーワードを付けた bloxAPIDataAPIとなります。
  2. DataBloxオブジェクトのupdateResultSetメソッドでデータの取得、書き換えを行います。
  3. PresentBloxオブジェクトのgetChartBloxメソッドでネストされたChartBloxオブジェクトを取得します。PresentBloxオブジェクトのJavaScriptオブジェクト名はBloxPresentAPIの他に通常通りBloxPresentも指定できます。
  4. ChartBloxオブジェクトのsetTitleメソッドでtitle属性を定義します。 
<blox:data id="bloxAPIData"
query="SELECT {[CarSalesCube].[時間]} ON AXIS(0), {[CarSalesCube].[地域].[関東].CHILDREN} 
ON AXIS(1) FROM [CarSalesCube]"
dataSourceName="AbxCube"/>
<blox:present id="BloxPresent" visible="false">
	<blox:data bloxRef="bloxAPIData"/>
</blox:present>
<HTML>
<HEAD>
<blox:header>
	<blox:clientBean name="BloxPresent"/>
		<blox:method name="chart.setTitle"/>
	<blox:clientBean name="bloxAPIData">
		<blox:method name="setQuery"/>
		<blox:method name="updateResultSet"/>
	</blox:clientBean>
</blox:header>
</HEAD>
<SCRIPT>
function updateData(area){
	var query = "<COLUMN ('MARKET') <SYM <CHILD '" + area + "' <ROW ('PRODUCT') <ICHILD 'PRODUCT' !";
	var result ; 
	result = bloxAPIDataAPI.setQuery(query);			………………………… (1) 
	result = bloxAPIDataAPI.updateResultSet();			………………………… (2) 
	var chart = BloxPresent.getChartBlox();			………………………… (3) 
	result = chart.setTitle(area);				………………………… (4) 
}
</SCRIPT>
<BODY>
<blox:display bloxRef="BloxPresent"/>
<INPUT TYPE="button" value="関東地方" onclick="updateData('関東');">
</BODY>
</HTML>

クライアントサイドAPIの動作について（<blox:present>タグの働き）

ここでbloxAPIオブジェクトとサーバーサイドのBloxオブジェクトとが連携して動作するクライアントAPIの仕組みについて説明します。

Alphabloxアプリケーションを記述するJSPに必要な<blox:present>により、JSPがコンパイルされる際にスタイルシートの宣言やJavaScriptの作成が行われます。このJavaScriptファイルには、各Bloxの画像やイベントなどのオブジェクトやAPIが定義されており、これらがクライアントサイドのAlphabloxオブジェクトを形成しています。また、bloxAPIオブジェクトの各メソッドは、XML　Webサービス機能を利用して、XMLHTTPを経由してサーバーサイドのオブジェクトと通信します。上記説明にあったcallBeanメソッドは、サーバーサイドの対象Bloxオブジェクトとメソッド名とパラメーターを指定すると、XMLHTTPを経由してサーバーサイドのオブジェクトに渡され、実行されます。 そして、実行結果がXMLHTTPを経由して最終的にJavaScriptで扱えるオブジェクトとして返されます。これにより、照会時のドリルダウン等によるデータ処理などの要求のやり取りがブラウザー裏で行われ、JSPページ全体がリフレッシュされることなく各Bloxのデータが更新されます。




上に戻る


まとめ

クライアントサイドAPIは、HTMLボタンやリストボックスによる選択といったブラウザー上でのイベント発生時に、JSPページをリフレッシュすることなく、Bloxオブジェクトを操作するような場面に適しています。

この大変便利な機能を利用するにあたり、下記点を理解の上使用する必要があります。

  • bloxAPIオブジェクトのメソッド呼び出しごとに、クライアントサイドとサーバーサイド間の通信が行われるため、callBeanやサーバーサイドのAPIの利用数が多いほど、ネットワークトラフィックに大きな負荷がかかることが想定されます。
  • JavaScript側では簡易的な例外などのエラー処理を行うことは可能ですが、各メソッドで例外がスローされた場合に、適切な処理が行なえない可能性があります。

上記点を理解することで、よりいっそう効果的な実装を行うことができます。



参考文献



著者について

播磨 直寛はソフトウェア開発研究所のエンジニアで、Business Intelligenceの分野におけるプロジェクトでの開発・支援業務を担当しています。




記事の評価


サイト改善のため、ご意見をお寄せください。こちらのフォームからお願いいたします。



はいいいえわからない
 


 


12345
不充分・不完全である大変素晴らしい
 


この記事を共有する

はてなブックマーク はてなブックマーク livedoorクリップ livedoorクリップ del.icio.us del.icio.us Buzzurl（バザール） Buzzurl（バザール） Choix！ Choix！
Saafブックマーク Saafブックマーク FC2ブックマーク FC2ブックマーク MM/memo MM/memo ニフティクリップ ニフティクリップ Yahoo!ブックマーク Yahoo!ブックマーク
CZブックマーク CZブックマーク newsing newsing




上に戻る


    日本IBMについて      プライバシー      お問い合わせ