全ゲ連発表黒

mixiアプリをちょっとかじってみた

発表者について

全ゲ連第二回で、Ｗｉｉリモコン使ったゲーム

について発表した人

とある会社の社蓄

でも、ソーシャルアプリは業務とは全く関係な

い

mixiアプリとは？

mixi上で動かすことが出来るアプリです

全画面はもちろん、ガジェットのようにページ

の一部のみ表示のアプリも作れます。

なぜmixi？

ぶっちゃけ、ＧＲＥＥとかモバゲーの方が、今

元気じゃね？

法人じゃないとアプリ作らせてくれない。。。

mixiは個人でも作れる環境を提供してくれて

ます！！

といいつつ、個人で作成できるのはＰＣアプリの

みです。（携帯向けは法人じゃないと・・・・ｒｙ）

mixi アプリ制作に必要なもの

携帯電話＋携帯のアドレス

mixiアカウント

mixi アプリ開発者登録

mixi アプリに求められる知識

必須

XML

HTML

JavaScript

あるとベター

Flash(ActionScriptなど)

ＣＧＩなどの知識

その他Web系知識

mixi アプリの仕組み①

Iframeで区切られたCanvas上に、自由な

HTMLを書き込める。

htmlはもちろん、JavaScript、FlashなどWeb

ブラウザ上で表現可能なら何でもあり

mixi アプリの仕組み②

Gadget XMLという中に、表示したいHTML

やJavaScriptなどをCData(ＸＭＬ中の文字列

データ)として表記

JavaScriptで用意されたＡＰＩを用いて、mixi

上のデータにアクセス

Opensocialという規格に準拠

OpenSocialについて

ソーシャル アプリケーションの共通 API です

JavaScriptとHTMLを使用して、ＳＮＳ上のア

プリが作れます

1つのＡＰＩで多様なサイトに対応

ＧＲＥＥ，モバーゲー，mixi , goo Home , Yahoo ,

MySpace、OpenPNEなど

うだうだ言わず、作成してみる

まずは、開発者登録

mixiにログイン後、

http://developer.mixi.co.

jp/appli/pc/pc_prepare/developer_account_regist_pc

にアク

セスして、開発者登録

そして、アプリ登録

http://developer.mixi.co.jp/appli/com/lauch/register

にアクセ

スして、アプリ登録。

登録内容は修正可能なので、適当でもＯＫ

Hello World

1．hello.xmlを

Webサーバーに

アップ。

2.ガジェットURＬの

項目にアップした

hello.xmlのＵＲＬを

登録

<?xml version="1.0" encoding="UTF-8"?> <Module>

<ModulePrefs title="Hello, world!"> <Require feature="opensocial-0.8" /> </ModulePrefs> <Content type="html"><![CDATA[ <div>Hello, World!</div> ]]></Content> </Module> hello.xml

Hello World解説

<?xml version="1.0" encoding="UTF-8"?> <Module>

<ModulePrefs title="Hello, world!"> <Require feature="opensocial-0.8" /> </ModulePrefs> <Content type="html"><![CDATA[ <div>Hello, World!</div> ]]></Content> </Module> ヘッダー部分、このアプリのタイト ルなどの情報の他に、このアプリ がどの機能を利用するかなどを 書きます コンテンツ部分。アプリが実際に 表示する表示設定が書いてあり ます。Content領域は複数指定 が可能です。(詳細は後ほど） 実際に、ユーザーに表示されるも の

mixiアプリ(PC)動作時の概要図

ユーザー mixi サーバー アプリ サーバー アプリに アクセス Gadget XMLから 表示物を埋め込む HTTPで、 Gadget XMLを 要求 Gadget XMLを 返します キャッシュ上の Gadget XMLから 表示物を埋め込む

次のアプリの前に・・・

キャッシュを消しましょう！！

mixiサーバー内にGadgetXMLのキャッシュが残

るので、アプリケーション変更時に必要！

キャッシュのクリアはアプリの設定変更から

出来ます。

画面によって表示物をわける

<?xml version="1.0" encoding="UTF-8"?> <Module>

<ModulePrefs title="Hello, world!"> <Require feature="opensocial-0.8" /> <Require feature="views" />

</ModulePrefs>

<!-- HOMEに表示する内容 -->

<Content type="html" view="home"><! [CDATA[

<div>Hello, html!</div> ]]></Content>

<!-- プロフィールに表示する内容 --> <Content type="html" view="profile"><! [CDATA[

<div>Hello, Profile!</div> ]]></Content>

<!-- Canvasに表示する内容 -->

<Content type="html" view="canvas"><! [CDATA[ <div>Hello, Canvas!</div> ]]></Content> </Module> 画面によって表示内容を分ける ことを明示します どの画面で表示するかを 指定します

プロフィールデータを利用してみる

<Content type="html"><![CDATA[

<div>Hello, <span id="target"></span>!</div> <!-- 以下JavaScriptコード --> <script type="text/javascript"> /** @brief EntryPointとなる関数 *データリクエスト用のオブジェクトの作成⇒ * 取得したい情報・コールバック関数を指定してデータのリクエストを行います */ function init() {

var req = opensocial.newDataRequest();

req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER), "viewer"); req.send(OnRequestComplete);

}

/** @brief opensocialのデータリクエスト完了後に呼び出されます * @param [in] data mixiからとってきたデータが引数として渡されます */

function OnRequestComplete(data) {

var viewer = data.get("viewer").getData();

var name = viewer.getDisplayName(); /*< 閲覧者の名前をname変数に代入 */

document.getElementById(“target”).innerHTML = name; /*< 実際に名前をHTMLに挿入*/ } /* JavaScriptのEntryPointの登録を行います */ gadgets.util.registerOnLoadHandler(init); </script> ]]></Content>

mixi のデータ利用のイメージ図

DataReque st オブジェクト サーバーに_{データ要求} サーバーから データ応答 DataRequest オブジェクトに 指定されている コールバック関 数を呼び出す Data Requestオブ ジェクトを渡します opensocial ライブラリ サーバー Userコード

ViewerとOwner

Mixiアプリでは他人のアプリを見ることが出

来る

他人のアプリを見たとき、見た人の情報は

Viewerとして取得可能

そのアプリを持っている人をOwnerとして、その

人のプロフィールをＯｗｎｅｒとして取得可能

友達のプロフィールを使う

/** @brief マイミクリストをゲット */ function GetMyMiku(){ var ip = {}; ip[opensocial.IdSpec.Field.USER_ID] = opensocial.IdSpec.PersonId.VIEWER; ip[opensocial.IdSpec.Field.GROUP_ID] = "FRIENDS";

var idSpec = opensocial.newIdSpec(ip); var req = opensocial.newDataRequest();

req.add(req.newFetchPeopleRequest(idSpec), "friends"); req.send(CallBackMyMiku); } /** @brief Myミクリストの取得が終わったときに呼び出されます */ function CallBackMyMiku(data){

var friends = data.get("friends").getData(); friends.each(EachFriend); } /** @brief マイミク一人一人処理するための関数 */ function EachFriend(friend){ var id = friend.getId();

var nickname = friend.getDisplayName();

var thumbnailUrl = friend.getField(opensocial.Person.Field.THUMBNAIL_URL); document.getElementById("friends").innerHTML += "ID : " + id + "<br/>" + "表示名 : " + nickname + "<br />" + "アイコン: " + thumbnailUrl + "<br />"; } /* 初期化 */ gadgets.util.registerOnLoadHandler(GetMyMiku);

アクティビティとは？

マイミク(友達）にmixiアプリをどのように楽し

んでいるか 送りつける

単に文字列だけでなく、画像付でアプリの状

況を送りつけることも可能

あて先を指定して特定のユーザーにのみ、

送ることも可能

<![CDATA[

<script type="text/javascript">

function postActivity(activity_msg) { var parms = {};

parms[opensocial.Activity.Field.TITLE] = activity_msg; var activity = opensocial.newActivity(parms);

opensocial.requestCreateActivity(activity, opensocial.CreateActivityPriority.HIGH, activityResultCallback);

var panel = document.getElementById("activity_panel"); }

function activityResultCallback(status) { if (status.hadError()) {

alert("Error Creating activity."); } } function startActivity() { postActivity("アクティビティのテストです！クリックして!"); } gadgets.util.registerOnLoadHandler(startActivity); </script> <div id="activity_panel"></div> ]]>

コード

他に出来ること一覧

mixiサーバーにデータを保存

PCアプリで言う HDDに保存みたいなもの

持ち主のＩＤ、アクセス用のキー、保存する文字

列でセット

ユーザーにメッセージを送信する

外部サーバーからデータを取得する

HTTPでアクセス(GET、POSTなど大体サポート)

マイミクを招待

同級生・コミュニティの情報を利用