Japan [変更]

目次:
	はじめに
	ガジェットを解剖する
	ガジェットを作成し、公開する
	単純なフローを利用する
	フィードをガジェットに変える
	まとめ
	謝辞
	参考文献
	著者について
	記事の評価

関連リンク
	WebSphere 記事一覧
	Web development 記事一覧

developerWorks Japan > WebSphere | Web development >

WebSphere sMash を使って Google ガジェットを機能強化する

ページオプション

JavaScript を要するドキュメントオプションは表示されません

原文はこちら

レベル: 中級

Vijaykumar Palat (vpalat@us.ibm.com)IBM Software Services for WebSphere for IBM

2008年 06月 04日

IBM® WebSphere® sMash には、Web 2.0 アプリケーションで情報を共有するためのさまざまな方法が用意されています。この記事では、WebSphere sMash を使って Google ガジェットをゼロから作成し、それを公開し、さらに機能強化するための方法を紹介します。それとともに、このガジェットの XML 仕様を検証し、WebSphere sMash のフロー・モデルとフィード・ツールを使用して、最終的にこのガジェットを Web ページにデプロイします。

はじめに

IBM WebSphere sMash は Web 2.0 アプリケーションを開発、提供するための柔軟でアジャイルなプラットフォームです。WebSphere sMash は動的言語を含む使いやすいプログラミング・モデルを持っており、RESTful なサービスを構築して SOA を拡張するための素晴らしい環境を提供しています。そのため WebSphere sMash を利用すると、その状況ごとの目的に最も適った方法でサービスを利用できるようになります。この記事では Google ガジェットを作成する方法について説明します。Google ガジェットは HTML と JavaScript™、そして XML で構築される軽量のモジュールであり、さまざまな Web ページに置いて利用することができ、また WebSphere sMash を活用して機能強化することができます。

上に戻る

ガジェットを解剖する

ガジェットは HTML と JavaScript による簡単なミニ・アプリケーションであり、他の人とデータを共有するための軽量な方法として利用することができます。作成したガジェットは、iGoogle や Google マップ、Orkut、IBM WebSphere Portal、あるいはほとんどすべての Web ページやデスクトップなど、さまざまな場所で利用することができます。図 1 は iGoogle の Web ページを示しています。iGoogle は Google のホームページをカスタマイズ可能な形でポータル化したものであり、ここには Slashdot.org や Fool.com、BBC News、Kiplinger Personal Finance など他のサイトの情報を引用したさまざまな Google ガジェットが追加されています。

図 1. iGoogle の Web ページ

基本的なガジェットは、HTML と XML、そして JavaScript から作成することができます。ガジェットはガジェット・コンテナーに描画される HTML と JavaScript を XML 文書を使って記述します (ガジェット・コンテナーはガジェットをページ上に表示させるための一連の関数です)。この記事では iGoogle.com のページをコンテナーとして使いますが、WebSphere Portal のような製品、あるいは Google が提供するコード・スニペットを利用して、通常の Web ページ上にガジェットを表示することもできます。ガジェットを作成するための出発点はガジェットの仕様ファイルです。その一例をリスト 1 に示します。

リスト 1. Google ガジェット用のガジェット仕様

                
<?xml version="1.0" encoding="UTF-8" ?> 
<Module> 
  <ModulePrefs title="Gadget Sample" 
     title_url="http://www.ibm.com/developerworks/" 
     height="200" 
     author="Jay Palat" 
     author_email="vpalat@us.ibm.com"/> 

  <UserPref name="exampleStr" display_name="Name" required="true" /> 

<Content type="html"> 
	<![CDATA[ 
		Hello, world!]]> 
</Content>
</Module>

これを分解すると、ガジェットが次の 3 つの部分から成るモジュールであることがわかります。

モジュール・プリファレンス

ModulePrefs (リスト 2) は、そのモジュール、つまりガジェットそのものを指し、公開と購読のための属性を提供します。表示用の属性には、タイトル、タイトルの URL、ガジェットの大きさ (高さと幅)、スクロールの有無 (ガジェットのコンテンツがページの限界を超える場合)、作成者の情報 (名前、E メール・アドレスなど) などがあります。モジュールが特別なライブラリーを使用する場合には、そのライブラリーも ModulePrefs の中に含める必要があります。

リスト 2. モジュール・プリファレンス
<ModulePrefs title="Gadget Sample" title_url="http://www.ibm.com/developerworks/" height="200" author="Jay Palat" author_email="vpalat@us.ibm.com"/>
また、(詳しくは説明しませんが) ModulePrefs ではその他の性質 (ロケールや動作条件など) も指定することができます。ロケールではガジェットのコンテンツが対応している言語や国を指定し、動作条件では一定の条件下でガジェットが動作するために必要となる動作環境に対する基準をガジェットの作成者が指定します。例えば、あるガジェットを実行させるためには特別なプラットフォームやブラウザー、あるいはプラグインが必要かもしれません。

ユーザー・プリファレンス

UserPref (リスト 3) によって、特定のプリファレンスをガジェットに設定することができます。例えば、ガジェットの外観をユーザーが変えられるようにしたい場合があるかもしれませんん。ユーザー・プリファレンスにはいくつかのコンポーネントがあります。name 属性はプリファレンスそのものの名前です。display_name 属性に名前が指定されていなければ、ユーザーにはデフォルトで UserPref の name 属性の値が表示されます。UserPref は複数のデータ型をサポートしています (string型 (デフォルト) やブール型、enum 型、hidden 型、list 型など)。

リスト 3. ユーザー・プリファレンス

                        
<UserPref name="exampleStr" display_name="Name" required="true" /> 
<UserPref name="exampleStr2" display_name="Photo"
	default_value="http://doc.examples.googlepages.com/Rowan-headshot.jpg"/> 
<UserPref name="exampleBool" display_name="Show Photo?" datatype="bool"
	default_value="true"/> 
<UserPref name="exampleEnum" display_name="Color" default_value="Yellow" 
	datatype="enum" > 
    <EnumValue value="Red" /> 
    <EnumValue value="Yellow" /> 
    <EnumValue value="Blue" /> 
</UserPref>

ユーザーは、隠しストリングを表示したり編集したりすることはできません。また、ある UserPref の required フラグが true に設定されている場合には、その UserPref がセットされるまでガジェットは描画を行いません。

コンテンツ

コンテンツはガジェットの本体の部分であり、ガジェットは提供されるコンテンツのタイプを宣言する必要があります (選択できるのは HTML と URL です)。HTML 型のガジェットは、そのガジェットを動作させるために必要な HTML と JavaScript を XML 文書自体の中にカプセル化します。コードはすべて、そのガジェットの中で完結します。そのため、HTML 型のガジェットには次のように CDATA タグが必要です。

<Content type="html"> <![CDATA[ HTML here... ]]>

下記を見るとわかるように、ガジェットの中に含まれる HTML には <html> タグや <head> タグ、<body> タグが含まれていないことに注目してください。これらの項目はガジェット・コンテナーのレベルで処理され、ガジェットの HTML フラグメントの中に含める必要はありません。

<Content type="html">
 
	<![CDATA[
 
		Hello, world!]]>

		</Content>

通常の HTML ページと同様、JavaScript をインラインで含めることもでき、あるいは外部ファイルを介して含めることもできます。Google には、そのために一連の JavaScript ライブラリーが用意されています。Core JavaScript ライブラリーを利用すると、UserPref セクションで作成されたユーザー・プリファレンスにアクセスすることができます。

リスト 4. Core JavaScript ライブラリーを使う

                        
<![CDATA[ 
	<script type="text/javascript"> 
	function getPrefs() 
		var prefs = new _IG_Prefs(__MODULE_ID__); 
		var name = prefs.getString("exampleStr"); 
		var url = prefs.getBool("exampleStr2"); 
		var bool = prefs.getBool("exampleBool"); 
		var primaryColor = prefs.getString("exampleEnum"); 

	...

また Google には、フィードや画像、XML 文書などのコンテンツを扱うためのライブラリーも提供されています。表 1 は Google のページから引用した、いくつかの例を示しています。

表 1. Google ガジェットのコアの JavaScript ライブラリーに用意されている機能の抜粋

関数	説明
`_IG_FetchContent(url, func, {refreshInterval:num})`	url にあるコンテンツを取得します。コンテンツが取得できると func を呼び出します。_IG_FetchContent() が非同期であることに注意してください。つまりこの関数は即座にリターンし、後でコンテンツの取得が終了してから内部関数が呼び出されます。これは、すべての従属コードをコールバック関数の中に、あるいはコールバック関数から呼び出される関数の中に置く必要があるということです。オプションの refreshInterval パラメーターを利用すると、デフォルトのキャッシュ動作を無効にして num 秒ごとにキャッシュを更新することができます。
`_IG_FetchXmlContent(url, func, {refreshInterval:num})`	url にある XML コンテンツを取得します。コンテンツが取得できると func を呼び出します。オプションの refreshInterval パラメーターを利用すると、デフォルトのキャッシュ動作を無効にして num 秒ごとにキャッシュを更新することができます。この関数も非同期です。
`_IG_FetchFeedAsJSON(url, func, num_entries, get_summaries)`	url にある RSS / Atom フィードのコンテンツを取得し、それを JSON オブジェクトとして返します。コンテンツが取得できると func を呼び出します。num_entries に指定されている数のフィード・エントリーを取得し (デフォルトは 3、可能な範囲は 1 から 100)、またオプションとして、get_summaries の値に応じてエントリーの要約を取得します (デフォルトは false)。この関数も非同期です。
`_IG_RegisterOnloadHandler(func)`	ガジェットがロードされると呼び出されるイベント・ハンドラーです。引数として取るのは、ガジェットがロードされた後に呼び出される関数の 1 つのみです。引数として渡される関数は、引数を取りません。
`_gel(id)`	JavaScript の document.getElementById() 関数のラッパーです。
`_args()`	document.location で取得した URL パラメーターのキーと値のペアを連想配列として返します。そのため、例えば次のような場合、 `&foo=bar&up_cats=meow` は下記として返されます。 `{"foo":"bar", "up_cats":"meow"}`. これを利用して、言語または国を次のような方法で取得することができます。 `var lang = _args()["lang"]; if (typeof lang == "undefined") { lang = "en"; }`
`_IG_GetImage(url, {refreshInterval:num})`	url で指定された画像のキャッシュされたバージョンを返します。これによって、静的な画像を持つガジェットのパフォーマンスを改善することができます。例えば次のようにすることができます。 `var img = _IG_GetImage(my_image_url);` オプションの refreshInterval パラメーターを利用すると、デフォルトのキャッシュ動作を無効にして num 秒ごとにキャッシュを更新することができます。また、キャッシュされたコンテンツにアクセスするために _IG_GetImageUrl() 関数と _IG_GetCachedUrl() 関数を利用することもできます。 (「ガジェットパフォーマンスの改善」も参照してください。)
`_IG_GetCachedUrl(url, {refreshInterval:num})`	url で指定されたファイルがキャッシュされているプロキシーの URL を返します。キャッシュされたコンテンツを使うことでガジェットのパフォーマンスを向上させることができます。オプションの refreshInterval パラメーターを利用すると、デフォルトのキャッシュ動作を無効にして num 秒ごとにキャッシュを更新することができます。

多くのガジェットは単純に HTML タイプで作成されていますが、サーバー・ベースのソリューションからガジェットを実行した方が適切なこともあります。そうした場合には、以下のようにコンテンツのタイプに URL を指定します。

<Content type="url"
href="http://www/cgi-bin/example/gadgets/mystats.cgi" />

URL ベースのガジェットは、すべての処理とロジックをサーバー・サイドで行います。これらのガジェットは iframe を使って提供されますが、ガジェットの作成者は CSS を使って iframe の枠線を隠す必要があります。

上に戻る

ガジェットを作成し、公開する

基本的な XML 仕様を作成する際に、どんなテキスト・エディターを使うこともできますが、この記事では使いやすさを考えて Google Gadgets Editor (図 2) を使います。Google Gadgets Editor は構文強調機能を持つ基本的なテキスト・エディターで、このエディターにはプレビュー・モードも用意されているため、そのガジェットがデプロイされた際の様子を表示することができます (図 3)。Google Gadgets Editor のページには、入手可能な他のガジェットのサンプルや API の例も提供されています。

図 2. Google Gadgets Editor: 編集モード

図 3. Google Gadgets Editor: プレビュー・モード

(この例ではプレビュー機能は使わないため、エディターで作業する際には値を false に設定しますが、公開する際には true に設定します。)

Google Gadgets Editor には次のようなコマンドが用意されています。

New:新しいファイルを作成します。
Open...:Google のホスト・プラットフォームから既存のファイルを開きます。
Open from URL:リモートの URL からファイルを開きます。
Save:ファイルを保存します。
Save As:ファイルを新しい名前で保存します。
Rename:既存のファイルをリネームします。
Upload:編集対象のファイルをアップロードします。
Publish:ガジェットを公開します。

ガジェットを公開すると、コンテンツは誰もが入手できる公開された場所に置かれます。Google に公開すると、他の開発者は、サービスのキャッシュ機能や高可用性といった Google のインフラの特徴を活用して開発を行うことが可能になります。ただしガジェットは任意の Web サイトに公開することができ、ガジェット・コンテナーのページが単純にそのガジェットの URL を指すようにすることができます。

これから先のセクションでは、WebSphere sMash のフロー・モデルとフィード・ツールを使ってフィードを元にしたコンテンツを作成する方法を説明します。そして次に、WebSphere sMash を使ってガジェットを機能強化する方法について説明します。

上に戻る

単純なフローを利用する

WebSphere sMash では、Assemble コンポーネントを使ってフィードを集約し、サービスを連携させることができます。ここではフィードの集約機能を使って既存のフィードからデータを取得し、またそうしたデータを利用するガジェットを機能強化します。

フローは次のようなコンポーネントと機能で構成されています。

Feed: ソース・フィード。WebSphere sMash で利用できるフィードのタイプは、RSS 0.x、RSS 1.0、RSS 2.0、Atom 0.3、Atom1.0 です。
SortFeed: フィードをソートします。SortFeed を利用すると、フィードのエントリーをタイトルや日付などの属性によって昇順または降順でソートすることができます。
AggregateFeeds: 2 つ以上の入力フィードをサポートし、そして Atom 1.0 型で 1 つのフィードを出力します。
FilterFeed: FilterFeed を利用すると、フローを選択するための基準を指定することができます。Atom の出力ノードのエントリーを選択するためにはキーワードまたは XPath 1.0 の XPath 式のブール値を使います。
Unique: 重複したファセットを XPath 式を使って特定することで、重複したエントリーを削除します。
Truncate: 例えば入力フィードの最初の 10 個のエントリーなど、特定のエントリー・セットを返します。

もちろん、他にもたくさんありますが、この記事の目的にはこれだけで十分です。(他にどのようなオペレーターが利用できるかに関しては WebSphere sMash に関するドキュメントを参照してください。)

では、WebSphere sMash のフローを使って IBM developerWorks の 1 対のフィードを WebSphere sMash に集約するガジェットを作成しましょう。

まだ Project Zero または WebSphere sMash をインストールしていない場合には、WebSphere sMash の Developer’s Edition を Project Zero の Web サイトから無料でインストールすることができます。この Web サイトには WebSphere sMash のインストール方法やドキュメントも用意されています。

インストールが終わると、WebSphere sMash の App Builder (図 4) を使ってフローの作成を開始することができます。まず、コマンド・プロンプトから適切な起動コマンドを入力します。(リスト 5 のコマンドは Linux で App Builder を起動するために使用したものです。プラットフォームに対応したコマンドを見つけるには、WebSphere sMash の CLI モジュールをインストールしたディレクトリーにある startAppBuilder スクリプトを参照してください。)

リスト 5. WebSphere sMash App Builder を起動する

                        
vpalat@vpalat-laptop2:~/zero$ ./startAppBuilder 
Application started and servicing requests at http://localhost:8070/ 
CWPZT0600I: Command start was successful 
vpalat@vpalat-laptop2:~/zero$

図 4. WebSphere sMash の App Builder

フィードを作成するためには、左のナビゲーション・ボックスにある New Application リンクをクリックして新しいアプリケーションを作成します (図 4)。
New Application パネル (図 5) で次のようなデータを入力し、アプリケーションを記述します。
- Application Name:GadgetFeed
- Application Path:<HomePath>/GadgetFeed/
- Application Description:Feed Aggregation for Google Gadgets
Create ボタンをクリックすると、更新されたメイン・メニューに戻ります (図 6)。

図 5. New Application パネル
アプリケーションを編集するには、鉛筆のアイコンをクリックします (図 6)。すると GadgetFeed Editor (図 7) が表示され、ここからアプリケーションのファイルへの追加や編集を行うことができます。

図 6. メイン・メニューと Edit アイコン

図 7. GadgetFeed Editor
新しいフローを作成するには、アプリケーション・ディレクトリーの公開フォルダーの中に新しいファイルを作成する必要があります。そのために New File => New Page (in /public) をクリックします (図 8)。

図 8. New Page メニュー
作成したいファイルを入力するように促されたら、/public/gadget/websphere.flow と入力します。すると、このファイルが公開ディレクトリーに作成されます (図 9)。

図 9. ファイルの作成
次に App Builder は、zero.assemble.flow という依存関係を追加するように促します (図 10)。Add をクリックします。

図 10. 依存関係の追加

なぜ、この依存関係を追加するのでしょう。アプリケーション・サーバーは最初からすべてのクラス・ライブラリーを提供しますが、WebSphere sMash はそれとは異なり、必要になったときに依存関係を追加します。このようにすることで、アプリケーションは必要なものだけを持つことができ、余分なものを持たずに済みます。依存関係のリスト (図 11) を見ると、現在使用されている Modulegroups (zero.core と zero.assemble.flow、そして zero.flow.management) のみが表示されていることがわかります。

図 11. アプリケーションの依存関係
アクティビティーを検索するドロップダウン・メニューで、Feed Activities が選択されていることを確認します。

図 12. アクティビティーの更新
下記の URL のフィードをインポートするために Feed アイコンを Editor パネルの上までドラッグし、これらの値で URL を更新します (図 13)。

http://www.ibm.com/developerworks/views/webservices/rss/libraryview.jsp http://www.ibm.com/developerworks/views/websphere/rss/libraryview.jsp

図 13. フィード・オペレーターの追加
これらのフィードを FeedAgregator を使ってマージします。それには aggregateFeeds オペレーターをエディターにドラッグします (図 14)。タイトル (title) と説明 (description) を適切なものに変え、これらのフィードの出力を aggregateFeeds ウィジェットの入力に接続します。

図 14. aggregateFeeds オペレーターの追加
フィードを集約するために、フィードの出力をドラッグして aggregateFeeds の入力に接続します (図 15)。

図 15. フィードの集約
aggregateFeeds ウィジェットは Atom オブジェクトを返しますが、このオブジェクトを要求側に返すためには replyGet エントリーを含める必要があります。replyGet アクティビティーは HTTP GET リクエストに対するレスポンスを提供します (それまでは receive アクティビティーによって対応していました)。各フローは 1 つの HTTP レスポンスしか実行することができません。replyGet 項目を Feed Activities から Editor にドラッグします。aggregateFeeds の出力を replyGet 項目にドラッグし、replyGet を aggregateFeeds にリンクします (図 16)。

図 16. replyGet の追加
エディターは変更を自動的に保存してくれます。保存されないファイルの名前にはアスタリスク (*) が印として付けられます (図 17)。一方、保存されるファイルの名前にはアスタリスクが付きません (図 18)。

図 17. 保存されないフロー

図 18. 保存されるフロー
フローを開始するためには、パネルの左上にある Run をクリックします (図 19)。これによってポート 8080 でアプリケーションの実行が始まります。

図 19. フロー停止中のパネル

図 20. フロー実行中のパネル
ブラウザーで http://localhost:8080/gadget/websphere.flow にナビゲートし、フローを呼び出します (図 21)。

図 21. フィードの呼び出し
これでも悪くありませんが、なぜ「Integrating IT monitoring and business activity monitoring」がリストの中に 2 度表示されているのでしょう。実はこのフローの中に統合した 2 つのフィードの間で、いくつかの記事が共有されているのです。これは unique オペレーターを追加すれば解決することができます。Feed Activities メニューからエディターに unique オペレーターをドラッグします (図 22)。

図 22. unique オペレーターを追加する
aggregateFeeds と replyGET を結ぶリンクをクリックし、次にハサミのアイコンを選択し、このリンクを削除します (図 23)。

図 23. リンクの削除
リンクを削除したら、aggregateFeeds を unique_0、に接続し、さらに unique_0 を replyGET_0 に接続します。タイトルによって一意に記事が決まるようにするために、unique_0 のドロップダウン・メニューで atom:title を選択し (図 24)、このフローを保存します。

図 24. 評価動作の選択
再度 http://localhost:8080/gadget/websphere.flow にアクセスしてみます (図 25)。そうすると今度は「Integrating IT monitoring and business activity monitoring」が 1 度しか表示されないことがわかります。

図 25. 一意に決まるエントリーに変更されたフィード

上に戻る

フィードをガジェットに変える

これでフィードは完成したので、今度はこのフィードをガジェットに変えましょう。

まず、基本的な例から始めましょう。この例にはユーザー・プリファレンスがありませんが、ガジェットの作成を始めるための JavaScript が多少用意されています (リスト 6)。

リスト 6. 単純なスタート

                        
<?xml version="1.0" encoding="UTF-8" ?> 
<Module> 
  <ModulePrefs title="Gadget Sample" 
     title_url="http://www.ibm.com/developerworks/" 
     height="200" 
     author="Jay Palat" 
     author_email="vpalat@us.ibm.com"/> 

<Content type="html"> 
<![CDATA[ 
<style> #content_div { font-size: 80%; margin: 5px; background-color: #FFFFBF;} 
	</style> 

<div id=content_div></div> 

<script type="text/javascript"> 
function showfeed__MODULE_ID__() { 
var html = "Powered by JavaScript"; 

_gel("content_div").innerHTML = html; 
}; 

_IG_RegisterOnloadHandler(showfeed__MODULE_ID__()); 
</script> 
]]> 
</Content> 
</Module>

この例ではまず、コンテンツにフォーマットを提供するためのスタイルシートから始めます。コンテンツを置くための div コンテナー (<div id=content_div></div>) を作成し、そして最後に JavaScript 関数が登場します (リスト 7)。

リスト 7. JavaScript 関数

                        
<script type="text/javascript"> 
function showfeed__MODULE_ID__() { 
var html = "Powered by JavaScript"; 

_gel("content_div").innerHTML = html; 
}; 

_IG_RegisterOnloadHandler(showfeed__MODULE_ID__()); 
</script>

この関数は showfeed__MODULE_ID__() であり、__MODULE_ID__ はこの特定のモジュールの ID で置き換えられます。この関数自体は単純な HTML ストリングを作成し、それを先ほど数行前に作成したコンテンツ用の div の中に置きます。最後の行の _IG_RegisterOnloadHandler(showfeed__MODULE_ID__()); は起動時に showfeed__MODULE_ID__() を実行します。図 26 は、このサンプルが Google Gadgets Editor のプレビュー・モードでどう見えるかを示しています。

図 26. プレビュー・モード
Figure 26. Preview mode

このサンプルはガジェットの中で JavaScript を使うための出発点としては適切ですが、どのようにフィードを取り込めばよいのかを見てみましょう。そのためには _IG_FetchFeedAsJSON 関数を使います。この関数は次のような引数を取ります。

URL: フィードの場所 (ストリング)
関数: フィードを取得した後でガジェット・エンジンが使用する関数 (JavaScript 関数)
エントリーの数: フィードから取得するエントリーの数 (整数でデフォルトは 3)
要約取得の有無: true の場合、この関数は要約を取得します (ブール値、デフォルトは false)

ではフィードを取り込んでみましょう。これまでは WebSphere sMash を localhost から見ていたにすぎないことに注意してください。これ以降、WebSphere sMash のインスタンスは公開され誰もが利用できる必要があります。Google のインフラは公開フィードを参照できる必要があるからです。

リスト 8. フィードのコンテンツを表示するための新しいスクリプト

                        
<script type="text/javascript"> 
var entries = 5; 
var summaries = false; 


_IG_FetchFeedAsJSON("http://6myhost.com:8080/gadget/websphere.flow", function (feed)
{ 
if (feed == null){ 
alert("There is no data."); 
return; 
} 
var html = "" 
html += "<div><b>" + feed.Title + "</b></div>"; 
html += "<div>" + feed.Description + "</div><br>"; 

if (feed.Entry) { 
for (var i = 0; i < feed.Entry.length; i++) { 
html += "<div>" 
+ "<li><a target='_blank' href='" + feed.Entry[i].Link + "'>" 
+ feed.Entry[i].Title 
+ "</a> "; 
} 
html += "</div>"; 
} 

_gel("content_div").innerHTML = html; 
}, 
entries, summaries); 

</script>

リスト 8には _IG_FetchFeedAsJSON 関数が追加され、さらに sMash のインスタンスがフィードに追加されています。これは単にインターネットでアクセスできる IP アドレスを localhost に使う、ということにすぎません。function (feed) 関数は IG__FetchFeedAsJSON の一部として記述されています。インライン関数はフィードがあることを確認してからフィードの詳細を HTML に追加します (フィードが空の場合にはアラートを返します)。エントリーの数は 5 に設定され、また要約取得の有無は false に設定されています。これを先ほどのサンプルに適用した場合のプレビューを図 27 に示します。

図 27. フィードを取り込んだ状態のプレビュー
Figure 27. Preview incorporating feed

これは悪くありませんが、5 つのフィード項目のうちの 3 つしか表示されていません。これを修正するために、ModulePrefs を変更してスクロールを許可するようにします。そのためにはガジェットのコードに scrolling パラメーターを追加します。下記のリストではこれを太字で示してあります。

リスト 9. 修正されたガジェット
<ModulePrefs title="Gadget Sample" title_url="http://www.ibm.com/developerworks/" height="200" author="Jay Palat" scrolling="true" author_email="vpalat@us.ibm.com"/>
このように修正すると、結果は図 28 のようになります。

図 28. スクロール可能なガジェット

これも悪くはありませんが、もっと良いものにすることができます。もしユーザーがエントリーを 5 つよりも多くしたいとしたら、あるいはこれらの記事の要約を見たいとしたら、どうすればよいのでしょう。そうした選択ができるようにするためには、ユーザー・プリファレンスを使います。そこで、エントリーの数に対するユーザー・プリファレンスを追加し、もう 1 つ、要約機能を使うかどうかのユーザー・プリファレンスを追加します (リスト 10)。

リスト 10. ユーザー・プリファレンスの追加

                        
<UserPref name="num_entries" display_name="Number of Entries?" default_value="5"/> 
<UserPref name="show_summaries" display_name="Show summaries?" datatype="bool" 
	default_value="false"/>

これらの <UserPref> エントリーを XML の中に入れたら、JavaScript でこれらのエントリーを抽出します。Google ガジェットの JavaScript Core Library を使ってプリファレンスを取得します。

リスト 11. ユーザー・プリファレンスの抽出

                        
var prefs = new _IG_Prefs(__MODULE_ID__); 
var summaries = prefs.getBool("show_summaries"); 
var entries = prefs.getInt("num_entries");

これによって、要約とエントリーに関するそれまでの宣言は置き換えられるので、これをガジェットのロジックの中に組み込むことができます。要約を処理する新しいロジックを追加して完成したガジェットをリスト 12 の中に太字で示してあります。

リスト 12. 完成したガジェットのコード

                        
<?xml version="1.0" encoding="UTF-8" ?> 
<Module> 
<ModulePrefs title="Gadget Sample" 
title_url="http://www.ibm.com/developerworks/" 
height="200" 
author="Jay Palat" 
scrolling="true" 
author_email="vpalat@us.ibm.com"/> 

<UserPref name="num_entries" display_name="Number of Entries?" default_value="3"/> 
<UserPref name="show_summaries" display_name="Show summaries?" datatype="bool" 
	default_value="false"/> 


<Content type="html"> 
<![CDATA[ 
<style> #content_div { font-size: 80%; margin: 5px; background-color: #FFFFBF;} 
	</style> 

<div id=content_div></div> 

<script type="text/javascript"> 
var entries = 5; 
var summaries = false; 

var prefs = new _IG_Prefs(__MODULE_ID__); 
var summaries = prefs.getBool("show_summaries"); 
var entries = prefs.getInt("num_entries"); 


_IG_FetchFeedAsJSON("http://66.93.60.86:8080/gadget/websphere.flow", function (feed)
{
if (feed == null){ 
alert("There is no data."); 
return; 
} 
var html = "" 
html += "<div><b>" + feed.Title + "</b></div>"; 
html += "<div>" + feed.Description + "</div><br>"; 

if (feed.Entry) { 
for (var i = 0; i < feed.Entry.length; i++) { 
html += "<div>" 
+ "<li><a target='_blank' href='" + feed.Entry[i].Link + "'>" 
+ feed.Entry[i].Title 
+ "</a> "; 

if (summaries==true) { 
html += "<br><i>" + feed.Entry[i].Summary + "</i>"; 
}

} 

html += "</div>"; 
} 

_gel("content_div").innerHTML = html; 
}, 
entries, summaries); 

</script> 
]]> 
</Content> 
</Module>

有用なガジェットにするには、ガジェットを公開する必要があります。幸い、Google Gadgets Editor を使えば公開は簡単です。エディターのメニューから単純に File => Publish を選択します。

図 29. ガジェットの公開

エディターは妥当性検証によるチェックを行います (図 30)。OK をクリックすると、そのガジェットが公開されます (図 31)。

図 30. ガジェットの検証

図 31. 公開されたガジェット
誰もがガジェットを見られるように iGoogle のディレクトリーに公開することもできますが、ガジェットに対する作業を続けている間はこのガジェットを iGoogle のページに公開した方が適切かもしれません。Add to my iGoogle page を選択すると (図 31)、図 32 のような確認メッセージが受信されます。これでこのガジェットは iGoogle に置かれたことになります。

図 32. iGoogle に追加するための確認

これらのステップが完了すると、このガジェットを iGoogle ページで利用することができます (図 33)。

図 33. サンプル・ガジェットが追加された iGoogle の Web ページ
Figure 33. iGoogle Web page with sample gadget

上に戻る

まとめ

この記事では、ガジェットを作成する方法、ガジェットの XML 仕様のさまざまな部分の使い方、また AppBuilder GUI を使って WebSphere sMash の中でフィードを作成する方法を検証しました。次にこのガジェット、そして作成されたフィードを WebSphere sMash が生成するフィードを使って組み合わせ、ガジェットを機能強化する方法を説明しました。この記事で説明した手順を状況依存型アプリケーションの要件に適用することで、ゼロからガジェットを作成することができ、またそれを iGoogle のホームページにデプロイすることができます。

上に戻る

謝辞

この記事を校閲してくださり、またコメントをいただいた Catherine Rivi と Karl Bishop、そしてMary Ann Johnson の各氏に感謝いたします。

参考文献

学ぶために

IBM WebSphere sMash のドキュメンテーションを参照してください。
Feed operators reference を参照してください。
Google ガジェットの第一歩として、このサイトを見てください。
Google ガジェットのガイドラインを見てください。
IBM developerWorks の WebSphere sMash ゾーンを見てください。

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

IBM WebSphere sMash の Developer's Edition をダウンロードしてください。

議論するために

Project Zero and WebSphere sMash space に参加してください。

著者について


		Vijaykumar Palat は IBM の Consulting IT Specialist であり、IBM Global Account にサービスを提供する IBM Software Services WebSphere for IBM のメンバーです。彼は IBM のさまざまな内部プロジェクト、また外部の顧客やビジネス・パートナーに対する中心的なアーキテクト、開発者として、WebSphere Application Server や WebSphere Portal のためのソリューションを開発してきました。彼はWeb 2.0 技術やオープンソース、そして仮想化に大きな関心を持っています。彼はカーネギー・メロン大学で情報技術の修士号を取得し、またピッツバーグ大学でコンピューター・サイエンスの学位を取得しています。

記事の評価

この記事を共有する


del.icio.us	newsing	FC2ブックマーク

Choix！	ニフティクリップ	Yahoo!ブックマーク

MM/memo	CZブックマーク	livedoorクリップ

はてなブックマーク	Buzzurl（バザール）

上に戻る

日本IBMについて

プライバシー

お問い合わせ