iPad上でHTML5 Widgetを走らせて遊ぼう
2010.05.27
昨日の「HTML5: W3C Widget とその応用を考える会」は参加者も多く、私自身とても良い勉強になったが、そこでも予告した通り、iPad発売を記念してWidgetのサンプルをいくつか用意したので、ぜひともお試しいただきたい。
手順は以下の通り。
ステップ１. iPadにCloudReadersをインストールする（iTunes ストアへのリンク）
ステップ２. 以下のWidgetをダウンロードする
- Download 3dClock.wgt (2.5K) ー CSS3を使った３D時計
- Download TimeTrial25.wgt (7.8K) ー タイムトライアルゲーム
- Download JSCalc.wgt (3.4K) ー 電卓
- Download QuadraBench.wgt (2.5K) ー Canvas のベンチマークプログラム
ステップ３. iPadをPC/Macに繋げ、iTunesを立ち上げて左サイドバーでiPadを選択
ステップ４. タブからAppsを選択
ステップ５. スクロールダウンして、File Sharing の Apps からCloudReaders を選択
ステップ６. ステップ２でダウンロードしたWidgetをDocumentsにDrag&Dropする
ステップ７. CloudReadersを立ち上げてWidgetをリストから選択する
Widgetの仕様はこちらに書いてあるが、簡単に言えばZIPで固めたウェブアプリケーションである。オフラインで走らせることも可能だし、こんな形でパッケージとして流通させることも可能である。最近、私は「iPad用のマルチメディア出版は、（Objective C／C++/JavaやFlashで作るのではなく）HTML5で作るべき」という主張をしているが、その際のパッケージング方式としてデファクト・スタンダードになりつつあるのが、このWidgetである。
興味があるエンジニアの方は、上でダウンロードしたWidgetのエクステンションを.zipに変換して解凍すればソースコードを見ることもできる（ちなみに、その中身はオープンソースなので自由に利用していただいて結構だが、作ったWidgetへのリンクをこのエントリーのコメント欄に書いていただけるとありがたい）。
ちなみに、CloudReadersのWidgetサポートはまだベータ段階なので、Opera用に作られたWidgetはまだ動かないものが多いのでそこはご容赦いただきたい。ルートファイルがindex.htmlでなければならない点、クロスドメイン・アクセスはサポートしていない点、などの制限もあるが、とりあえずWidgetとは何かを理解するために、簡単なものを試してみるには十分な環境だ。
「iPad向けにアプリケーションを作ってみたいけど、Objective Cを勉強している時間はない」人には、「JavaScript+HTML+CSSでiPadアプリを作ること」が可能になる点が魅力だと思うんだがいかがだろう。特にiPadのCSS3アニメーションの実装はすばらしく、かなり高度なことが出来るのでぜひともお試しいただきたい。
Widgetの素晴らしいサンプルの公開ありがとうございます。
色々試してみたいと思います。
ところで、wgtファイルの中に.svnディレクトリが（おそらく意図せず）混じってしまっているので
これはクリーンにしておいたほうが良いと思いました。
当方がみたのはTimeTrialのサンプル(/css、/js以下)です。ご確認ください。
Posted by: Shinpei Ohtani | 2010.05.27 at 21:58
どこで聞けばいいか分からないのでここから失礼します。
ipadが届いたので早速使わせていただいたのですが、ページの進む方向が左から右に進んでしまいます。
これを逆に出来ませんか。
Posted by: ななしさん | 2010.05.27 at 23:12
右上のボタンで出来たんですね、失礼しました。
Posted by: ななしさん | 2010.05.28 at 00:09
画面が真っ暗で何もでないのですが、、何か設定が間違っているのでしょうか
Posted by: うりぼ | 2010.05.28 at 22:18
Thank You!! Another use for my favorite and most used iPad app: CloudReaders.
Posted by: Gmj | 2010.05.29 at 11:44
とても興味深い内容でした。早速、iPadでためしてみましたが、3dClockでまずびっくりしました。ソースコードもみました。素人のわたしにとってすぐ理解できるわけではないのですが、時間をかければ簡単なプログラムならば、私にも作成可能なのではないか？、という期待が膨らんできました。有益な情報、機能をありがとうございます。
（ところで、TimeTrialですが、１０秒以内でクリアできるひとがいるのかなぁ？ ^^;）
Posted by: beerdog | 2010.06.01 at 15:27