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

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

mBaaSを使ったPWAを作る(その1 ベースの作成)

f:id:mbaasdevrel:20180625093632p:plain

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

今回から7回に分けて、mBaaSを使ったPWAを作っていきます。まず今回はベースになるアプリを作ります。

全体の目次

全7回の工程は下記のようになっています。

利用技術

  • Vue
  • Vue CLI
  • mBaaS

今回はVue CLIを使っています。現在3.0.0-RC3となっており、間もなく正式版が出ます。

Vue CLIでベースを作る

Vue CLIをインストールし、さらにコマンドでベースを生成します。

$ npm install -g @vue/cli
$ vue create pwa

Vue対応版のNCMBをインストールする

VueなどのWebpackでは公式のJavaScript SDKは使えません。そこで、対応版をインストールします。

$ npm install github:NCMBMania/ncmb_js#master --save

PWAプラグインのインストール

さらにVueアプリをPWAに対応させるプラグインをインストールします。

$ vue add @vue/pwa

NCMBの読み込み

NCMBをインポートする部分を作ります。アプリケーションキー、クライアントキーは src/config.json として作成します。内容は次のようになります。

{
  "applicationKey": "YOUR_APPLICATION_KEY",
  "clientKey": "YOUR_CLIENT_KEY"
}

そして src/ncmb.js を次のように作ります。

require('ncmb');
const config = require('./config')
const ncmb = new window.NCMB(config.applicationKey, config.clientKey);
export default ncmb;

これで他のファイルからは ncmb.js をインポートするだけで使えます。

f:id:mbaasdevrel:20180625093341p:plain

コンポーネントで利用する

src/components/HelloWorld.vue を編集します。まずテンプレート部分を次のようにします。Todoアプリなので、タスクの追加ができるようにします。

<template>
  <div class="hello">
    <h1>タスク管理</h1>
    <input type="text" v-model="task.text" /> <button @click="add">追加</button>
    <ul>
      <li v-for="task in tasks" :key="task.objectId">
        {{ task.text }}
      </li>
    </ul>
  </div>
</template>

次にスクリプトです。 ncmb.js を読み込んで、Taskというデータストアのクラスを定義します。

<script>
import ncmb from '@/ncmb'
import Vue from 'vue'

const Task = ncmb.DataStore('Task');
// 省略
</script>

画面が構築された時のイベント、createdで既存のデータをmBaaSの既存データを読み込みます。もちろん最初は何もありません。一点、ポイントとしてはasyncで定義することで、非同期処理をawaitによって同期処理であるかのように扱っていることです。mBaaSは基本的に非同期処理なので、async/awaitが活躍します。

また、ログインしていない場合は loginAsAnonymous を使って匿名ユーザを作成しています。これによって、データをAclで安全に保存できます。

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      tasks: [],
      task: {
        text: null
      }
    }
  },
  async created() {
    if (!ncmb.User.getCurrentUser()) {
      await ncmb.User.loginAsAnonymous();
    }
    const tasks = await Task
      .equalTo('status', 'active')
      .fetchAll();
    Vue.set(this, 'tasks', tasks);
  },
  // 省略
}

文字を入力し、タスクを追加する処理は add として定義しています。こちらもasync/awaitで非同期処理を簡単にしています。また、ACLを使って使っている匿名ユーザだけが読み書きできるデータとしています。

  methods: {
    async add() {
      const text = this.task.text;
      const user = ncmb.User.getCurrentUser();
      const acl = new ncmb.Acl();
      acl
        .setUserReadAccess(user, true)
        .setUserWriteAccess(user, true);
      let task = new Task;
      task = await task
        .set('text', text)
        .set('status', 'active')
        .set('acl', acl)
        .save();
      this.tasks.push(task);
    }
  }
}

全体の処理

ここまででmBaaSにデータを登録し、再読込時にはデータを表示するといった一連の処理ができました。もちろんオフラインにするとHTMLも表示できなくなります。

f:id:mbaasdevrel:20180625093632p:plain

PWA化

PWA化する際にはService Workerによるキャッシュ処理が必要になります。vue/pwaの場合、開発版ではなくプロダクション版だとService Workerが生成されます。

$ npm run build

として実行後、 dist ディレクトリ内にService WorkerのあるHTMLファイル群が生成されます。

まとめ

まずオンライン利用前提のタスク登録機能ができあがりました。次回はもう少し手を加えて、タスクの編集と削除をできるようにします。

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

中津川 篤司

中津川 篤司

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