スパイスラボ神部です。

久々に OpenSocial 入門ネタを。

OpenSocial アプリでアクセス解析するには？

まずは基礎知識。

-OpenSocialアプリからGoogle Analyticsを利用できます - OpenSocial-Japan | Google グループ

こんなに短く記述できるのね。

-iGoogleガジェットでGoogle Analyticsを利用する方法 - F.Ko-Jiの「一秒後は未来」

↑ この「UA」で始まるIDがあとで必要となります。ガジェットファイルを設置するドメインと同じプロファイルを選択しましょう。

「ガジェットファイルを設置するドメインと同じプロファイルを選択しましょう」ここが以外と書いてない。

実践編

まず、コンテナが対応しているかどうかを確認しましょう。

mixiアプリでは

-mixi Developer Center (ミクシィ デベロッパーセンター) » できることリスト

「利用可能なFeature一覧」にあるので使えそうです。

goo ホームでは

-iGoogle から goo ホームサンドボックスへのガジェット移植 Tips - WebOS Goodies

にあるように、

-利用できるフィーチャー - goo Developer's Kitchen

にはないので現状は利用出来ないようです。将来は利用出来るようになるかもしれないので、楽しみにしてみましょう。

実地報告

とはいえまだ OpenSocial アプリでアクセス解析出来た！という実績はありません。

早速 mixi アプリ「 †フェイス女学園† （顔診断） 」に仕込んでみました。

明日あたり Google Analytics のアカウントを見てみて、無事取得できているようでしたらお知らせします。

スパイスラボ神部です。

OpenSocial アプリを作る際、Gadget XML の Feature のひとつに miniMessage というのがあります。

-gadgets.MiniMessage - OpenSocial - Google Code

これ結構ユーザとのインタラクションに便利なんですが、使うにあたりあんまり情報が無くて困っています。

-MiniMessage が好きだ！ - Favorites!

いろいろ探してみる

-MiniMessageによるちょっとリッチなメッセージ表示 - OpenSocial-Japan | Google グループ

基本はこれでいいようです。Require Feature で minimessage を読み込み、new して msg.createDismissibleMessage で呼び出し。

-Postal Search APIs & Solutions ブログ: opensocial-jquery 0.6.0 をリリースしました。jQuery.ajax で signed リクエストが使えます。ほか Flash や MiniMessage など UI のサポートを追加しました。

opensocial-jquery でのやり方。ただし、OpenSocial Hackathonでクイズアプリを作って優勝しました！ | twk @ ふらっと であるように、createTimerMessage とかは現状未実装みたいです。

こちらも参考：MiniMessage - opensocial-jquery - 閉じるボタン付きのメッセージを表示し、閉じるイベントをハンドリングできます。 - Google Code

-メッセージを表示する

mixi アプリでもこんなんできるらしいですが、なぜか試してみるとフォントが極小＆boldで使えそうにない感じ。スタイルの変更もなぜかうまくいかない不思議。

-ユーザー インターフェースの作成 - ガジェット - Google Code

goo ホームの実装。mixi でもこれくらい細かい解説が欲しいところ。

-世界でいちばん小さなメッセージが好き！ - ILOVEIT(β)
　

スパイスラボ神部です。

一つ前のエントリでも書きましたとおり、これからは makeRequest を使っていきたいのですが、それ以前にプリミティブな方法として iframe を使って外部サーバを使う方法も使っていました。どちらにどういう利点があるかを探ってみたいと思います。

makeRequest を使う場合

まずは参考資料。

makeRequest についての解説は、リモート コンテンツの処理 - ガジェット - Google Code にあります。makeRequest そのものについての説明は、gadgets.io - ガジェット - Google Code にあります。

Postal Search APIs & Solutions ブログ: いくつかコンテナをピックアップして gadgets.io.makeRequest で SIGNED リクエストを投げてみました。 とか、Postal Search APIs & Solutions ブログ: (続) いくつかコンテナをピックアップして gadgets.io.makeRequest で SIGNED リクエストを投げてみました といった情報もあります。

次は mixi Platform と goo ホームの資料。

-mixi Developer Center (ミクシィ デベロッパーセンター) » 外部サーバの呼び出し

-外部サーバーと通信する - goo Developer's Kitchen

具体的なコードはこのあたりに。

--[入門] 外部URLを取得する (makeRequest()) (OpenSocial大技林(予))

-[入門] 外部のJSONを取得する (makeRequest()) (OpenSocial大技林(予))

上級編：makeRqeuest の同期処理

こちらはまだ先の話になりそうですが、同期処理について。

-makeRequestで非同期/同期の指定は可能？ - OpenSocial-Japan | Google グループ

makeRequest のキャッシュに潜んだ二つの罠

さて、いざ makeRequest でいくぞ！と思っていても、キャッシュに二つの罠があります。

１．キャッシュの間隔を制御しよう

-Tender Surrender » OpenSocialガジェット開発で注意すべきキャッシュ機能 （同じ内容は キャッシュを制御して効率よく開発する - goo Developer's Kitchen にも。）

開発中はこちらに書かれていますように、

gadgets.io.ProxyUrlRequestParamters.REFRESH_INTERVAL

と設定しないと、リクエストの間隔が長くなるため、思うように開発ができないようです。

２．mixi Platform のときは違うパラメーターを指定

-2009-05-07 - Road to Dream

つい三日前のエントリですが、ここにあるように mixi の場合は

params[gadgets.io.RequestParameters.REFRESH_INTERVAL] = 0;

を指定しないといけないようです。先ほどとは設定するパラメーターの名称が違う感じ。うーん、これはどっちを設定すればいいんでしょうね。悩みます。

残された問題

これで、取得するものがテキストファイルだった場合はオッケーになったのですが、PHP の戻り値を受け取ろうとするとどうもうまくいかないことがあるようです（キャッシュの挙動がおかしい）

-ブラウザ のキャッシュを制御する/no-cache を参考に PHP 側のキャッシュも無効にしてみましたが、どうもこれでもうまくいかないようです。こちらはまだ調査中です。

追記２００９／６／２４：えーじさんよりコメントあり

公式ドキュメントにはProxyUrlRequestParamtersと書かれているのですが、実質的にはRequestParametersが有効のようです。

iframe を使う場合

（執筆中）

スパイスラボ神部です。

OpenSocial の JavaScript API を使ってデータの管理をしようと思っていましたが、データの取り回しやパーミッションモデルが難しすぎて、ちょっと Persistent API を積極的に使うのはやめようかと思っています。

-ネバーギブアップが好きだ！ - Favorites!

でも一応まとめ

とはいえ、ただあきらめるのもしゃくなので、時と場合に応じた永続化情報・プロフィールの取得などについてまとめてみようと思います。

OWNER情報の取得

オーナーの情報を取得する、これはオーナーのプロフィールから基本情報や詳細情報などを取得するというときにつかうという考え方でよいかと思います。サンプルを作るのも簡単でしょう。

OWNERへの永続化情報の保存

ちょっと確信は持てないのですが、これは出来ないらしいです。

-mixiアプリで、OWNERの永続化がまだサポートされてなかった・・・。 - 雑想空間

VIEWER の情報の取得

VIEWER != OWNER のときは、先に述べた OWNER の情報の通りです。それと同じ感覚で、VIEWER 自身の情報を表示するのに使えますが、これは閲覧している人にしか見えないかもしれないので、ソーシャルなデータとして再利用するのはちょっと難しいかも。

VIEWER への永続化情報の保存

VIEWER = OWNER のときは、オーナーだけが保存出来る簡易 UserPref のようなものとしてよく使います。

-UserPrefの代わりに永続化データを設定したりする画面を作ってみる - プログラマー、再起動中

OWNER の友だち情報の取得

OWNER の友だち情報を取得したい場合です。どこまで取得出来るかは、VIEWER と OWNER との関係になるのかもしれません。

VIEWER の友達情報の取得

VIEWER の友達情報を取得したい場合です。このときは、自分が関係のある友だち、なおかつ同じアプリをインストールをしている人から出来るだけの情報を得ることが出来るかもしれません。

今後はどうするの？

ともかくそんな感じで、やっぱり複雑ですね。

今後は makeRequest を使いこなして、外部サーバを使いこなしたいと思います。Google App Engine などもうまく使いこなしたいですが、Python なんですよね…

設備コスト、学習コストを考えるとなかなか環境構築が難しそうです。

スパイスラボ神部です。

いろいろとテストアプリケーションを作ることも多くなってきたので、OpenSocial Center の中に、OpenSocial アプリのサンプル集を作ることにしてみました。

-レシピが好きだ！ - Favorites!

インストールして試せるサンプル集

-OpenSocial アプリサンプル集 - OpenSocial Center

このサンプル集のコンセプトとしては、mixi、gooホーム、MySpace などの SNS にインストールして試せることを目指しています。

ちなみに、パートナー企業の従業員アカウントにてサンプルの作成を行っております。アプリケーションのテストの意味も兼ねて、こちらのアカウントへのマイミク申請は大歓迎です。

とりあえずは gadget.view.requestNavigateTo のサンプルだけですが、他にもいろいろサンプルは作成しているので、時間をみて随時公開していければと思います。どうぞよろしくお願いいたします！

スパイスラボ神部です。

jQuery のように使える OpenSocial ライブラリの opensocial-jquery を mixi コンテナ上で試しているのですが、なかなかうまく動きません。

Issue 8 - opensocial-jquery - Mixi platform の対応 - Google Code によるとそのまま動きそうなのですが…

自分のやりかたが悪いのかもしれないので、そういう意味でもメモってみます。

-検証が好きだ！ - Favorites!

実際に試してみる　その１

jQuery.fn.tabs が見た目にわかりやすそうなので、テストを実施してみました。

（Postal Search APIs & Solutions ブログ: opensocial-jquery 1.0.0, 1.0.1 とそのドキュメントを公開しました。 にあるタブのソースコードです）。

JavaScript コンソールには下記のようなエラーメッセージが出ています。

エラー: $("#tabs").tabs is not a function

画像の通り、どちらもタブは出ませんでした。

実際に試してみる　その２

ディストリビュートされているアーカイブに入っているサンプルコードの picasa.xml を試してみました。

添付の通り、goo ホームでは動作しましたが、mixi コンテナでは何も出ないようです。

エラーコンソールにも何も出ないので、ここから先はどうやって問題解決していけばよいのでしょうね。

追記

Issue 8 - opensocial-jquery - Mixi platform の対応 - Google Code にレポートしたらもうレスポンスが来ていました。

<Require feature="opensocial-0.8"/> を入れるべしとのことで…こちらは Require する必要があるのですね。基本的なことに気づかずお恥ずかしい限りです。

ということで、下記のように mixi / goo ともにタブが表示されるようになりました！

また、エラーのトラッキングについても、

Firebug のコンソールにエラーメッセージが出ていれば判別できるかもしれません。また同じく Firebug の HTTP レスポンスの内容を見れば判断できるかもしれません。

というコメントをいただきました。やっぱ Firebug は必須っぽいですね…。
　

スパイスラボ神部です。

噂によると OpenSocial の仕様の中にタブがあるということなので調べてみたところ、「Gadgets Feature-Specific JavaScript API」というのを使うとそれらの機能が使えるようです。ということで、ちょっと使い方を調べてみます。

同じ API のメソッドとしては、ガジェットの高さ調整、Flash の埋め込みなどで無意識に使っていたものです。ビューの間の移動もこの関数に含まれているようですね。

-タブが好きだ！ - Favorites!

gadgets.TabSet について調べる

-gadgets.TabSet - OpenSocial - Google Code

まずは基本仕様。

-2008-12-13 - Webクリエイターのひとりごと

具体的な使い方。__MODILE_ID__ の置換がちょっと気持ち悪いけど、UserPref の置換部分も似たようなものだし、これは慣れるしかないかな。

-フィードバックをください - gooホーム

goo ホームではクオートをつける必要もあるようです。

ちなみに、気がついていなかったのですがgoo Social Platform 開発者コミュニティの掲示板 - gooホーム というのもあるようですね。

goo ホーム関連でいえば此方も必見です。

-連載：OpenSocialを利用してガジェットを作ろう！｜gihyo.jp … 技術評論社

gadgets.TabSet について調べてみたが

お、以外と見つからなかった。この件は引き続き調べてみたいと思います。

スパイスラボ神部です。

OpenSocial Hackathon in April 2009 のエントリ のときにも紹介しましたが、OpenSocial アプリを開発する際にすごく便利なラッパーライブラリ「jOpenSocial と opensocial-jquery 」というのがあるそうです。今のところ、外部 JavaScript を読み込むのが NG なコンテナは無いそうなので、ぜひ使えるようになりたいですね。

ただし、jQuery を使える人にとって最適化されているようなので、あまり使い込んでいない私には学習コストが結構あるかも。でも、PHP では PEAR にかなり助けられていますし、JavaScript でも基本の言語使用に加えて有用なライブラリを使えば、JS が怖くなくなるかもしれません。ということで、この２つのライブラリに関しての情報を集めるところからはじめてみたいと思います。

-jQueryが好きだ！ - Favorites!

jOpenSocial

-jopensocial - Google Code

-OpenSocial jQuery plugin - jOpenSocial | JavaScript | blog | atsushi nagase * developments

-jOpensocialをDeferred化する「jOpensocial.Deferred」 | ZEROFACES

-デブサミ2009で『OpenSocial パネルディスカッション』開催 Kawa.netブログ（川崎有亮）/ウェブリブログ

opensocial-jquery

Google Code

-opensocial-jquery - Google Code

-Wiki Pages - opensocial-jquery - Google Code

-OpenSocialガジェット向けに jQuery をカスタマイズしてみました。 - OpenSocial-Japan | Google グループ

-Issue 8 - opensocial-jquery - Mixi platform の対応 - Google Code

Postal Search APIs & Solutions ブログ

-opensocial-jquery 0.1.0 をリリースしました。

-opensocial-jquery の日本語ドキュメントを公開します。

-opensocial-jquery 1.0.0, 1.0.1 とそのドキュメントを公開しました。

-Enhancing of jQuery.ajax with JSDeferred 1.0.0 をリリースしました

以上は、次のバージョンの opensocial-jquery でも使えるようにします。

-opensocial-jquery は jQuery プラグインと組み合わせて使えます。

うーん、まずは jQuery の使い方を勉強しないと…

追記：jQuery.opensocial_simple Plugin

-jQuery.opensocial_simple Pluginを作成しました。 : tech.kayac.com - KAYAC engineers' blog

そうそう、あとひとつあった気がしたので、見つけられて良かった。作成されたのは jOpensocial よりも前みたいです。

調査中

結構リソースが見つけにくい…名前が jQuery+OpenSocial とかでユニークな文字列じゃないので、検索結果から目的外のものを取り除くのが結構大変です。ファイル名をクエリにするなどしてもう一度いろいろ探してみようと思います。
　

スパイスラボ神部です。

OpenSocial アプリを開発していて、知っているのと知らないのとでは大きな違いがある「キャッシュのクリア」。私は nocahe=true とかやってるのですが、どういう経緯でやってるのか忘れてしまったのでもう一度調べてみました。

キャッシュクリアが好きだ！ - Favorites!

すぐに見つかりました

ここで憶えたんですね～。たぶん Shinding 系の共通パラメータなんだろうか。

-Tender Surrender » OpenSocialガジェット開発で注意すべきキャッシュ機能

goo ドキュメントでももちろん言及。

-キャッシュを制御して効率よく開発する - goo Developer's Kitchen

経緯としては、かつて orkut では bpc=1 というものが昔使われていたようですが、いまでは廃止になったようです。

-&bpc=1ではなく&nocache=1を使いましょう - OpenSocial-Japan | Google グループ

イベントレポートの中にも登場。

-OpenSocial Hackathon in Kyoto 発表タイム - rm -Rf

たしかに OpenSocial 系のイベントをやるときは、わかってても最初にアナウンスし、共有すべきことかもしれません。

正式には nocache=1 が正しいみたい

ちなみによく読まれた方はお気づきだとは思いますが、正式には nocache=1 が正しいみたいですね。私が憶えている nocache=true で動いているのはたまたまであって、憶えるのなら nocache=1 とするのがよさそうです。自分的には nochace という否定語が紛らわしいのであえて true でやって意味わかりやすいようにしているだけで、おそらく邪道です。

以上、これもなにかの参考になればと思い、共有しておきます。

スパイスラボ神部です。

Web の基盤技術となっている HTML では、ハイパーリンクがその特徴でした。OpenSocial アプリでもそのようなことを行うには、どうしたらいいでしょうか。

-ハイパーリンクが好きだ！ - Favorites!

requestNavigateTo() を使おう

Gadgets API リファレンス - OpenSocial - Google Code

また、v0.7 ですが、コードサンプルもあるようです。

OpenSocial API デベロッパー ガイド (v0.7) - OpenSocial - Google Code

とりあえずしたしらべということで。
　

opensocial-jquery を使う場合

こんな風に書けます。

$.view('canvas', { p: 'pagename' });

このとき、p:pagename は引数です。書かない場合は>$.view('canvas'); となります。

参考：opensocial @ ウィキ - Viewの切り替え

スパイスラボ神部です。

楽しい mixi アプリ・OpenSocial アプリを作るやりかたを広めるべく、自分の勉強も兼ねて OpenSocial の入門系エントリを量産していきたいと思います。

今回のテーマはデータの永続化です

-永続化が好きだ！ - Favorites!

保存 - Update

newUpdatePersonAppDataRequest()

mixi Developer Center (ミクシィ デベロッパーセンター) » JavaScript API にあるサンプルにコールバック関数をつければOKな感じです。

取得 - Fetch

newFetchPersonAppDataRequest()

mixi Developer Center (ミクシィ デベロッパーセンター) » JavaScript API にあるものをベースにすればよさそうです。

削除 - Remove

newRemovePersonAppDataRequest()

現在 mixi オープンβ環境ではなんだかうまくいきません。goo ホームではよいかも。ただ、このメソッドがうまく実行できなくとも、newUpdatePersonAppDataRequest() で blank の値を保存するという挙動で削除をエミュレートすることで問題を回避することはできそうです。

下調べに使ったリンク集

-mixi Developer Center (ミクシィ デベロッパーセンター) » JavaScript API

-八角研究所 : OpenSocialを始めよう（11） - ShindigをEclipse上でデバッグ（後編）

つづき　が　ない！

-OpenSocialでOwnner毎 or Owner*アプリ毎の永続化方法 - OpenSocial-Japan | Google グループ

スパイスラボ神部です。

OpenSocial 初歩の範疇で、OpenSocial で Owner と Viewer の ID を取得する方法をまとめてみたいと思います。

-ネストが好きだ！ - Favorites!

Owner ID を取得する

てきとうな View にこんなコードを書けばオーナーIDは取得できます。

<![CDATA[
<script type="text/javascript">
var req = opensocial.newDataRequest();
req.add(req.newFetchPersonRequest('OWNER'), 'owner');
req.send(function(data) {
var owner = data.get('owner').getData();
var oid = owner.getField(opensocial.Person.Field.ID);
});
</script>
<div id="displayId"></div>
]]>

ひとつ注意したいのは、デバッグ用にネストされた関数の中で document.write してしまうとなぜかコンテナの処理が止まってしまうことがあるところ。

対策としては、外部に空の DIV などをつくっておいて、そこに innerHTML で挿入すると大丈夫です。

Viewer ID を取得する

OWNER と VIEWER では newFetchPersonRequest 引数が若干違います。

<![CDATA[
<script type="text/javascript">
var req = opensocial.newDataRequest();
req.add(req.newFetchPersonRequest(
opensocial.IdSpec.PersonId.VIEWER), 'viewer');
req.send(function(data) {
var viewer = data.get('viewer').getData();
var vid = viewer.getField(opensocial.Person.Field.ID);
document.getElementById("displayId2").innerHTML = vid;
});
</script>
<div id="displayId2"></div>
]]>

こんな感じです。簡単ですネ！

でも ID の取得ひとつでこれだけコードを書かなきゃ行けないのも、ちょっと冗長な気もします。どうなんでしょう？