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 を使ってみて、どのブラウザでも不都合なくレンダリングしていることを確認できました。もしも、まだ不都合があるようでしたら教えてください。改善していきます。

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