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 くらいの感覚で利用できるようになればと考えています。

OpenSocial Pages はソーシャルデータ駆動による Social Gadget の消費スタイルを提案するものです

こんにちは。なかじまんです。OpenSocial Pages ネタです。

OpenSocial Pages は、その構成例として、iPhone (iPod touch も) 向けに OpenSocial な機能を持つページ(=ガジェット)を提供できるようにしています。

さっそく OpenSocial Pages を使って iPhone 向けに、さささっと 2時間くらいで、タイムライン上でコミュニケーションするためのサンプルページを作ってみました。ページのソースコード (=ガジェット XML ファイル) は、次のサイトからダウンロードできます。

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

サンプルページといっても、完動品で、実用性を感じられるほどの機能を盛り込んであります。iPod touch で動いている様子を動画にしました。動画を見るとイメージが膨らむと思います。(オーディオは Google CM っぽくしてみましたｗ 知らない曲なので、あくまでもイメージです)



OpenSocial Pages のページは iPhone のホーム画面に追加できるようにしてあります。ので、Safari からブックマークしておけば、すぐにページを開くことができます。あと、ホーム画面のアイコンは、ガジェットXML の /ModulePrefs/Link/@rel="icon" で任意のアイコンを指定できます。



ホーム画面のアイコンからページを開くと、ローディング画面を挟むようにしてあります。現状は war/images/apple-touch-startup-image.png 固定ですので、必要に応じて差し替えてください。



認証ドメインの全メンバーのアクティビティをリスト表示しています。緑のハイライトは、タップしたときの効果です。定期的に Activites API をポーリングして、新しいアクティビティを追加しています。OpenSocial Pages の Activites API は UpdatedSince (この日時以降に更新されたもの) パラメータを備えていますので、たんなるポーリングよりもコストは抑えめにできます。



右上の Share ボタンをタップすると、スライドアップして投稿フォームを表示します。メッセージを入力して Send ボタンをクリックすると、そのテキストをアクティビティとして送信します。



タイムラインのメッセージを選択すると、スライドしてメッセージの全文を表示します。



Reply ボタンをタップすると、返信フォームを表示します。



Retweet ボタンをタップすると、RT フォームを表示します。



サンプルページの機能は、以上のとおりです。ぜひ、ページのソースコードと見比べてください。OpenSocial Pages は、ソーシャルグラフとアクティビティストリームの API を持ちます。そのため、この非常に少ないコードだけでも、これだけのソーシャルな機能を持つページが作成できてしまいます。

このように OpenSocial Pages の大きな特徴は、必要な機能を持つページを、その場でインスタントに作成できるということです。つまり、従来のように、多機能かつ汎用的なガジェットを使っていく方向性に加えて、そのときに必要な機能だけを持つガジェット(=ページ)を量産して消費して使い捨てにするという方向性も考慮に入れることができます。また OpenSocial Pages は、ソーシャルグラフとそこから発生したデータは、ページの存在とは無関係 *1 にデータとして保持します。ので、ページよりも、データに重きをおきます。

例えば、紹介したサンプルページは、Twitter のように多機能にしていくことはできますが、特定の人とだけ、タイムラインでコミュニケーションしたいなど、ある目的を持つメンバー向けのページを提供したとして、その後、そのページは使わなくなったとしても、アクティビティはそのまま残り、また別のページから別の使われ方をすることになるでしょう。

*1 ページを削除したときもデータは残りますが、AppData などページの存在が必須であるデータを、どう参照させるかは課題です。

Safari2 で Golazo MA4 の CSS が適用されない不具合を解消しました

Golazo MA4 team のなかじまんです。

ごめんなさい。Golazo MA4 ですが、Safari2 だと CSS が適用されない状態となっていました。本日(9/20)、その不具合を改善したことをお知らせします。

その原因ですが、Golazo MA4 を iPhone (iPod touch を含む) 向けに最適化したものを公開しようと考えていました。その前準備として、メディアクエリを使って、CSS を切り替えるようにしていたのですが、Safari2 がメディアクエリに対応していないため、CSS が適用されないという状態になっていました。これらの経緯は、次のエントリにまとめてあります。

メディアクエリによる iPhone スタイルの切り替えは万能じゃないのか?

メディアクエリを使って iPhone (iPod touch を含む) とその他のブラウザで、スタイルシートを切り替えようと試みているのですが、Apple の開発者サイトやネット上で紹介している方法だと、なぜか Safari 2.0.4 (Multi-Safari) が期待どおり振る舞ってくれません。

まだ準備の段階にも関わらず、iPhone (iPod touch を含む) を意識したコードを HTML ページに忍ばせたのが失敗でした。Safari2 はきっと大丈夫という勝手な判断もよくなかったですね。ちょー反省です。

MacOS X Tiger と Safari3、Safari2 (Multi-Safari)、Firefox3、Firefox2 を使ってみて、どのブラウザでも不都合なくレンダリングしていることを確認できました。もしも、まだ不都合があるようでしたら教えてください。改善していきます。

メディアクエリによる iPhone スタイルの切り替えは万能じゃないのか?

メディアクエリを使って iPhone (iPod touch を含む) とその他のブラウザで、スタイルシートを切り替えようと試みているのですが、Apple の開発者サイトやネット上で紹介している方法だと、なぜか Safari 2.0.4 (Multi-Safari) が期待どおり振る舞ってくれません。

次のとおり link 要素を記述しました。ですが、

<link media="only screen and (min-device-width:480px)" rel="stylesheet" type="text/css" href="/css/golazo-iphone.css" />
<link media="screen and (min-device-width:481px)" rel="stylesheet" type="text/css" href="/css/golazo.css" />

IE6 と IE7 がスタイルシートを読み込まなかったため、次のとおり [if IE] .. [endif] を追加して個別に対応しました。

<link media="only screen and (min-device-width:480px)" rel="stylesheet" type="text/css" href="/css/golazo-iphone.css" />
<link media="screen and (min-device-width:481px)" rel="stylesheet" type="text/css" href="/css/golazo.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/css/golazo.css" />
<![endif]-->

これで OK という気になっていたのですが、MacOS X Tiger の Safari 2.0.4 (Multi-Safari) を使ってみると、どのスタイルシートも読み込まれないのです。[if IE] .. [endif] はコメントでスキップしているので、つまり、メディアクエリを指定した link 要素をスキップしているということです。

何か方法が悪いのか、勘違いしているのか、自分自身の中で謎が深まっていくばかりです。Safari 2.0.4 (Multi-Safari) 固有の振る舞いなんでしょうか。今となっては Safari 2.0.4 を試す環境がないので、確認もできないのです。困りました。ヘルプみー。

追記です。-- 2008-09-19

明確な記述のある文献は見つかっていないのですが、ネット上などの情報を総合すると、Safari 2.0.4 の時点では、メディアクエリに対応していなかったようです。

ですので、1～1.5世代くらい前のブラウザも範疇に含める必要があるなら、UserAgent を見分けた切り替えが妥当という結論です。う～む。やっぱり、何らかのプログラム的な要素が必要になりますね。

jQuery のチートシート jTouch を iPod touch と iClooly で

jQuery 1.2.3 のリファレンスをチートシートとしてまとめて、いつでもどこでも iPhone や iPod touch から見てしまおうという WEB サイトがあることを知りました。

jTouch - Color Charge

A touchable jQuery Cheat Sheet in your pocket, accessible anywhere. Built for iPhone and iPod Touch, it also works great on any W3C Standards compliant browser or mobile devices with built-in Internet access.

振り返って思い起こしてみると、ふと電車の中でアイディアが浮かんだとき、これ jQuery で簡単にできたっけ？と確認したくなることがあります。同じように、寝ころんで技術書などを読んでるときも、あれ jQuery だとどうしてたっけ？と気になったりします。

ただ iPod touch だと、電車で移動するなど、無線 LAN が使えないと使えなかったりするのが欠点だったりしますね。チートシートというので、1ページにすべて収まっているかと思ったのですが、項目を選択するとアクセスが発生しているようなので、ネットワークに繋がらない環境では使えないようです。

↓jTouch を iPod touch の Safari で表示した様子です。Dreamweaver CS3 でコーディングしながら参照したら便利かなと試してみましたが、PC の WEB ブラウザで見るほうがはるかに手軽でした。失敗です。



写真の iPod touch は iPod touch アルミスタンド iClooly という iPod touch 専用のスタンドで立てかけたものです。超小型のマルチモニタみたいに見えるのが、ちょっとかわいいところです。



が、実際のところ、持ち運ぶときの取り外しが手間ですし、モニタの横においても、WEB サイトの動作チェックくらいにしか使わないので、値段の割りにはあんまり役立っていません。質感がいいなぁや面白そうだなぁというのは、購入するときまでの尺度だと、あらためて実感して、無駄使いを反省するのでした。

Google Gadgets の meta@name=viewport と iPhone/iPod touch の関係は？

iGoogle に追加した Google Gadgets の iframe を覗くと、その head 要素に、次のような meta 要素があることに気が付きました。

<meta id="iphone-viewport" content="width=320;
  maximum-scale=1.0;
  minimum-scale=1.0;
  initial-scale=1.0;
  user-scalable=no"
name="viewport"/>

これは iPhone と iPod touch の Safari から見たときに、自動的に拡大(縮小)を無効にして画面一杯に表示するという指示を意味します。

この meta 要素を使う入口ってどこにあるのでしょうか。ちょっと考えたり、振り返ったりしても思い当たりませんでした。iPhone と iPod touch に関係があるハズなんですが・・・。

iPhoneショック ケータイビジネスまで変える驚異のアップル流ものづくり 林 信行 by G-Tools