mBaaSで作る業務システム「日報システム」（その3：データ閲覧）

mBaaSはスマートフォンアプリを作るのに最適です。そしてスマートフォンアプリは個人が楽しむゲームやチャットなどだけでなく、業務用途でも広がりを見せています。そこでmBaaSも業務システムを作るために使ってみましょう。

何回かに分けて、日報システムを作ってみます。他の業務システムへも応用はさほど難しくないでしょう。今回は前回のデータ登録に続いて、データ閲覧を作成します。以下は抜粋になります。実際のコードはNCMBMania/dailyReport: mBaaSを使った日報システムです。を参考にしてください。

今回のゴール

今回はログイン後のデータ閲覧画面を作ります。権限をあらかじめ正しく設定しているので、絞り込み条件なども不要です。

データの取得

日報データの取得はデータストアの検索で対応できます。一度に大量のデータを表示するのはよくありませんので、今回は10件までとしています。

const Report = ncmb.DataStore('Report');
Report
  .limit(10)
  .fetchAll()
  .then((reports) => {
    app.reports = reports;
  });

データを取得したらテンプレートに当てはめて表示するだけです。

<div role="tabpanel" class="tab-pane" id="read">
  <div v-for="report in reports">
    <div class="row">
      <div class="col-md-12">
        <table class="table">
          <tr>
            <td><span @click="showReport(report.objectId)">{{report.reporter}}</span></td>
            <td>{{strftime('%Y年%m月%d日', new Date(report.date.iso))}}</td>
          </tr>
          <tr class="note" v-if="showComments[report.objectId]">
            <td colspan="2">
              {{report.note}}
            </td>
          </tr>
          <tr class="comment" v-if="showComments[report.objectId]">
            <td colspan="2">
              <textarea v-model="comment" rows="3" class="form-control"></textarea>
              <button @click="addComment(report.objectId)">コメント</button>
            </td>
          </tr>
        <table>
      </div>
    </div>
  </div>
</div>

ページネーション

ページネーションは limit / offset パラメータを使って行います。limitで一度に取得するデータの件数を制御し、offsetパラメータで何件スキップするか指定します。

const Report = ncmb.DataStore('Report');
Report
  .limit(10)
  .offset(10)
  .fetchAll()
  .then((reports) => {
    app.reports = reports;
  });

ページネーション作成時にはデータが全体で何件あるかという情報が必要になります。これは count パラメータを付与することで受け取れるようになります。

const Report = ncmb.DataStore('Report');
Report
  .fetchAll()
  .count()
  .then((reports) => {
    const count = results.count;
    app.reports = results.reports;
  });

全体の件数が分かれば、ページネーションを作るのは難しくありません。

データの詳細表示

日報一覧のタイトルをタップしたら日報の詳細を表示します。

showReport: (objectId) => {
  app.showComments[objectId] = true;
  app.$forceUpdate();
},

最後に

今回のデータ一覧で取得しているものは、自分のデータを含めて同じ部署に所属している人のデータだけというのが分かります。別な部署のユーザが作成した日報は一覧に上がってきません。コード側では特に部署を指定するような処理はしていません。

このように必要な権限に応じたデータの取得、更新、削除を自動的にmBaaS側で行っています。複雑になりがちな権限管理機能もmBaaSを使えば簡単に解決できます。

実際のコードはNCMBMania/dailyReport: mBaaSを使った日報システムです。にアップロードしてあります。実装時の参考にしてください。

中津川 篤司

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