Monacaを使って何かアプリを作ってみたいと思っても、いざとなるとアイデアが出てこないかもしれません。また、最初から大きなアプリを作ろうと思うと、何から手を付けて良いのか分からないことでしょう。

この記事ではNCMB（ニフクラmobile backend）と組み合わせて、簡単な「掲示板アプリ」を開発してみます。
記事は全部で2回に分けており、前半になるこの記事ではアプリの概要と、認証を終えるところまで解説します。

以前解説した「目安箱アプリ」と合わせ、ぜひチャレンジしてみてください。

利用している技術、ライブラリ

このアプリで利用している技術やライブラリは次の通りです。

  • Onsen UI
  • ニフクラmobile backend

今回はMonacaでOnsen UIの最小限のテンプレートを選択しています。

仕様

このアプリの画面は次の通りです。

スレッド一覧画面

掲示板のスレッドが一覧表示される画面です。この画面が最初に表示されます。

新規スレッド入力ダイアログ

ツールバーの上にある + アイコンをタップすると新しくスレッドを立てるための入力ダイアログが表示されます。ここでは以下の情報を入力します。

  • スレッドのタイトル
  • スレッドの概要
  • 画像（オプション）

スレッド詳細画面

スレッド一覧画面をタップするとスレッド詳細画面が表されます。ここではスレッドの内容と、そのスレッドに対するコメントが一覧表示されます。

コメント入力ダイアログ

画面下にあるアイコンをタップするとコメントを入力するダイアログが表示されます。ここでは以下の情報を入力します。

  • コメント本文
  • 画像（オプション）

データの権限

スレッド、コメントともに誰でも閲覧可能です。また、作成者は削除可能です。adminグループに所属しているユーザーも削除可能です。

ユーザーデータの権限

ユーザーデータは自分のみ閲覧可能です。

ニフクラ mobile backendのキーを取得

ニフクラ mobile backendにユーザー登録、またはログインしてアプリを作成します。その結果として、次の2つのキーが取得できます。

  • アプリケーションキー
  • クライアントキー

ライブラリのインストール

ではここから開発していきます。今回はOnsen UIのテンプレートを利用しています。外部フレームワーク（VueやReactなど）は用いず、素のJavaScriptのものを選択しています。

外部ライブラリとして、ncmbを追加します。JavaScriptライブラリですので、JS/CSSコンポーネントの追加と削除から行ってください。

読み込むファイルとしてncmb.min.jsをチェックするのを忘れないでください。

NCMBの初期化

www/js/app.js を作成して、下記のようにニフクラmobile backendを初期化します。
上記で紹介したアプリケーションキーとクライアントキーを適用してください。

1
2
3
4
5
6
document.addEventListener('DOMContentLoaded', e => {
  const applicationKey = '3a51faa420703796afeb6cba762d237aaa3135e5a5234fdaf5595409bb338849';
  const clientKey = 'ac2c30ebdf22d5856f1225952f42dbc10fd8a32a82c999e3ea5f0e7f64d80398';
  window.ncmb = new NCMB(applicationKey, clientKey);
});
 

index.html の紹介

Monacaアプリで一番初めに読み込まれる www/index.html では、ナビゲーションバー ons-navigator だけを指定します。

最初に表示する画面は list.html となっています。

1
2
<ons-navigator id="nav" page="list.html"></ons-navigator>
 

スレッド一覧画面の紹介

スレッド一覧画面 list.html のHTMLを下記に紹介します。

スレッドを表示するための ons-list と、スレッドを立てる際のダイアログ ons-dialog が主な画面構成要素です。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<ons-page>
  <ons-toolbar>
    <div class="center">掲示板</div>
    <div class="right">
      <ons-toolbar-button>
        <ons-icon icon="md-plus" id="open"></ons-icon>
      </ons-toolbar-button>
    </div>
  </ons-toolbar>
  <ons-list>
    <ons-list-header>スレッド一覧</ons-list-header>
    <span id="threads"></span>
  </ons-list>
  <ons-dialog direction="up">
    <div style="text-align: center;">
      <p>
        <ons-input id="title" modifier="underbar" placeholder="スレッドのタイトル" float></ons-input>
      </p>
      <p>
        <textarea class="textarea" id="body" cols="20" rows="3" placeholder="スレッドの説明"></textarea>
      </p>
      <p>
        <input type="file" id="image" accept="image/*" />
      </p>
      <p style="margin-top: 30px;">
        <ons-button id="add">スレッドを立てる</ons-button>
      </p>
    </div>
  </ons-dialog>
</ons-page>
 

スレッド詳細画面の紹介

スレッド詳細画面 thread.html は次のようなHTMLとなっています。

スレッドの内容を表示する部分、コメント一覧の ons-list 、そしてコメントを追加する際のダイアログがあります。

加えて画像をタップした際に拡大表示するためのダイアログもあります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<ons-page>
  <ons-toolbar>
    <div class="left"><ons-back-button>Back</ons-back-button></div>
    <div class="center thread-title"></div>
  </ons-toolbar>
  <ons-card>
    <img class="caption" src="http://placehold.jp/100x100.png"/>
    <p class="thread-body"></p>
  </ons-card>
  <ons-list id="comments">
  </ons-list>
  <ons-fab position="bottom right" id="comment-button">
    <ons-icon icon="md-comment"></ons-icon>
  </ons-fab>
  <ons-dialog class="comment" direction="up">
    <div style="text-align: center;">
      <form id="comment-form">
        <p>
          <textarea class="textarea" id="body" cols="20" rows="3" placeholder="コメント"></textarea>
        </p>
        <p>
          <input type="file" id="image" accept="image/*" />
        </p>
        <p style="margin-top: 30px;">
          <ons-button id="add">コメントする</ons-button>
        </p>
      </form>
    </div>
  </ons-dialog>
  <ons-dialog class="image" direction="up">
    <div style="text-align: center;">
      <ons-card>
        <img src="" class="square-image" />
      </ons-card>
      <p style="margin-top: 30px;">
        <ons-button id="close">閉じる</ons-button>
      </p>
    </div>
  </ons-dialog>
</ons-page>
 

認証判定

認証はアプリを立ち上げた際に実行します。今回はNCMBの匿名認証を利用します。

まずNCMBの管理画面にて匿名認証を有効にしてください。

続いて js/app.js に次のような関数を追加します。

まず最初に現在ログイン中のユーザデータを取得します（ ncmb.User.getCurrentUser() ）。これが空の場合は未ログインになります。

もしあった場合には適当なデータストア（今回はTest）のデータを取得しようとします。これによってセッションが有効であるかどうかチェックしています。

セッションが有効期限切れであったり、管理画面でユーザデータを削除していた場合はセッションが無効になってエラーになります。その場合にはユーザデータを削除して、匿名認証を実行します（ncmb.User.loginAsAnonymous()）。

認証した後は、管理者グループ（admin）を取得して、さらに所属ユーザを取得します。

その中に自分のID（objectId）があれば、管理者グループに所属しているということです。
結果は admin という変数に入れています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
ons.ready(async () => {
  // ログインユーザを取得
  let user = ncmb.User.getCurrentUser();
  // userがある = ログインしている
  if (user) {
    try {
      // 適当なクラス（名称は何でもOK）の
      // 取得を試みて、セッションの有効性をチェック
      await ncmb.DataStore('Test').fetch();
    } catch (e) {
      // 失敗した場合はユーザデータを消す
      user = null;
    }
  }
  // 改めてユーザデータがない場合は匿名認証を実行
  if (!user) {
    user = await ncmb.User.loginAsAnonymous();
  }
  // 管理者グループを取得
  const role = await ncmb.Role.equalTo('roleName', 'admin').fetch();
  // 管理者グループの所属ユーザを取得
  const users = await role.fetchUser();
  // 自分がいればadminフラグを立てる
  window.admin = users.map(u => u.objectId).indexOf(user.objectId) > -1;
});
 

これで認証処理の完成です。

ニフクラ mobile backendの管理画面での作業

最後にニフクラmobile backendの管理画面にて、管理グループを作成しておきます。

管理画面の会員管理にてロールを作成します。今回は分かりやすいように admin としておきます。

そしてそのadminグループに任意のユーザを追加しておきます。

まとめ

ここまでの流れで掲示板アプリにおける認証処理が完了となります。

慣れればすぐに認証の実装ができるようになるでしょう。次回はスレッドの登録とコメント登録を開発します。