ニフクラmBaaSお役立ちブログ

スマホアプリ開発にニフクラmBaaS。アプリ開発に役立つ情報をおとどけ!

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

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

元々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の画面を開いた時の処理です。すでに登録されているTodoを表示します。タスク追加する際にも表示処理を行うので別関数に分けています。

// 初期表示用
Todo
  .fetchAll()
  .then(function(todos) {
    for (let i = 0; i < todos.length; i++) {
      task_add(todos[i]);
    }
  });

// タスクを追加する処理
let task_add = (todo) => {
  $('#tasks').append(`
    <ons-list-item class="item">
      <div class="center">${todo.value}</div>
      <div class="right">
      <ons-icon icon="fa-trash-o" class="delete" data-id=${todo.objectId}>
      </ons-icon>
      </div>
    </ons-list-item>
  `);
};

タスクを追加する

タスクを追加する処理です。この時、ログイン済みであればACLを使って権限設定を行います。これによって自分だけが閲覧、削除できるTodoデータになります。

const Todo = ncmb.DataStore('Todo');

// タスクを追加するイベント
$(page).find('.add').on('click', function(e) {
  e.preventDefault();
  let todo = new Todo;
  
  // ログインしている場合は権限設定を行う
  let user = ncmb.User.getCurrentUser();
  if (user) {
    let acl = new ncmb.Acl();
    acl
      .setUserReadAccess(user, true)
      .setUserWriteAccess(user, true)
    todo.set('acl', acl);
  }
  
  // タスクを保存する
  todo
    .set('value', $('#todo').val())
    .save()
    .then(function(todo) {
      task_add(todo);
      $('#todo').val('');
    });
});

タスクを削除する

最後にタスクの削除です。これは削除するobjectIdをセットしてdeleteメソッドを呼ぶだけです。イベントは一覧の右側にあるゴミ箱アイコンに紐付けています。

$(page).on('click', '#tasks', function(e) {
  e.preventDefault();
  let todo = new Todo;
  todo
    .set('objectId', $(e.target).data('id'))
    .delete()
    .then(function() {
      $(e.target).parents('.item').remove();
    })
});

さいごに

これだけでTodoアプリができあがります。とても簡単なので、ぜひ試してみてください。

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