mixiアプリで始めるOpenSocial入門（3）
――OpenSocialアプリケーションの基本：ガジェットXMLとビュー

OpenSocial 基本のキ（3）

各種ビューとユーザーの役割を確認するサンプル

　それでは、今回説明した各種のビューとユーザーの役割を使うサンプルを作成しましょう。今回はhomeビューではVIEWERの名前を、profileビューではVIEWERとOWNERの名前、そしてOWNERのFRIENDSの人数を、canvasビューでは外部のWebサイトの内容を表示するサンプルです。

　今回作成するアプリはmixi上でも公開しています。

　以下の内容を「view-sample.xml」という名前でUTF-8形式で保存し、第2回の手順に沿ってアプリを作成します。

ビューごとの表示変更と、OWNER, VIEWER, FRIENDSの情報を表示するサンプル。図中の（1）～（5）は、後述の説明と対応しています。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="view-sample">
    <Require feature="opensocial-0.8" />
  </ModulePrefs>

  <Content type="html" view="home"><![CDATA[
    ここはhomeビューです<br/>
    <div id="home-message"/>    <!-- （1） -->
    <script type="text/javascript">
      gadgets.util.registerOnLoadHandler(function() {    // （2）
        // （3） ――― ここから ―――
        var req = opensocial.newDataRequest();
        // VIEWERの情報をリクエストする
        req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER), 'viewer');
        // リクエストを実行
        req.send(function(response) {
          // VIEWERの情報を取得
          var viewer = response.get('viewer').getData();
          // VIEWERの表示名を取得
          var msg = 'こんにちは! VIEWERの' + viewer.getDisplayName() + 'さん';
          // （3） ――― ここまで ―――
          // div要素にメッセージを設定
          document.getElementById('home-message').innerHTML=msg;    // （4）
        });
      });
    </script>
    ]]></Content>

  <Content type="html" view="profile"><![CDATA[
    <div id="profile-message" style="font-size:small"/>
    <script type="text/javascript">
      gadgets.util.registerOnLoadHandler(function() {

        // （5） ――― ここから ―――
        var req = opensocial.newDataRequest();

        // VIEWER, OWNER, OWNERのFRIENDSの情報をリクエストする
        // ……省略……

        // リクエストを実行
        req.send(function(response) {
          // VIEWER, OWNER, OWNERのFRIENDSの情報をそれぞれ取得
          // ……省略……
          //VIEWERの表示名を取得
          var msg = 'こんにちは! VIEWERの' + viewer.getDisplayName() + 'さん<br/>';
          //OWNERの表示名を取得
          msg += 'こちらのアプリケーションのOWNERは' + owner.getDisplayName() + 'さんです<br/>';
          //OWNERのFRIENDSの人数を取得
          msg += 'OWNERのFRIENDS（マイミクシィ）は現在' + friends.getTotalSize() + '人です';
          // div要素にメッセージを設定
          document.getElementById('profile-message').innerHTML=msg;
        });
        // （5） ――― ここまで ―――
      });
    </script>
 ]]></Content>

  <Content type="url" view="canvas" href="http://www.wings.msn.to/index.php"/>
</Module>

　少し長いサンプルですので、いくつかのまとまりで説明しましょう。前回のサンプルはJavaScriptを含まないものでしたが、今回はJavaScriptを使う場合の基本も含まれています。なお、このサンプルではOWNERやVIEWERの情報を取得するためにコンテナへのリクエストを行っていますが、リクエストの詳細については次回紹介します。

homeビュー

　最初のContent要素はhomeビューで、ここではVIEWERの名前を表示します。

アプリのhomeビュー表示。VIEWERの名前（どい）が表示されている

　前述のサンプルコードで、（1）はVIEWERの情報を表示するためのdiv要素です。コンテナから取得した情報を、（4）でgetElementById関数を使ってdiv要素のinnerHTMLプロパティに設定することで、ユーザーに結果を表示します。HTMLのDOMにアクセスして表示内容を書き換える手法は、OpenSocialアプリケーションで多用されるパターンです。

　（2）ではGadgets APIで定義されているregisterOnLoadHandler関数を呼び出しています。この関数は、引数の関数をWebブラウザのロード完了時に呼び出すよう登録するものです。今回はWebブラウザがロード完了した時点でVIEWERの情報をコンテナにリクエストするため、この関数を呼び出しています。

　（3）ではOpenSocial APIのDataRequestクラスを使い、VIEWERの情報の取得をコンテナにリクエストしています。DataRequestの詳細については次回説明します。

profileビュー

　2つめのContent要素はprofileビューで、ここではVIEWER, OWNER, OWNERのFRIENDSの情報を表示します。

アプリのprofileビュー表示。VIEWERの名前（Gどい）、OWNERの名前（どい）、OWNERのFRIENDSの人数が表示されている。OWNER以外のユーザーが見た場合の画面であることに注目

　（5）ではVIEWER, OWNER, OWNERのFRIENDSの情報をコンテナにリクエストし、結果をdiv要素に設定しています。

canvasビュー

　3つめのContent要素はcanvasビューで、ここでは外部のWebサイトを表示します。

アプリのcanvasビュー表示。mixiのヘッダ・フッタに囲まれたアプリケーションの表示領域に外部のWebサイトの内容が表示されている

　Content要素のtype属性に"url"を指定し、href属性に外部のWebサイトのURLを指定しています。canvasビューに切り替えると、mixi内に指定したURLのページが表示されます。

まとめ

　今回解説したビューとユーザーの役割の概念は「各ビューでどのようなコンテンツをだれに対して提供するか」といったOpenSocialアプリケーションの設計を検討する上でも、非常に重要な部分となります。また、サンプルの中では、OpenSocialアプリケーション内でJavaScriptを使う場合の基本的な作法を紹介しました。

　サンプルでは、直接Webブラウザの提供するHTMLのDOMにアクセスしましたが、jQueryなどのJavaScriptライブラリを併用することで、こうした部分の手間を省くことができます。また、OpenSocialアプリケーションがどのWebブラウザで実行されるかは、ユーザーの環境に依存していますので、JavaScriptライブラリを使うことで、Webブラウザ間のJavaScript互換性の問題を解決することもできるでしょう。

　次回はいよいよソーシャル情報を扱うための、DataRequestクラスについて解説します。ここはOpenSocialの要とも言うべき部分です。次回もお楽しみに。

参考資料

• OpenSocial API デベロッパー ガイド