SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

developerWorks Liaison(AD)

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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の技術情報のサイトをご覧ください。

参考資料

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
developerWorks Liaison連載記事一覧

もっと読む

この記事の著者

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

 日本アイ・ビー・エム株式会社 ソフトウェア事業 エバンジェリスト。 2002年頃よりパーベイシブ・コンピューティング分野(音声、モバイル、etc.)のソフトウェア製品の技術支援に従事。ここ数年はEclipseベースのリッチ・クライアント・テクノロジーであり、Notes8のベース技術ともなっているLotus Expeditorを中心にLotusブランドにてテクニカル・セールスとして活動。2008年からはIBM Mashup Centerという新製品でエンタープ...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/4542 2009/11/02 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング