CodeZine(コードジン)

特集ページ一覧

企業システムでも使われるウィジェット技術
第1回 「IBM共通のウィジェット技術iWidget」

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2009/11/02 14:00

目次

RSSリーダー

 さて、前述のHelloWorldのようにウィジェット定義ファイルにコンテンツを直接記述したのでは、静的なアプリケーションしか書けません。動的にバックエンドから取得したデータを表示するようなアプリケーションはどのように書けばよいのでしょうか? 外部リソースとしてRSSフィードを読み込んで表示するもう少し高度な例を使って解説したいと思います。

図9 ウィジェット動作例
図9 ウィジェット動作例

 今回用意するファイルは2つ、ウィジェット定義ファイルと、アプリケーションロジックを記述したJavaScriptファイルです。

サンプル3:FeedReaderWidget.xml
<?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ファイルがこちらです。

サンプル4:widget.js(アプリケーションロジック)
// クラス宣言
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の動作の仕組みを追うとともに、基本的なアプリケーションの記述方法をご紹介しました。

図10:iWidget動作の流れ
図10: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の技術情報のサイトをご覧ください。

参考資料



  • LINEで送る
  • このエントリーをはてなブックマークに追加

あなたにオススメ

著者プロフィール

  • 森谷 直哉(モリタニ ナオヤ)

     日本アイ・ビー・エム株式会社 ソフトウェア事業 エバンジェリスト。  2002年頃よりパーベイシブ・コンピューティング分野(音声、モバイル、etc.)のソフトウェア製品の技術支援に従事。ここ数年はEclipseベースのリッチ・クライアント・テクノロジーであり、Notes8のベース技術ともなってい...

バックナンバー

連載:developerWorks Liaison

もっと読む

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5