OpenSocial Host勉強会用のサンプルコードと課題

この後行われるOpenSocial Host勉強会用のコードと課題です。あとで別の場所に移すかも。

tutorial.xml

<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="Todoアプリ"
               description="OpensocialHostTutorial"
               author="HeartRails Inc."
               author_email="maeshima@heartrails.com">
    <Require feature="opensocial-0.8" />
    <Require feature="dynamic-height"/>
    <Optional feature="content-rewrite">
      <Param name="include-urls"/>
      <Param name="exclude-urls">.*</Param>
      <Param name="include-tags"/>
    </Optional>
  </ModulePrefs>
  <Content type="html" view="canvas,profile,home,preview">
    <![CDATA[
    <script type="text/javascript" charset="UTF-8" src="http://opensocialhost.com/javascripts/api.js?key=[Application Code]"></script>
    <script type="text/javascript" src="http://file.opensocialhost.com/xxxxxxxxxx/tutorial.js"></script>
    <div>
      <input type="text" id="new_todo" />
      <input type="button" value="追加" id="insert" />
    </div>
    <div id="todo">
    </div>
    ]]>
  </Content>
</Module>

tutorial.js

function init () {
  var viewer;
  var viewer_id;
  var insert = document.getElementById("insert");
  var todo = document.getElementById("todo");
  var req = opensocial.newDataRequest();
  var remove;
  var li;
  req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER), "viewer");
  // viewer idの取得
  req.send(function(data) {
    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);
      } else {
        if (response.total_counts) {
          for(var i = 0; i < response.data.length; i++) {
            li = document.createElement("li");
            remove = document.createElement("input");
            remove.type = "button";
            remove.value = "完了";
            li.appendChild(document.createTextNode(response.data[i].value));
            li.appendChild(remove);
            todo.appendChild(li);
            gadgets.window.adjustHeight();
          }
        }
      }
    });
  });
  insert.onclick = 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);
      } else {
        li = document.createElement("li");
        li.appendChild(document.createTextNode(value));
        remove = document.createElement("input");
        remove.type = "button";
        remove.value = "完了";
        li.appendChild(remove);
        todo.insertBefore(li, todo.firstChild);
        gadgets.window.adjustHeight();
      }
    });
  };
};

gadgets.util.registerOnLoadHandler(init);

課題

• 完了ボタンを押したときにtodoデータを削除するようにしてみましょう
• todoを修正できるようにしてみましょう
• todoデータを自分以外の人に公開できるようにパーミッションを設定してみましょう

参考リンク

OpenSocial Host | ヘルプ | JavaScript API
OpenSocial API リファレンス - OpenSocial - Google Code