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 をゲームやエンタメのプラットフォームとして使うことも十分考えられますね。

Status Update と Check-in アプリの連携で見る OpenSocial Pages の意義

おはようございます。Nobuhiro Nakajima です。

前のエントリでは、今どんな仕事をしているか？ What are you working on? を Twitter のようなライムラインで共有する OpenSocial Pages 向けの Status Update アプリ (サンプル) を紹介しました。

今回は、さらに一歩進めて、今どこで仕事をしているか？ を Foursquare のような位置情報で共有する OpenSocial 向けの Check-in アプリ (サンプル) を紹介します。

Check-in アプリを実行すると、今どこにいるかその位置を検出して地図を表示します。そして、コメントを入力して Check-in ボタンをクリックすると、コメントと位置情報を保存します。保存したコメントと位置情報は、Google Apps のユーザ間で共有され、今どこでどんな仕事をしているか、地図上のマーカーと吹き出しで確認できます。

地図の表示は Google Maps API、位置情報の検出は HTML5 の Geolocation API を使っていますので、多くのスマートフォンで動作しますし、PC でも動作するでしょう。

また Check-in すると、次のように、Status Update アプリのタイムラインに、コメントと位置情報を表示しますので、Check-in の内容に対して、タイムライン上でコミュニケーションすることもできます。

さらに、そのコメントには、Check-in アプリへのリンクも含みます。リンクをクリックすると、Check-in アプリを起動して、そのユーザがコメントした位置の地図を表示しますので、そのユーザに何かをお願いしたり、近くにいるユーザを探すこともできます。

OpenSocial Pages は Google Apps の Gmail と連携した Messages API も備えていますので、メールによる通知を Check-in アプリに追加して、メールの中から Status Update アプリや Check-in アプリを起動するといった使い方もできるでしょう。

このように OpenSocial Pages は、小さなアプリがお互いに連携して、それぞれの機能を補う構成をとれるのが大きな特徴です。多機能なアプリをあらかじめ作るではなく、そのときに必要となったことを、そのときに小さく作る、もう存在する機能は連携して使う、そして小さく改善し続ける... といった今までとは異なる新しいサイクルを生み出す手助けを目標としています。

Check-in アプリのガジェット XML は、次のサイトから入手できます。check-in.xml をダウンロードしてください。

OpenSocial Pages Downloads

http://sites.google.com/a/lrlab.to/opensocial-pages/downloads

OpenSocial Pages は Google Apps MarketPlace から Google Apps に直接インストールできます。OpenSocial Pages を Google Apps にインストールするときは、次のボタンをクリックしてください。

Status Update アプリとスマートフォンから見る OpenSocial Pages の意義、欠点と課題

こんにちは。Nobuhiro Nakajima です。

OpenSocial Pages 向けの Status Update アプリ (サンプル) をアップデートしました。このアプリは 今どんな仕事をしているか？ Twitter のようなタイムラインで共有しようというものです。

先日ご紹介した Tweet アプリ (サンプル) は jQTouch を使用した iPhone 専用のアプリでしたが、Status Update アプリは、PC も含めて iPhone、iPad、Android などのスマートフォンでも動作するようにしました。

Status Update アプリ (サンプル) のガジェットXML は、次のサイトから入手できます。status-update.r146.xml をダウンロードしてください。

OpenSocial Pages Downloads
http://sites.google.com/a/lrlab.to/opensocial-pages/downloads

また OpenSocial Pages for Google Apps をインストールすると、既定のガジェット (=ページ) として追加するようにしました。OpenSocial Pages を Google Apps にインストールするときは、次のボタンをクリックしてください。

Status Update アプリが、各種スマートフォンでどう動くのかスクリーンキャプチャをとりました。

OpenSocial Pages は、他のコンシューマ向け SNS とは異なり、アプリを iframe を使わず、ウェブページとして表示して動かします。つまり、従来のウェブページを OpenSocial アプリとして作成できるということです。

そのため、スクリーンキャプチャのように PC も含めて、iPhone、iPad、Android などのモバイルブラウザでも OpenSocial アプリを快適に動作させることができます。

ただし、モバイルブラウザという性質上、残念ながら今のところ Flash は使えません。が、OpenSocial Pages は、HTML5 でウェブページをレンダリングするようにしていますので、HTML5 のテクノロジを使ったリッチアプリを動作させることはできます。

また、Android は Flash のサポートを表明していますので、近い将来 OpenSocial Pages + Android で Flash ベースの OpenSocial アプリを動作させることもできるようになります。

Status Update アプリは、今どんな仕事をしているか、Twitter でいうところの "つぶやき" を Google Apps ドメインのユーザ間で共有できる アプリです。その "つぶやき" が、他のドメインや公のユーザに公開されることはありません。

OpenSocial Pages は Google Apps のユーザとグループをインポートして、必要に応じて同期できます。つまり、OpenSocial Pages を Google Apps にインストールすると、Google Apps の既存ユーザとグループをソーシャルグラフとして、Google Apps に閉じた OpenSocial アプリを動作させることができるということです。

Status Update アプリは、とても小さく単純なもの(OpenSocial と JavaScript の知識があれば誰でも作れる)ですが、これら OpenSocial Pages の特徴によって、役立つものとなります。

例えば、スマートフォンの特徴と HTML5 の特徴を活かして、"つぶやき" に位置情報を付与するようにして、今どこでどんな仕事をしているか、お互いに共有できるアプリに改善することもできるでしょう。

OpenSocial Pages を使うには OpenSocial と JavaScript の知識が必要で、ウェブ開発者がいないと使えないという欠点があり、大きな問題であると課題として認識しています。

現状は、ウェブ開発者がいて、自らアプリを開発して、仕事の役に立ててもらうというスコープですが、将来は Google Friend Connect Social Gadgets や Facebook Widget、Twitter @anywhere くらいの感覚で利用できるようになればと考えています。