FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

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

mBaaSを使ったPWAを作る(その2 タスク管理の完成)

f:id:mbaasdevrel:20180625093834g:plain

最近にわかに盛り上がっているのがPWA(Progressive Web App)です。PWAは固有の技術を指すキーワードではなく、モバイルWebアプリを作るためのベストプラクティスと言えます。

何回かに分けて、mBaaSを使ったPWAを作っていきます。前回のベースアプリに続いて、今回はタスク管理アプリとして完成させます。

更新処理の追加

タスク管理での更新と言えば、タスクを完了にする処理だと思います。そこでチェックボックスをチェックしたタイミングでステータスを完了(done)にします。

<ul v-for="task in tasks" :key="task.objectId">
  <li>
    <input type="checkbox" v-model="task.done" @click="done(task, $event)" v-if="task.status == 'active'"/>
    {{ task.text }}
  </li>
</ul>

この時のイベント、doneを作ります。

async done(task, event) {
  const checked = event.target.checked;
  await task
    .set('status', checked ? 'done' : 'active')
    .update();
  await this.fetch();
},

this.fetchはリストを更新する処理です。初期表示処理、タスクの追加、削除などでも同様に呼び出します。

async fetch() {
  const tasks = await Task
    .equalTo('status', this.status)
    .fetchAll();
  Vue.set(this, 'tasks', tasks);
},

ステータス(this.status)はdataの中で定義します。デフォルトは active です。

data() {
  return {
    tasks: [],
    task: {
      text: null
    },
    status: 'active'
  }
},

表示の切り替え

ステータスを完了(done)にしたデータも見られるように、ステータスを切り替えられるようにします。

<ul>
  <li v-if="status == 'active'">
    <strong>アクティブ</strong>
  </li>
  <li v-else>
    <span @click="changeStatus('active')">アクティブ</span>
  </li>
  <li v-if="status == 'done'">
    <strong>完了</strong>
  </li>
  <li v-else>
    <span @click="changeStatus('done')">完了</span>
  </li>
</ul>

このchangeStatusのイベントでは this.status を変更し、 this.fetch でリストを更新します。

async changeStatus(status) {
  this.status = status;
  this.fetch();
},

これだけでアクティブ、完了の一覧を切り替えられるようになりました。

f:id:mbaasdevrel:20180625093803p:plain

タスクを削除する

ステータスが完了(done)になっているデータは削除できるようにします。一覧表示を少し変更します。

<ul v-for="task in tasks" :key="task.objectId">
  <li>
    <input type="checkbox" v-model="task.done" @click="done(task, $event)" v-if="task.status == 'active'"/>
    {{ task.text }}
    <!-- 追加 -->
    <span v-if="task.status == 'done'" @click="destroy(task)"> (削除)</span>
  </li>
</ul>

そしてdestroyイベントを作ります。タスクを削除し、リストを更新します。

async destroy(task) {
  await task.delete();
  await this.fetch();
}

ここまでの処理でタスクの追加、更新、削除が完了しました。タスク管理としての最低限の機能は実装されています。

f:id:mbaasdevrel:20180625093924g:plain

まとめ

タスク管理としての基本機能はできました。しかし、これではオフライン時の対応はできていません。次回から実際にデータをオフライン化対応させていきます。

ここまでのコードは NCMBMania/PWA-NCMB at v2 にアップロードしてあります。実装時の参考にしてください。

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。