OpenSocial Pages のガジェットは HTML5 で動作することを Pacman で確認してみた

こんばんは。Nobuhiro Nakajima です。

OpenSocial Pages のガジェット(=アプリ)は HTML5 で動作します。そのことを確認するために HTML5 Pacman を OpenSocial Pages で動かしてみました。もちろん、次の動画のとおり、Audio も含めてバッチリ動きます。

HTML5 Pacman を OpenSocial Pages のガジェットに移植するにあたり、次のことをしました。

• index.html と packman.js をガジェットXMLにまとめる
• Audio ファイル (ogg and mp3) を Amazon S3 に置く
• modernizr-1.5.min.js を OpenSocial Pages の libs を参照する
• Audio On/Off の設定を、次のとおり、User Preference 経由にする

var prefs = new gadgets.Prefs();

// return localStorage["soundDisabled"] === "true";
return prefs.getBool("soundDisabled");

// localStorage["soundDisabled"] = !soundDisabled();
prefs.set("soundDisabled", !soundDisabled());

OpenSocial Pages は、ガジェットをフレームウィンドウ(iframe)で表示せず、ウェブページにインラインで直接表示する仕組みを採用しています。そして、そのウェブページのドキュメントタイプは HTML5 としています。

そのため OpenSocial Pages では Flash に加えて、HTML5 Pacman のように HTML5 ベースのリッチなアプリを動かすことができます。また、フレームウィンドウ(iframe)の制約を受けないため、アプリは、キーボードのイベントを活用することができます。

アプリの開発者を絶対的に信頼する(もしくは信頼できると検証できる)なら OpenSocial Pages をゲームやエンタメのプラットフォームとして使うことも十分考えられますね。