目次


W3C ウィジェットの構成とパッケージ化

W3C ウィジェットの仕様候補について学ぶ

Comments

W3C のウィジェットの概要

W3C の「Widget Packaging and Configuration (ウィジェットのパッケージ化と構成)」仕様は、ウィジェットの構成、パッケージ化、デプロイのための、策定中の仕様です。W3C ウィジェットは、HTML、CSS (Cascading Style Sheets)、JavaScript ファイル、その他画像などのリソースで構成されるコンポーネントです。ウィジェットは機器の中の簡単なアプリケーション (カレンダーや天気予報、チャットなど) に使用することができます。

通常の Web アプリケーションの代わりにウィジェットを使用するメリットの 1 つは、1 度ダウンロードすると何度も使用することができ、機器にインストールされた (Web アプリケーションではない) 通常のアプリケーションと同じように使用できることです。そのためユーザーは帯域幅を節約することができます。なぜなら、転送されるデータはウィジェットが使用するデータのみであり、ウィジェット・ファイル自体が転送されるわけではないからです。

ウィジェットによってリッチなユーザー・エクスペリエンスを実現できることがよくあります (例えば対話型のカレンダーや、さらにはゲームなど)。モバイル機器でウィジェットを使用すると、1 度ウィジェットをダウンロードするだけで繰り返し使用することができるため、データ転送のコストを節約することができます。

2010年 1月の時点で、W3C の「Widget Packaging and Configuration」仕様 (完全な仕様へのリンクは「参考文献」を参照) は勧告候補の段階にあります。これはつまり、この仕様が安定していると W3C は考えていて、この仕様の実装を開発者達に奨励しているということです。

W3C ウィジェット仕様の目標は、ウィジェットの作成とパッケージ化のための標準的な手段を提案することです。現在、さまざまなベンダーがウィジェットを持っており (「参考文献」を参照)、そのほとんどすべてが、独自の API (Application Program Interface) とパッケージ・フォーマットを実装しています。

この記事では W3C Packaging and Configuration 仕様を紹介し、また HTML、CSS、JavaScript ファイルをウィジェットの中にパッケージ化する方法と、そのウィジェットを W3C ウィジェット仕様を実装する機器にデプロイする方法について説明します。

この仕様は策定中であるため、こうしたウィジェットをレンダリングする機器にとっては実装の選択肢が限られています。実際のウィジェットの動作を見たい場合には、(まだインストールしていなければ) アプリケーションを追加でダウンロードする必要があります。

W3C のウィジェット・パッケージの実際の動作を見るためには、以下のものが必要です。

  • W3C ウィジェット仕様を実装するソフトウェア。この記事では Apache Wookie を使用します。Wookie は Apache のインキュベーター・プロジェクトであり、W3C ウィジェットのコンテンツを提供すること、そしてユーザーが W3C ウィジェットをデプロイできるようにすることを目標としています。
  • ウィジェットの圧縮ファイル・アーカイブを作成するためのユーティリティー
  • (Apache Wookie をダウンロードしてインストールしたい場合には) Subversion (SVN) クライアント

関連する技術: 他のウィジェットとサーバー

市場には現在、多種多様なバージョンのウィジェットやガジェットがあります。そのため、これらの多様な技術をどう比較対照すればよいのかわからない場合があります。ウィジェット技術が分断化されているため、再利用可能でリッチな Web コンポーネントを作成することが困難になっています。

Microsoft® Windows® Vista ガジェットと Apple® ウィジェットの他に、似たような技術として Google Wave ガジェット、OpenSocial、OpenAjax などがあります。これらの技術には独自の API と仕様があります (「参考文献」を参照)。

Google Wave ガジェット

Google Wave ガジェットは概念的に W3C ウィジェットと似ていますが、Google の Wave Web アプリケーションで使うことを目的としています。それとは対照的に、W3C ウィジェットは W3C の仕様として公開されており、汎用として、多様なベンダーに使われることを目的としています。

Google Wave は Web アプリケーションですが、現状では、この技術を詳細に学ぼうとする開発者や早々にこの技術を導入しようとする人を対象に、一部の機能のプレビューのみが提供されています。Google Wave は基本的にコラボレーション・ツールであり、多様な機能を Google Wave ガジェットの形でユーザーに提供します。開発者は、Wave ユーザーがそれぞれの「ウェーブ」に含めることができる、特別な機能を提供するガジェットを作成することができます。

OpenSocial

OpenSocial はソーシャル・ネットワーキング Web アプリケーションに適したガジェットを作成するための API です。OpenSocial 1.0 仕様は現在レビュー中ですが、バージョン 0.9 と 0.8.1 は、iGoogle、MySpace、Yahoo、LinkedIn などのコンテナー (ガジェットを使用する Web アプリケーション) に使われています。

OpenSocial ガジェットは Google のガジェット・フレームワークをベースにしています。OpenSocial フレームワークには、人々やアクティビティー、パーシスタンスなどを扱うための、あらかじめ作成された JavaScript API が含まれています。

OpenSocial は、ガジェットを作成してくれる魅力的な手段になります。

OpenAjax

OpenAjax は、「Ajax (Asynchronous JavaScript + XML) を使用し、オープンで相互運用可能な Ajax ベースの Web 技術の普及に力を注ぐ、大手ベンダー、オープンソース・プロジェクト、企業などによる組織です」(「参考文献」を参照)。

OpenAjax Hub には、OpenSocial ガジェットに使われているパブリッシュおよびサブスクライブ (pub/sub) 技術が用意されています。

W3C のパッケージ化および構成仕様に従って作成されたウィジェットは Ajax を使用できるため、OpenAjax は相互運用性を改善したウィジェットを作成する際に使える優れた技術になり得ます。OpenAjax を使用して作成したウィジェットは、W3C ウィジェット仕様に準拠したものにすることができます。

Apache Wookie

Apache Wookie は Apache Software Foundation のインキュベーター・プロジェクトであり、Google Wave ガジェットと W3C ウィジェット・パッケージの両方に対応することができます。Apache Wookie はサーバー・アプリケーションであり、Web アプリケーションとしてダウンロードしてインストールすることや、スタンドアロンのサーバーとして実行することができます。

Apache Wookie のソースを入手することも W3C ウィジェットのソース・コードのサンプルを調べる上で役立ちます。

公式サイトには、ビルド済みの Apache Wookie バイナリー・ディストリビューションはありません (「参考文献」を参照)。そのため、Apache Wookie をダウンロードして実行するためには、SVN をインストールしておく必要があります。Apache Wookie をダウンロードするには、リスト 1 のコマンドを実行するだけです。

リスト 1. Apache Wookie をダウンロードする
$ svn co http://svn.apache.org/repos/asf/incubator/wookie/trunk

Apache Wookie をダウンロードすると、リスト 2 のコマンドを入力することで、Apache Wookie をスタンドアロンのサーバーとして実行することができます。

リスト 2. Apache Wookie をスタンドアロン・モードで実行する
$ ant run

ant コマンドによって Apache Wookie サーバーがスタンドアロン・モードで起動します。Apache Wookie サーバーが起動すると、http://localhost:8080/wookie/ でウィジェットにアクセスすることができます。

ウィジェットの構成

ウィジェットの作成を始めるには、まずウィジェットの名前 (myWidget など) を付けた空のディレクトリーを作成します。(ディレクトリー名に「ドット (.)」を使用することが許されるオペレーティング・システムでは myWidget.wgt を使用します)。このディレクトリーには、新しいウィジェットを構成するファイルが格納されることになります。新しい HTML ファイルや CSS ファイル、JavaScript ファイルを作成、テストしたい場合には、このディレクトリーを Web サーバーのドキュメント・ルートに作成し、ウィジェットをパッケージ化する前に HTML ファイルの動作を確認できるようにします。

各ウィジェット・パッケージには、上記で作成した空のディレクトリー (パッケージのベース・ディレクトリー) の直下に config.xml という構成ファイルが含まれていなければなりません (config.xml の大/小文字は区別されます)。この構成ファイルには、そのウィジェットに関する重要な情報が含まれています (名前、作成者、説明、ライセンス、等々)。

リスト 3 は構成ファイルの一例です。

リスト 3. config.xml ファイルの例
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
id="http://www.example.com/widgets/HelloWidget"
version="0.1" width="300" height="200">
  <name>HelloWidget</name>
  <description>A very basic widget that says, "Hello"</description>
  <content src="index.html" />
  <icon src="images/icon.png" />
  <access network="false" />
  <author>Nathan A. Good</author>
  <license>This is my license</license>
</widget>

この XML ファイルは、(この例に示すように) UTF-8 でエンコードする必要があります。

ウィジェットの親要素には、ウィジェットに関する情報を指定する属性があります (表 1)。

表 1. ウィジェットの親要素の属性
属性名説明
idウィジェットの識別子となる一意の URI
versionウィジェットのバージョン
width, heightそれぞれ、ウィジェットの幅と高さをピクセルで表現した値
viewmodesウィジェットのビュー・モード (「参考文献」を参照)

構成に使われる XML 要素を示したものが表 2 です。

表 2. ウィジェットの構成要素
要素名説明
nameウィジェットの短縮名は short 属性で指定され、詳細名は XML 要素のテキストの中で指定されます。
descriptionウィジェットの説明
authorウィジェットの作成者に関する情報
licenseウィジェットのライセンス
iconアイコン・ファイルへの相対パス

サンプルの構成ファイルが作成できると、起動ファイルの作成を始めることができます。

起動ファイル

有効な W3C ウィジェット・パッケージには、config.xml 構成ファイルの他に少なくとも 1 つの起動ファイルが必要です。起動ファイルを指定しない場合、デフォルトのファイルは名前が index で始まるファイルであり、通常は拡張子として .html、.htm、または .xhtml が付いています。さまざまなタイプのウィジェットに対して、他の拡張子も許容されますが、この記事では標準的な HTML の例に焦点を絞ります。

リスト 4 は起動ファイルの例です。

リスト 4. 起動ファイルの例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="pragma" content="no-cache" />
  <meta http-equiv="Content-Type" content=
  "text/html; charset=us-ascii" />
  <title>HelloWorld</title>
  <link rel="stylesheet" href="style/common.css" type="text/css" />
</head>
<body>
<h1>Hello World...</h1>
</body>
</html>

リスト 4 の HTML ファイルは他の整形式の HTML と同じように、ブラウザーに表示することができます。そのため、ウィジェットの設計は容易です。つまり通常の HTML ページとしてウィジェットを作成することができるのです。この HTML 起動ファイルがウィジェットの描画に使われます。

ウィジェットはブラウザーで描画される単なる HTML であるため、ウィジェットには JavaScript ファイルを含めることができます。JavaScript 関数を使うことで、ウィジェットのコンテンツはリッチで動的なものになります。Ajax を使用すると、ウィジェットのデータをユーザーに対して動的に表示することができます。

ウィジェットの HTML 起動ファイルの中で参照される JavaScript ファイルは、パッケージ化されたウィジェットのアーカイブの中に含める必要があります。

このウィジェットの HTML ファイルの例では、スタイル設定に CSS も使用しています。CSS ファイルも JavaScript ファイルの場合と同様、パッケージ化されたウィジェットとしてデプロイされる、圧縮ファイル・アーカイブの中に含める必要があります。

W3C 仕様にはローカライズ (l10n) のためのガイドラインが含まれています。ロケールのサポートはフォルダー・ベースです。そのため、ウィジェットのディレクトリーの中に locales というディレクトリーを作成します。locales フォルダーの中に、ロケール名 (en、fr、de など) を付けたフォルダーを作成し、このフォルダーの中にそれぞれのロケール用に異なるリソースを含めます。

ウィジェットをパッケージ化する

ウィジェットは、.wgt 拡張子を持つ標準的な圧縮アーカイブ・ファイルの中にパッケージ化されます。ウィジェット・パッケージ用の圧縮ファイル・アーカイブの作成には DEFLATE メソッドを使う必要があります。圧縮ファイル・アーカイブには、構成ファイルと起動ファイル、その他それらのファイルで使用されるすべてのリソース (JavaScript ファイル、CSS、画像など) を含める必要があります。

ウィジェット・パッケージを作成するためには、コマンドラインのファイル圧縮ユーティリティーを使って圧縮ファイル・アーカイブを作成します (リスト 5)。

リスト 5. 圧縮ファイル・アーカイブを作成する
$ cd myWidget
$ zip myWidget.wgt *

また、GUI (Graphical User Interface) メソッドを使ってウィジェット・ファイルの圧縮ファイル・アーカイブを作成することもできます。アーカイブを作成したら、拡張子を .zip から .wgt に変更します。

さまざまなディレクトリーの中にあるウィジェット・パッケージは、1 つのパッケージとして扱いやすいものに整理することができます。例えば図 1 を考えてみてください。この図では、images、style、scripts などのフォルダーが表示されていますが、これらのフォルダーを使ってウィジェット・パッケージを整理することができます。

図 1. W3C ウィジェット・パッケージのフォルダー構造
ウィジェット・パッケージのフォルダー構造のスクリーン・ショット。この構造の中には、それぞれ images、legal、lib、scripts、style というフォルダーがあります。
ウィジェット・パッケージのフォルダー構造のスクリーン・ショット。この構造の中には、それぞれ images、legal、lib、scripts、style というフォルダーがあります。

起動ファイルの中のリソースを参照する際には、あたかもリソースのファイル群が Web サーバーにデプロイされているかのように、相対パスを使います。例えば、style フォルダーの中にある common.css ファイルを参照するためには style/common.css を使います。ただし実際には、どちらもウィジェット・パッケージとして 1 つの圧縮ファイル・アーカイブの中に含まれています。

セキュリティーのために、ウィジェット・パッケージのファイル群にデジタル署名をすることができます。ウィジェット・パッケージにデジタル署名するための W3C 仕様については「参考文献」を参照してください。

ウィジェットをデプロイする

ウィジェットをデプロイするには Apache Wookie の「Administration menu (管理メニュー)」を使うことができます。Apache Wookie のメニューにアクセスするためには、Wookie が実行されていることを確認し (コマンドラインで ant run と入力します)、ブラウザーのアドレスバーに Apache Wookie の場所を入力します。デフォルトで、Apache Wookie の場所は http://localhost:8080/wookie です。「Administration menu (管理メニュー)」のリンクをクリックします (図 2)。

図 2. 「Administration menu (管理メニュー)」のリンク
Wookie のメニューのスクリーン・ショット。オプションとして、「Main menu (メイン・メニュー)」、「Options (オプション)」、「View Widget Gallery (ウィジェット・ギャラリーを表示)」、「Administration menu (管理メニュー)」が表示されています。
Wookie のメニューのスクリーン・ショット。オプションとして、「Main menu (メイン・メニュー)」、「Options (オプション)」、「View Widget Gallery (ウィジェット・ギャラリーを表示)」、「Administration menu (管理メニュー)」が表示されています。

ユーザー名とパスワードの入力を要求する画面が表示されます。デフォルトから変更していなければ、ユーザー名とパスワードはどちらも java です。

表示される画面で、「Add new widget (新規ウィジェットを追加)」をクリックします (図 3)。

図 3. 新しいウィジェットを追加する
ウィジェット・メニューのスクリーン・ショット。オプションとして、「View existing widgets (既存のウィジェットを表示)」、「Add new widget (新規ウィジェットを追加)」、「Add new Google Gadget/OpenSocial app (新規 Google ガジェット/OpenSocial アプリケーションを追加)」、「Remove widget from system (システムからウィジェットを削除)」が表示されています。
ウィジェット・メニューのスクリーン・ショット。オプションとして、「View existing widgets (既存のウィジェットを表示)」、「Add new widget (新規ウィジェットを追加)」、「Add new Google Gadget/OpenSocial app (新規 Google ガジェット/OpenSocial アプリケーションを追加)」、「Remove widget from system (システムからウィジェットを削除)」が表示されています。

Choose File (ファイルを選択)」をクリックし、対象のウィジェットのアーカイブ・ファイルまでナビゲートします。ファイルを選択したら、「Publish (公開)」をクリックします (図 4)。

図 4. ウィジェットのアーカイブ・ファイルを選択する
ウィンドウのスクリーン・ショット。このウィンドウには、タイトルとして「Select a widget archive (zip) to uplaod (アップロード対象のウィジェット・アーカイブ (zip) を選択)」が付けられており、また「Choose file (ファイルを選択)」というボタン、そしてその下に「Publish (公開)」ボタンと「Clear (クリアー)」ボタンがあります。
ウィンドウのスクリーン・ショット。このウィンドウには、タイトルとして「Select a widget archive (zip) to uplaod (アップロード対象のウィジェット・アーカイブ (zip) を選択)」が付けられており、また「Choose file (ファイルを選択)」というボタン、そしてその下に「Publish (公開)」ボタンと「Clear (クリアー)」ボタンがあります。

次に、Apache Wookie はウィジェット・アーカイブを処理します。アーカイブの処理が終わると、先ほど作成したウィジェットが、ウィジェット・リストとウィジェット・ギャラリーの中に表示されます。

別の方法として、管理ユーティリティーを使わずに Apache Wookie を使ってウィジェットをデプロイすることもできます。そのためには、build.properties ファイルの中で widget.deploy.dir というキーで構成しているデプロイメント・ディレクトリーにウィジェット・パッケージをコピーします。

W3C ウィジェットのデプロイと構成に関する仕様の中には、実装がアーカイブ・ファイルをどう処理すべきかについての推奨事項も含まれています。ブラウザーなどの実装がパッケージをダウンロードする際には、その実装はウィジェット・パッケージを潜在的なウィジェット・パッケージとして扱います。ブラウザーはパッケージの完全性を検証し、そのパッケージが適切に作成されているかどうか、また構成が完全であるかどうかを確認します。そのウィジェット・パッケージが W3C の標準に準拠している場合には、有効なウィジェット・パッケージとして扱われます。

サンプルを表示する

Apache Wookie を利用すると、任意のブラウザーでウィジェットを表示することができます。つまり W3C 仕様を実装したブラウザーを探す必要はありません (これは Opera ブラウザーでのウィジェットの実装の場合と似ています)。理想的には、ブラウザーが W3C ウィジェット仕様を実装すれば、ユーザーはウィジェットを 1 度ダウンロードするだけで何度も繰り返し使用できるというメリットを活用することができます。

新しいウィジェットを表示するためには、Apache Wookie が実行されていることを確認し、ブラウザーからそのウィジェットにアクセスします。「View Widget Gallery (ウィジェット・ギャラリーを表示)」をクリックすると、デプロイされたウィジェットがギャラリーの中に表示されます (図 5)。

図 5. ウィジェット・ギャラリーを表示する
Wookie ギャラリーのスクリーン・ショット。現在利用可能なウィジェットが表示されています。
Wookie ギャラリーのスクリーン・ショット。現在利用可能なウィジェットが表示されています。

Demo (デモ)」をクリックすると、ウィジェットの動作を確認することができます。

また、新しいウィジェットを含む iframe 要素を持つテスト・ファイルを作成する方法もあります。そのためには、単純な HTML ファイルを作成します (リスト 6)。

リスト 6. ウィジェットを起動するための単純な HTML ファイル
<html>
<head><title>Widget sample</title>
<body>
<iframe src=
"http://localhost:8080/wookie/wservices/wookie.apache.org/widgets/butterfly/index.html
?idkey=sM4aI8pnUUNI2Kfz15aK2h6vIek.eq.&amp;proxy=http://localhost:8080/wookie/proxy
&amp;st=wookie%3AwEQZrCsxTF502%2B6JeeEFlkq1KPgqXKQTllufS6Toez81qb40hPouhYV3apG4on23uVB
kQ5xlLjOXvIKulGqKBZvnKv2pgfEMg7OVzJpdDQt66MfODW6BBJry33ybOyMSc2hKonu7Sp1n1SY6FOFUuRx8VAjED
TuJip8BQ9i6ZXRH9193FT%2F7Ijjz0o1vdR91ofzcFA%3D%3D" width="500" height="400">
</body>
</html>

先ほど作成したウィジェットが Web ページの中に表示されていることがわかります。ウィジェットの URL は、Wookie のメイン・メニューの「Instantiate a widget (ウィジェットをインスタンス化)」アクションの結果から引用したものです。

もっと複雑な JavaScript ファイルや CSS、画像などをソースの中に含む、Apache Wookie に付属の他のサンプル・パッケージを表示することもできます。Apache Wookie のソース・コードをダウンロードした後に widgets サブフォルダーを調べると、他のウィジェットのソース・コードを見つけることができます。

まとめ

W3C の「Widget Packaging and Configuration (ウィジェットのパッケージ化と構成)」仕様は、ウィジェットを作成するための策定中の W3C 仕様であり、ユーザーに対してリッチなユーザー・インターフェースを提供し、また帯域幅を節約することができます。

W3C のウィジェット仕様は、オープンで一般的な標準 (HTML、CSS、JavaScript コードなど) と圧縮ファイル・アーカイブを使用します。この仕様は策定中のため、まだ実装はほとんどありませんが、ウィジェットの標準化を実現する上で前途有望な仕様です。


ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development, Open source
ArticleID=481413
ArticleTitle=W3C ウィジェットの構成とパッケージ化
publish-date=03162010