RSSリーダー
さて、前述のHelloWorldのようにウィジェット定義ファイルにコンテンツを直接記述したのでは、静的なアプリケーションしか書けません。動的にバックエンドから取得したデータを表示するようなアプリケーションはどのように書けばよいのでしょうか？ 外部リソースとしてRSSフィードを読み込んで表示するもう少し高度な例を使って解説したいと思います。
今回用意するファイルは2つ、ウィジェット定義ファイルと、アプリケーションロジックを記述したJavaScriptファイルです。
<?xml version="1.0" encoding="UTF-8"?>
<iw:iwidget
name="HellodWWidget"
xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget"
iScope="com.ibm.jp.naoyam.samples.widgets.HellodWWidget"
supportedModes="view" mode="view">
<!-- このウィジェットの動作に必要なライブラリを記述
ここで読み込むライブラリのいずれかで、上記iScopeで指定するクラスを提供する-->
<iw:resource uri="widget.js"/>
<iw:content mode="view">
<![CDATA[<div id="_IWID_VIEWROOT"></div>]]>
</iw:content>
</iw:iwidget>
先ほどの例に以下の要素が加わっています。
- <iw:iwidget>要素では、iScope属性が設定されています。iWidgetでは、ウィジェットのアプリケーションロジックをつかさどるのはJavaScriptのオブジェクトです。このiScopeで指定されたJavaScriptのクラスのインスタンスがこのウィジェットに割り当てられます
- <iw:resource>要素によって、外部のJavaScriptファイルを明記しています。この中では、先ほどiScopeで指定されていたJavaScriptのクラスを提供する.jsファイルのURLを指定します。
- <iw:content>要素の中、今回は目印となるタグを除けば具体的コンテンツは空のままです。アプリケーションロジックでコンテンツを外から書き換えることにします。id属性を割り当てることで書き換える箇所を特定しやすくしています。
続いて、アプリケーションロジックのJavaScriptファイルがこちらです。
// クラス宣言
dojo.declare("com.ibm.jp.naoyam.samples.widgets.HellodWWidget", null, {
domID: null,
/**
* LifeCycle イベント。ウィジェットがロードされたときに呼ばれる
*/
onLoad: function(){
// このように記述することで、Firebugなどのコンソールにメッセージ出力
console.log("HellodWWidget#onLoad");
/**
* 1つのページに同じウィジェットを2つ以上配置しても識別できるよう、
* フレームワークは各ウィジェットにユニークなIDを割り当てる。
* このIDはウィジェット内のタグのプレフィックスとしても使われ、ページ内の
* 特定の要素にアクセスしたいときに多用するためメンバー変数に格納
*/
this.domID = "_" + this.iContext.widgetId + "_";
console.log(this.domID);
},
/**
* LifeCycle イベント。VIEWモードになったときに呼ばれる
*/
onview: function(){
console.log("HellodWWidget#onview");
//コンテンツの取得・描画を行うfunctionを対象RSSフィードを指定してコール
this.renderfeed("http://www.ibm.com/developerworks/jp/rss/dw_dwjp.xml");
},
renderfeed: function(url){
console.log("HellodWWidget#renderfeed");
// ここではDojoが提供するAPIを仕様してAjaxコールを発行します
dojo.xhrGet({
/**
* iWidgetフレームワークが提供するプロキシーコンポーネントを介してリモートリソースを取得。
* iContext.io.rewriteURIでリモートリソースのURLがプロキシー経由のURLに変換。
* オリジナル： http://www.ibm.com/developerworks/jp/rss/dw_dwjp.xml
* 変換後: /mum/proxy/http/www.ibm.com/developerworks/jp/rss/dw_dwjp.xml
*/
url: this.iContext.io.rewriteURI(url),
mywidget: this,
handleAs: 'xml',
load: function(response){
var title = dojo.query("title", response)[0].textContent;
var items = dojo.query("item", response);
// 取得したフィードからHTML組み立てています
var buff = "<div><b>" + title + "</b></div>";
dojo.forEach(items, function(item){
var title = dojo.query("link", item)[0].textContent;
var link = dojo.query("link", item)@[0].textContent;
buff += "<div><a";
buff += " href='" + link + "'";
buff += " target='_blank'";
buff += ">";
buff += title;
buff += "</a></div>";
})
// dojo.byIdでIDが一意にわかる任意の要素を簡単に取得
dojo.byId(this.mywidget.domID + "VIEWROOT").innerHTML = buff;
}
})
}
});
いかがでしょうか？ 2つのサンプルを交えて、iWidgetの動作の仕組みを追うとともに、基本的なアプリケーションの記述方法をご紹介しました。
今回の例では利用していませんが、アプリケーションとして実現したい様々な機能を実装しやすいよう、フレームワークにはサーバーサイドのコードを使うことなくJavaScriptだけで利用できる下記をはじめとする機能も提供されています。
- 設定情報の永続化
- 1ページに同じウィジェットを複数配置しても識別できるユニークなIDの自動割り当て
- ユーザー情報の取得
- ウィジェットのメタ情報の取得
本解説からは割愛しますが、是非iWidget仕様を参考にお試しください。
IBM製品での採用状況
最後に、IBMのソフトウェア製品やテクノロジーでiWidget対応をしているものは次々に出てきています。ここではその一部を名称だけですがご紹介します。
iWidgetを自由に組み合わせて表示できる製品
iWidgetをユーザー・インターフェースの中に配置することができる製品群です。
- IBM Mashup Center / IBM Lotus Mashups
- IBM Lotus Connections
- IBM WebSphere Portal
- WebSphere Business Space
iWidgetを提供する、あるいは対応するiWidgetが提供されている製品
汎用的なiWidgetを提供する製品、あるいは提供されたiWidget経由でアクセスすることができる製品の一部です。
- IBM Mashup Center / IBM Lotus Mashups
- IBM Lotus Forms / IBM Lotus Forms Turbo
- IBM Lotus Quickr
- IBM Lotus Sametime
- IBM FileNet P8
iWidgetを開発できるツール
iWidgetはテキストエディターだけで開発することも可能です、しかしながら、より生産性高く対象プラットフォームやスキルに応じたアプリケーション開発ができる下記ツールも提供されています。
- IBM Lotus Widget Factory
- IBM WebSphere Portlet Factory
- IBM WebSphere Dashboard Framework
- IBM WebSphere sMash
- IBM Rational Application Developer
- IBM Lotus Domino Designer
まとめ
連載第1回となりました今回は、世の中のウィジェット技術について、その有用性を示すとともに、標準化が進みきらずに混沌している状況であることをご説明しました。また、その状況下でIBMが力を入れて適用範囲を広げているiWidget仕様について、サンプルコードを交えて解説し、iWidget対応の製品についても一覧ではありますが、ご紹介しました。特定のプラットフォームや開発ツールに依存することなく、今お持ちのスキルの延長で使っていただける仕様となっていますので是非お試しください。
なお、今回ご紹介のコードはIBM Mashup Centerで稼働確認をしております。このIBM Mashup Centerは60日間無償トライアル版の他、インターネット上の無料でお試しいただける公開サイトLotus Greenhouseでも提供しておりますので、併せてご利用ください。詳しくはIBM Mashup Centerの技術情報のサイトをご覧ください。
