iWidget仕様
それでは、iWidgetとはどのような仕様なのか、基本的なコードをご覧いただきながらアプリケーション開発を解説することとします。なお、iWidgetを理解するためには、HTML/JavaScriptの基礎知識は必須です。加えて、iWidgetフレームワークの実装にも使われているDojo ToolkitというJavaScriptライブラリに関する知識があると、より理解しやすいです。必要に応じて関連サイトを参照しながらお読みください。
HelloWorld
まずはプログラミングでおなじみのHelloWorldのiWidget版です。このシンプルなiWidgetを作成するのに必要なファイルはiWidgetの定義ファイル1つだけです。ウィジェット定義は以下のようなXMLとなります。
<?xml version="1.0" encoding="UTF-8"?>
<iw:iwidget name="HelloWorldWidget"
xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget"
supportedModes="view" mode="view">
<!-- VIEWモードのコンテンツ -->
<iw:content mode="view">
<![CDATA[ <b>Hello World!</b> ]]>
</iw:content>
</iw:iwidget>
このiWidgetを表示させた例が下記になります。コンテンツ周囲の見栄えは埋め込むページのスタイルやテーマによって変わりますが、この詳細については本稿では割愛します。
このウィジェットのポイントは以下の通りです。
- "iw:"：で始まる名前空間のついたタグはiWidget仕様で定義されたものです。
- コンテンツ：<iw:content>要素の中に書かれています。この中はHTMLをエスケープすることなく記述できるよう、CDATAとして記述しています。
- モード：<iw:content>要素にはmode属性として"view"が指定されています。ウィジェットには通常表示されるコンテンツの他、設定画面やヘルプ画面など、複数のモードとそれに応じたコンテンツを表示することができます。"view"と指定することによって、ここに指定されたコードがVIEW（通常）モードのコンテンツであることを示しています。
- 対応モード：<iw:iwidget>要素のsupportedModes属性ではこのウィジェットが対応しているモードを列挙します。この例ではVIEWモードのみに対応します。
- デフォルトモード：<iw:iwidget>要素のmode属性ではデフォルトモードを指定します。
ウィジェットの定義ファイルが出来上がったら、これをhttp(s)でアクセスできる任意のWebサーバーに配置します。そしてウィジェットを埋め込みたいページには下記のようなHTMLコードを記述します。
<span id="helloworld" class="mm_iWidget"> <a href="http://[hostfqdn]:[port]/path/to/HelloWorldWidget.xml" class="mm_Definition"></a> </span>
実際にこのようなHTMLを記述することは少ないです。それはiWidgetをドラッグ＆ドロップでページに配置できる環境においては、こうしたコードの挿入はメニュー操作の結果として自動的に行われていたり、ポータルサイトのような仕組みで生成されたりするからです。ただし、裏でこのような動作をしていることだけは覚えておくと処理の流れを理解しやすいでしょう。
これだけの記述でウィジェットが表示される仕掛けは次のようになります。
- ウィジェットを表示できるページには、<head>要素内で、あらかじめウィジェットを表示するためのJavaScriptフレームワークが読み込まれています。このフレームワークのURLは環境（製品）によってまちまちですのでここでは扱いません。このフレームワークがいわばWebブラウザ内で動作するiWidgetを表示するためのミドルウェア、iWidgetコンテナといえるものです。
- このフレームワークはマイクロフォーマット式に事前定義されたclass属性を手掛かりにHTMLページ内を動的に書き換える仕組みを備えています。一般的にclass属性は適用するCSS指定するために利用しますが、マイクロフォーマットでは、HTMLのマークアップに意味を持たせるためにこのclass属性を転用します。
- 上記の例ではclass属性"mm_iWidget"がつく<span>タグを見つけたフレームワークはclass属性 "mm_Definition"が指定された子要素<a>のhref属性から、ここに表示したいウィジェットの定義ファイルのありかを知ります。
- ウィジェット定義ファイルが動的に読み込まれ、<iw:content>で指定されたコンテンツが挿入されます。
以上が基本的な流れとなります。
