OpenSocialist

OpenSocialはmixiアプリだけじゃないよ

2009-08-14T10:23:00.007+09:00

今、日本でOpenSocialというと、下手すると「mixiアプリをつくるためのもの」のようなイメージになってしまっているかもしれないけれど、OpenSocialを採用しているところは、他にも沢山ある。

世界に目を向ければ、（Facebookに負ける前は）世界最大手だったユーザ数2億人の「MySpace」、ユーザ数4500万人にまで成長したシリコンバレー定番のソーシャルビジネスネットワーク「LinkedIn」、現在100万のネットワークを持つソーシャルネットワーク構築サービス「Ning」など。他にも、米Yahoo!、Salesforce.com、Six ApartなんかもOpenSocialを採用している。

日本でOpenSocialを採用しているのは、mixi以外に「gooホーム」や「OpenPNE」がある。gooホームは、mixiアプリに比べるとどうしても地味だけれど、mixiよりも早くOpenSocialに対応していて、ドキュメント等も色々充実しているようだ。

加えて、日本国内でも今後の展開が注目されるのは、iGoogleだ。iGoogleは最近一新されて、OpenSocialを使ったソーシャルガジェットを利用できるようになった。日本でiGoogleがどれくらい使われているかはよく分からないが、自分なんかは、GmailやTwitterやニュースなどはiGoogleでチェックしているので、結構利用している。

OpenSocialに対応しているところは、大抵Apache Shindigを使っている。なので、自分のWebサービスをOpenSocialを対応させたかったら、Shindigを導入すればよい。Shindigの勉強もしたいなーと思っているのだけれど、なかなか実行できない。

Persistence API で JSONデータを保存する

2009-08-03T01:28:00.009+09:00

OpenSocial APIは、v0.8からPersistence APIでJavaScriptのオブジェクトをそのまま永続化できるようになったと聞いていたのだけれど、どうもmixiアプリのOpenSocialコンテナは、この機能をまだ実装していないようだ。

つまり、今のところPersistence APIのnewUpdatePersonAppDataRequest()で保存できるのは普通の文字列だけということで、配列やオブジェクトを保存したい場合は、一旦、JSON形式の文字列にしてから永続化リクエストを送る。

文字列化するためには、gadgets.jsonオブジェクトのgadgets.json.stringify()というメソッドが利用できる。例えば、

var object = {"name": "John Smith", "age": 33};
var string = gadgets.json.stringify(object);

というような感じで、オブジェクトを文字列に変換できる。あとは、このJSON形式の文字列を、newUpdatePersonAppDataRequest()の第３引数に渡せばOK。

var req = opensocial.newDataRequest(); 
req.add(req.newUpdatePersonAppDataRequest(opensocial.DataRequest.PersonId.VIEWER, "key", string), "data"); 
req.send(コールバック関数);

注意しなければならないのは、このJSONデータを受け取る際に文字列がHTMLエスケープされているので、アンエスケープしてからパースしなければならない点。

var req = opensocial.newDataRequest(); 
req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER), "viewer");
req.add(req.newFetchPersonAppDataRequest(opensocial.DataRequest.PersonId.VIEWER, ["key"]), "data"); 
req.send(function(response) { 
  var id = response.get("viewer").getData().getId();
  var data = response.get("data").getData(); 
  var string = data[id]["key"];
  string = gadgets.util.unescapeString(string);
  var object = gadgets.json.parse(string); 
});

gadgets.util.unescapeString()を使ってHTMLアンエスケープし、gadgets.json.parse()でJSONをパースすることで、普通のJavaScriptオブジェクトが得られる。

mixiアプリのPersistence APIで日本語入力すると文字化けする場合

2009-07-31T00:25:00.005+09:00

OpenSocialには、Key-Valueデータを保存できるPersitence APIというものがあるのだが（→情報の永続化 Persistence API サンプル）、現状、mixiアプリでPersistence APIを使うと、日本語を保存したとき文字化けしてしまう。

これはmixi側の不具合で、今後直されるとのこと。ただ、いつ直されるかは分からないので、とりあえず文字化けを回避する応急処置法をご紹介。

日本語を文字化けさせないためには、newUpdatePersonAppDataRequest()でデータを送信する前にJavaScriptのescape()でエンコードし、newFetchPersonAppDataRequest()でデータを受信した後にunescape()でデコードすればよい。

<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
  <ModulePrefs title="PersistenceTest2"> 
    <Require feature="opensocial-0.8"/>
  </ModulePrefs>
  <Content type="html">
  <![CDATA[
  <script type="text/javascript">
  
  function saveData() {
    var value = document.getElementById("input_data").value;
    value = escape(value); // escape()でエンコード
    var req = opensocial.newDataRequest();
    req.add(req.newUpdatePersonAppDataRequest(opensocial.IdSpec.PersonId.VIEWER, "key", value));
    req.send(function(response) {
      if (response.hadError()) {
        alert(response.getErrorMessage());
      } else {
        alert("データが保存されました。")
      }
    });
  }
  
  function loadData() {
    var req = opensocial.newDataRequest();
    req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER), "viewer");
    req.add(req.newFetchPersonAppDataRequest(opensocial.IdSpec.PersonId.VIEWER, ["key"]), "viewer_data");
    req.send(function(response) {
      if (response.hadError()) {
        alert(response.getErrorMessage());
      } else {
        var myId = response.get("viewer").getData().getId();
        var data = response.get("viewer_data").getData();
        data = unescape(data[myId]["key"]); // unescape()でデコード
        alert(data);
      }
    });
  }
  </script>
  
  <input type="text" id="input_data"/>
  <button onclick="saveData()">データ保存</button>
  <button onclick="loadData()">データ取得</button>
  ]]> 
  </Content>
</Module>

聞くところによると、文字化けしてしまう原因は、mixiサイトの文字コードにあるそうだ。mixiのサイトでは文字コードにEUC-JPを使っているのに、mixiアプリのiframeではUTF-8を使っており、これが何か悪さをしているみたい。

mixiオフィスに入ってみた感想

2009-07-22T20:12:00.006+09:00

原宿にあるmixiのオフィスに行く用事があったのだけれど、これがまたキレイなオフィスだった（画像はmixiのサイトより）。受付にもキレイなお姉さん。ビビッドな色使いしてる点とかは、先日行ったGoogleの東京オフィス（渋谷にある）と似てるかもだけれど、mixiの方が、オフィス環境に金使ってるなーって印象。

面白かったのは、Webに関するキーワード（「semantic web」とか「social bookmark」とか）がびっしり描かれたデザインの壁があったのだけれど、その中にさりげなく「I love ♥ Nagasawa-Masami」とあったこと。

聞いてみるに、壁に描かれたキーワードは、あるブレスト中に出てきたキーワードだそうで、「I love ♥ Nagasawa-Masami」は、そのときの取締役の誰かによるものらしい（笑）。特に、mixiと長澤まさみに何か関係がある訳ではないそうだ。

オフィスに遊び心があるのは、楽しくていいね。

mixiアプリ開発におけるキャッシュの問題

2009-07-04T03:55:00.005+09:00

mixiアプリ開発をする人が必ず一度は通るといわれるキャッシュの問題。OpenSocialコンテナでは、負荷軽減のためにGadget XMLファイル等をサーバ側でキャッシュしているので、開発の過程でファイルを書き換えた場合、それがすぐに反映されないという問題が起こることがある。

キャッシュの扱いについてはOpenSocialコンテナごとに違うとは思うけれど、mixiアプリの場合は、mixi Developer Centerの Gadget XMLファイルのキャッシュについてに詳しく書いてある。

mixiアプリでは、様々なレイヤーで強力にキャッシュが働きます。これは、mixiアプリの動作に関する負荷をできるだけ減らして、利用者に快適にアプリを利用してもらえるようにするための工夫です。しかし、mixiアプリの開発において、そのキャッシュが開発の妨げになってしまうケースも十分に考えられます。

対策方法としては、

アプリ設定画面から、「キャッシュの消去」をする

ブラウザで、アプリのURIのパラメータに「nocache=1」をつける

開発中のちょっとした確認であれば、2. のnocache=1のやり方でOK。更に、この前の記事で紹介したように、Gadget XML置き場にDropboxを用いれば、「ローカルで保存＋ブラウザをリロード」するだけで更新結果を見ることができるのでとっても便利。

ただ、Safari (4.0.1) の場合、nocache=1しなくても、なぜかキャッシュがかからない。Firefoxだとキャッシュされたものが表示されるのだが...なぜだろう？詳しい方、もしご存知でしたら、ご教授くださいませ。

「SNS」という言葉を使うのをやめようかと思う

2009-07-03T00:44:00.007+09:00

日本では、mixiのようなサイトを「ソーシャル・ネットワーキング・サービス（あるいはサイト）」という意味で、「SNS」と呼ぶのが普通だ。ただ、この「SNS」という言葉、ビジネスシーンではすこぶる評判が悪い。

というのも、日本でmixiが流行って以来、mixiと同じような「専門SNS」が乱立し、そのほとんどが失敗に終わっているからだ。今、新規ビジネスを語る際に、下手にSNSという「死語」を使ってしまうと、それだけで印象が悪くなってしまう感さえある。

僕がOpenSocialの勉強をしているのは、ソーシャルグラフ（人と人との繋がり情報）を活用したアプリケーションで、世に出したいアイデアがあるからだ。決してmixiのクローンサイトを立てたい訳でも、mixiアプリベンダーになりたい訳でもない。

例えば、SNSというと「友達に対して日記を書く」ようなイメージが強いけれど、ソーシャルネットワーキングに「日記」がある必要はない。SNSの１つであるmixiが日記機能でヒットしただけのことで、日記機能がなくたって、ソーシャルグラフを持ったサービスであれば、立派なSNSである。

そもそも世界を見渡すと、「SNS」という単語は日本でしか使われていないようだ。Google トレンドで調べると分かるのだが、アメリカ等では、Social Networking ServiceのことをSNSとは略していない。

「SNS」という単語が一番検索されているのはオランダだが、これは違う意味のSNS。ソーシャルネットワーキングという意味でSNSという言葉を検索しているのは、世界の中で断トツで日本が多い。

SNSとは呼ばずに、じゃあなんと呼ぶんだ、ということだけれど、「ソーシャルグラフを使ったもの」という抽象的な意味では、「Social Web」という言葉がいいんじゃないかと僕は思っている。「Semantic Web」のような感じで。

ところで、Googleトレンドで何かを比較するのは面白い。例えば、日本国内でのmixi、Facebook、Twitterの検索傾向を比較すると、以下のようになった。

Bloggerのスパム判定からやっと解放された

2009-07-01T20:09:00.009+09:00

このブログはGoogleのBloggerを使って書いているのだが、先月22日から何故かロックされてしまっていた。Bloggerは、ブログがスパムであるかどうかをロボットが自動的に判定しており、そのロボットにスパムブログだと誤認されてしまったようなのだ。

ロックされた状態でも、一応記事を書いて投稿することはできるのだけれど、色々な場面でいちいち文字認証をせねばならず、非常に面倒くさい。また、RSS配信も止められるし、検索エンジンにもクロールされなくなる。

もちろんこのブログはスパムブログではないので、すぐに「ロック解除のリクエスト」を行ったのだが、数日経っても何の音沙汰もない。Googleのヘルプフォーラムで訴えたりもしてみたのだが、Googleからの返事はなかった。一週間経つと、なぜかロック解除のリクエストのプロセスが再び生じており、もう一度リクエストしたら、次の日やっと解除された。

同じようにBloggerにスパムだと誤認されてしまった人がいるかもしれないので、Blogger Help Forumで得た情報をまとめておこう。Bloggerにスパムと誤認されたら、以下のステップを踏むべきだそうだ。

ロック解除のリクエストを出したら、10営業日はまず待つ
10営業日経っても何もなければ、ここでロック解除のアピールをする
それでも駄目なら、ヘルプフォーラムで訴える

正直、スパムの確認なんて１日、２日とかでやってほしいものだ。結局、なぜスパム判定を受けたのかもよく分からなかった。Googleには、もう少しユーザーサポートを充実していただきたい。

mixiアプリ開発にはDropboxのPublicフォルダが便利

2009-06-28T12:45:00.002+09:00

最初の記事で、mixiアプリの開発には

mixiアカウント
テキストエディタ
Webサーバ

が必要だと書いたけれど、「Webサーバなんて持ってねーよ！」という方もいるんじゃないかと思う。実は、簡単なmixiアプリを作るだけの場合、大層なWebサーバを用意する必要はなくて、Dropbox等のオンラインストレージで十分なのだ。

要は、ガジェットXMLファイルを置くための、「Web上に公開された場所（＝Webブラウザで誰でも見れる場所）」がありさえすればいい。

DropboxをガジェットXML置き場に使えるんじゃないかというアイデアを閃いたときは、「俺☆天才」と思ったんだけど、「opensocial dropbox」でググってみたら、同じことを考えてた方が既にいらっしゃった。

DropBox を OpenSocialアプリ開発に利用する

つまり、DropboxのPublicフォルダを使うことで、「ローカルで保存したら、即座に同期されてmixiアプリに反映される」という素晴らしい開発環境をタダで手に入れられるというわけ。是非お試しあれ。

ビュー間の移動の仕方

2009-06-25T22:28:00.007+09:00

OpenSocialには、

preview（アプリ登録前のプレビュー用）
home（自分が見るホーム画面）
profile（他人が見るプロフィール画面）
canvas（全画面表示）

の４つのビューがある（ただしmixiアプリは、現状previewビューには対応していないようだ）。これまでのサンプルアプリでは、ビューを区別せずに全てのビューで同じものを表示するようなものだったけれど、今回は各ビューで違うものを表示させてみる。また、ビュー間の遷移の仕方も見てみようと思う。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="ViewTransitionTest">
    <Require feature="opensocial-0.8"/>
    <Require feature="views"/>
  </ModulePrefs>
  
  <Content type="html" view="home">
  <![CDATA[
    <div>ここはHomeビューです。</div>
    <input type="button" onclick="navigateToProfile()" value="Profileビューへ移動"/>
    <input type="button" onclick="navigateToCanvas()" value="Canvasビューへ移動"/>
  ]]>
  </Content>
  
  <Content type="html" view="profile">
  <![CDATA[
    <div>ここはProfileビューです。</div>
    <input type="button" onclick="navigateToHome()" value="Homeビューへ移動"/>
    <input type="button" onclick="navigateToCanvas()" value="Canvasビューへ移動"/>
  ]]>
  </Content>
  
  <Content type="html" view="canvas">
  <![CDATA[
    <div>ここはCanvasビューです。</div>
    <input type="button" onclick="navigateToHome()" value="Homeビューへ移動"/>
    <input type="button" onclick="navigateToProfile()" value="Profileビューへ移動"/>
  ]]>
  </Content>
  
  <Content type="html" view="home, profile, canvas">
  <![CDATA[
    <script type="text/javascript">
      function navigateToHome() {
        gadgets.views.requestNavigateTo(new gadgets.views.View("home"));
      }
      function navigateToProfile() {
        gadgets.views.requestNavigateTo(new gadgets.views.View("profile"));
      }
      function navigateToCanvas() {
        gadgets.views.requestNavigateTo(new gadgets.views.View("canvas"));
      }
    </script>
  ]]>
  </Content>
</Module>

それぞれのビューの内容を別に記述するには、Content要素のview属性に、<Content view="canvas">などと設定する。複数のビューを設定する場合は、<Content view="home, profile">のように「,」で区切って書く。

ビュー間でページの遷移をするためには、gadgets.viewsクラスのrequestNavigateTo()メソッドを使う。gadgets.viewsクラスを使うためには、<ModulePrefs>要素の中に<Require feature="views">を入れないといけないので注意。

requestNavigateTo()メソッドは、gadgets.views.Viewオブジェクトを引数にとるので、例えばCanvasビューに移動させたかったら、

gadgets.views.requestNavigateTo(new gadgets.views.View("canvas"));

とすればOK。

参考URL:
gadgets.* API デベロッパーガイド

makeReqeustによる外部サーバの呼び出し

2009-06-21T22:38:00.020+09:00

ある程度以上のアプリを作ろうと思ったら、外部サーバとの連携は必須といっていいと思う。mixiアプリから外部サーバを呼び出すには、Gadgets Core JavaScript APIを用いる。具体的には、gadgets.io.makeReqeust()を使うことで外部サーバとの通信を行う。

「opensocial.*」ではなく「gadgets.*」という名前空間を使っているところから分かるように、makeRequest()はOpenSocial API独自の機能ではなく、Gadgets APIの機能だ。関係としては、OpenSocialはGoogle Gadgetsの拡張で、mixiアプリはOpenSocialを採用した一例である。

makeRequest(url, callback, params)の3つの引数は、

url: 取得したいコンテンツの位置を示すURL
callback: URLからデータをフェッチしたら、そのデータを添えて呼び出す関数
params: 外部サーバへの要求に関するパラメータ

パラメータparamsに何が設定できるかは、gadgets.io.RequestParametersクラスに定義されている。リクエストのコンテンツタイプ (TEXT、DOM、FEED、JSON) や、リクエストのメソッドタイプ (POST または GET) などが指定できる。

コールバック関数には、結果を持つオブジェクトが呼び出し時に渡される。そのオブジェクトは、以下のような格好をしている。

{
  data : <パースされたデータ>,
  errors : <生じたエラー>,
  text : <生のテキストデータ>  
}

サンプルアプリとして、このブログ「OpenSocialist」のフィードを取得して表示するmixiアプリを書いてみた。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="GetFeedApp">
    <Require feature="opensocial-0.8"/>
  </ModulePrefs>
  <Content type="html">
  <![CDATA[
    <script type="text/javascript">
      
      function getFeed() {
        var params = {};
        params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.FEED;
        var url = "http://opensocialist.blogspot.com/feeds/posts/default";
        gadgets.io.makeRequest(url, callback, params);
      }
      
      function callback(response) {
        // response.dataがフィードのデータを持っている
        var feed = response.data;
        var html = "";
        
        // ブログのTitle, Descriptionを表示
        html += "<div><b>" + feed.Title + "</b></div>";
        html += "<div>" + feed.Description + "</div>";
        
        var entries = feed.Entry;
        // ブログの各エントリーのタイトル（+リンク）を表示
        for (var i = 0; i < entries.length; i++) {
          html += "<div>"
            + "<a href='" + entries[i].Link + "'>"
            + entries[i].Title
            + "</a>"
            + "</div>";
        }
        document.getElementById("content_div").innerHTML = html;
      }
      
      gadgets.util.registerOnLoadHandler(getFeed);
      
    </script>
    
    <div id="content_div"></div>
  ]]>
  </Content>
</Module>

リクエストのコンテンツタイプに「FEED」を選択し、ブログのAtomフィードを取得している。

参考URL:
gadgets.* API デベロッパーガイド, mixi Developer Center

情報の永続化 Persistence API サンプル

2009-06-20T17:39:00.015+09:00

通常、アプリケーションで何か情報を保持するためには、MySQL等のデータベースを用意して保存させる必要があるが、OpenSocialにはデータの永続化のためのPersistence APIというものがある。Persistence APIにできることは、

ある情報に名前を付けて永続化する
永続化されている情報を取り出す
永続化されている情報を削除する

要は、Key-Valueペアの文字列情報を保存することができる。そこで、データを保存して取得するだけの、Persistence APIを使ったシンプルなサンプルアプリを作ってみた。

<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
  <ModulePrefs title="PersistenceTest"> 
    <Require feature="opensocial-0.8"/>
  </ModulePrefs>
  <Content type="html">
  <![CDATA[
  <script type="text/javascript">
  
  function saveData() {
    var value = document.getElementById("input_data").value;
    var req = opensocial.newDataRequest();
    req.add(req.newUpdatePersonAppDataRequest(opensocial.IdSpec.PersonId.VIEWER, "key", value));
    req.send(function(response) {
      if (response.hadError()) {
        alert(response.getErrorMessage());
      } else {
        alert("データが保存されました。")
      }
    });
  }
  
  function loadData() {
    var req = opensocial.newDataRequest();
    req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER), "viewer");
    req.add(req.newFetchPersonAppDataRequest(opensocial.IdSpec.PersonId.VIEWER, ["key"]), "viewer_data");
    req.send(function(response) {
      if (response.hadError()) {
        alert(response.getErrorMessage());
      } else {
        var myId = response.get("viewer").getData().getId();
        var data = response.get("viewer_data").getData();
        alert(data[myId]["key"]);
      }
    });
  }
  </script>
  
  <input type="text" id="input_data"/>
  <button onclick="saveData()">データ保存</button>
  <button onclick="loadData()">データ取得</button>
  ]]> 
  </Content>
</Module>

「データ保存」ボタンを押すと、savaData()関数がnewUpdatePersonAppDataRequest()メソッドを使って、入力されたデータの永続化を行い、「データ取得」ボタンを押すと、loadData()関数がnewFetchPersonAppDataRequest()メソッドを使って永続化されたデータの取得を行う。

newUpdatePersonAppDataRequest()メソッドやnewFetchPersonAppDataRequest()メソッドは、newFetchPersonRequest()メソッドと同様、opensocial.DataRequestオブジェクトのメソッドだ。DataRequestオブジェクトに追加してリクエストを送信する。

newUpdatePersonAppDataRequest()メソッドは3つの引数は、

ユーザのID
永続化する情報のキー文字列
永続化する情報の文字列

mixi Platformでは、第1引数のユーザIDは、セキュイティの観点からopensocial.IdSpec.PersonId.VIEWERしか許可されていないそうだ。

newUpdatePersonAppDataRequest()メソッドでは、「誰のデータを取得するか」を指定するidSpecと、「どのデータを取得するか」を指定するキー文字列を指定する。キー文字列は配列で指定するところに注意（つまり、複数のデータを一度に取得できる）。

このサンプルアプリでは、自分 (VIEWER) のデータを保存し、自分 (VIEWER) のデータを取得する。

参考URL:
OpenSocial API デベロッパーガイド, mixi Developer Center

アクティビティの送信

2009-06-19T21:18:00.015+09:00

今回は、アクティビティの送信の仕方。「アクティビティ」とは、OpenSocialアプリに対する、何らかのアクションのこと。例えば、mixiアプリでのアクティビティは、「マイミクシィ最新アプリ更新履歴」としてプロフィール画面に表示される。

マーケティング用語でいえば、バイラルマーケティングに有効な機能だ。さて、「ボタンを押したら"Hello!"というアクティビティを送信する」だけのシンプルなアプリだったら、以下のようになる。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="ActivityTest">
    <Require feature="opensocial-0.8"/>
  </ModulePrefs>
  <Content type="html">
  <![CDATA[
    <script type="text/javascript">
      function submitActivity() {
        var params = {};
        params[opensocial.Activity.Field.TITLE] = "Hello!";
        var activity = opensocial.newActivity(params);
        opensocial.requestCreateActivity(activity, opensocial.CreateActivityPriority.HIGH, onResponse);
      }
      
      function onResponse(response) {
        if (response.hadError()) {
          alert(response.getErrorCode() + ":" + response.getErrorMessage());
        } else {
          alert("Success!");
        }
      }
    </script>
    
    <button onclick="submitActivity();">Say Hello!</button>
  ]]>
  </Content>
</Module>

ボタンを押すと、submitActivity()関数が呼び出され、アクティビティの作成、送信が行われる。アクティビティを作成しているのが

var params = {};
params[opensocial.Activity.Field.TITLE] = "Hello!";
var activity = opensocial.newActivity(params);

の部分で、opensocial.newActivity()メソッドがアクティビティを作成している。このメソッドは引数を一つだけとり、アクティビティに関する各種パラメータを指定することができる。ここでは、アクティビティのタイトルを"Hello!"としたものを引数にとっている。

そして、

opensocial.requestCreateActivity(activity, opensocial.CreateActivityPriority.HIGH, onResponse);

で、アクティビティを実際に送信している。opensocial.requestCreateActivity()は３つの引数（アクティビティオブジェクト、優先度、コールバック関数）をとるが、mixiアプリでは「優先度」をサポートしていないようなので、第2引数はopensocial.CreateActivityPriority.HIGHとしておけばよいようだ。

あとは、コールバック関数onResponse(response)で、エラー処理をしている。responseは、opensocial.ResponseItemオブジェクトで、hadError()メソッドなどを用いることができる。

参考URL:
mixi Developer Center

mixiアプリで "Hello, [ユーザ名]!" (2)

2009-06-18T14:05:00.015+09:00

前回の続き。

function init() {
  var req = opensocial.newDataRequest();
  req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER), "viewer");
  req.send(function(data) {
    var viewer = data.get("viewer").getData();
    var name = viewer.getDisplayName();
    document.getElementById("target").innerHTML = name;
  });
}
gadgets.util.registerOnLoadHandler(init);

の中身を見てみよう。これは何をしているかというと、最後の

gadgets.util.registerOnLoadHandler(init);

というイベントハンドラで、アプリが読み込まれた後にinit()という関数を呼び出している。init()関数の中では、まず

var req = opensocial.newDataRequest();

で、DataRequestオブジェクトのreqを作成している。DataRequestオブジェクトは、mixiのサーバに対してデータ取得のリクエストを投げてくれるオブジェクトだ。ただ、これだけでは何にもリクエストしてくれないので、このreqに対して、個別のリクエストオブジェクトを追加する必要がある。

req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER), "viewer");

それをしているのがこの部分で、reqのnewFetchPersonRequest()というメソッドを使って、プロフィール情報を取得するためのリクエストオブジェクトを作成し、それをadd()メソッドによって、DataRequestオブジェクトのreqに追加している。

newFetchPersonRequest()メソッドの引数には、プロフィールを取得したいユーザのIDを与える。ここで使っているopensocial.IdSpec.PersonId.VIEWERは、「このmixiアプリを開いているユーザのID」を表す。addメソッドの第2引数の"viewer"は、後でリクエストのレスポンスを識別するためのキー文字列なので、任意の文字列でOK。

次に、reqのsend()メソッド

req.send(function(data) {...});

によって、実際にリクエストをサーバに送信している。このリクエストは、Ajaxで非同期に行われる。send()メソッドの引数には、データ取得後に実行するコールバック関数を入れる。コールバック関数に渡されるdataは、DataResponseクラスのオブジェクト。

コールバック関数では、

var viewer = data.get("viewer").getData();

の部分で、DataResponseオブジェクトのdataから、リクエストの際に指定しておいた"viewer"というキー文字列を使ってブロフィール情報を取得している。get()メソッドの戻り値はResponseItemクラスのオブジェクトで、そこから更にgetData()することで、目的のオブジェクト（Personクラスのオブジェクト）が手に入る。

あとは、PersonオブジェクトのgetDisplayName()で、ユーザ名を取得し、それを使ってHTMLを更新すればOK。

参考URL:
mixi Developer Center

mixiアプリで "Hello, [ユーザ名]!" (1)

2009-06-18T10:11:00.019+09:00

前回作ったHello, world!アプリは、文字列を表示させるだけだった。

OpenSocialを使ったソーシャルアプリケーションの醍醐味は、SNSのソーシャルグラフ（mixiだったらマイミク情報など）を活用できる点なので、今回はOpenSocial APIを使ってmixiからユーザ情報を取得してみようと思う。

前回、ガジェットXMLの説明をなにも説明しなかったけれど、ガジェットXMLは、iGoogleで有名な「Googleガジェット」の記述言語だ。OpenSocialは、Googleガジェットをベースにつくられている。

ガジェットXMLは、<Module>をルート要素に、以下のような格好をしている。ModulePrefs要素にアプリのメタデータを書き、Content要素中に、HTMLやJavaScriptを使ってアプリの内容を書く。

<Module>
  <ModulePrefs .../>
  <Content ...>
     // アプリの内容
  </Content>
</Module>

前回のアプリのModulePrefs要素の中には何も書いていなかったが、今回、<Require feature="opensocial-0.8"/>というタグを中に入れる。これは、「OpenSocial APIを使いますよ」という宣言だ。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="HelloApp2">
    <Require feature="opensocial-0.8" />
  </ModulePrefs>
  <Content type="html">
  <![CDATA[
    // アプリの内容をHTML/JavaScriptでここに書く
  ]]>
  </Content>
</Module>

さて、「Hello, [ユーザ名]!」と表示させるアプリのコード（Content要素の中身）は以下のようになる。

<div>Hello, <span id="target"></span>!</div>

<script type="text/javascript">
function init() {
  var req = opensocial.newDataRequest();
  req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER), "viewer");
  req.send(function(data) {
    var viewer = data.get("viewer").getData();
    var name = viewer.getDisplayName();
    document.getElementById("target").innerHTML = name;
  });
}
gadgets.util.registerOnLoadHandler(init);
</script>

コードの説明はまた次回。

参考URL:
mixi Developer Center

mixiアプリで "Hello, world!"

2009-06-17T20:44:00.047+09:00

まず最初ということで、mixiアプリでHello, world!してみよう。

必要なものは、

mixiアカウント
テキストエディタ（僕はCoda使ってます）
Webサーバ（DropboxとかでもOK）

まだmixiアプリは「オープンβ」の状態なので、まずはオープンβコミュニティに登録する必要がある。登録後、オープンβ環境にログインすると、画面上部に「アプリ」のメニューが表示される。そのリンク先に「アプリを作成する」というリンクがあるので、ここからアプリを新規作成できる。一番最初は、デベロッパ登録をする必要あり。

さて、「Hello, world!」と表示させるだけのアプリの場合、XMLファイルを１つWebサーバ上に置くだけでOKだ。以下のようなXMLファイルをテキストエディタで作成し、そのファイルを任意のWebサーバにアップロードしよう。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="HelloApp"></ModulePrefs>
  <Content type="html">
  <![CDATA[
    Hello, world!
  ]]>
  </Content>
</Module>

ちなみに、このXMLファイルは「Gadget XMLファイル」と呼ばれる。あとは、mixiのアプリ作成画面の「ガジェットXML」という項目に、今アップロードしたGadget XMLファイルのURIを入力して作成すれば完了だ。

うまく作成されれば、自分のホーム画面に上のようなmixiアプリが表示されるはず。

参考URL:
mixi Developer Center

OpenSocial 0日目　- OpenSocialとは -

2009-06-16T12:44:00.022+09:00

OpenSocialには以前から興味があったのだけれど、mixiアプリのデベロッパ登録にiPhoneの「@i.softbank.jp」が使えなかったので、ずっと後回しにしていた。先日やっとiPhoneでも登録できるようになったので、いっちょ勉強を始めようかと思い立つ。

OpenSocialとは、2007年11月にGoogleが公開した、「ソーシャルアプリケーション」のための共通APIだ。OpenSocialを使うことで、SNSのソーシャルグラフ（人と人の繋がり情報）を利用したアプリケーションを簡単に作成することができる。

現在、MySpaceやFriendster等の多くのSNSが参加しており、日本でもmixiが参加している。アメリカSNS最大手のFacebookは独自の規格でやっているので、「Facebook vs. OpenSocial陣営」といった格好だろうか。

OpenSocialは、HTMLやJavaScript等の、標準的なWeb技術の知識さえあれば、容易に習得できるようだ。mixiアプリがどこまで面白くなるかは未知数だけれど、OpenSocialは学んでおいて損はないと思うので、これから時間を見つけて徐々に学習を進めたいと思う。

OpenSocialist

OpenSocialはmixiアプリだけじゃないよ

Persistence API で JSONデータを保存する

mixiアプリのPersistence APIで日本語入力すると文字化けする場合

mixiオフィスに入ってみた感想

mixiアプリ開発におけるキャッシュの問題

「SNS」という言葉を使うのをやめようかと思う

Bloggerのスパム判定からやっと解放された

mixiアプリ開発にはDropboxのPublicフォルダが便利

ビュー間の移動の仕方

makeReqeustによる外部サーバの呼び出し

情報の永続化 Persistence API サンプル

アクティビティの送信

mixiアプリで "Hello, [ユーザ名]!" (2)

mixiアプリで "Hello, [ユーザ名]!" (1)

mixiアプリで "Hello, world!"

OpenSocial 0日目 - OpenSocialとは -

OpenSocial 0日目　- OpenSocialとは -