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

ある程度以上のアプリを作ろうと思ったら、外部サーバとの連携は必須といっていいと思う。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>