HTML5を利用してみたいなら

2009年の後半になってHTML5の話題が各所で見られるようになってきた。2010年9月には最終版も出ると言われており、10年以上使われてきたHTML4に、現在の主流に合わせたAPIの強化や要素の追加を行っている。Firefox/ Safari/ Google Chrome/ OperaといったWebブラウザはHTML5への対応を強化しており、すでに多数の新機能が利用できるようになっている。

多数のiPHone向けWebアプリが登録されているのですぐに試せる

今後盛り上がっていくことが期待されるHTML5。しかし、現時点で実際に利用することを考えると、デスクトップPCの場合、多様なWebブラウザが存在し、実装も異なるところが問題になる。その点、スマートフォンであれば機種もWebブラウザも限定されてくる。本稿で紹介する『WidgetPad』は、iPhone向けにHTML5/ JavaScriptを使ってWebアプリケーションを開発、動作させられるプラットフォームだ。

まずはデモを見てみよう

WidgetPadでは、デモを含めて多数のウィジェットが登録されている。各ウィジェット(Webアプリケーション)の詳細画面で再生ボタンをクリックすると動作が開始する。対応WebブラウザはFirefox 3.5以降/ Safari 4以降、おそらくGoogle Chromeでも動作するとのこと。それらのWebブラウザであればPC用ブラウザでも動作させられるはずだ。なお、HTML5の仕様はまだ確定していないこともあり、動作しない機能もあるだろう。

ウィジェット詳細画面。スクリーンショットの中央にあるボタンをクリックすると開始する

登録されているウィジェットは、ゲームやペインター、3Dのイメージビューアなど多様だ。ウィジェットの詳細画面では再生ボタンをクリックするとロードされ、複雑な動作を行うウィジェットがブラウザ上で使えるようになる。これだけの機能がHTMLとJavaScriptで実現するのかと驚くくらいだ。

iPhoneで確認してみる

続いてiPhoneでも見てみよう。PC版と同じようにウィジェットの詳細画面を表示すると＜Play it＞ボタンが表示される。これをクリックするとウィジェットが開始される。動作はスムーズで、ゲームなども十分楽しめる。マルチタッチには対応していないが、画面の上を指で動かせば、マウスと同じように線を描いたりクリックする動作が可能だ。

ウィジェット詳細ページ。＜Play it＞ボタンで開始する

ゲームのウィジェットもある

横向き表示がサポートされているものもある

お気に入りに登録する

他のユーザが作ったウィジェットで気に入ったものがあればお気に入りに追加できる。それらはFavoritesのページで確認できるようになっている。また、ウィジェットにコメントを残すこともできるので、感想や不具合などをフィードバックすることが可能だ。

ウィジェットを作るなら要ユーザ登録

自分でもウィジェットを作りたいと思ったら、ユーザ登録が必須になる。入力したメールアドレスの返信メールにある登録用URLから進める。数分もあれば完了するだろう。ログインするとダッシュボードが表示され、自分がこれまでに作ったウィジェットが一覧される(はじめはもちろんないだろう)。

ウィジェットの作成機能について

ウィジェットを作り始めるには、ダッシュボードの右上にある「Create new widget」から進める。現在、HTMLを使ったウィジェットかCanvasを使ったウィジェットを選択可能だ。画像やアニメーション処理を行うようなウィジェットであればCanvas向けになるだろう。

ログイン直後の画面。自作のウィジェットを開発するには右上のリンクから開始する

WidgetPadの作成機能は、まるで開発者向けのテキストエディタのような表示になっている。JavaScript/ HTML/ CSSに対応したハイライト表示が可能で、とても開発しやすい。さらにWidgetPad用のログライブラリを用意。画面下にログを表示しながら開発を進めることもできる。これによって開発効率が大幅に向上することだろう。

開発途中でもPCまたはiPhoneでプレビューが表示可能。開発が終わったらPublishすれば公開される。

開発画面。ハイライト表示されるので分かりやすい

フォークする

他のユーザが作ったウィジェットはそれをコピー(フォーク)して改造し、新しい機能を追加したりデザインを変えたりすることができる。このフォークをうまく使えばウィジェットを作るための勉強期間も短縮されそうだ。さらにソースを見るだけでも機能もある。

フォークは各ウィジェットの詳細画面にある

iPhoneアプリ版を使う

ウィジェットはiPhoneのSafariから使えるのが魅力だが、さらに外部サービスと連携しようと思った時に使えるのがiPhoneアプリ版『WidgetPad』だ。App Storeから無料で入手可能。登録ウィジェットの一覧表示や任意のウィジェットを実行できるようになっている。つまり、WidgetPadがアプリケーションの配布および実行するための環境として機能するのだ。

iPhoneアプリの画面。基本機能はSafariと同じ

iPhoneアプリ版だと外部サービスとの連携が可能だ

たとえば、iPhoneアプリ版を使ったサンプルとしてTwitterへの投稿アプリがある。Twitter IDとパスワード、メッセージを入力して送信すれば、ウィジェットから外部サービス(ここではTwitter)にデータを送ることができるようになっている。この機能によってWidgetPadの可能性は大きく広がりそうだ。

そのほか、お気に入りのウィジェットの一覧表示や検索機能も備えている。WidgetPadをさらに活用するうえで欠かせないアプリケーションになりそうだ。

HTML5の魅力をiPhoneで理解できる

同様のサービスとしては、Googleが自社製ブラウザ「Google Chrome」の性能をアピールするために公開した「Chrome Experiments」が知られている。WidgetPadはそのiPhone版とも言えるWebサービスであり、かつ開発者がWidgetPad上でWebアプリケーションを開発したり動かせるようになっている。さらにネイティブアプリを使えばWidgetPad自体がアプリケーション配布まで行えるプラットフォームに変身する。HTML5の魅力を知りつつ、それをiPhone上で利用することで魅力がどれだけ増すか、よく分かるのではないだろうか。