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を使った日報システムです。にアップロードしてあります。実装時の参考にしてください。