プログラムの変更

チュートリアルの完了後、自分のモバイルアプリを作る際には JavaScript リファレンスガイドを参照しながら作業を進めます。ここでは、その練習として簡単な修正を加えてみます。

一覧内の MyObject 1 などの見出し部分をクリックすると、その部分を現在時刻に更新する機能を追加してみます。

ハンドラーの準備

まずは、データ一覧画面で見出しがクリックされると特定のハンドラーが呼び出されるように修正します。下記のコード中、**** Add the line below ***** と //**** Add the line above **** の間の 1 行を list-page-callback.js ファイルに追加します。

function createListItem(object) {
  // Create elements of the list item.
  var elementItem = document.createElement('li');
  var elementTitle = document.createElement('div');
  var elementSubtitle = document.createElement('div');
  var elementDelete = document.createElement('div');

  // Set the value of each element.
  elementTitle.innerText = object.get(OBJECT_KEY);
  elementTitle.className = "item-title";
//**** Add the line below ****
  elementTitle.onclick = function(e) { updateTitle(this, object); };
//**** Add the line above ****

  elementSubtitle.innerText = object.objectURI();
  elementSubtitle.className = "item-subtitle";

  elementDelete.innerText = "Delete";
  elementDelete.className = "item-button";
  elementDelete.onclick = function (e) { deleteItem(this.parentNode, object); };

  // Set the elements as children of the list item.
  elementItem.appendChild(elementTitle);
  elementItem.appendChild(elementDelete);
  elementItem.appendChild(elementSubtitle);

  return elementItem;
}

さらに、その飛び先となる関数を list-page-callback.js ファイルの適当な位置に追加します。以後、この関数に機能を追加していきます。

function updateTitle(elementItem, object) {
}

コードのコピー

KiiObject の更新方法にはいくつかありますが、今回は単純な上書き方法である、更新チェックなしのフルアップデートを実装します。更新機能の実装について詳しくは、JavaScript リファレンスガイドのフルアップデート（更新チェックなし）) を参照してください。

まずは、リファレンスガイドの必要箇所をコピー＆ペーストでソースファイルに貼り付けます。

function updateTitle(elementItem, object) {
  // Update key-value pairs.
  object2.set("myid", 1);
  object2.set("name", "John Doe Jr");
  object2.set("email", "john_jr@example.com");
  object2.remove("address");

  // Save and fully update the KiiObject.
  // This method removes all key-value pairs from the KiiObject on the server and
  // adds the key-value pairs generated locally to the KiiObject.
  object2.saveAllFields({
    success: function(theObject) {
      // Do something.
    },
    failure: function(theObject, errorString) {
      // Handle the error.
    }
  });
}

内容の調整

次に、処理の前後を調整します。

サンプルコードの object2 は更新したい KiiObject です。これは Hello Kii の object に相当するため、object2 を object に修正します。
サンプルコードの set() メソッドはダミーの値を書き込みます。これを実際に書き込むデータに修正します。書き込むデータは JavaScript の Date() クラスで作成できます。

ここまでで、次のようなコードになります。

function updateTitle(elementItem, object) {
  // Set the key-value pair.
  var date = new Date();
  var value = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();

  object.set(OBJECT_KEY, value);

  // Save and fully update the KiiObject.
  // This method removes all key-value pairs from the KiiObject on the server and
  // adds the key-value pairs generated locally to the KiiObject.
  object.saveAllFields({
    success: function(theObject) {
      // Do something.
    },
    failure: function(theObject, errorString) {
      // Handle the error.
    }
  });
}

さらに、完了後の処理を追加します。

通常、リファレンスガイドのサンプルコードは、コールバック関数内で行う完了時の処理が空になっています。今回は、失敗時はメッセージを画面とログに出力し、成功時には画面に変更を反映します。

これらを追加すると、最終的に以下のようなコードになります。

function updateTitle(elementItem, object) {
  // Set the key-value pair.
  var date = new Date();
  var value = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();

  object.set(OBJECT_KEY, value);

  // Save and fully update the KiiObject.
  // This method removes all key-value pairs from the KiiObject on the server and
  // adds the key-value pairs generated locally to the KiiObject.
  object.saveAllFields({
    success: function(theObject) {
      elementItem.innerText = value;
    },
    failure: function(theObject, errorString) {
      alert("Unable to save: " + errorString);
      console.log("Unable to save: " + errorString);
    }
  });
}

実行

実際に実行すれば、現在時刻に更新できる様子を確認できるはずです。

Kii Cloud 上のデータも書き換えているため、再ログインしても更新後の値が表示されます。

このように、リファレンスガイドのサンプルコードをコピーして、前後の処理を調整すれば、目的の機能を簡単に実現できます。今回呼び出すメソッドは saveAllFields()、コールバック関数は成功時が function(theObject)、失敗時が function(theObject, errorString) ですが、これらの組み合わせもサンプルコードをコピーすれば容易に実装できます。

なお、API の仕様そのものは、JSDoc に記載されています。JavaScript リファレンスガイドとあわせてご覧ください。

次は...

最近の JavaScript による本格的なモバイルアプリの開発では、Promise を使う事例が増えています。Promise を使うと、今まで解説した Hello Kii の実装がどのように変わるかを紹介します。

Promise の利用に移動してください。