mBaaSお役立ちブログ

JavaScript SDKのキッチンシンクアプリを作る【データストアTodoアプリ編2】

キッチンシンクというのは、何かのフレームワークやライブラリがあった時に、その殆どの機能を体験できる仕組みになります。それがあることでフレームワークの全体像が分かったり、何か開発していて困った時に参考とできるコードになります。

元々MonacaとNCMBではアカウント連携機能があるのですが、NCMBからMonacaへ誘導した際にチュートリアルアプリを表示する機能は約1年ほど前になくなっています。チュートリアルアプリはデータの登録をしたり、写真を表示するアプリでした。つまりデータストアとファイルストアが体験できるというものです。アプリ自体はJavaScript SDKのver.1を使っていましたので、今となっては参考にはしづらいものでした。

この記事では旧チュートリアルアプリに変わるキッチンシンクアプリを作っていきたいと思います。ステップを踏んで紹介していきますので、実際に試す際の参考にしてください。今回は会員管理に続いてデータストアを使ったTodoアプリの作成ですが、データを配列にしてユーザ毎に一行で済む形で管理してみたいと思います。

利用するフレームワーク

今回利用しているフレームワーク、ライブラリは次の通りです。

  • Onsen UI
  • Monaca CLI
  • NCMB
  • Bower

今回はOnsen UIをjQueryから使う形で進めています。ライブラリはBower経由でインストールしています。アプリのプレビュー表示を行うのに便利なのがMonaca CLIになります。インストールは Node.js をインストール後、 npm コマンドで行えます。

$ npm i monaca -g

ベースのコード

今回はNCMBMania/kitchensink-monaca: MonacaとJavaScript SDKを使ったキッチンシンクアプリです。にコードをアップロードしてあります。こちらを参考にしてください。ベースはOnsen UI V2 JS Navigationとなっています。

変更点について

基本的な仕組みは以前作ったTodoアプリと同じです。ただしデータを配列で持つ点が異なります。これは具体的に言うと下記の点が異なります。

  • データをfetchAllではなくfetchで取得する
  • データのdelete処理は行わない
  • タスクのobjectIdではなく配列のインデックスで表示、削除

では処理について順番に紹介していきます。

初期データ表示について

画面が遷移した時の初期データ表示処理については次のようになります。fetchで取得するのがポイントで、さらにまだデータが存在しない場合には配列のカラムがundefinedになってしまう点に注意します。

let Todo = ncmb.DataStore('TodoArray');
let todo = new Todo;

// 初期表示用
Todo
  .fetch()
  .then(function(data) {
    if (data.objectId) {
      todo = data;
    }
    if (!todo.tasks) {
      return;
    }
    for (let i = 0; i < todo.tasks.length; i++) {
      task_add(todo.tasks[i], i);
    }
  })
  .catch(function(err) {
    showDialog('取得失敗', `タスクの取得に失敗しました<br />${err}`);
  })

タスクの追加処理

タスクを追加する処理としては、すでに配列があるかどうかで処理が若干変わります。また、保存後の表示処理についても配列のインデックスを指定する必要があります。

// タスクを追加するイベント
$(page).find('.add').on('click', function(e) {
  e.preventDefault();
  
  // ログインしている場合は権限設定を行う
  let user = ncmb.User.getCurrentUser();
  if (user) {
    let acl = new ncmb.Acl();
    acl
      .setUserReadAccess(user, true)
      .setUserWriteAccess(user, true)
    todo.set('acl', acl);
  }
  
  // タスクを保存する
  const task = $('#todo').val();
  if (todo.tasks) {
    todo.tasks.push(task);
  }else{
    todo.tasks = [task];
  }
  todo.set('tasks', todo.tasks);
  (todo.objectId ? todo.update() : todo.save())
    .then(function(data) {
      let last_index = todo.tasks.length - 1;
      task_add(todo.tasks[last_index], last_index);
      $('#todo').val('');
    });
});

ここでJavaScript SDKのaddメソッドが使えるかと思ったのですが、追加後のオブジェクトの整合性が煩雑になりやすいのでタスクをすべて上書きする形にしています。大量の配列データの場合はaddメソッドを使うべきでしょう。

タスクの削除処理

タスクの削除はobjectIdではなく配列のインデックスを使う点以外は特に変わりません。

// タスクを削除するイベント
$(page).on('click', '#tasks', function(e) {
  e.preventDefault();
  const index = $(e.target).data('index');
  todo
    .set('tasks', todo.tasks.splice(index, 1))
    .update()
    .then(function() {
      $(e.target).parents('.item').remove();
    })
});

これだけでTodoアプリができあがります。データがユーザ毎に一行で済むので、管理が楽になります。ただし各タスクに付与情報(ステータスや追加日、締切など)を持たせようと思うと若干管理が面倒になります(JSONオブジェクトになるでしょう)。あくまでも簡易的なデータ保存と考えた方が良さそうです。

コードはNCMBMania/kitchensink-monaca: Monaca と JavaScript SDKを使ったキッチンシンクアプリです。にアップロードしてあります。Monacaアプリとして動かすこともできますのでぜひお試しください。

バックナンバー