チュートリアル

• 概要
• 対象ユーザー
• アプリの登録
• Gadget XML の作成
• ファイルのアップロード
• mixi アプリの登録
• TODO の登録機能の作成
• OpenSocial Host 上でのデータの確認
• mixi アプリ上でのデータの確認
• 完了ボタンの作成

トラブルシューティング

• 概要
• UNAUTHORIZED のアラートが表示される
• 変更が反映されない

トレーニング

• お問い合わせ

• ヘルプ
• チュートリアル
• Core API
• JavaScript API

チュートリアル

概要

このチュートリアルは TODO アプリ （mixi アプリ） の開発を題材に、OpenSocial Host を利用した OpenSocial アプリの開発手順を説明します。

対象ユーザー

このチュートリアルは一般的な OpenSocial アプリの開発手順を理解されている方を対象とします。

アプリの登録

まずは OpenSocial Host へのユーザー登録後、OpenSocial Host 上で空のアプリを登録します。マイページの 「アプリケーションの登録」 ページでアプリの名前を設定してください。

ここでは TODO という名前を設定しました。これでアプリの登録は完了です。

Gadget XML の作成

次に TODO アプリ用の Gadget XML を作成します。ファイル名は gadget.xml としました。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="TODO アプリ">
    <Require feature="opensocial-0.8" />
    <Require feature="views" />
  </ModulePrefs>
  <Content type="html">
    <![CDATA[
    <script type="text/javascript" charset="UTF-8"
    src="http://opensocialhost.com/javascripts/api.js?key=[アプリケーションキー]"></script>
    <div>
      <input type="text" id="newTodo" />
      <input type="button" value="追加" id="insert" />
    </div>
    <div id="todo">
    </div>
    ]]>
  </Content>
</Module>

script タグ内の "[アプリケーションキー]" の部分は、マイページの 「アプリケーション情報」 ページに表示されているアプリケーションキー （下記の画面の赤線部分） で置き換えてください。

Gadget XML 内でこの script タグ （api.js） を読み込むことにより、

• OpenSocial Host の外部データベース
• OpenSocial Host のアクセス解析

等の機能が有効になります。詳細は JavaScript API のページを参照してください。

ファイルのアップロード

作成した Gadget XML を mixi アプリに登録するため、OpenSocial Host のファイルストレージに Gadget XML をアップロードします。

まず、マイページの 「アプリケーション一覧」 から 「ファイル」 ページにジャンプします。「ファイル」 ページでは 「選択／アップロード」 ボタンをクリックすることで、複数のファイルをまとめてアップロードできます。ファイルのアップロードが完了すると、下記の画面のようにアップロードしたファイルの URL が表示されます。

mixi アプリの登録

次に、mixi 上で先程アップロードした Gadget XML を登録します。mixi アプリの登録手順は mixi 上のドキュメントを参照してください。

なお、mixi 上の 「アプリ作成」 ページでは下記の画面のように設定しました。「ガジェット URL」 にはアップロードした Gadget XML の URL を設定してください。

mixi アプリの登録後、このアプリを実行するとテキストフィールドとボタンが表示されます。この時点ではボタンをクリックしても何も起こりません。ここから TODO の登録ができるよう機能を追加していきましょう。

TODO の登録機能の作成

まずは JavaScript を作成します。ファイル名は gadget.js としました。

function init () {
  var viewerId;
  var insert = document.getElementById("insert");
  var req = opensocial.newDataRequest();
  req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER), "viewer");

  // Viewer ID の取得
  req.send(function (data) {
    viewerId = data.get('viewer').getData().getId();
  });

  insert.onclick = function () {
    var key = viewerId;
    var value = document.getElementById("newTodo").value;
    // パーミッションを設定して他の人に見られないように
    var permissions = {};
    permissions[opensocialhost.data.Permissions.READ_PERMISSION] =
      opensocialhost.data.PermissionType.PRIVATE;
    permissions[opensocialhost.data.Permissions.WRITE_PERMISSION] =
      opensocialhost.data.PermissionType.PRIVATE;
    // TODO を追加
    opensocialhost.data.insert(key, value, permissions, function (response) {
      if (response.hadError) {
        alert(response.errorCode);
      } else {
        alert("TODO を追加しました！");
      }
    });
  };
};

gadgets.util.registerOnLoadHandler(init);

上記の JavaScript では 「追加」 ボタンをクリックした際、OpenSocial Host の外部データベースに TODO を保存するよう実装しています。また、保存した TODO は他のユーザーに見られないよう、TODO のパーミッションを読み込み、書き込み共に PRIVATE に設定しています。

作成した JavaScript は、Gadget XML と同じように OpenSocial Host のファイルストレージにアップロードします。

続いて、Gadget XML に作成した JavaScript を読み込むための script タグ （赤字部分） を追加します。（"StTp8nIawK" の部分は適切な文字列に変更してください。）

<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="TODO アプリ">
    <Require feature="opensocial-0.8" />
    <Require feature="views" />
  </ModulePrefs>
  <Content type="html">
    <![CDATA[
    <script type="text/javascript" charset="UTF-8"
    src="http://opensocialhost.com/javascripts/api.js?key=[アプリケーションキー]"></script>
    <script type="text/javascript" charset="UTF-8"
     src="http://file.opensocialhost.com/StTp8nIawK/gadget.js"></script>
    <div>
      <input type="text" id="newTodo" />
      <input type="button" value="追加" id="insert" />
    </div>
    <div id="todo">
    </div>
    ]]>
  </Content>
</Module>

script タグの追加後には、Gadget XML を再度アップロードしてください。

それでは、実際にこの mixi アプリを実行してみましょう。テキストフィールドに TODO を入力し 「追加」 ボタンをクリックした際、「TODO を追加しました！」 というアラートが表示されればここまでは成功です。

OpenSocial Host 上でのデータの確認

「TODO を追加しました！」 というアラートだけでは、本当にデータベースに TODO が追加されているかどうか心配かもしれません。ですが、その心配はご無用です。OpenSocial Host には保存したデータの一覧を確認する機能があります。

マイページの 「アプリケーション一覧」 から 「データベース」 ページにジャンプしてください。「データベース」 ページでは、データベースに保存されているデータの一覧が表示されます。キーの値を参照したい場合には、キーのリンクをクリックしてください。

mixi アプリ上でのデータの確認

この時点のアプリでは、追加した TODO を確認することができません。また、TODO をデータベースに保存するためのキーを Viewer ID そのものに設定しているため、このままでは 1 人 1 つの TODO しか保存することができません。

上記の 2 つの問題を解決するため、作成した JavaScript を下記のように修正します。（赤字が修正／追加箇所です。）

function init () {
  var viewerId;
  var insert = document.getElementById("insert");
  var req = opensocial.newDataRequest();
  var now = new Date();
  var canvas = gadgets.views.getSupportedViews()["canvas"];
  var optParams = { now: now.toLocaleString() };

  req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER), "viewer");

  // Viewer ID の取得
  req.send(function (data) {
    viewerId = data.get('viewer').getData().getId();
    var conditions = {};
    conditions[opensocialhost.data.SearchConditions.KEY] = viewerId + "-";
    // Viewer の TODO を取得
    opensocialhost.data.search(conditions, function (response) {
      var todo = document.getElementById("todo");
      var ul = document.createElement("ul");
      var li;
      if (response.hadError) {
        alert(response.errorCode);
      } else {
        // 追加済みの TODO を画面に表示
        if (response.total_counts) {
          for (var i = 0; i < response.data.length; i++) {
            li = document.createElement("li");
            li.appendChild(document.createTextNode(response.data[i].value));
            ul.appendChild(li);
          }
          todo.appendChild(ul);
          gadgets.window.adjustHeight();
        }
      }
    });
  });

  insert.onclick = function () {
    var key = viewerId + "-" + now.toLocaleString();
    var value = document.getElementById("newTodo").value;
    // パーミッションを設定して他の人に見られないように
    var permissions = {};
    permissions[opensocialhost.data.Permissions.READ_PERMISSION] =
      opensocialhost.data.PermissionType.PRIVATE;
    permissions[opensocialhost.data.Permissions.WRITE_PERMISSION] =
      opensocialhost.data.PermissionType.PRIVATE;
    // TODO を追加
    opensocialhost.data.insert(key, value, permissions, function (response) {
      if (response.hadError) {
        alert(response.errorCode);
      } else {
        // ページの再読み込み
        gadgets.views.requestNavigateTo(canvas, optParams);
      }
    });
  };
};

gadgets.util.registerOnLoadHandler(init);

主に修正した点は、

• キーの形式を Viewer ID から Viewer ID にハイフンを挟んで現在の時刻を追加する形式に修正
• ページの読み込みの際に追加済みの TODO を取得、画面に表示するように修正
• TODO を新規に追加した際にページを再読み込みするように修正

です。この JavaScript を再度アップロードして実行すると、下記の画面のように複数の TODO を追加、表示できるようになります。

完了ボタンの作成

続いて 「完了」 ボタンを作成し、完了した TODO を削除できるようにしましょう。

作成した JavaScript を下記のように修正します。（赤字が修正／追加箇所です。）

function init () {
  var viewerId;
  var insert = document.getElementById("insert");
  var req = opensocial.newDataRequest();
  var canvas = gadgets.views.getSupportedViews()["canvas"];
  var now = new Date();
  var optParams = { now: now.toLocaleString() };
  req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER), "viewer");

  // Viewer ID の取得
  req.send(function (data) {
    viewerId = data.get('viewer').getData().getId();
    var conditions = {};
    conditions[opensocialhost.data.SearchConditions.KEY] = viewerId + "-";
    // Viewer の TODO を取得
    opensocialhost.data.search(conditions, function (response) {
      var todo = document.getElementById("todo");
      var ul = document.createElement("ul");
      var li;
      var remove;
      if (response.hadError) {
        alert(response.errorCode);
      } else {
        // 追加済みの TODO を画面に表示
        if (response.total_counts) {
          for (var i = 0; i < response.data.length; i++) {
            li = document.createElement("li");
            li.appendChild(document.createTextNode(response.data[i].value));
            remove = document.createElement("input");
            remove.type = "button";
            remove.value = "完了";
            remove.id = response.data[i].key;
            remove.onclick = function () {
              // TODO を削除
              opensocialhost.data.remove(this.id, function (response) {
                if (response.hadError) {
                  alert(response.errorCode);
                } else {
                  // ページの再読み込み
                  gadgets.views.requestNavigateTo(canvas, optParams);
                }
              });
            };
            li.appendChild(remove);
            ul.appendChild(li);
          };
          todo.appendChild(ul);
          gadgets.window.adjustHeight();
        }
      }
    });
  });

  insert.onclick = function () {
    var key = viewerId + "-" + now.toLocaleString();
    var value = document.getElementById("newTodo").value;
    // パーミッションを設定して他の人に見られないように
    var permissions = {};
    permissions[opensocialhost.data.Permissions.READ_PERMISSION] =
      opensocialhost.data.PermissionType.PRIVATE;
    permissions[opensocialhost.data.Permissions.WRITE_PERMISSION] =
      opensocialhost.data.PermissionType.PRIVATE;
    // TODO を追加
    opensocialhost.data.insert(key, value, permissions, function (response) {
      if (response.hadError) {
        alert(response.errorCode);
      } else {
        // ページの再読み込み
        gadgets.views.requestNavigateTo(canvas, optParams);
      }
    });
  };
};

gadgets.util.registerOnLoadHandler(init);

主に修正した点は、

• TODO の右に 「完了」 ボタンを設置 （クリックするとその TODO を削除）

です。この JavaScript を再度アップロードして実行すると、追加した TODO を削除できるようになります。

以上、この時点で TODO アプリとして最低限必要な機能が揃いました。ですが、他にも

• TODO のリネーム機能
• TODO の共有機能

等、実装できそうな機能はたくさんあります。ここからは独自の機能を追加して、あなただけの TODO アプリを作成してみてください！

トラブルシューティング

概要

チュートリアルの手順がうまくいかなかった場合、次に挙げる理由が原因かもしれません。

UNAUTHORIZED のアラートが表示される

Gadget XML に追加した script タグ内のアプリケーションキーが正しくないかもしれません。

変更が反映されない

mixi によるキャッシュ、またはブラウザーによるキャッシュが原因かもしれません。mixi によるキャッシュを削除するためには、mixi 上のアプリ設定変更画面にある 「キャッシュ消去」 をクリックしてください。

また、上記の mixi によるキャッシュを削除しても、標準の設定ではブラウザーが JavaScript をキャッシュしてしまうため、併せてブラウザーのキャッシュも削除する必要があります。この方法はいくつかありますが、代表的な方法としては、

• ブラウザーの設定を変更し、キャッシュを無効にする
• Gadget XML に追加した script タグ内の URL にダミーのパラメーターを付与する （JavaScript を変更する度にダミーのパラメーターも変更してください）

等があります。下記はダミーのパラメーターの例となります。（赤字部分）

<script type="text/javascript" charset="UTF-8"
src="http://file.opensocialhost.com/StTp8nIawK/gadget.js?v=1.0"></script>

トレーニング

お問い合わせ

弊社では OpenSocial Host のトレーニング （無料） を常時実施しています。トレーニングを受講されたい方はお気軽にお問い合わせください。