CodeZine(コードジン)

特集ページ一覧

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

OpenSocial 基本のキ(3)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2009/10/21 14:00

目次

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

 それでは、今回説明した各種のビューとユーザーの役割を使うサンプルを作成しましょう。今回は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の名前(どい)が表示されている
アプリの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以外のユーザーが見た場合の画面であることに注目
アプリのprofileビュー表示。VIEWERの名前(Gどい)、OWNERの名前(どい)、OWNERのFRIENDSの人数が表示されている。OWNER以外のユーザーが見た場合の画面であることに注

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

canvasビュー

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

アプリのcanvasビュー表示。mixiのヘッダ・フッタに囲まれたアプリケーションの表示領域に外部の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の要とも言うべき部分です。次回もお楽しみに。

参考資料



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:mixiアプリで始めるOpenSocial入門

もっと読む

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

  • WINGSプロジェクト 土井 毅(ドイ ツヨシ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5