Lotus Widget Factory および Google ガジェットを使用した IBM Lotus Connections 2.5 のカスタマイズ

コードの記述なしでLotus Connections 用のカスタム・ウィジェットを作成する

この記事では、IBM® Lotus® Connections 用の新規ウィジェットの開発を加速および簡素化するために使用できる 2つのアプローチについて詳しく説明します。(原文公開日 : 2009年9月29日)

Vincent Burckhardt, Software Engineer, IBM

Vincent Burckhardt is a Software Engineer at the IBM Dublin Software Laboratory. Vincent has been working as part of the IBM Lotus Connections development team since 2007. You can reach him at vincent.burckhardt@ie.ibm.com.



2010年 3月 26日

はじめに

IBM Lotus Connections 2.0 では、そのホーム・ページ機能を拡張およびカスタマイズする方法としてウィジェットの概念が導入されました。ウィジェットは、Web アプリケーション内で実行して任意のカスタム・コンテンツを表示できる短いコードです。Lotus Connections は、IBM が定義した iWidget 仕様に沿って記述されたウィジェットをサポートします。2009 年にリリースされた Lotus Connections 2.5 では、管理者が他の開発者から入手したウィジェットをデプロイすることができる追加の配置領域を設けることにより、ホーム・ページ、コミュニティー、およびプロフィール機能でのウィジェットのサポートが強化されました。

ウィジェットは、従来の Web 開発手法と言語を使用したインプリメントが可能です。この場合、ウィジェットの開発には時間とリソースがかかり、HTML、CSS、JavaScript™ などの Web 開発技術の知識が必要となります。この記事では、Lotus Connections 用の新規ウィジェットの開発を加速および簡素化するために使用できる 2 つのアプローチについて詳しく説明します。

最初のセクションでは、Lotus Widget Factory の統合開発環境 (IDE) を使用して Lotus Connections 用のカスタム・ウィジェットを作成する方法を示します。Lotus Widget Factory は、エンタープライズ対応のカスタム・ウィジェットをビジュアルな方法で開発できるようにするツールで、コードの記述は必要ありません。Lotus Widget Factory は、公式には IBM Lotus Mashups だけをサポートしていますが、この記事では、Lotus Connections 用のウィジェットの開発にも使用できることを紹介します。例として、IBM developerWorks® からのオーディオ・ファイル (ポッドキャスト) のリストを表示し、Lotus Connections から直接これらのポッドキャストを聴くことができるウィジェットの作成手順を説明します。

2 番目のセクションでは、ラッパーを使用して Google ガジェットを Lotus Connections に表示する方法を詳述します。ラッパーは、Lotus Connections と Google ガジェット間のインターフェースとして機能する標準 iWidget です。Google ガジェットによるアプローチは、developerWorks の前の記事「IBM Lotus Connections における Google ガジェットのデプロイとインプリメント」によって、Lotus Connections 2.0 用としてすでに紹介されています。前の記事では、ラッパーの開発という側面に焦点が当てられていましたが、このセクションでは、コードを記述せずに Google ガジェットをデプロイする手順を示すことにより、このテーマを直接取り上げていきます。

この記事の最初の 2 つのセクションは、プログラミングの経験のない読者 (たとえば、システム管理者) の方にも読める内容になっています。

最後のセクションでは、iWidget 仕様のプログラミングの詳細を扱います。Web 技術の予備知識がある開発者の方を対象としています。このセクションの目的は、カスタマイズの可能性を探るためのスタート地点を提供し、Lotus Connections 2.5 でサポートされている新しい iWidget 機能を紹介することです。


Lotus Widget Factory を使用して Lotus Connections 用のウィジェットを開発する

このセクションでは、公開フィードの内容を表形式で表示するウィジェットを作成し、そのウィジェットを Lotus Connections のホーム・ページでユーザーに利用可能にする手順について説明します。このセクションは、Lotus Widget Factory バージョン 1.0.1 をカバーしています。

このセクションで作成するウィジェットは、IBM developerWorks で録音されて標準 RSS フィードを通じて利用できるポッドキャストのリストを取り出します。ポッドキャストの詳細については、http://www.ibm.com/developerworks/podcast/ を参照してください。

RSS フィードのエントリーは、developerWorks によって録音された MP3 ポッドキャストのリストです。Lotus Widget Factory を使用すると、コードを 1 行も書かずに、このようなウィジェットをほんの数分で作成できます。このセクションの最後では、埋め込みメディア・プレイヤーを用いてウィジェットを強化し、ユーザーがウィジェット・インターフェースから直接ポッドキャストを再生して聴けるようにする方法を説明します。完成したウィジェットの外観を図 1 に示します。

図 1. このセクションで作成し、Lotus Connections のホーム・ページにデプロイした developerWorks ポッドキャスト・ウィジェット
このセクションで作成し、Lotus Connections のホーム・ページにデプロイした developerWorks ポッドキャスト・ウィジェット

Lotus Widget Factory

Lotus Widget Factory は、動的なカスタム・ウィジェットを開発するための統合開発環境 (IDE) です。このツールを使用すると、REST サービスなどの既存の資産を活用して、コードを記述せずに動的なウィジェットを迅速に作成できます。

Lotus Widget Factory(US) の試用版が、IBM Mashup Center 製品の一部として利用できます。詳細については、記事の末尾にある「参照先」をご覧ください。

Lotus Widget Factory は、ビルダーと呼ばれる基本要素からモデルを組み立てる概念に基づいています。ビルダーは、指定された機能をカプセル化した汎用コンポーネントです。Lotus Widget Factory には、ボタンなどのユーザー・インターフェース・コンポーネントから、リモート Web サービスからデータを取得する役割を持つコンポーネントに至るまで、あらかじめ定義された多数のビルダーが用意されています。各ビルダーにはユーザー・フレンドリーなウィザード・インターフェースが対応していて、開発者はビルダーの特性 (入力など) を指定できます。

Lotus Widget Factory は、開発者がツール内に配置したモデルに基づいてウィジェットのソース・コードを自動的に生成します。ソース・コードには、サーバー・サイドのバックエンド・サービスの Java™ コード、およびクライアント・サイドのコード (たとえば、HTML ビュー、JavaScript コード、ウィジェットの XML ディスクリプター) が含まれています。ウィジェットを構成するコードおよびリソースは標準 Web アーカイブ (WAR) ファイルとしてパッケージ化されていて、IBM WebSphere® Application Server などの J2EE サーバーにデプロイできます。

Lotus Widget Factory に関する追加情報については、記事の末尾にあるリソースのリストを参照してください。

前述のように、Lotus Widget Factory は Lotus Mashups 製品用のウィジェットの作成に緊密に関連しています。Lotus Connections と Lotus Mashups はウィジェットの同じ基本フォーマット (IBM が開発した iWidget 仕様) を共有しているため、このツールによって作成されたウィジェットを Lotus Connections で比較的簡単に再利用およびデプロイできます。

Lotus Widget Factory を使用して developerWorks ポッドキャスト・ウィジェットを作成する

最初のステップとして、http://www.ibm.com/developerworks/podcast/channel-dwall.rss にある RSS フィードを取り出すことができるウィジェットを生成するモデルを作成します。この公開 RSS フィードには、developerWorks チーム (http://www.ibm.com/developerworks/podcast/) によって録音された最近のポッドキャストのリストが含まれています。

このウィジェットは、フィードから得た developerWorks の最近のポッドキャストに関する情報をページ番号が付けられた表で表示します。表の各行には、それぞれのポッドキャストに関する情報 (タイトル、録音時間、説明、および MP3 ファイルのダウンロードへのリンク) が表示されます。

次のサブパートでは、公開されている Yahoo MediaPlayer JavaScript ライブラリー (http://mediaplayer.yahoo.com/) を使用してこのウィジェットを拡張し、ユーザーが手動で MP3 ファイルをダウンロードしなくても、Lotus Connections から直接ポッドキャストを聴けるようにします。

まず、新しい Lotus Widget Factory プロジェクトを作成することから始めましょう。

  1. Lotus Widget Factory を開始し、「ファイル」->「新規」->「Lotus Widget Factory プロジェクト」を選択します。
  2. プロジェクト名 (例: developerWorksWidget) を入力します。他のフィールドは空のままにして、「次へ」をクリックします。
  3. 「機能セット」ページでデフォルトのオプションをそのまま維持し、「次へ」をクリックします。
  4. 「サーバー構成」オプションで、Lotus Widget Factory とともに提供される WebSphere Application Server Community Edition サーバー・インスタンスを選択します。お気付きのように、このサーバー・インスタンスにより、ウィジェットを Lotus Connections にデプロイする前に、スタンドアロンのブラウザー Web ページでウィジェットを扱うことができます。

Lotus Widget Factory によって新しいプロジェクトが作成されます。また、Lotus Widget Factory によって、WebSphere Application Server Community Edition サーバーを開始し (まだ開始していない場合)、プロジェクトを WebSphere Application Server Community Edition インスタンスにデプロイするよう求めるプロンプトが表示されます。どちらのプロンプトでも「はい」をクリックします。

これで、ウィジェット用のモデルを作成する準備が整いました。この時点で、空のウィジェット・モデルを作成し、フィードの取得、フィードのフォーマット、データ表の表示といった役割を持つ別のビルダーを追加できます。Lotus Widget Factory には、一般的な用途のために、あらかじめ定義されたモデルの作成を支援するモデル・ウィザードがいくつか用意されています。ここでは、組み込みのモデル・ウィザードの 1 つを使用します。

  1. 「ファイル」->「新規」->「Lotus Widget Factory モデル」を選択します。
  2. 2. 「プロジェクトの選択」フォームで、前の一連の手順で作成したプロジェクト (名前は developerWorksWidget) を選択します。
  3. 「モデルの選択」フォームで、「クイック・スタート」カテゴリーにある「REST ベースの View & Form」オプションを選択します。これによって、フィードの取り出しと表形式での表示に必要なビルダーを用いて、あらかじめ構成されたウィジェット・モデルを作成するよう Lotus Widget Factory に指示することになります。
  4. 「このモデルをウィジェットとしてデプロイ」オプションは選択しません。このオプションを使用すると、実行されている Lotus Mashups インスタンスにウィジェットをデプロイすることができます。前述のように、Lotus Widget Factory は、主に Lotus Mashups 用のウィジェットを作成するよう設計されています。以降の段階でウィジェットを Lotus Connections にデプロイするため、今はこのオプションを選択しません。
  5. 「REST 呼び出し情報」フォームで、developerWorks RSS フィードへの URL (http://www.ibm.com/developerworks/podcast/channel-dwall.rss) を入力します。「HTTP 要求タイプ」オプションで「GET」が選択されていることを確認し、フォーム内の他のオプションは空のままで「次へ」をクリックします。
  6. 「RESTスキーマ情報」フォームは空のままにして、「次へ」をクリックします。
  7. 「最終 REST サービス情報」フォームでチャンネル/項目(channel/items)を選択します。RSS フィードの各項目には、指定されたポッドキャストに関する情報が含まれています。したがってこの手順では、REST ビルダーに対し、このフィードから異なる項目 (ポッドキャスト) を表示するよう通知します。
  8. 次のフォームで、「ページ単位のデータ表示」オプションを選択します。このオプションにより、ユーザーがポッドキャスト項目のナビゲートに使えるページ番号をウィジェットの一番下に表示するように、モデルが構成されます。ウィジェットには、1 ページあたり 3 行が適した値です。
  9. 「列設定」フォームで「列を管理」オプションを選択します。このフォームを使用すると、フィードから表に表示する列を管理できます。ページではウィジェット用のスペースが制限されているため、多数の列を表示することは避ける必要があります。使用できる設定例を図 2 に示します。
    図 2. 「列設定」フォーム
    「列設定」フォーム
    このフォームには重要な点が 1 つあります。図 2 に示すように、guid 列の状況フィールドを「カウンター列」に設定するようにしてください。RSS フィードの guid エントリーには、ポッドキャストの MP3 ファイルへのパスが含まれています。「カウンター列」に設定することにより、guid 列の内容を、フィールドからの内容ではなく、1 から始まるカウンターとして表示するようビルダーに指定します。このサブパートの次の一連の手順で、MP3 ファイルへのリンクをカウンターに設定します。「次へ」をクリックします。
  10. 「詳細へのリンクを作成する」オプションは空のままにしておきます。
  11. モデルの名前 (例: developerWorksModel) を入力します。

上記の手順を完了した後の Lotus Widget Factory のワークスペースを図 3 に示します。左側の「プロジェクト・エクスプローラー」パネルに、developerWorksWidget モデルのリソースが表示されています。作成したモデルの詳細はメイン・パネルに表示されます。特に、このパネルには、「REST ベースの View & Form」ウィザードによってあらかじめ定義され、モデルを構成する別のビルダーが表示されます。

図 3. ウィジェット・モデルの詳細を表示する Lotus Widget Factory
ウィジェット・モデルの詳細を表示する Lotus Widget Factory

この時点で、すでに構成済みのモデルを作成することができました。このモデルは、完全に機能する (つまり、developerWorks からのポッドキャストのリストを表示する) ウィジェットのコードを生成する準備ができています。

「プロジェクト・エクスプローラー」ウィンドウでモデル (図 3 の developerWorksModel.model) を選択し、「実行」->「実行」->「アクティブ・モデルの実行」を選択することにより、ウィジェットをスタンドアロンのブラウザー・ページに表示できます。この操作によって、WebSphere Application Server Community Edition の埋め込みインスタンスが開始され、ウィジェットがフル・ブラウザー・ページで実行されます (図 4 参照)。

図 4. スタンドアロン・ページで実行されている開発中のウィジェット
スタンドアロン・ページで実行されている開発中のウィジェット

最後に、ユーザーがウィジェットから MP3 ファイルをダウンロードする機能を追加します。この例では、各行の最初の列のカウンター・ラベル (図 4 で示した最初の列の数字) を、対応するポッドキャストの MP3 ファイルを示すクリック可能なリンクに変換します。モデルを作成する上記の手順 9 で構成したように (図 2 参照)、表の最初の列は元の RSS フィードの guid フィールドに対応しています。元の RSS フィードの guid フィールドの値は MP3 ファイルへのパスです。このステップでは、「リンク」ビルダーを使用し、guid 値を用いてリンクを作成します。

  1. Lotus Widget Factory で、前の手順で作成したプロジェクトとモデルを選択します。
  2. 「現行モデルに Builder 呼び出しを追加」をクリックします (図 5 参照)。

    図 5. Lotus Widget Factory での「Builder を追加」ボタンの位置
    Lotus Widget Factory での「Builder を追加」ボタンの位置
  3. ページ・エレメント」カテゴリーで「リンク」ビルダーを選択します。
  4. この手順では、表内の各 guid エレメントのリンクを作成するために、「リンク」ビルダーを構成します。フィード内の guid フィールドには MP3 ファイルへのパスが含まれていることを思い出してください。次の情報を使用して、図 6 に示すようにビルダーのフォームを設定します。
    • 「名前」フィールドに「LinksGUID」と入力します。
    • 「ページ」フィールドで「REST_ViewPage」を選択します。
    • 「タグ」フィールドで「guid」を選択します。
    • 「アクション・タイプ」フィールドで「URL へのリンク」を選択します。
    • 「URL」フィールドでは、フィールドの横の「...」ボタンをクリックし、「Variables」->「itemLoopVar」->「item」->「guid」を選択します。このフィールドに生成される値は「${Variables/itemLoopVar/item/guid}」となります。
    図 6. 「リンク」ビルダーの設定
    「リンク」ビルダーの設定

これで完成です。ユーザーは、各行の最初の列の数字 (カウンター) をクリックすることで、ポッドキャストの MP3 ファイルをダウンロードできるようになりました。このセクションの最後のサブパートでは、埋め込みメディア・プレイヤーを使用してウィジェットを強化し、ユーザーが MP3 ファイルを手動でダウンロードしなくても、ウィジェットから直接ポッドキャストを聞けるようにする方法を説明します。

この状態でもウィジェットは使用可能で、ユーザーの役に立ちます。最も重要な点は、コードをまだ 1 行も書いていないことです。

次のセクションでは、管理者として、Lotus Connections のホーム・ページでウィジェットをユーザーに利用可能にする方法を学習します。

Lotus Widget Factory で作成したウィジェットを Lotus Connections のホーム・ページにデプロイする

前述のように、Lotus Widget Factory 1.0.1 は、公式には Lotus Mashups のみサポートしています。したがって、IDE からウィジェットを直接 Lotus Connections にデプロイすることはできません。このため、いくつかの簡単なステップを手動で実行して、ウィジェットを Lotus Connections で利用可能にする必要があります。

この例では、ウィジェットを Lotus Connections のホーム・ページ機能に登録します。コミュニティー機能およびプロフィール機能のための登録手順の詳細については、この記事の末尾で参照先が示されているIBM Lotus Connections 2.5 Information Center のドキュメンテーションを参照してください。

このセクションでは、次の 2 つのステップについて説明します。

  • Lotus Widget Factory からウィジェット・コードとリソースを標準 Web アーカイブ (WAR) ファイルとして抽出し、この WAR ファイルを WebSphere Application Server インスタンスに Web アプリケーションとしてデプロイする。
  • デプロイしたウィジェットを Lotus Connections のホーム・ページに登録する。新規ウィジェットをユーザーに利用可能にできるのは、管理者役割を持つユーザーだけである点に注意してください。

まず、ウィジェットのコードとリソースを Lotus Widget Factory から標準 WAR ファイルとしてエクスポートし、これを WebSphere インスタンスにデプロイします。

  1. Lotus Widget Factory の「プロジェクト・エクスプローラー」パネルでウィジェット・プロジェクト (developerWorksWidget) を右クリックします。
  2. 「エクスポート」->「WAR ファイル」を選択します。
  3. WAR ファイルを保存するディスク上の場所を選択します。
  4. WAR ファイルを WebSphere Application Server インスタンスにデプロイします。推奨方法としては、Lotus Connections を実行しているのと同じ WebSphere Application Server インスタンスを使用することです。WAR ファイルのデプロイは標準の手順で行います。詳細については、IBM WebSphere Application Server 6.1 Information Center のドキュメンテーションを参照してください。

    デプロイメント時に選択したコンテキスト・ルート (例: devWorksApp) を記録しておきます。

  5. デプロイメント後、WebSphere の管理コンソールから Web アプリケーションを開始します

次に、ウィジェットを Lotus Connections のホーム・ページに登録します。どの iWidget も XML ディスクリプターによって記述されています。Lotus Widget Factory によってウィジェット用に作成された WAR ファイルには、XML ディスクリプターを自動的に生成して返すサービスが含まれています。デプロイした WAR ファイルの場合、このサービスは次の場所にあります。

http://<hostname>:<port>/<contextRoot>/webengine/factory/widget/Dispatcher?_widgetID=<pathToWidgetModel>

<pathToWidgetModel> は、Lotus Widget Factory のモデル・ディレクトリーからモデルへの相対パスです (ファイル拡張子 .model は含まれません)。図 7 を参照してください。developerWorks モデルの場合、pathToWidgetModel は developerWorksModel です。

図 7. Lotus Widget Factory での developerWorkModel.model へのパス
Lotus Widget Factory での developerWorkModel.model へのパス

それぞれについて説明します。

http://homedev2.dyn.webahead.ibm.com:9080/devWorksApp/webengine/factory/widget/Dispatcher?_widgetID=developerWorksModel

where:

  • 「homedev2.dyn.webahead.ibm.com」はサーバーのホスト名です。
  • 「9080」はポート番号です。
  • devWorksApp」は、WAR ファイルが WebSphere Application Server にデプロイされたときのコンテキスト・ルートです。

Web ブラウザーを使用して URL へのアクセスを試みることにより、URL が正しいかどうかをチェックできます。Lotus Widget Factory によって生成されたウィジェットの XML ディスクリプターは図 8 のようになります。

図 8. Lotus Widget Factory によって生成されたウィジェットの XML ディスクリプター
Lotus Widget Factory によって生成されたウィジェットの XML ディスクリプター

メモ : Lotus Widget Factory によって生成されるアプリケーションは動的にロードされるクラスを使用するため、WebSphere Application Server で「Java セキュリティー」設定がオンになっていると、プロセスに多少の制限があります。上記の XML ディスクリプターにアクセスするときに、「SRVE0207E: Uncaught initialization exception thrown by servlet」というメッセージを受け取ることがあります。WebSphere 管理コンソールの「セキュリティー」->「管理、アプリケーション、およびインフラストラクチャーをセキュアにする」->「Java 2 セキュリティー」で、「Java セキュリティー」オプションをオフにすることができます。

あるいは、Java 2 セキュリティーをオフにしたくない場合は、WebConfig/META-INF で was.policy ファイルを作成し、アクセスする特定のリソースを定義できます。was.policy の詳細については、IBM WebSphere Application Server 6.1 Information Center を参照してください。

それでは、以下の手順に従って、ホーム・ページの管理インターフェースで XML ウィジェット・ディスクリプターへのリンクを登録します。

  1. 管理者アカウントを使用してホーム・ページにログインします。
  2. ホーム・ページで「管理」タブを選択します (図 9 参照)。

    図 9. Lotus Connections のホーム・ページの「管理」タブ
    Lotus Connections のホーム・ページの「管理」タブ
  3. ページの右下隅にある「別のウィジェットの追加」オプションを選択します。
  4. ウィジェットを登録できるフォームが表示されます。ウィジェットのタイトルおよび iWidget の XML ディスクリプターの URL を入力します (図 10 参照)。

    図 10. Lotus Connections のホーム・ページに新規ウィジェットを登録する管理フォーム
    Lotus Connections のホーム・ページに新規ウィジェットを登録する管理フォーム
  5. 「「マイ・ページ」タブに表示」を選択します。
  6. フォーム内の他のオプションは、デフォルト値をそのまま維持できます。これらのオプションに関する追加情報については、Lotus Connections 2.5 Information Center のドキュメンテーションを参照してください。
  7. 「保存」をクリックします。管理者のホーム・ページに戻ります。このページで、developerWorks ウィジェットを有効にします。

ウィジェットを有効にすると、ユーザーはホーム・ページでウィジェット・パレットを通じて developerWorks ウィジェットを「マイ・ページ」タブに追加できます (図 11 参照)。ウィジェット・パレットは、インターフェースの右上の部分にある「カスタマイズ」ボタンをクリックして開くことができます。

図 11. ホーム・ページのウィジェット・パレットを通じてユーザーに利用可能になった developerWorks ポッドキャスト・ウィジェット
ホーム・ページのウィジェット・パレットを通じてユーザーに利用可能になった developerWorks ポッドキャスト・ウィジェット

パレットからの追加後、ホーム・ページにレンダリングされたウィジェット (「マイ・ページ」タブ) を図 12 に示します。

図 12. パレットから追加した後のホーム・ページでのウィジェット
パレットから追加した後のホーム・ページでのウィジェット

メモ: Lotus Widget Factory は高さが固定されたウィジェットを生成するため、デプロイ後に垂直スクロール・バーが表示されることがあります。IDE で WebContent/WEB-INF/factory/xml_templates/widget/ にある widget_definition.xml ファイルを編集することにより、このスクロール・バーを除去できます。iframe エレメントの min-height 値を変更し、ウィジェットの高さを増して、垂直スクロール・バーが表示されないようにします。図 12 では、min-height 属性の値が 200 px から 300 px に増加されています。

Yahoo! メディア・プレイヤー・ライブラリーを使用してポッドキャスト・ウィジェットを強化する

前のセクションでは、RSS フィードからポッドキャストのリストを表示できるウィジェットを作成しました。現時点では、リストには MP3 ファイルへのリンクだけが含まれています。つまり、ユーザーがポッドキャストを聴くには、ファイルをダウンロードして、Microsoft® Windows® Media Player などのデスクトップ・メディア・プレイヤーを開く必要があります。

そこで、ダウンロードして MP3 ファイルを手動で開くという余分な操作をしなくても、ウィジェットのインターフェースからユーザーが MP3 ポッドキャストを直接聴けるように機能強化するとよいでしょう。

この機能を有効にするには、Lotus Widget Factory で Yahoo! Media Player ライブラリー (http://mediaplayer.yahoo.com/) を使用し、埋め込みメディア・プレイヤーを持つウィジェットを作成します。このステップを完了すると、表の各行に、ユーザーがウィジェットからポッドキャストを直接聴ける再生ボタンが表示されます (図 13 参照)。

図 13. ポッドキャスト・ウィジェットの再生ボタン
ポッドキャスト・ウィジェットの再生ボタン

Yahoo! Media Player は JavaScript ライブラリー形式で提供され、オーディオ・ファイルを再生する役割を持つ軽量 Flash モジュールをロードします。JavaScript ライブラリーはページ (この場合は、もっと正確にいうとウィジェット) の HTML を解析し、MP3 ファイルなどのオーディオ・ファイルを示すリンクを検索します。

このライブラリーの詳細については、http://mediaplayer.yahoo.com/ を参照してください。

この機能を有効にするには、Lotus Widget Factory のビルダーを使用して、Yahoo! Media Player JavaScript ライブラリーをウィジェットに組み込みます。Yahoo! ライブラリーはページ (たとえば、First リンク) で HTML リンク・エレメント (MP3 などのメディア・ファイルを示すリンク) を自動的に検索し、再生ボタンをその横に配置します。

それでは、ウィジェット・モデルに Yahoo! Media Player JavaScript ライブラリーを組み込みましょう。

  1. プロジェクトとモデルを選択し、「現行モデルに Builder 呼び出しを追加」ボタン (図 5 に示したものと同じボタン) をクリックします。
  2. アクションおよびイベント」カテゴリーで「Client JavaScript」オプションを選択します。
  3. 次の値を使用して、図 14 に示すようにフォームを設定します。

    • 「名前」フィールドに「YahooMediaPlayer」と入力します。
    • 「場所のタイプ」フィールドで「HEAD タグ内」オプションを選択します。
    • 「ページ」フィールドで「REST_ViewPage」を選択します。
    • 「スクリプト・ソース・タイプ」フィールドで「ファイル/URL にリンク」オプションを選択します。
    • 「スクリプト URL またはファイルの場所」フィールドに「http://mediaplayer.yahoo.com/js」を入力します。
    図 14. 「Client JavaScript」フォーム
    「Client JavaScript」フォーム

要するに、Yahoo! Media Player ライブラリーを示す標準 JavaScript タグをウィジェットの一番上に配置するようビルダーに指示しています。ライブラリーは、ウィジェットがページにロードされるたびに Yahoo! サーバーからロードされます。

これで完成です。埋め込みメディア・プレイヤーを持つウィジェットを生成するようモデルとビルダーが構成され、ユーザーが developerWorks ポッドキャストを聴けるようになりました。前のセクションで、すでにウィジェットをホーム・ページにデプロイおよび登録している場合は、WebSphere Application Server で WAR ファイルを更新するだけで、ウィジェットの強化バージョンをユーザーに利用可能にすることができます。


Google ガジェットを Lotus Connections 2.5 に追加する

Google ガジェットを使用すると、新しくて魅力的なコンテンツを最小限の作業で Lotus Connections に追加できます。約 200,000 のガジェットが登録されているカタログにより、拡張の可能性はほとんど無限です。そのほんの一例を示しましょう。

  • Facebook や MySpace など、他のポピュラーなソーシャル・ネットワーク・プラットフォームからの情報を表示する
  • YouTube からのビデオを表示する
  • 「Google Docs」ガジェットを通じてツールを統合する
  • Google Map API を再利用するさまざまなガジェットを使用して、マップ機能を統合する

Lotus Connections は、IBM が開発した iWidget 仕様に従うウィジェットのみサポートします。Google ガジェット・モデルなど、他のウィジェット・モデルに対し、すぐに使用できるサポートは用意されていません。しかし、iWidget フォーマットは、標準 Web ページにある任意のコンテンツを表示できるだけの柔軟性を持っています。一方、Google は、HTML の script タグを使用してガジェットを任意の Web ページに表示する方法を提供しています。ここでは、script タグの回りでラッパーとして動作する iWidget を使用し、Google ガジェットを表示するテクニックを利用します。

developerWorks の前の記事「IBM Lotus Connections における Google ガジェットのデプロイとインプリメント」では、Google ガジェットを Lotus Connections 2.0 に表示するために使用できるテクニックが、開発者の視点から紹介されています。このセクションの目的は、プログラミングの知識を必要とせずに、管理者が新しい Google ガジェットを Lotus Connections にデプロイするときに使用できる要約とスケルトンを提供することです。プログラミングの詳細に関してオプションであり、興味を持った読者のために、この記事の最後で触れます。

Google ガジェットを Lotus Connections に追加する簡易手順

Google ガジェットをラッピングしている iWidget のスケルトンがインプリメントされ、この記事の「ダウンロード」セクションで利用できるようになっています。このセクションでは、スケルトンを編集して、選択した Googleガジェットを表示する方法について学習します。

スケルトンは標準 Java EE (Java Platform, Enterprise Edition) の WAR ファイルとして提供され、任意の Java EE コンテナー (たとえば、Lotus Connections を実行している WebSphere Application Server) にデプロイできます。この時点で、スケルトンは Facebook Google ガジェットをラップするようあらかじめ構成されています (図 15 参照)。

図 15. Facebook Google ガジェットをラッピングし、Lotus Connections のホーム・ページで実行されている iWidget
Facebook Google ガジェットをラッピングし、Lotus Connections のホーム・ページで実行されている iWidget

以下の手順では、スケルトンを構成し、Google Gadget Catalog から選択した Google ガジェットを表示する方法を説明します。スケルトンの WAR ファイルに含まれるファイルの編集には、Eclipse 3.4 の IDE を使用する点に注意してください。WAR ファイルは、いくつかの規則に準拠した圧縮ファイルです。このため、好みに応じて任意の標準圧縮アプリケーションを使用して、このアーカイブに含まれるファイルをアクセスおよび編集することが可能です。

Eclipse IDE の入手とインストールの詳細については、公式サイト (www.eclipse.org) を参照してください。Java EE developer edition を選択するようにしてください。

まず、WAR ファイルの内容を持った Eclipse プロジェクトを作成しましょう。

  1. googleWrapperSkeleton.war という名前の WAR ファイルをダウンロードします。
  2. Eclipse で、「ファイル」->「インポート」->「Web」->「WAR ファイル」を選択します。「次へ」を選択します。参照して、ディスク上にあるダウンロード済みの WAR ファイルを選択します。プロジェクトの名前を入力します。
  3. 「Web インポート: Web ライブラリー」フォームのデフォルト値を保持し、「終了」をクリックします。WAR ファイルに含まれるファイルを持った、新しい Eclipse プロジェクトが作成されます。

これで、ウィジェットのファイルを編集する準備が整いました。最初に、Google Gadget Catalog から、ガジェット・ディスクリプターへの URL を取得する必要があります。

  1. Google Gadget Catalog に移動します。ガジェットを選択し、「自分の Web ページに追加」ボタンをクリックします。ウィジェットの説明ページに移動します。以下のステップでは、例として「BBC News」ガジェットを使用します。
  2. ウィジェットの説明ページで「自分の Web ページに追加」ボタンをクリックすると、ガジェットのカスタマイズ・ページが表示されます (図 16 参照)。このページで、サイズやタイトルなど、ガジェットの一部の属性をカスタマイズできます。ガジェットを Lotus Connections の外観と統合するには、カスタマイズ・フォームで、空の境界線とタイトルなし (空のストリング) を選択するとよいでしょう (図 16 参照)。Lotus Connections のランタイムによって、各ウィジェットの回りに境界線とタイトル・バーが自動的に作成されます。

    カスタマイズが終了したら「コードを取得」ボタンをクリックします。

    図 16. Google ガジェットのカスタマイズ・フォーム
    Customization form of the Google gadget
  3. ページの一番下のテキスト・ボックスで、script タグの src 属性の「?url=」というストリングに続く URL 部分をコピーして記録しておきます。コピー・アンド・ペースとしたストリングは、「output=js」で終わらせてください。

    たとえば、BBC ガジェットでは URL は次のようになります。

    http://shazingo.com/lig/lg/178002.xml&up_extrafeed=http%3A%2F%2Fnewsrss.bbc.co.uk%2Frss%2Fnewsonline_uk_edition%2Fhealth%2Frss.xml&up_extratitle=Health&up_subject=&up_entries=6&up_summaries=300&up_selectedTab=&synd=open&w=320&h=360&title=&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js

それでは、Eclipse に戻り、スケルトン・ファイルをカスタマイズし、選択した Google ガジェットを表示しましょう。以下の手順に従います。

  1. それでは、Eclipse に戻り、スケルトン・ファイルをカスタマイズし、選択した Google ガジェットを表示しましょう。以下の手順に従います。
  2. WebContent ディレクトリーの gadgetWrapper.xml ファイルを開きます。ID が「gadgetUrl」の iw:item ノードを見つけます (図 17 参照)。value 属性を編集し、Google Gadget Catalog で選んだガジェットの URL を貼り付けます。

    図 17. gadgetWrapper.xml 内で Google ガジェット・リンクを使用して編集するノード
    gadgetWrapper.xml 内で Google ガジェット・リンクを使用して編集するノード

    ヒント : 垂直スクロール・バーが表示されるのを防ぐために、height 項目の設定値を編集して、Lotus Connections 内でウィジェットが利用する全体の高さを調整することができます。

  3. Eclipse の「プロジェクト・エクスプローラー」パネルでプロジェクトを右クリックし、「エクスポート」->「WAR ファイル」を選択します。ファイルを保存するディスク上の場所を選択し、「終了」をクリックします。

この記事の最初のセクションで Lotus Widget Factory を使用して作成したウィジェットについては、次の手順に従う必要があります。

  1. WebSphere Application Server で WAR ファイルをデプロイし、対応する Web アプリケーションを起動します。デプロイ時に、Web アプリケーションのコンテキスト・ルートを指定し、Lotus Connections での登録ステップ用にそれを記録しておきます。この手順は標準的なもので、他の Java EE アプリケーションでの手順と異なりません。詳細については、IBM WebSphere Application Server 6.1 Information Center を参照してください。
  2. 新しいウィジェットを Lotus Connections のホーム・ページに登録します。ウィジェットの XML ディスクリプターの URL は以下のとおりです。

    http://<server>:<port>/<contextRoot>/gadgetWrapper.xml

    server、port、および contextRoot は、WAR ファイルをデプロイした場所に応じて異なります。

    手順は、前に Lotus Widget Factory を使用してホーム・ページ用のウィジェットを作成したときと同じです。また、詳細については、Lotus Connections 2.5 Information Center のドキュメンテーションを参照してください。

これで完成です。図 18 に、「BCC News」ウィジェット、他の 2 つの Google ガジェット (「Facebook」、「Currency Convertor」)、Lotus Widget Factory で作成した DeveloperWorks ウィジェット、および Lotus Connections に含まれるウィジェットのすべてが表示されている、完成したユーザー・エクスペリエンスを示します。

図 18. さまざまなロケーションからのウィジェット (Google ガジェット、Lotus Widget Factory で作成したウィジェット、標準 Lotus Connections ウィジェット) が表示された Lotus Connections 2.5 のホーム・ページ
さまざまなロケーションからのウィジェット (Google ガジェット、Lotus Widget Factory で作成したウィジェット、標準 Lotus Connections ウィジェット) が表示された Lotus Connections 2.5 のホーム・ページ

iWidgets に関する追加説明

この記事の最初の 2 つのセクションでは、コードを記述せずに Lotus Connections 用のウィジェットを作成する簡単な 2 つの方法を紹介しました。このセクションは、より詳細を知り、内部で何が起きているのかを理解したい読者を対象とします。このセクションの目標は、Lotus Widget Factory などのツールで可能なカスタマイズよりも、より高レベルにカスタマイズしたウィジェットを実装したい開発者に、スタート地点を提供することです。記事の他の部分とは異なり、このセクションでは、Web アプリケーション開発に関する知識が必要です。

このセクションには、Lotus Connections 2.0 用にリリースされた developerWorks の前の記事「IBM Lotus Connections における Google ガジェットのデプロイとインプリメント」との類似点があります。このセクションでは、仕様全体を繰り返し説明するのを避け、iWidgets の主な機能に重点を置いて、前の記事のサンプルに言及します。また、iWidgets に関連する Lotus Connections 2.5 の新機能についても紹介します。

iWidget 仕様の簡単な説明

iWidgets という用語は、IBM が開発したウィジェット定義用の仕様を示します。Lotus Connections や Lotus Mashups などの一部の IBM 製品には、iWidget 仕様に準拠したウィジェットをレンダリングできる、iWidget フレームワークと呼ばれる共通のコンポーネントが組み込まれています。

iWidget 仕様は、ウィジェットのクライアント・サイドのアスペクト、つまりブラウザーで実行される部分だけを定義していることに注意してください。ウィジェットのサーバー・サイドのコードには、使用する技術の制限がありません。通常、ウィジェットのクライアント・サイド・コンポーネントとサーバー・サイド・コンポーネント間の通信は、たとえば非同期要求 (Ajax) などの標準技術を通じて行われます。

iWidget の基本レベルは、ウィジェット開発者が記述した XML ディスクリプターによって定義されます。ディスクリプターには次のものが含まれています。

  • ウィジェットがサポートしている 1 つ以上のビューのマークアップ (HTML コード) を定義する方法。
  • ウィジェットが使用する外部リソース (JavaScript ファイルや CSS ファイルなど) を示す機能。通常、JavaScript ファイルには、ウィジェット開発者によって記述され、ウィジェットの動作とロジックを定義するコードが含まれています。
  • カプセル化に関連するいくつかの属性。1 つのページ上で同じウィジェットの複数のインスタンスをリソースの競合なしに開くには、カプセル化が必要です。このメカニズムのメインのアスペクトとなるのは、XML ディスクリプターで定義された iScope 属性です。iScope 属性は、ウィジェットの動作を定義し、前の項目で述べた外部 JavaScript ファイルの 1 つに実装される JavaScript クラスの名前を示します。

基本的な iWidget の概念を示す具体例については、前の記事「IBM Lotus Connections における Google ガジェットのデプロイとインプリメント」(http://www.ibm.com/developerworks/lotus/library/connections-gadgets/) の最初のセクションに記載されている「Hello World」iWidget を参照してください。

また、iWidget 仕様は、ウィジェット開発者によって使用されるいくつかのサービスも定義します。iWidget フレームワークによって提供されるサービスは、ウィジェット・インスタンスの iScope クラスで自動的に設定される iContext という名前のオブジェクトにメソッドを呼び出すことによって使用できます。iWidget 仕様によって提供されるサービスの簡単な概要を以下に示します。

  • プロパティー・ストア。iWidget フレームワークには、itemSets と呼ばれる名前と値のペアを持続および管理する機能があります。itemSets はウィジェットの XML ディスクリプターで宣言し、iScope JavaScript コードで操作できます。
  • Ajax プロキシーを通じて要求をリダイレクトすることにより、ウィジェットが任意のドメインからリソースを取り出せるようにする IO モジュール。
  • イベントをパブリッシュおよびキャッチすることにより、ページ上でウィジェットどうしが相互に通信することを可能にするイベント・システム。この機能は Lotus Mashups 環境に固有のものであり、Lotus Connections では制限されていることに注意してください。

記事「IBM Lotus Connections における Google ガジェットのデプロイとインプリメント」の 2 番目のセクションでは、iWidget フレームワークによって提供されるさまざまな機能が、Google ガジェット・ラッパーをインプリメントする具体的な例を通じて紹介されています。さらに、前の記事で紹介されたラッパーは、ウィジェットの編集ビューからガジェットのカスタマイズをユーザーに許可することにより、さらに詳細な内容へと進んでいます。これは、汎用のスケルトンによるアプローチでは不可能な内容です。

iWidget のインプリメントの詳細については、「Lotus Connections iWidget 開発ガイド(US)」を参照してください。

iWidget 仕様 v1.0(US) 文書の全体をダウンロードできます。

Lotus Connections 2.5 での iWidget 仕様 v1.0

Lotus Connections 2.0 は、バージョン 1.0 よりも前の iWidget 仕様に基づいていました。

Lotus Connections 2.5 は、iWidget 仕様 v1.0 文書の最終バージョンに従って記述された iWidget 仕様をサポートするようになりました。具体的には、開発者とって次のような内容になっています。

  • 持続メカニズムの向上。Lotus Connections 2.5 は、あらかじめ定義された itemSet という名前の管理対象属性をサポートします。開発者はこの itemSet を使用して、ユーザー・セッション間にわたって名前と値のペアを持続させることができます。itemSet 属性と通常の itemSet の最も大きな違いは save() メソッドの存在です。ウィジェット・コードからこのメソッドが呼び出されると、項目 (名前と値のペア) が ユーザー・セッション間にわたって持続されます。itemSet 属性への参照は、iContext.getiWidgetAttributes() への呼び出しによって返されます。

    Lotus Connections 2.0 のホーム・ページでは _save and _load という名前のメソッドに基づいてカスタム持続メカニズムが提供されていることが、前の記事「IBM Lotus Connections における Google ガジェットのデプロイとインプリメント」(http://www.ibm.com/developerworks/lotus/library/connections-gadgets/) に記載されています。これらのメソッドは後方互換性のために Lotus Connections 2.5 でもサポートされていますが、新しいウィジェットには使用しないでください。developerWorks の前の記事および Google の「Date Time」サンプルでは、カスタム持続メカニズムが使用されていました。新しい管理対象属性 itemSet を使用して更新された「Date Time」のサンプル (gadgetWrapperDateTime2_5.war) がこの記事に添付されています。

  • 認証済みユーザーに関する詳細情報を一貫した方法で取得。iContext オブジェクトで getUserProfile() メソッドを使用すると、認証済みユーザーに関する情報が含まれる itemSet を取得できます。たとえば、「this.iContext.getUserProfile().getItemValue(‘displayName’)」は認証済みユーザーの名前を返します。詳細については、Wiki ページ (http://www-10.lotus.com/ldd/lcwiki.nsf/dx/common-iwidget-support-in-the-lotus-connections-features) の「Obtaining information about the logged in user with UserProfile」を参照してください。

Lotus Connections 2.5 のホーム・ページ、コミュニティー、プロフィールでの iWidgets

この記事では Lotus Connections のホーム・ページ機能に焦点を当ててきましたが、コミュニティーとプロフィールも Lotus Connections 2.5 で iWidgets を使用することにより拡張することが可能です。ホーム・ページ、コミュニティー、およびプロフィールは同じバージョンの iWidget 仕様 (v1.0) をサポートしているため、iWidget 仕様に厳密に従うウィジェットは、変更なしにこれらの 3 つのコンポーネントでレンダリングできます。これは、Lotus Widget Factory によって作成されたウィジェット、およびこの記事の最初の 2 つのセクションで使用した Google ガジェットにもあてはまります。

コミュニティーおよびプロフィールでの iWidgets については、次の点を考慮してください。

  • コミュニティーでは、コミュニティーの所有者がコミュニティー・ページのあらかじめ決められた領域にウィジェット・パレットを通じてウィジェットを配置できます。あらかじめ決められた領域の詳細については、「Lotus Connections iWidget 開発ガイド(US)」を参照してください。

    また、管理者は必須ウィジェットを定義できます。必須ウィジェットとは、どのコミュニティー・ページにもデフォルトで表示されるウィジェットで、コミュニティーの所有者はこのウィジェットを削除できません。

  • プロフィールは必須ウィジェットのみサポートします。つまり、プロフィールの所有者は、ホーム・ページおよびコミュニティーとは異なり、パレットからウィジェットを追加または削除することができません。

  • コミュニティーおよびプロフィールでの新規ウィジェットのデプロイメントは、ホーム・ページのようにユーザー・インターフェースから行うのではなく、サーバー上の XML 構成ファイルを編集することによって行います。詳細については、IBM Lotus Connections 2.5 Information Center を参照してください。


まとめ

この記事では、Web 開発の詳細な知識を必要とせずに、Lotus Connections 用のウィジェットを作成する 2 つの方法を説明しました。最初のセクションでは、Lotus Connections 用の複雑なウィジェット作成するための開発ツールとして Lotus Widget Factory を紹介し、developerWorks からのポッドキャストを表示するウィジェットの具体例を用いて作成手順を示しました。

2 番目のセクションでは、膨大な Google Gadget Catalog を活用し、Lotus Connections ユーザーに新しい機能をもたらす手順の概要を説明しました。

最後に、3 番目のセクションでは、iWidget 仕様をより詳しく理解し、従来からの開発ツールを使用して独自の iWidgets を実装したい開発者にとってスタート地点となる内容を記述しました。


謝辞

著者は、この記事をレビューして改善のために役立つ助言をいただいた Luis Benitez 氏と Adrian Spender 氏に感謝します。


ダウンロード

内容ファイル名サイズ
gadgetWrapperDataTime2_5.war4KB
googleWrapperSkeleton.war4KB

参考文献

学ぶために

製品や技術を入手するために

議論するために

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Lotus, WebSphere
ArticleID=475200
ArticleTitle=Lotus Widget Factory および Google ガジェットを使用した IBM Lotus Connections 2.5 のカスタマイズ
publish-date=03262010