はじめに

IBM Mashup Center は Web 2.0 ベースのシチュエーショナル・アプリケーション・プラットフォームであり、エンタープライズ環境でのデプロイメントに適したセキュリティー、ガバナンス、および管理機能を持つWeb アプリケーションの迅速な組み立てをサポートします。Mashup Center アプリケーションは、iWidget コンポーネント・モデルに基づいています。このコンポーネント・モデルの仕様は IBM によって定義され、iWidget Specification 2.0 (pdf : 385KB) で文書化されています。

上に戻る

背景

IBM は長年にわたり、リーダーそしてイノベーターとして Web 2.0 テクノロジーに取り組み、顧客自身がシチュエーションに応じたアプリケーションを迅速に構築およびデプロイできる再利用可能なコンポーネント・テクノロジーを定義しました。これを iWidget と呼びます。iWidget テクノロジーの中核となるのは iWidget コンテナーです。このコンテナーは iWidget のライフサイクルを管理し、IBM とそのお客様が幅広いコンテンツを画面上に集約し、強力なシチュエーショナル・アプリケーションを迅速かつ容易に作成することを支援します。今日では、iWidget とそのコンテナー (Mashup Enabler と呼ばれています) は、IBM WebSphere® Portal、IBM Lotus® Connections、および Business Process Manager (BPM) 製品群を含む幅広い IBM 製品で使用されています。

IBM のビジネス戦略は、お客様がそのニーズに最も一致したソリューションを構築できるように、高品質の製品を提供し、オープン・コンピューティング・テクノロジーを向上させることに重点を置いています。この戦略の一環として、IBM は OpenAjax Alliance (Tibco、Microsoft®、Adobe® などが含まれるエンタープライズ・ベンダーのグループ) と共同で作業し、相互運用を可能にするウィジェット・テクノロジーを作成してきました。

たとえば、コンシューマー領域では、OpenSocial と呼ばれる標準が登場しました。このコミュニティー主導の仕様により、ガジェットと呼ばれる、ブラウザー・ベースのコンポーネント・モデルが定義されています。また、OpenSocial によって、ユーザー・プロファイルに関する情報やソーシャル・グラフ (たとえば、友人、活動、共有アプリケーション、認証、権限など) にアクセスするための API が定義されています。The Apache Software Foundation の Shindig というオープン・ソース・プロジェクトでは、OpenSocial のリファレンス用の実装が提供されています。

業界の発展にともない、IBM などのリーダーたちは、顧客が固有のビジネス・ニーズに基づいて正しいコンポーネント・モデルを選択できるような戦略を提供しなければなりません。IBM は業界のリーダーとしてこれらのオープン・コミュニティーに取り組み、エンタープライズ機能を追加し、他のあらゆるコンポーネント・モデル間での相互運用性を推進することで、これらの仕様を進化させています。この記事では、Mashup Center での OpenSocial ガジェットの使い方を示すことにより、コンポーネント・モデル間の相互運用に向けた初期の手順を説明します。

上に戻る

Mashup Center と OpenSocial の統合

異なるフォーマットを持つ、さまざまな Web 2.0 ユーザー・インターフェース・コンポーネントが利用できるようになると、コンポーネントどうしを組み立てるツールが必要になります。これらの Web コンポーネントは対話によって相互にメッセージを送信することがあり、その結果として相互運用性の問題が生じる可能性があります。Mashup Center は、同じページ上にある別のウィジェット・コンポーネント (OpenSocial ガジェットも含みます) を検出して組み立てるツールをもたらすだけでなく、さまざまなコンポーネント間を相互接続し、その接続を維持する機能も提供します。

マッシュアップ・ページ

マッシュアップ・ページは、iWidget および他の種類のガジェットへの参照を含めることができるシンプルな HTML マークアップです。Mashup Center Livetext フレームワークがこの HTML を解析し、ウィジェットをレンダリングするために、要求を他のウィジェット・コンテナーおよびガジェット・コンテナーに渡します。ページのマークアップには、他のメタデータ (タイトル、プリファレンス、ワイヤーなど) や、iWidget インスタンスをより幅広いマークアップ (たとえば、HTML) に配置するための宣言構文セットに適合する他のコンポーネントが含まれています。この宣言構文は iWidget マイクロ・フォーマットと呼ばれています。

iWidget、OpenSocial ガジェット、および関連する他のメタデータが含まれるマッシュアップ・ページの例をリスト 1 に示します。

  <span layoutdata="layout:freeForm;" 
id="ns_22f00fd0d86811deb7f591bc4648e1b3" class="mm_iWidget iWidgetSkin">
   <a href="/mum/widget-catalog/widgetPub.xml" class="mm_Definition">
   </a>
   <span style="display: none; visibility: hidden;" title="idescriptor" 
   class="mm_ItemSet">
     <a href="#icon" style="visibility: hidden; display: none;" 
     class="mm_Item" lang="en">
       <span class="mm_Value" lang="en">
      	 /mum/widget-catalog/images/widgetPub.png
       </span>
      	</a>
      	<a href="#title" style="visibility: hidden; display: none;" 
      	class="mm_Item" lang="en">
      	  <span class="mm_Value" lang="en">
      		iWidget Publisher
      	  </span>
      	</a>
     </span>
     </span>
     <span layoutdata="layout:freeForm;" id="ns_3c49ee10d86811deb7f591bc4648e1b3" 
     class="mm_iWidget iWidgetSkin">
      	<a href="/mum/widget-catalog/widgetSub.xml" class="mm_Definition">
      	</a>
      	<span style="display: none; visibility: hidden;" title="idescriptor" 
      	class="mm_ItemSet">
      		<a href="#icon" style="visibility: hidden; display: none;" 
      		class="mm_Item" lang="en">
      			<span class="mm_Value" lang="en">
      			/mum/widget-catalog/images/widgetSub.png
      			</span>
      		</a>
      		<a href="#title" style="visibility: hidden; display: none;" 
      		class="mm_Item" lang="en">
      			<span class="mm_Value" lang="en">
      				iWidget Subscriber
      			</span>
      		</a>
      	</span>
      	<span class="mm_ReceivedEvent">
      		<a href="#ns_22f00fd0d86811deb7f591bc4648e1b3" 
      		class="mm_SourceEvent">
      			random-number
      		</a>
      		<span class="mm_TargetEvent">
      			random-number
      		</span>
      	</span>
      </span>
      <span layoutdata="layout:freeForm;" id="ns_272be4c0d86811deb7f591bc4648e1b3" 
      class="mm_OSGadget iWidgetSkin">
      	<a href="http://localhost:8080/gadgets/files/container/sample-pubsub-publisher.xml" 
      	class="mm_Definition">
      	</a>
      </span>
      <span layoutdata="layout:freeForm;" id="ns_30c10c90d86811deb7f591bc4648e1b3" 
      class="mm_OSGadget iWidgetSkin">
      	<a href="http://localhost:8080/gadgets/files/container/
      	sample-pubsub-subscriber.xml" class="mm_Definition">
      	</a>
      </span>

イベント操作

それでは、iWidget コンポーネント・モデルおよび OpenSocial コンテナーによって提供される次の通信モデルを見ていきましょう。

• iWidget でのイベント操作
• OpenSocial ガジェットでのイベント操作

iWidget コンポーネント・モデルには、次のようなイベント操作のセットがあります。

Mashup Center は、その基礎となる通信インプリメンテーションとして OpenAJAX Hub を活用します。OpenAJAX Hub は、メッセージング・エンジンを提供する標準 JavaScript™ API のセットです。このメッセージング・エンジンにより、Ajax ライブラリーおよび同じページで使用されている Web 2.0 コンポーネントにセキュリティーと相互運用性がもたらされます。これらの Web コンポーネント間の通信は、Managed Hub と呼ばれる、ホストされたセキュリティー・マネージャーを通じて行われます。Managed Hub は接続を許可または拒否することにより、他のコンポーネントとの安全な統合を可能にします。

iWidget イベント操作 API の一部を以下に示します。ブロードキャスト・コードの例については、widgetPub.js および widgetSub.js を参照してください。

• broadcastEvent(String targetEvent, Object payload, String payloadType, String sourceid)。ページ・コンポーネントが、ページ上のすべてのウィジェットまたはコンポーネントにイベントをブロードキャストします。
• publishEvent(String topic, Object payload, String payloadType, String sourceid)。ページ・コンポーネントが、他のすべてのページ・コンポーネントが利用可能なグローバル・イベントをパブリッシュします。
• subscribeEvent(String event, Object object, String eventCallback, String subscribeCallback, String sourceid)。ページ・コンポーネントが、他のすべてのページ・コンポーネントが利用可能なグローバル・イベントをサブスクライブします。
• unsubscribeEvent(Object subscriptionHandler, String sourceid)。ページ・コンポーネントが、他のすべてのページ・コンポーネントが利用可能なグローバル・イベントをアンサブスクライブします。

OpenSocial はリモート・プロシージャー・コール (RPC) を使用し、自分自身のコンテナー内で API をパブリッシュすることにより、ガジェット間通信を実現します。たとえば、Shindig の rpc.js は、OpenSocial ガジェットおよびコンテナーのために基礎となる通信メカニズムを提供します。クロスドメインの通信が行われる状況では、rpc.js によって、メッセージの受信側が作成側を認識し、作成側がメッセージの受信側を認識できるようになります。

pubsub.js インターフェースと pubsub-router.js インターフェースは、ガジェット間の通信およびコンテナーとガジェット間のメッセージ・ルーティングのために、RPC API を呼び出します。

OpenSocial コンテナー・ページで pubsub 機能を有効にするには、HTML の <script> タグを使用して、ホストされているファイルのロケーションを指定することにより、rpc.js インターフェースおよび pubsub.js インターフェースをロードします。リスト 2 を参照してください。

                  <script type="text/javascript" 
                  src="http://<host:port>/gadgets/js/rpc.js?c=1"></script>
                  <script type="text/javascript" 
                  src="http://<host:port>/gadgets/js/pubsub.js?c=1&debug=1">
                  </script>

それでは、ガジェット・レベルでのパブリッシュとサブスクライブの API を見ていきましょう。gadgets.pubsub API によって、ガジェットのパブリッシュ操作およびサブスクライブ操作が可能になります。この API を利用するには、ガジェット定義ファイルで <ModulePrefs> の子要素として必須機能の pubsub (<Require feature="pubsub"/>) を宣言する必要があります。リスト 3 を参照してください。

    <?xml version="1.0" encoding="UTF-8"?>
         <Module>
         <ModulePrefs title="OS Gadget Subscribe">
           <Require feature="opensocial-0.8"/>
           <Require feature="pubsub"/>
          </ModulePrefs>
          <Content type="html">
          <![CDATA[
           ]]>
            </Content>
          </Module>

パブリッシュ API およびサブスクライブ API について説明します。

メモ : サンプル・コードについては、この記事の「ダウンロード」セクションにある sampleGadgets.war ファイル内の osPub.xml のコード例を参照してください。

• gadgets.pubsub.subscribe(channel-name, callback). ガジェットをチャネルにサブスクライブします。callback は、受信したメッセージを用いて呼び出される関数です。
• gadgets.pubsub.publish(channel-name, message). String 型のメッセージをチャネルにパブリッシュします。
• gadgets.pubsub.unsubscribe(channel-name). ガジェットをチャネルからアンサブスクライブします。

Mashup Center 用に OpenSocial 機能を有効にする

Mashup Center 2.0 (Fix Pack 2.0.0.1) 用に OpenSocial 機能を有効にする方法を以下の手順で示します。Shindig の WAR ファイルの構築には、Apache Shindig BETA3 を Apache Maven とともに使用します。

次の手順に従って、必要なプログラムをダウンロードしてインストールし、Shindig の WAR ファイルを構築します。

メモ : 以下のプログラムを初めてインストールする場合は、コマンド・プロンプトからプログラムを実行できるように、必ずシステムの PATH 変数に実行パスを追加してください。

1. Apache Maven 2.0.10 をダウンロードしてインストールします。
2. SVN clientをダウンロードしてインストールします。
3. JRE6をダウンロードしてインストールします。
4. Microsoft Windows® を実行するためのパッチ をダウンロードしてインストールします。
5. コマンド・プロンプトでディレクトリーを目的のフォルダーに変更し、Shindig BETA3 をダウンロードする次のコマンドを入力します。
   svn co http://svn.apache.org/repos/asf/incubator/shindig/tags/shindig-project-1.1-BETA3-incubating/
6. 重要: Web ブラウザーで Apache サイトにアクセスし、SHINDIG-1288.patch ファイル をダウンロードしてください。このパッチにより、Shindig の gadgets.js ファイルが変更され、デフォルトのセキュア・サーバーである serverBase の値がフル URL に変更されます。ダウンロードしたファイルをテキスト・エディターで開き、変更内容を確認するとよいでしょう。
7. SHINDIG-1228.patch を適用するには、コマンド・プロンプトでパッチがある場所に移動し、「patch -p0<SHINDIG-1228.patch」と入力します。どこにパッチを適用するのかを示すために、次のファイル・パスを指定します。
   shindig-project-1.1-BETA3-incubating location>/javascript/container/gadgets.js.
8. ディレクトリーを <shindig-project-1.1-BETA3-incubating location> に変更し、mvn コマンドを入力します。maven リポジトリーがダウンロードされ、Shindig の WAR ファイルが構築されるのを待ちます。
9. maven の構築が正しく完了した後、次のロケーションで WAR ファイルを探します。
   <shindig-project-1.1-BETA3-incubating location>\java\server\target\shindig-server-1.1-BETA3-incubating

以下の手順を実行し、Mashup Center 2.0.0.1 以降に Shindig の WAR ファイルをデプロイします。

1. Mashup Center を開始し、次の URL を使用して IBM WebSphere Application Server の管理コンソールにアクセスします。
   http://<host:port>/admin.
2. hindig-server-1.1-BETA3-incubating.war をデプロイします。Shindig はデフォルトで ROOT で実行されるため、コンテキスト・ルートとして必ず「/」を選択してください。Shindig を正しく開始するために、DefaultApplication および ROOT で実行されている他のアプリケーションを停止することが必要な場合もあります。

以下の手順を実行し、ブートストラップに対し Shindig コンテナーを有効にします。

1. Mashup Center をインストールしたルート下で、ディレクトリーを mm/config に変更し、configService.properties ファイルで次の行をアンコメントします。
   com.ibm.mashups.common.js=/gadgets/files/container/../../js/core:rpc?
debug=1,/gadgets/files/container/util.js,/gadgets/files/container/gadgets.js,
/gadgets/files/container/../../js/rpc.js?c=1&debug=1,
/gadgets/files/container/../../js/pubsub.js?c=1&debug=1,
/mum/js/com/ibm/mm/enabler/opensocial.js
2. コマンド・プロンプトで MashupCenter_install_root/Config フォルダーに移動し、「config.bat update-was-config」と入力します。この作業により、Mashup Center が、ルート Web コンテキストから Shindig サーバーをブートストラップすることが可能になります。

以下の手順を実行し、OpenSocial ガジェットを Mashup Center パレットに追加します。

1. コンテキスト・ルート「/sampleGadgets」を使用して、sampleGadgets.war を Mashup Center の WebSphere Application Server サーバーにデプロイします。この WAR ファイルには、後述のサンプル・シナリオで使用するウィジェットとガジェットが含まれています。
2. catalog_os.xml を MashupCenter_install_root/mm/config/ にコピーします。このファイルには、参照用の他のサンプル・ガジェットが含まれています。
3. ご使用になっている環境に応じて、正しい mm_OSGadget 定義 URL を反映するために、catalog_os.xml ファイルに変更を加えます。
   
   

   メモ :手順 1 では、ポート 9080 を使用するシンプルな Web アプリケーションおよび Web コンテキストの /sampleGadgets/ にガジェットをインストールしていることを前提としています。このため、ウィジェット定義は次のようになります。

   http://localhost:9080/sampleGadgets/osgPub.xml
4. 変更を保存します。
5. ashupCenter_install_root/mm/config フォルダーを見つけ、catalog_default.xml ファイルを編集し、<resource-type> 要素の直下に <include catalog="os"/> タグを追加します。次の例を参照してください。
   <?xml version="1.0" encoding="UTF-8"?><catalog id="default" unique-name="optional_name"><resource-type>Catalog</resource-type><include catalog="os"/><category name="Demo">......
6. コマンド・プロンプトで MashupCenter_install_root/config フォルダーに移動し、「config.bat update-was-config」と入力します。
7. Mashup Center を再起動します。ログインして編集モードに切り替えます。これで、OpenSocial カテゴリーがパレットに表示されます。

このセクションのすべての手順を完了したので、OpenSocial ガジェットおよび iWidget を Mashup Center のキャンバスにドラッグしてページを作成する準備が整いました。

サンプル・シナリオ

このサンプル・シナリオでは、iWidget と OpenSocial ウィジェットを相互運用して乱数を送受信する方法を簡単な例で説明します。

以下の手順を実行します。

1. 図 1 に示すようにページを作成します。「ようこそ」を選択し、「新規ページの作成」を選択します。
   
   
   図 1. 新規ページの作成
   
   
   
2. 編集モードで、パレット内の OpenSocial カテゴリーを開き、iWidget の Publisher ウィジェットおよび Subscriber ウィジェットをページ上にドラッグします。
3. iWidget サブスクライバーで、「サブスクライブ」ボタンをクリックします。この操作により、iWidget サブスクライバーは、random-number と呼ばれる特定のイベント・チャネルで iWidget パブリッシャーを listen することができます。

4. iWidget パブリッシャーで「乱数のパブリッシュ」をクリックします。この操作により、random-number チャネルに乱数を送信するイベントがトリガーされます。iWidget サブスクライバーがこのチャネルをサブスクライブしているため、iWidget は数を受け取って表示します。

5. 次に、パレット内の OpenSocial カテゴリーに戻り、OpenSocial のパブリッシャー・ガジェットとサブスクライバー・ガジェットをページ上にドラッグします。この 2 つのガジェットは、iWidget と同じ方法でパブリッシュとサブスクライブを行います。iWidget サブスクライバーおよび OpenSocial ガジェット・サブスクライバーのどちらも、OpenSocial パブリッシャーまたは iWidget パブリッシャーから送信された同じ乱数を受信できます。図 2 のテスト・ケースでは、Mashup Center がどのような方法で iWidget と OpenSocial ガジェット間の相互運用をサポートしているかが示されています。
   
   
   図 2. 乱数の送信と受信
   
   
   
6. ページを保存するには、パレットの右側にある｢保存｣アイコンをクリックします (図 3 参照)。
   
   
   図 3. ページの保存
   
   
   

これで、ページ上でのウィジェットの相互運用の方法について理解することができました。次のステップとして、より複雑な状況を作成してみましょう。たとえば、catalog_os.xml を編集し、独自の iWidget および OpenSocial ガジェットを追加することができます。また、OpenSocial カタログの既存のコンポーネントを指定し、先ほどとは少し種類が異なる、Web 2.0 コンポーネントどうしの相互運用を知ることもできます。これらのシナリオでは、Mashup Center が実行されている場合はこれを停止し、「config.bat update-was-config」を入力して、OpenSocial カテゴリーが更新されるようにします。

このサンプル・シナリオでもう 1 つ重要な点は、Web 2.0 コンポーネントが暗黙的に通信することです。iWidget と OpenSocial ガジェットは、あらかじめ定義された特定の同じチャネル上でパブリッシュおよびサブスクライブする必要があります。OpenSocial と iWidget の開発者は、コンポーネントのタイプごとに指定された通常のイベント API および pubsub API だけを呼び出さなければならず、Mashup Center のパレットはこれらのコンポーネント間の通信を処理できることが必要です。

前の例で示したように、iWidget は次の iWidget API を使用してパブリッシュとサブスクライブを行います。

• com.ibm.mashups.iwidget.services.ServiceManager.getService("eventService").publishEvent("random-number", message);
• com.ibm.mashups.iwidget.services.ServiceManager.getService("eventService").subscribeEvent("random-number",null,this.updateMessage);

OpenSocial ガジェットについては、次に示す通常の pubsub API を使用できます。

• gadgets.pubsub.publish("random-number", message);
• gadgets.pubsub.subscribe("random-number", callback);

これで、Mashup Center を用いて iWidget と OpenSocial ガジェット間の相互運用および通信を可能にする方法が理解できました。

上に戻る

まとめ

この記事では、どのような方法で IBM Mashup Center が OpenSocial ガジェットなどの他のコンポーネント・モデルを使用するのかを説明しました。ユーザーは、異なるコンポーネント・モデルを試して、各コンポーネントに最も適した使い方を学習できるようになりました。IBM は OpenAjax Alliance や OpenSocial Foundation といったオープン・コミュニティーとの共同作業を継続し、エンタープライズ要件、相互運用性、および顧客の選択の幅を向上させることにより、業界の発展に寄与していきます。

上に戻る

ダウンロード

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

参考文献

• ディスカッション・フォーラムに参加してください。
  
  
• Refer to the IBM Mashup Center product page.
  
  
• Refer to the IBM Lotus Mashups Center.
  
  
• Read more articles in the IBM Mashup Center Wiki.
  
  
• Learn more about IBM Mashup Center on Lotus Greenhouse.
  
  
• Learn more about OpenSocial.
  
  
• Learn more about Apache Shindig.
  
  
• Learn more about building projects using Apache maven.
  
  

著者について

この記事を評価する

コメント

上に戻る

目次

• はじめに
• 背景
• Mashup Center と OpenSocial の統合
• まとめ
• ダウンロード
• 参考文献
• 著者について
• コメント