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

そこで、この記事では手順を踏んで簡単なアプリを開発してみます。最初の一歩として、ぜひチャレンジしてみてください。

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

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

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

  • Onsen UI
  • ニフクラ mobile backend

仕様

このアプリの仕様と機能は、次のとおりです。

入力画面

目安箱に要望を投稿する画面です。この画面が最初に表示されます。
入力項目は、

  • 要望

です。

この画面ではログインしているかどうかを確認します。

目安箱は匿名の方が入力しやすいので、匿名認証を利用します。
今回の目安箱アプリはユーザー側から会員登録する機能を作らないため、基本的に未ログイン状態となり、ログインしていなかった場合に匿名認証が実行されることになります。

ご意見一覧画面

目安箱に投稿された要望を閲覧する画面です。

通常ユーザは、自分の投稿した要望だけを一覧できます。
管理者グループのユーザは、他のユーザの投稿も見られます。

また、自分の投稿であれば、タップして編集画面に遷移します。
編集画面は、入力画面と同じ画面を再利用して開発します。

要望データの権限

要望データは本人と管理者ユーザだけが閲覧できます。また、要望の編集が行えるのは本人のみです。

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

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

  1. アプリケーションキー
  2. クライアントキー

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

では、ここから開発を行っていきます。

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

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

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

NCMBの初期化

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

document.addEventListener('DOMContentLoaded', e => {
  const applicationKey = 'YOUR_APPLICATION_KEY';
  const clientKey = 'YOUR_CLIENT_KEY';
  window.ncmb = new NCMB(applicationKey, clientKey);
});

index.html の紹介

Monacaアプリで一番最初に読み込まれる www/index.html では、タブバーのOnsen UIとなっています。読み込むファイルは、目安箱の入力を行う add.html と 閲覧を行う view.html となっています。

<ons-page>
  <ons-tabbar position="auto">
    <ons-tab label="投稿" page="form.html" active>
    </ons-tab>
    <ons-tab label="閲覧" page="view.html">
    </ons-tab>
  </ons-tabbar>
</ons-page>

入力画面 (form.html) の実装

入力画面 form.html のHTMLを下記に紹介します。

基本的に目安箱の入力項目を表示する部分と、入力した内容を表示する #reports があるだけです。

<ons-page>
  <ons-toolbar>
    <div class="center">入力フォーム</div>
  </ons-toolbar>
  <div style="text-align: center; margin-top: 60px;">
    <ons-row>
      <ons-col>
        <input type="hidden" id="objectId" />
        <textarea id="body" class="textarea" rows="5" cols="40" placeholder="ご意見を入力してください"></textarea>
      </ons-col>
    </ons-row>
    <p style="margin-top: 30px;">
      <ons-button id="post">目安箱に投稿する</ons-button>
    </p>
  </div>
</ons-page>

JavaScriptについて

JavaScriptでは、画面を表示した時にログインされているかどうかをチェックします。

この処理は、入力画面が表示された際に呼ばれる処理の ons.getScriptPage().onShow の中に実装します。

プログラムは、form.htmlの <ons-page></ons-page>の中に、記述していきます。

    <script>
    /*
      この画面が表示される度に実行されるメソッド
    */
    ons.getScriptPage().onShow = async function() {
      // 匿名認証実行
      await loginCheck();
      if (this.data && this.data.objectId) {
        const post = await fetchPost(this.data.objectId);
        this.querySelector('#body').value = post.body;
        this.querySelector('#objectId').value = post.objectId;
      }
    }
    </script>
</ons-page>

ログイン状態の確認は、ニフクラ mobile backendの会員管理機能を利用します。

まず、 ncmb.User.getCurrentUser() でログインしているユーザの情報を取得します。
これが空の場合には、未ログイン状態なので、匿名認証処理を実行します。

/*
  認証状態の確認を行い、ログインしていなかった場合は匿名認証を実行する
*/
async function loginCheck() {
  const user = ncmb.User.getCurrentUser();
  if (!user) {
    // 未ログインの場合
    await ncmb.User.loginAsAnonymous();
    return true;
  }
  try {
    // セッションの有効性を確認
    await ncmb.DataStore('Test').fetch();
  } catch (e) {
    // セッションが不正だった場合は匿名認証し直し
    await ncmb.User.loginAsAnonymous();
  }
  return true;
}

匿名認証は、ユーザIDやパスワードといった情報なしで認証機能を提供します。

デバイス個別のIDを生成し、それを認証に利用します。IDは、セッションが切れると別なものが生成されてしまうので注意してください。

また、もしユーザ情報が取得できたとしても、そのセッションが有効かどうかは分かりません。それを確かめるために、適当なクラス（今回はTestクラス。存在しなくても大丈夫です。）へリクエストします。

これが失敗する場合にはセッションが無効（有効期限切れなど）となっています。その場合には再度匿名認証を実行します。

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

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

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

この admin グループを表示している状態を会員を追加したり、既存会員のobjectIdを使ってグループに追加できます。この管理グループにいる場合、他のユーザのデータも見られるようになります。これは匿名認証のユーザでも指定できます。

また、アプリ設定画面にて匿名認証を有効にしてください。これは「アプリ設定」をクリックした後の項目「基本」の一番下に設定があります。

まとめ

ここまでの流れで目安箱アプリにおける認証処理が完了となります。慣れればすぐに認証の実装ができるようになるでしょう。次回は目安箱への投稿と閲覧、そして編集機能を開発していきます。

※後半はこちら
目安箱アプリを作ってみよう【その2：意見の投稿と一覧画面の作成】