SHOEISHA iD

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

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

developerWorks Liaison(AD)

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

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

iWidget仕様

 それでは、iWidgetとはどのような仕様なのか、基本的なコードをご覧いただきながらアプリケーション開発を解説することとします。なお、iWidgetを理解するためには、HTML/JavaScriptの基礎知識は必須です。加えて、iWidgetフレームワークの実装にも使われているDojo ToolkitというJavaScriptライブラリに関する知識があると、より理解しやすいです。必要に応じて関連サイトを参照しながらお読みください。

HelloWorld

 まずはプログラミングでおなじみのHelloWorldのiWidget版です。このシンプルなiWidgetを作成するのに必要なファイルはiWidgetの定義ファイル1つだけです。ウィジェット定義は以下のようなXMLとなります。

サンプル1:HelloWorldWidget.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を表示させた例が下記になります。コンテンツ周囲の見栄えは埋め込むページのスタイルやテーマによって変わりますが、この詳細については本稿では割愛します。

図7 HelloWorldWidget実行結果
図7 HelloWorldWidget実行結果

 このウィジェットのポイントは以下の通りです。

  • "iw:":で始まる名前空間のついたタグはiWidget仕様で定義されたものです。
  • コンテンツ:<iw:content>要素の中に書かれています。この中はHTMLをエスケープすることなく記述できるよう、CDATAとして記述しています。
  • モード:<iw:content>要素にはmode属性として"view"が指定されています。ウィジェットには通常表示されるコンテンツの他、設定画面やヘルプ画面など、複数のモードとそれに応じたコンテンツを表示することができます。"view"と指定することによって、ここに指定されたコードがVIEW(通常)モードのコンテンツであることを示しています。
  • 図8:iWidgetのモード
    図8:iWidgetのモード
    • 対応モード:<iw:iwidget>要素のsupportedModes属性ではこのウィジェットが対応しているモードを列挙します。この例ではVIEWモードのみに対応します。
    • デフォルトモード:<iw:iwidget>要素のmode属性ではデフォルトモードを指定します。

 ウィジェットの定義ファイルが出来上がったら、これをhttp(s)でアクセスできる任意のWebサーバーに配置します。そしてウィジェットを埋め込みたいページには下記のようなHTMLコードを記述します。

サンプル2:Widgetをページに挿入するためのコード
<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>で指定されたコンテンツが挿入されます。

 以上が基本的な流れとなります。

次のページ
まとめ

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

  • 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」など、さまざまなカンファレンスを企画・運営しています。

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

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

メールバックナンバー

アクセスランキング

アクセスランキング