mixiアプリを作る

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だけでも作ることはできる。