CodeZine(コードジン)

特集ページ一覧

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

OpenSocial 基本のキ(3)

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

目次

ビューの種類について

 OpenSocialアプリケーションにはビューという概念があり、アプリケーションがコンテナ(OpenSocial対応SNS)上でどのようなページとして表示されているかに応じて、ビューが定義されています。OpenSocialでは、以下の4種類のビューが定義されています。

OpenSocialで定義された4種類のビュー
ビュー名 意味
home コンテナのポータルページ。他のガジェットと一緒に小さい画面で表示される。mixiの場合はログイン後に表示されるポータル画面
profile プロフィール画面。homeビューと同様に、他のガジェットと一緒に小さい画面で表示される
canvas このアプリケーション専用の画面。mixiの場合は、homeビューやprofileビューのタイトルバーをクリックすることでcanvasビューに遷移する
preview アプリ登録前のプレビュー用の画面。現状mixiでは対応していない

 ガジェットXMLでそれぞれのビューのContent要素を記述することで、ビューごとに表示内容を変更することができます。Content要素には、その要素がどのビューに対応するのかを表すview属性があり、ここに対応するビューを1つないしはカンマ区切りで複数記述することができます。例えば、次のように書くことで、homeビュー、profileビューとcanvasビューの内容を切り替えることができます。

複数のContent要素でビューを切り替えるサンプル
<Content type="html" view="home, profile"><![CDATA[ home, profileビューの表示内容 ]]></Content>
<Content type="html" view="canvas"><![CDATA[ canvasビューの表示内容 ]]></Content>

 また、次のように同じビューを複数のContent要素の属性として記述することもできます。

複数回同じビューを指定したサンプル
<Content type="html" view="home, profile"><![CDATA[ home, profileビュー共通の表示内容 ]]></Content>
<Content type="html" view="home"><![CDATA[ homeビューの表示内容1 ]]></Content>
<Content type="html" view="home"><![CDATA[ homeビューの表示内容2 ]]></Content>

 この場合、profileビューの場合は1つめのContent要素のみが、homeビューの場合は3つのContent要素がすべて連結して表示されます。以下に、homeビューの場合の表示例を示します。

複数回同じビューを指定したサンプルのhomeビューでの表示例。それぞれのContent要素の内容が連結されている
複数回同じビューを指定したサンプルのhomeビューでの表示例。それぞれのContent要素の内容が連結されている

 ビュー間で共通に使用するJavaScriptやCSSなどについては、view属性に複数のビューを記述したContent要素内で記述することで、重複を避けることができるでしょう。

 なお、view属性を持たないContent要素がある場合、デフォルトのビューとして扱われます。現在のビューに相当するview属性を持つContent要素が存在しない場合、view属性を持たないContent要素の内容が表示されます。

OWNER, VIEWER, FRIENDSについて

 OpenSocialアプリケーションにおいて、ビューと同じように大切なのが、OWNER, VIEWER, FRIENDSと呼ばれる、OpenSocialアプリケーションにとってのユーザーの役割です。

 OpenSocialアプリケーションでは、アプリケーションの「所有者」と「閲覧者」という役割をユーザーに持たせています。通常はアプリケーションをインストールしたユーザーを所有者とみなし、OWNERと呼びます。それに対し、実際にアプリケーションを操作しているユーザーのことを閲覧者とみなし、VIEWERと呼びます。

 例えば、自分のインストールしたアプリケーションを自分のポータル画面のhomeビューやアプリケーション専用のcanvasビューで操作する場合、自分はそのアプリケーションのOWNERであると同時に、実際にアプリケーションを操作しているVIEWERでもあります。また、他のユーザーAさんのプロフィールページに置かれたアプリケーションを自分が操作する場合(profileビューの場合)、そのアプリケーションのOWNERはアプリケーションをインストールしているユーザーAさんであり、VIEWERは実際にアプリケーションを操作している自分となります。

 mixiアプリの場合は今の説明通り、mixiアプリをマイアプリに登録したユーザーがmixiアプリのOWNERとなり、mixiアプリを実際に操作しているユーザーがmixiアプリのVIEWERとなります。

 このユーザーの役割は、ビューごとに表示内容を切り替える際などに重要になります。canvasビューでは、アプリケーションはVIEWERに対して機能を提供し、profileビューではOWNERに関するアプリケーション情報を表示するのが中心になることでしょう(profileビューはプロフィール画面上に表示され、プロフィール画面はSNSでユーザーの情報を表示するための画面ですので、この設計は自然と言えます)。homeビューはcanvasビューより表示領域が小さいため、アプリケーションの機能の一部を表示したり、情報の通知などに用い、より詳細な機能を使用する場合にはcanvasビューに切り替えて利用してもらうことができます。

 例えば、ゲームアプリケーションやソーシャル情報共有アプリケーションにおいて、次のようにユーザーの役割を意識しながら、ビューの使い分けができるかもしれません。

ビュー毎の機能の使い分けの例
アプリの種類 ゲーム ソーシャル情報共有アプリケーション
canvasビュー ゲーム本体 VIEWERの趣味や持ち物などの登録画面
homeビュー ミニゲームやVIEWERのマイミクのゲームクリア情報などの表示 マイミクの更新情報など
profileビュー アプリのOWNERのゲーム内でのランキング、OWNERとVIEWERの最高得点の比較などの表示 アプリのOWNERとVIEWERの共通の情報(趣味や持ち物、共通の友人やコミュニティなど)の表示

 FRIENDSはOWNERまたはVIEWERがコンテナ上で友達に追加したユーザーを指す役割です。OpenSocialアプリケーションからは、OWNERのFRIENDSやVIEWERのFRIENDSの情報を取得することができます。mixiではマイミクシィがFRIENDSに相当します。

 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