OpenSocial Host 勉強会に行ってきました
Posted 6月 28th, 2009 by twk
in
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

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