今朝の「iPadでHTML5 Widgetを走らせて遊ぼう」に対して、「もう少しWidgetについて知りたい」との声が聞こえてきたので、「Widget入門編」を書いてみようかと思う。
Widgetとは何か？
先のエントリーで書いたが、ひとことで言えば「パッケージ化されたウェブアプリケーションである」。通常のウェブアプリは、特定のURLにアクセスすることにより走らせるが、Widgetの場合は、.wgt のエクステンションを持つWidgetファイルをダウンロード＋インストールした上で、それを起動する。
Widgetファイルの中身は、HTML+CSS+JS+メディア・ファイルで構成されており、それをZIP圧縮して、エクステンションを.wgtに変更しただけのものである。
なぜそんなことをするかと言えば、（１）オフラインで動かしたい、（２）通常のデスクトップアプリの感覚で起動したい、（３）パッケージの形で流通・販売したい、などが理由であり、基本概念はAdobeのAIRと同じである。
なぜWidgetが注目されはじめたのか？
この業界で、Widgetという言葉を良く聞く様になったのは、ここ２〜３年。ちょうどiPhoneの成功とともに各社がスマートフォンに力を入れはじめた時期と一致している。これは偶然ではなく、必然である。iPhoneの成功をうらやむライバル・メーカーや、Appleに「おいしいところ」を全部持って行かれて自分が「ただの土管」になってしまうことに危機感を抱いている通信会社にとって、iPhoneでしか動かないObjective Cで書かれた何万ものiPhoneアプリの存在、そしてそれが作り出すクローズなエコシステムは脅威である。だからと言って、いまさら「自分独自のプラットフォーム」を発表したからと言って、Appleと互角に戦えないことは目に見えている。
そこで浮上してきたのが、標準化が進んでおり、Apple自身すらが率先して協力しているウェブの技術（つまりHTML+CSS+JS）を使ってスマートフォン・アプリを作る仕組みをオープンな形で作って、より大きな形でのエコシステムを作ろう、というのがWidgetの発想である。そうは言っても、最初はなかなか各社の足並みが揃わず、いくつかの方言が出来つつあったのだが、ようやく「それぞれのWidgetの仕組みから共通項を抜き出して、まずはそこからしっかりと標準化しよう」という動きが出て来た結果が「W3C Widget」である。
iPadアプリをWidgetの仕組みを使って作る利点は？
ひとそれぞれだと思うが、iPhone OS上のアプリを作ったことのない人にとっては、Objetive Cを覚えなくて良いというのは大きなプラスだとろう。Macではなくて、Windowsマシンで開発できてしまう、というのも人によっては大きなプラスである。しかし、何と言っても「アップルの審査なしに自由に流通できる」というのが一番の利点だろう。「思いつきでちゃちゃっと作って、その日にブログで公開」みたいな手軽なことをするにはWidgetは最適である。
そして、もう少し中長期的な視点で言えば、Widgetの形で開発しておけば、将来iPad以外のタブレット端末が普及して来た時に、再利用しやすい、という利点がある。もちろん、Widgetランタイムごとに若干の違いだとか、ブラウザー間の互換性の問題などが１００％なくなることはないが、Objective CでiPhone OS向けに書いたアプリと比べたら、その移植性は格段に高くなる。
Hello Worldを作ってみる
どんなプラットフォームでも最初に作るのはHello Worldと決まっている。Widgetの場合もそれだけであれば、いたって簡単。たった二つのファイルを用意するだけで良い。
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
config.xml
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
id="http://example.org/exampleWidget" version="2.0 Beta"
height="120" width="320"
viewmodes="application">
<name>Hello Application</name>
<description>My First Application</description>
<author href="http://satoshi.blogs.com">Satoshi Nakajima</author>
</widget>
index.htmlはアプリケーションのルートファイル。"Hello World"をという文字列を"h1"タグを使って表示しているだけの単純なもの。二行目のmetaタグはiPadやiPhoneでちゃんと表示してもらうためのおまじない。
config.xmlはアプリケーションの名前や実行環境を指定する設定ファイル。height/widthはパソコンのデスクトップ上での起動時のWindowの大きさを指定しているが、iPad上で起動した場合は無視される（これはCloudReadersの実装がそうなっている、というだけのこと）。viewmodesは独立したアプリケーションとして動くべきか（application）、ブラウザーの小判ザメとして動くか（widget）を指定しているが、iPadの場合は関係ない。後は、アプリの名前とか開発者の名前とか、である。
この二つのファイルの用意ができたら、その二つを同じフォルダーに置いてからZIP圧縮し、作ったZIPファイルのエクステンションを.wgtにすれば完成である。拍子抜けするほど簡単である。
テストも至って簡単である。まずは作った.wgtファイルをパソコン上のOperaにDrag&Dropする（最新版のOperaをおすすめする。私がテストしたのは Opera 10.53）。すると、Widget Installer というアプリが立ち上がり、そのWidgetを登録したいかどうかたずねてくるので、"Install" ボタンをクリックする。
そのまま起動すると、上で作ったHelloWorld Widgetが起動され、こんな感じになる。
これで一応、Widgetとしては動いていることが確認できたので、iPadにインストールする（手順は、iPadでHTML5 Widgetを走らせて遊ぼうを参照）。インストールしたHello WorldをCloudReadersから起動すると、こんな表示になる。
ちなみに、「Widget化」したからと言って、ブラウザー間の互換性の問題は魔法の様になくなったりしないのでそこは要注意である。WebKitにしか実装されていないCSS3の3D Transitionとかを使えば、当然Opera上ではちゃんと表示されない。ただし、一番の目的が「HTML+JavaScript+CSSでiPadアプリを作る」ことな場合はそれほど重要な話ではないが。
【謝辞】ちなみに、このエントリーを書く際には、昨日のOperaのダニエル・デイビスさんの解説がとても参考になったので、ここに感謝の意を表しておく。