HTML5 Widget入門：あなたにも作れるiPad用Widget
2010.05.28
今朝の「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のダニエル・デイビスさんの解説がとても参考になったので、ここに感謝の意を表しておく。
申し訳ございませんが、私は外国人で、上記の記事が【自分のブログにIpadを構築することができるために入れた】という意味を持っているの？専門言葉が多いかも知れませんと思われました。どうもありがとうございます。
Posted by: Ganchimeg | 2010.05.28 at 22:42
こんにちは。widgetいくつか作って試してみました。とりあえず、気づいた点というか、こうしていただけたらという要望を書かせていただきます。
外部リンクは無視されるようですが、safariで開いてもいいかのアラートをだしてから飛ぶようにできるとよいと思います。
localstorageがwidget間で共通なので、キーがバッティングしなようにルールをきめたほうがよいですね。またセキュアなデータは保持できないので、アプリ側でwidgetごとに閉じたストレージのサービスがあると嬉しいです。
加速度センサの情報もアプリ側からjavascriptに投げれば、対応widgetが作れます。
このwidgetは、iPad上で手軽になにか作れる環境として盛り上がるとよいですね。私のほうでも、widgetランタイムアプリも作ってみようかと思っています。
http://wakufactory.jp/widget/
Posted by: wakufactory | 2010.05.29 at 22:06
すみません追加ですが、widgetでマルチタッチがきかないようです。
UIWebViewのmultitouchEnabledプロパティを立てていただけると
ありがたいです。
よろしくお願いします。
Posted by: wakufactory | 2010.05.30 at 06:15
エンコードの方式について一言。
私はTeraPadを使ってindex.htmlを作っていたのですが、UTF-8で保存しても、CloudReadersで読むと、ソースコードが表示されるだけで、HTMLとしてぜんぜん認識してくれませんでした。何度もディレクトリの構造をいじってみたり、HTMLの無駄なタグを削ってみたりして、トライアンドエラーを繰り返した結果、UTF-8Nという方式で保存しないとCloudReadersで読んでくれないことが分かりました。これに気付くまで長い旅でした。こんなことで悩んでいたのは私だけかもしれませんが、とりあえず後に続く人のために足跡を残しておきたいと思います。
Posted by: 長い旅でした | 2011.01.20 at 03:18
HTML5 Widgetはブラウザで見る時と違い、「前のページに戻る」、「次のページに進む」などの基本操作のボタンが無く、それらの操作ボタンは自分で作る必要があります。その様な事からこれらの基本操作ボタンを集約させたメニューバーをWidget上の固定位置にCSSを使って配置しようとしました。
仕組みは簡単で、CSSに「position : fixed」と座標位置を指定することでメニューバーを固定しようとしました。しかし、Operaではうまくメニューバーを固定できましたが、CloudReadersでは固定できませんでした。CloudReadersでの挙動は「position : absolute」と同じで、画面がスクロールすると、メニューバーも画面と一緒に移動してしまいました。
基本操作のボタンを自分で作らなければならない制約上、どうにかして定位置にメニューバーを作りたいと思っております。何か良い解決策はありませんでしょうか？ちなみに、下記のリンクのページはCSS Lectureさんの「position : fixed」のサンプルページです。「position : fixed」がどの様なものかイメージいただけるよう貼付けました。お知恵を頂けましたら幸いです。
http://www.css-lecture.com/template/2008/1006/fixed.html
Posted by: Jehoshaphat | 2011.06.30 at 22:58