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

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

今回はNCMB（ニフクラmobile backend）と組み合わせて、作業依頼アプリを開発します。記事は全部で2回に分けており、前半になるこの記事ではアプリの概要と、認証を完了するまでを紹介します。

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

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

今回はこちらのリンクをクリックしてサンプルプロジェクトをインポートしてください。

仕様

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

目的

作業依頼アプリは担当者が同じ部署、または他部署のメンバーに対して作業を依頼するのに利用します。依頼された作業は管理者が承認、作業担当者の割り当てを行います。作業担当者と依頼者はコメントを通じて詳細を伝え合うことができます。

作業依頼アプリの画面は次の4画面で構成されます。

依頼一覧画面

登録されている作業依頼を一覧で確認する画面です。 www/pages/home.html になります。

作業依頼作成画面

新しく作業依頼を作成する画面です。 www/pages/new.html になります。

作業依頼編集画面

作業依頼を編集する画面です。この画面で作業担当者の割り当てをしたり、コメントのやり取りをします。 www/pages/edit.html になります。

ログイン画面

ユーザ登録とログインを行う画面です。

ユーザーデータの権限

今回は社内などでの利用を想定し、ユーザデータは管理者グループも閲覧可能としています。また、作業依頼データは依頼者、作業担当者そして管理者グループのユーザが閲覧および書き込み可能としています。

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

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

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

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

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

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

NCMBの初期化

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

const applicationKey = 'YOUR_APPLICATION_KEY';
const clientKey = 'YOUR_CLIENT_KEY';
const ncmb = new NCMB(applicationKey, clientKey);

ルーティングについて

どのURLへ擬似的にアクセスした際にどの画面を出すかは js/routes.js で定義しています。

const routes = [
  {
    // 一番最初に読み込まれるHTML
    path: '/',
    url: './index.html',
  },
  {
    // 依頼一覧画面
    name: 'Home',
    path: '/home/',
    componentUrl: './pages/home.html',
  },  
  {
    // 依頼作成画面
    name: 'New',
    path: '/new/',
    componentUrl: './pages/new.html',
  },
  {
    // 依頼編集画面
    name: 'Edit',
    path: '/edit/',
    componentUrl: './pages/edit.html',
  },
  {
    // ログイン画面
    name: 'Login',
    path: '/login/',
    componentUrl: './pages/login.html',
  },
  // Default route (404 page). MUST BE THE LAST
  {
    path: '(.*)',
    url: './pages/404.html',
  },
];

index.html の紹介

Monacaアプリで一番初めに読み込まれる www/index.html では画面の実装はせず、home.htmlを読み込む指定だけしています(31行目)。

<div id="app">
  <div class="views safe-areas">
    <div id="view-home" class="view view-main view-init" data-name="home" data-url="/home/">
    </div>
  </div>
</div>

認証画面への遷移

pages/home.html では画面表示時のイベントで認証の判定を行っています (38〜40行目)。ログインしていない場合には pages/login.html に遷移させます。

$on('pageBeforeIn', async (e, page) => {
  if (!(await auth())) {
    return $f7router.navigate({name: 'Login'});
  }
  // 以下省略
});

もしログインしていると判断された場合でもセッションが無効になっている可能性があるので、データストアに実際アクセスしてみて判定しています(56〜74行目)。

詳細は以下のコメントを参照してください。

// 認証状態を確認する処理
const auth = async () => {
  // 現在のログインユーザ
  const user = ncmb.User.getCurrentUser();
  // ログインしていなければfalseを返して終わり
  if (!user) return false;
  try {
    // セッションの有効性チェック
    await ncmb.DataStore('Test').fetch();
    // 有効なら true を返して終わり
    return true;
  } catch (e) {
  }
  // セッションが無効ならlocalStorageのデータを削除
  localStorage.removeItem(NCMB/${ncmb.apikey}/currentUser);
  // セッションも消す
  ncmb.sessionToken = null;
  return false;
}

ユーザ登録/ログイン処理について

ユーザ登録/ログイン処理は pages/login.html のボタンをタップした際に signInOrLogin にて行われます。全体の流れは次のようになります (63〜84行目)。

// ログインまたは新規登録処理
const signInOrLogin = async function() {
  // フォームのシリアライズ（app.jsにて定義）
  const params = serializeForm(this.$el.find('form#login')[0]);
  try {
    // ユーザ登録処理
    await registerUser(params);
  } catch (e) {
    // ユーザ登録が失敗するのはユーザ名が重複している場合
    // この場合はエラーを無視
  }
  try {
    // ログイン処理
    const user = await ncmb.User.login(params.userName, params.password);
    // アクセス権限（ACL）を設定
    await setAcl(user);
    // 前の画面に戻る
    $f7router.back();
  } catch (e) {
    // ログインが失敗するのはID、パスワードが不一致の場合
    app.dialog.alert(ログイン失敗しました);
  }
}

NCMBへのユーザ登録を行う registerUser は次のような実装になります (87〜94行目)。

// ユーザ登録処理
const registerUser = (params) => {
  const user = new ncmb.User;
  return user
    .set('userName', params.userName)
    .set('password', params.password)
    .set('displayName', params.displayName)
    .signUpByAccount();
}

そしてログイン後、ユーザに対して管理者グループ admin に読み込み権限を付与します。これは setAcl 関数にて実行します (97〜109行目)。

// ACLを設定する処理
const setAcl = (user) => {
  const acl = new ncmb.Acl;
  acl
    // 自分自身は読み書き可能
    .setUserReadAccess(user, true)
    .setUserWriteAccess(user, true)
    // 管理者グループも読み込み可能
    .setRoleReadAccess('admin', true);
  // ACLを設定して更新
  return user
    .set('acl', acl)
    .update();
}

これでログイン処理が完成です。

Monaca IDEのプレビューパネルからユーザを登録してみましょう。表示名・ユーザ名・パスワードを入力して「新規登録&ログイン」ボタンを押してみてください。

登録が成功すると依頼作成一覧画面に遷移します。ニフクラmobile backend のダッシュボードからユーザが登録されていることを確認してみましょう。左メニューの会員管理をクリックすると登録された会員を見ることができます。

管理者ユーザの作成

続いて管理者を作成します。今回このユーザはNCMBの管理画面で作成します。ユーザ管理で管理者ユーザを作成後、adminというロールを作成して、その中にユーザを追加します。これでadminグループに所属するユーザは admin に対して付けられたロールが適用されるようになります。

また、管理者に対して簡易的に目印になるよう admin というフィールドを追加し、管理者には true を設定します。これでユーザの情報を見た際に、admin フィールドをチェックすれば管理者か否かを判別できるようになります。

まとめ

ここまでの流れでログイン判定と、ユーザ登録/ログイン処理が完成となります。Framework7はルーティングも分かりやすく、画面ごとに処理も分かれているのでアプリ開発しやすいかと思います。ぜひ試してみてください。

次回は作業依頼の登録と割り当て、そしてコメント投稿機能を開発します。