まずは、mixiアプリを使ってみよう、作ってみよう

登録したmixiアプリを軽く改造してみよう

■ ビューごとに表示内容を変えてみる

　次に、「ホームビュー」「キャンバスビュー」「プロフィールビュー」それぞれ異なる内容を表示するように、下記のようにガジェットXMLを更新してみます。

　Content要素が3つ並び、「view="home"」と記述してあります。「home」と指定すると、ホームビューでそのContent内に記述したHTMLが表示されます。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Hello World!">
  </ModulePrefs>
  <Content view="home">
    <![CDATA[
        ホームビュー
    ]]>
  </Content>
  <Content view="canvas">
    <![CDATA[
        キャンバスビュー
    ]]>
  </Content>
  <Content view="profile">
    <![CDATA[
        プロフィールビュー
    ]]>
  </Content>
</Module>

　キャンバスビューやプロフィールビューも同様です。以前あった「type="html"」は、type属性のデフォルトが「html」であるため、省略しました。

図7　ホームビューでの表示例

■ 改造したけど表示が変わらない場合は？

　上記の通りにXMLを更新してmixiのページを再読み込みさせても、おそらく表示が変わらないでしょう。この理由は、外部サイト上のXMLファイルを毎回取得すると取得のための通信時間がかかりますし、外部サイトに対しても負荷を掛けてしまうため、OpenSocialコンテナが一度取得した内容をキャッシュするからです。

　キャッシュを無効にして最新のXMLで画面を表示させるためには、下記のようにURLに「&nocache=1」や「?nocache=1」を追加します。

• ホームビュー
  http://platform001.mixi.jp/home.pl?nocache=1
• プロフィールビュー
  http://platform001.mixi.jp/show_profile.pl?id=XXXXXXXX&nocache=1
• キャンバスビュー
  http://platform001.mixi.jp/run_appli.pl?id=XXXX&owner_id=XXXXXXXX&nocache=1

jQueryで作った「ひとこと」アプリの中身

　ここからは、JavaScriptによるプログラミングで、作成したアプリの画面を動的に変化させていきます。

■ MVCによる実装

　OpenSocialアプリケーションではイベント処理が非常に多く、OpenSocial JavaScript APIを使ったOpenSocialコンテナとのやりとりもコード量が多くなる傾向があります。

　また、状態に応じて同一画面の表示内容を大きく変化させるケースも多いでしょう。例えば、キャンバスビューでアプリケーションに複数のページを持たせるような場合などです。

　このため、処理の役割をMVC（モデル・ビュー・コントローラー）に分けて、保守性を向上することが重要であると考えます。MVCの役割は、次の通りです。

■ 画面表示完了時の画面を操作してみる

　手始めにキャンバスビューの表示が完了したら、「キャンバス画面が表示されました」というメッセージを表示してみましょう。実装手順は、下記のとおりです。

1. コントローラー
   「画面が読み込み完了」イベントにハンドラを設定する
2. コントローラー
   ハンドラ内でビューを呼び出す
3. ビュー
   「画面が表示されました」というメッセージを画面上に表示する

■ ファイル構成

　サンプルのファイル構成は、次のようになります。この「javascripts」ディレクトリをWebサーバ上のガジェットXMLと同じ場所に置きます。

• javascripts/
  • jquery-1.3.2.min.js
    jQueryファイル
  • hitokoto_controller.js
    コントローラー
  • hitokoto_view.js
    ビュー
  • hitokoto.js
    モデル。「ひとこと」を表現
  • user.js
    モデル。「ひとこと」発言したユーザーを表現

　今回はMVCのうち、コントローラーとビューしか使わないので、モデルのコードは後で用意します。「ホームビュー」「キャンバスビュー」「プロフィールビュー」それぞれでコントローラーを用意するケースもありますが、今回は各ビューでの動きはそれほど変わらないので、同一のコントローラーを使用します。

■ 外部JavaScriptファイルの読み込み

　ガジェットXMLのキャンバスビューの<Content>内に、次のように記述すると、jQueryやコントローラー、ビューのJavaScriptファイルが読み込まれます。JavaScriptファイルもOpenSocialコンテナによってキャッシュされるので、常に最新のプログラムを読み込ませるために、URLに「nocache=1」を付与して確認します。

<Content view="canvas">
    <![CDATA[
      <script type="text/javascript" src="jQueryのURL"></script>
      <script type="text/javascript" src="コントローラーのURL"></script>
      <script type="text/javascript" src="ビューのURL"></script>
      <div id='contents'></div>
    ]]>
  </Content>

■ コントローラーのコード

　コントローラーのコードを見ていきましょう。

// 名前空間オブジェクト
var atmarkit = new Object();
 
// コンストラクタ
atmarkit.HitokotoController = function() {

    // 「画面が読み込まれた」というイベントに
    // ハンドラを設定する
    gadgets.util.registerOnLoadHandler(function() {
        atmarkit.c.onLoadCanvas();
    });
}
 
atmarkit.HitokotoController.prototype = {

    // イベントハンドラ

    // Canvasビューが読み込まれた
    onLoadCanvas: function() {
        atmarkit.HitokotoView.addFinishMessage();
    },
}
 
atmarkit.c = new atmarkit.HitokotoController();

　「atmarkit.HitokotoController」というクラス名で、コントローラーのクラスを定義しています。このコントローラーのコンストラクタでは、「画面が読み込み完了」イベントにハンドラを設定しています。

　gadgets.util.registerOnLoadHandlerは、OpenSocialアプリケーションが読み込まれた際に実行するハンドラを設定するためのメソッドです（参考：gadgets.util.registerOnLoadHandlerのリファレンス）。ここでは、onLoadCanvasというメソッドをハンドラとしてセットしています。

　onLoadCanvas内では、ビューのクラス「atmarkit.HitokotoView」のメソッド「addFinishMessage」を呼び出しています。

■ ビューのコード

　ビューのコードを見てみましょう。

// コンストラクタ
atmarkit.HitokotoView = function() {
}
 
// クラスメソッド
atmarkit.HitokotoView.addFinishMessage = function() {
    $('#contents').html('キャンバス画面が表示されました');
}

　このプログラムが実行された結果は、次のようになります。

図8　サンプルの実行結果

次回は、OpenSocial APIをいろいろ

　今回は、mixiアプリの使い方・登録の仕方、ガジェットXML、JavaScriptのMVC構造などについて解説しましたが、いかがでしたでしょうか。

　次回からは、OpenSocial APIを中心に解説していきますので、どうぞお楽しみに！

■ ＠IT関連記事

• アプリ開発者から見たmixiとFacebookの違い（＠IT News）

一攫千金！ デザイナのためのmixiアプリ制作のコツ 一撃デザインの種明かし（8）　ケータイ版の提供もスタートして、ますます注目を集める「mixiアプリ」。mixiの特徴を生かした制作事例とデザイナが制作する際のポイントを紹介 デザインハック ＜ リッチクライアント 2009/12/4

OpenSocialアプリケーション作成のための基礎知識 SNSやWebを変える!? OpenSocial徹底解説（後編）　SNSの共通APIとして発表されたOpenSocialを使ったアプリの作り方を一から解説するので、ぜひ試してみてください 「リッチクライアント ＆ 帳票」フ ォーラム 2008/4/23

OpenSocialアプリ、開発者にとっての魅力 インタビュー特集：Google直伝！（5）　OpenSocialの国内外での盛り上がりや、OpenSocialアプリケーション開発の心得やOpenSocialコンテナになる方法を聞いた 「リッチクライアント ＆ 帳票」フ ォーラム 2009/6/19

Google Labsさん、Ajaxライブラリ標準化はありますか Google Developer Day 2008特集（3）　Google Labs、OpenSocial、Gearsの担当者にそれぞれ話を聞いた。社内プログラミングで利用している、おすすめの開発環境とは？ 「リッチクライアント ＆ 帳票」フ ォーラム 2008/7/14

mixiは徹底した社内コミュニケーションからできている WebとUIをつなぐトリックスター（1）　Webサイト制作の要となるエンジニアとデザイナのチームワーク。異なる者同士をつなぐトリックスターからヒントを探る。まずはmixiに聞いた デザインハック ＜ リッチクライアント 2008/9/25

パターンとライブラリで作るAjaxおいしいレシピ Ajax開発においてみなさんはMVCを意識していますか？ 本連載では、デザインパターンとライブラリを活用し、MVCで設計する分かりやすいプログラミングの仕方をサンプルを見ながら解説します

Ajax時代のJavaScriptプログラミング再入門 Ajax全盛のいま、オブジェクト指向ベースのJavaScript知識は不可欠。過去を振り返りつつ、まずは最新開発事情をチェック 「Insider.NET」フォーラム

初めてのJavaScriptプログラミング 初めてのプログラミングにはJavaScriptがお勧め。Webブラウザとメモ帳があれば、本格的なプログラミングに挑戦できます 「Coding Edge」フォーラム

1-2-3

INDEX
基礎から分かる、mixiアプリ作成入門（1） まずは、mixiアプリを使ってみよう、作ってみよう
	Page1 mixiのアプリ？ それって何？ mixi（OpenSocial）アプリ作成入門の連載です サンプルに見るmixiアプリの3つの表示形式
	Page2 mixiアプリを使うには？ 登録するには？
	Page3 登録したmixiアプリを軽く改造してみよう jQueryで作った「ひとこと」アプリの中身 次回は、OpenSocial APIをいろいろ

ご意見、ご感想は Smart＆Social 会議室へどうぞ

Smart＆Social フォーラム トップページへ