gadget.xml
アプリの基本情報や、埋め込むHTMLを記述する
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="クリック ゲーム">
<Require feature="opensocial-0.8" />
<Require feature="flash" />
</ModulePrefs>
<Content type="html"><![CDATA[
<div id="externalContainer"><h1>クリック ゲーム</h1></div>
<script type="text/javascript" src="http://kazy.jp/mixiApp/clickGame/js/gadget.js" charset="utf-8"></script>
<div style="width:900px; height:100px; overflow:auto; border:1px solid #CCCCCC;">
<span id="error" style="color:#F00;"></span>
<span id="trace"></span>
</div>
<a href="javascript:void(0);" onclick="removeAppData(); return false;">自分のスコアデータを削除</a> <a href="javascript:void(0);" onclick="inviteMyFriends(); return false;">友達を招待する</a>
]]></Content>
</Module>
gadget.js
mixiアプリのAPIへはJSでアクセスする。
基本的な関数は下記の通り。
//定数
var GAME_SWF_PATH = "http://kazy.jp/mixiApp/clickGame/swf/clickGame.swf";
var GAME_PATH = "http://mixi.jp/run_appli.pl?id=11425";
var ACTIVITY_IMG_PATH = "http://kazy.jp/mixiApp/clickGame/images/activityIcon.gif"
//
var myscore = 0;
var myDisplayName;
/**
* FLASH表示
*/
function showFlash() {
gadgets.flash.embedFlash(
GAME_SWF_PATH, "externalContainer", "8.0.0",
{
id : "externalswf",
width : 900,
height : 370,
quality : 'high',
wmode : 'transparent',
allowScriptAccess : 'always' // swfからのaccessを許可
}
);
//Vewerとマイミクのスコアをリクエスト
requestScoreInfo();
}
/**
* Vewerとマイミクのスコアをリクエスト.
*/
function requestScoreInfo() {
//リクエストパラメータ
var params = {};
params[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS] = [opensocial.Person.Field.HAS_APP];
params[opensocial.DataRequest.PeopleRequestFields.MAX] = 1000;
params[opensocial.IdSpec.Field.USER_ID] = opensocial.IdSpec.PersonId.VIEWER;
params[opensocial.IdSpec.Field.GROUP_ID] = "FRIENDS";
//リクエスト生成
var req = opensocial.newDataRequest();
//基本情報をリクエスト
var idspec = opensocial.newIdSpec(params);
req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER),"viewer");
req.add(req.newFetchPeopleRequest(idspec, params),"friends");
//スコアをリクエスト
var scoreIdspec = opensocial.newIdSpec(params);
req.add(req.newFetchPersonAppDataRequest("VIEWER", ["score"]),"ViewerScore");
req.add(req.newFetchPersonAppDataRequest(scoreIdspec, ["score"]),"FriendsScore");
//コールバック
req.send(responseScoreInfo);
}
/**
* Vewerとマイミクのスコア情報を処理.
*/
function responseScoreInfo(dataResponse) {
if (dataResponse.hadError()) {
//エラー処理
document.getElementById("error").innerHTML = dataResponse.getErrorMessage();
return;
} else {
//通常処理
document.getElementById("trace").innerHTML = "Vewerとマイミクのスコア情報取得成功";
var viewerData = dataResponse.get('viewer').getData();
var friendsData = dataResponse.get('friends').getData();
var viewerScore = dataResponse.get("ViewerScore").getData();
var friendsScore = dataResponse.get("FriendsScore").getData();
var count = 0;
var checkFlg = false;
var dataArray = new Array();
//マイミク情報を配列に追加
friendsData.each(function (person) {
var data = {};
data.mixiid = person.getId()
data.displayName = person.getDisplayName()
data.thumbnailUrl = person.getField(opensocial.Person.Field.THUMBNAIL_URL)
dataArray.push(data);
count++;
});
//マイミクのスコアを配列に追加
for (var friendsId in friendsScore) {
var score = friendsScore[friendsId].score;
for (var i = 0; i < count; i++) {
//idが一致すれば代入する
if (friendsId == dataArray[i].mixiid) {
dataArray[i].score = score;
}
}
//配列追加完了
checkFlg = true;
}
//friendsScoreがnullでforを逃れた場合
if (!checkFlg) {
//すべて0を入れる
for (var i = 0; i < count; i++) {
dataArray[i].score = 0;
}
}
//nullがあれば0を入れる
for (var i = 0; i < count; i++) {
if (dataArray[i].score == null) {
dataArray[i].score = 0;
}
}
//Viewerのスコアを抽出
for (var viewerId in viewerScore) {
myscore = viewerScore[viewerId].score;
}
//自分のデータを追加
var myData = {};
myData.mixiid = viewerData.getId();
myData.displayName = viewerData.getDisplayName();
myDisplayName = viewerData.getDisplayName();
myData.thumbnailUrl = viewerData.getField(opensocial.Person.Field.THUMBNAIL_URL);
myData.score = myscore;
dataArray.push(myData);
//FLASHへデータを受け渡す
thisMovie("externalswf").setData(dataArray);
}
}
/**
* スコアの更新.
*/
function updateScore(gscore) {
//自己最高スコアよりも高ければ更新
if (parseInt(gscore) > parseInt(myscore)) {
document.getElementById("trace").innerHTML += "
自己新記録 " + gscore.toString() + "に更新"; sendActivity( myDisplayName + "が自己新記録を"+gscore.toString()+"に伸ばしました",null); var max = gscore; myscore = gscore;//ゲームを継続した場合の対応 } else { var max = myscore; } //更新リクエスト var req = opensocial.newDataRequest(); req.add(req.newUpdatePersonAppDataRequest("VIEWER", "score", max)); //送信コールバック req.send(function (data) { if (data.hadError()) { document.getElementById("error").innerHTML = data.getErrorMessage(); }else{ document.getElementById("trace").innerHTML += "
スコア更新成功" } }); } /** * スコアデータ削除. */ function removeAppData() { var req = opensocial.newDataRequest(); req.add(req.newRemovePersonAppDataRequest(opensocial.IdSpec.PersonId.VIEWER, ["score"]),"response"); req.send(function (data) { var response = data.get("response").getData(); if (response.hadError()) { document.getElementById("error").innerHTML = response.getErrorCode(); }else{ document.getElementById("trace").innerHTML += "
スコアデータ削除成功" } }); } /** * FLASHコンテナへのパス. */ function thisMovie(movieName) { var isIE = navigator.appName.indexOf("Microsoft") != -1; return (isIE) ?window[movieName] : document[movieName]; } /** * アクティビティ送信. */ function sendActivity(title, body) { var mp = {}; mp[opensocial.MediaItem.Field.TYPE] = opensocial.MediaItem.Type.IMAGE; var mediaItem = opensocial.newMediaItem("image/gif", ACTIVITY_IMG_PATH, mp); var ap = {}; ap[opensocial.Activity.Field.TITLE] = title; //ap[opensocial.Activity.Field.BODY] = body; ap[opensocial.Activity.Field.URL] = GAME_PATH; ap[opensocial.Activity.Field.MEDIA_ITEMS] = [mediaItem]; var activity = opensocial.newActivity(ap); opensocial.requestCreateActivity(activity,opensocial.CreateActivityPriority.HIGH,function (response) { if (response.hadError()) { document.getElementById("error").innerHTML = response.getErrorCode(); } else { document.getElementById("trace").innerHTML += "
アプリ更新情報へ通知成功" } }); } /** * マイミク招待. */ function inviteMyFriends() { opensocial.requestShareApp("VIEWER_FRIENDS",null,function (response) { if (response.hadError()) { document.getElementById("error").innerHTML = response.getErrorCode(); } else { document.getElementById("trace").innerHTML += "
マイミク招待パネル表示完了" } }); } //初期関数をonLoadハンドラに登録 gadgets.util.registerOnLoadHandler(showFlash);
あとはFLASHとExternalInterfaceでやりとりすれば、簡単なmixiアプリが完成。
実装例：CLICK GAME
もちろんFLASHを使わず、HTML5やJSだけでも作ることはできる。
