OpenSocial Host 勉強会に行ってきました

OpenSocial Host勉強会に行ってきました。内容については
OpenSocial Host 勉強会に行ってきた - onkはギリギリ霊長類
OpenSocial Host勉強会に行ってきたよーvv
辺りを見てもらえればと思います。drecomのunshiuはこれ。ボタン押す度に画面全体を書き換えるって昔のcgiみたいだなーと思ったけどPC/携帯ワンソースで動かすには良いかも。しかしRoR。

1時間が説明、残りの1時間半がもくもくともくもくと実践でした。修正内容はOpenSocial Hostに関する部分は簡単で、JavaScriptの腕試しって感じでしたね。ちなみに時間内にあんまできてる人いませんでしたが、実際ちゃんと取り組んでなかった人も多かったようです。貼っときます。

/*
@see http://d.hatena.ne.jp/willnet/20090626
済	*	 完了ボタンを押したときにtodoデータを削除するようにしてみましょう
済	* todoを修正できるようにしてみましょう
未	* todoデータを自分以外の人に公開できるようにパーミッションを設定してみましょう
*/
jQuery(function($){
	var viewer_id;
	var $todo = $('#todo');

	var req = opensocial.newDataRequest();
	req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER), "viewer");
	
	// viewer idの取得
	req.send(function(data) {
		var viewer = data.get('viewer').getData();
		viewer_id = viewer.getField(opensocial.Person.Field.ID);
		var conditions = {};
		conditions[opensocialhost.data.SearchConditions.KEY] = viewer_id + "-";
		// viewerのtodoをsearch apiを利用して取得
		opensocialhost.data.search(conditions, function (response){
			if (response.hadError) {
				alert(response.errorCode);
				return;
			}
			if (response.total_counts) {
				for(var i = 0; i < response.data.length; i++) {
					var $li = CreateToDoNode(response.data[i].key, response.data[i].value);
					$todo.append($li);
					gadgets.window.adjustHeight();
				}
			}
		}); // search
	}); // send
	
	$('#insert').click(function () {
		var value = document.getElementById("new_todo").value;
		var now = new Date();
		var key = viewer_id + "-" + now.toLocaleString();
		// パーミッションを設定して他の人に見られないように
		var permissions = {};
		permissions["READ_PERMISSION"] = opensocialhost.data.PermissionType.PRIVATE;
		permissions["WRITE_PERMISSION"] = opensocialhost.data.PermissionType.PRIVATE;
		// insert apiを利用してtodoを追加
		opensocialhost.data.insert(key, value, permissions, function (response) {
			if (response.hadError) {
				alert(response.errorCode);
				return;
			}
			var $li = CreateToDoNode(key, value);
			$todo.before($li);
			gadgets.window.adjustHeight();
		}); // insert
	}); // click

	/**
	 * @return jQuery element
	 */
	function CreateToDoNode(key, value){
		var $li = $('<li/>');
		var $span = $('<span/>').text(value);
		
		var $update = $('<input type="button" value="更新" />').click(function(){
			var newValue = prompt('新しい値を入力してください', $span.text());
			if (newValue === null)
				return;
			opensocialhost.data.update(key, newValue, function(response){
				if (response.hadError) {
					alert(response.errorCode);
					return;
				}
				$span.text(newValue);
				alert('todoを更新しました');
			}); // update
		}); // click
		
		var $remove = $('<input type="button" value="完了" />').click(function(){
			opensocialhost.data.remove(key, function(response){
				if (response.hadError) {
					alert(response.errorCode);
					return;
				}
				$li.hide();
				alert('todoを削除しました');
			}); // remove
		}); // click

		$li.append($span).append($update).append($remove);

		return $li;
	} // CreateToDoNode
}); // jQuery

先にボタン生成部分を共通化して、jQueryを導入して置き換えていきました。
更にopensocial-jqueryも導入して下記のように変形して行きたかったのですが、「nextはオブジェクトではありません」のエラーになってしまいました。またopensocial-jqueryがmixiアプリで動かなくなったかな?(未検証)

	$.ajax({
		url: '/people/@viewer/@friends',
		data: {},
		dataType: 'data'
	}).next(function(people){
		console.debug(people);
		// 続きの処理
	}).error(function(e){
		console.error(e);
	});

感想
・OpenSocial Hostは案外使いやすかった。携帯版のインターフェイスが気になる
・unshu使うかは別にして面白い取り組み
・以前お会いしたメンバーがちらほら・・・。

Trackback URL for this post:

http://nonn-et-twk.net/twk/trackback/324
0

こんにちは。なかじ

こんにちは。なかじまんです。opensocial-jquery のレポートありがとうございます。
opensocial-jquery.js の後に、通常の jQuery をロードして上書きしているような振る舞いですね。
それ以外は、ちょっと心あたりはありませんです。