mixiアプリをちょっとかじってみた - 全日本学生ゲーム開発者連合（全ゲ連

mixiアプリをちょっとかじってみた
黒河優介
発表者について
全ゲ連第二回で、Ｗｉｉリモコン使ったゲーム
について発表した人
とある会社の社蓄
でも、ソーシャルアプリは業務とは全く関係な
い
mixiアプリとは？
mixi上で動かすことが出来るアプリです
全画面はもちろん、ガジェットのようにページ
の一部のみ表示のアプリも作れます。
mixi上の情報を使ったアプリも作れます。
なぜmixi？
ぶっちゃけ、ＧＲＥＥとかモバゲーの方が、今
元気じゃね？
法人じゃないとアプリ作らせてくれない。。。
mixiは個人でも作れる環境を提供してくれて
ます！！
といいつつ、個人で作成できるのはＰＣアプリの
みです。（携帯向けは法人じゃないと・・・・ｒｙ）
mixi アプリ制作に必要なもの
携帯電話＋携帯のアドレス
mixiアカウント
mixi アプリ開発者登録
Webサーバー(HTTPサーバー)
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など
残念ながらFacebookは対応しておらず・・・
うだうだ言わず、作成してみる
まずは、開発者登録
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
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>
1．hello.xmlを
Webサーバーに
アップ。
2.ガジェットURＬの
項目にアップした
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
サーバー
アプリ
サーバー
HTTPで、
Gadget
XMLを
要求
キャッシュ上の
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>

<Content type="html" view="canvas"><!
[CDATA[
<div>Hello, Canvas!</div>
]]></Content>
</Module>

<Content type="html" view="home"><!
[CDATA[
<div>Hello, html!</div>
]]></Content>

<Content type="html" view="profile"><!
[CDATA[
<div>Hello, Profile!</div>
]]></Content>
画面によって表示内容を分ける
ことを明示します
どの画面で表示するかを
指定します
アプリ画面実行結果
ホーム画面実行結果
プロフィール画面実行結果
プロフィールデータを利用してみる
<Content type="html"><![CDATA[
<div>Hello, <span id="target"></span>!</div>

<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 のデータ利用のイメージ図
opensocial
ライブラリ
Userコード
DataReque
st
オブジェクト
サーバー
サーバーに
データ要求
Data Requestオブ
ジェクトを渡します
DataRequest
オブジェクトに
指定されている
コールバック関
数を呼び出す
サーバーから
データ応答
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など大体サポート)
マイミクを招待
同級生・コミュニティの情報を利用

Download Report