FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

Monacaとニフクラ mobile backendを使って勤怠管理アプリを作ろう【その1:認証機能を実装する】

f:id:mbaasdevrel:20200915123844p:plain

Monacaを使えば、誰でも簡単にスマートフォンアプリが開発できます。さらにそこにニフクラ mobile backendを組み合わせることで、データの保存や認証などのサーバが必要な機能をすばやく追加できます。

この連載記事では業務でよくある勤怠管理(出退勤入力)アプリを作るのを目標としています。全部で3回に分けて開設します。

  1. 認証機能を実装する
  2. データの保存と表示処理を実装する
  3. データをファイルストアに保存する

初回となる今回はベースアプリの紹介と、認証機能の実装について解説します。

ベースアプリについて

ゼロからアプリを作る場合、そのUIについても実装が必要になります。それでは説明が長くなってしまうので、今回はUIについて実装済みのサンプルを使っていきます。こちらをインポートしてください。もしエラーが出る場合は、フリープランですでに3つプロジェクトが登録されていないか確認してください。

Monacaプロジェクトサンプル

こちらについて簡単に説明をしていきます。

index.html について

index.htmlは一番初めに読み込まれるHTMLファイルです。ここではOnsen UIのタブバーを読み込んでいます。初期設定は active 要素で指定されている通り、home.htmlを表示します。

<ons-toolbar>
  <div class="center">出退勤管理</div>
</ons-toolbar>
<ons-page>
  <ons-tabbar swipeable position="auto" id="tabbar">
    <ons-tab page="home.html" label="出退勤" icon="home, material:md-home" active>
    </ons-tab>
    <ons-tab page="history.html" label="履歴" icon="history">
    </ons-tab>
    <ons-tab page="config.html" label="設定" icon="md-settings">
    </ons-tab>
  </ons-tabbar>
</ons-page>  

js/app.js も読み込んでいますが、こちらは後で解説します。

f:id:mbaasdevrel:20200915123829p:plain

home.html

では最初に読み込まれるhome.htmlについてです。HTMLは出退勤時に押すボタンを表示しているのと、ほかに出勤ボタンを押した同僚の人たちを表示します。

<div style="text-align: center; padding-top: 3em">
  <p>
    <!-- 現在時刻を表示します -->
    <strong>現在時刻:<span id="time"></span></strong>
  </p>
  <p>
    <!-- あなたの名前が出ます -->
    <strong><span id="name"></span>さん(ログイン中)</strong>
  </p>
  <!-- 出退勤時に押すボタンです -->
  <ons-button id="record">出勤を記録する</ons-button>
  <p>
    <ons-list>
      <ons-list-header>出勤中のみなさん</ons-list-header>
      <!-- 出勤中の人たちを表示 -->
      <span id="workers">
      </span>
    </ons-list>
  </p>
</div>

JavaScriptについては実装時に説明します。

f:id:mbaasdevrel:20200915123844p:plain

history.html

自分の出退勤履歴を表示する画面です。こちらもJavaScriptは実装時に説明します。

<p style="padding-top: 5em">
  <ons-list>
    <ons-list-header>履歴(勤務時間)</ons-list-header>
    <span id="records"></span>
  </ons-list>
</p>

f:id:mbaasdevrel:20200915123855p:plain

config.html

名前を設定する画面です。

<div style="text-align: center; margin-top: 5em;">
  <strong>名前を入力してください</strong>
  <p>
    <ons-input id="name" modifier="underbar" placeholder="出勤花子" required float></ons-input>
  </p>
  <p>
    <ons-button id="save">確定</ons-button>
  </p>
</div>

f:id:mbaasdevrel:20200915123907p:plain

mBaaSの設定について

ニフクラ mobile backendの設定について解説します。まずアカウントはすでに持っているという前提で進めていきます。その際、アプリケーションキーとクライアントキーが取得できるはずです。そのキーを js/app.js に書き込みます。

// ↓ アプリケーションキーとクライアントキーをそれぞれ書き換えてください
const applicationKey = 'YOUR_APPLICATION_KEY';
const clientKey = 'YOUR_CLIENT_KEY';
window.ncmb = new NCMB(applicationKey, clientKey);

次に管理画面での設定をします。

匿名認証の設定

今回はIDやパスワードを使わない、匿名認証を利用します。管理画面の アプリ設定 > 基本 の中にある匿名設定を有効にして保存します。

f:id:mbaasdevrel:20200825104733p:plain

管理アカウントの作成

データへのアクセス制限を設けるため、管理者アカウントを作成します。会員管理へ移動して、ロールの作成を選びます。新しいロールとして admin を作成します。

f:id:mbaasdevrel:20200915123928p:plain

adminというロールが作成されたら、新しい会員を作成します。ID/パスワードが自由に決めてください。下の例では、ユーザ名もadminとしています。

f:id:mbaasdevrel:20200915123946p:plain

認証状態の判定

ではJavaScriptの実装に移ります。最初に表示されるのは home.html になりますので、ここで認証判定を行うのがよさそうです。この判定はログアウト処理や履歴管理表示した後も実行したいので、 ons.getScriptPage().onShow に実装するのがよいでしょう。この関数は画面が表示される度に呼び出されます。

最初、次のようになっているはずです。この 1. ログインしていなければ、名前を登録する画面に遷移します の下に処理を書いていきます。

// この画面が表示される度に実行されます
ons.getScriptPage().onShow = async function(e) {
  const page = this;
  // 1. ログインしていなければ、名前を登録する画面に遷移します
  // 現在時刻を表示する処理
  callTimer(page);
  // 出退勤ボタンのラベル変更
  changeStatus(page);
  // 他の働いている人たちの一覧表示
  showWorkerList(page);
}

ログイン状態を判別する

ログイン状態の判別は、NCMBの会員管理機能を使って ncmb.User.getCurrentUser() を取得して行います。これが空(null)の場合、認証されていません。認証されていない場合は config.html に遷移します。 setActiveTab(2) はOnsen UIのタブバーの指定です(一番左が0で次が1になります)。

ログインしている場合は、名前を #name に表示します。名前は user.get('name') で取得できます。なお、nameは今回指定している名称で、皆さんが自由に決められます。

以下のコードを 1. ログインしていなければ、名前を登録する画面に遷移します の下に記述してください。

// ログインユーザを取得します
const user = ncmb.User.getCurrentUser();
if (!user) {
  // ログインしていないので config.html に遷移する
  document.querySelector('#tabbar').setActiveTab(2);
  return;
}
page.querySelector('#name').innerHTML = user.get('name');

きちんと書けた場合には、アプリを読み込むと config.html が最初に表示されるはずです。

ログインする

次に config.html の実装に移ります。ここでは名前を決めてもらい、それを匿名認証した後のユーザー名として使います。確定ボタンを押した際のイベントは ons.getScriptPage().onInit に実装するのが基本です(onShowに実装するとイベントが何度も呼ばれるようになってしまいます)。

現在は以下のようになっています。ここは修正を加える必要はありません

// この画面が表示された時、一度だけ呼ばれるイベント
ons.getScriptPage().onInit = function() {
  // すでにログインしている場合には名前を表示する
  show.bind(this)();
  // 確定ボタンを押した際の処理
  this.querySelector('#save').onclick = saveUser.bind(this);
}

show 関数は次のようになっています。ここも修正を加える必要はありません

function show() {
  const user = ncmb.User.getCurrentUser()
  if (user) {
    this.querySelector('#name').value = user.get('name');
  }
}

確定ボタンを押した際の処理

確定ボタンを押した時のイベントは saveUser になります。コードは次のようになります。大事なのは入力された名前(name)を createUser に送っていることです。その結果が正常に終了したら、タブを一番初めの home.html に戻します。

// 確定ボタンを押した時の処理
async function saveUser(e) {
  try {
    e.preventDefault();
    const name = this.querySelector('#name').value;
    if (!name || name.trim() === '') {
      ons.notification.alert('名前を入力してください');
      return;
    }
    await createUser(name);
    document.querySelector('#tabbar').setActiveTab(0);
  } catch (e) {
    console.log(e);
  }
}

createUser の処理は次のようになります。

async function createUser(name) {
  // 匿名認証実行
  await ncmb.User.loginAsAnonymous();
  // ログインしているユーザ情報を取得
  const user = ncmb.User.getCurrentUser();
  // ACLを設定
  const acl = new ncmb.Acl;
  acl
    .setPublicReadAccess(true) // 全体読み込み可能
    .setUserWriteAccess(user, true); // ユーザ自身は書き込み可能
  // 更新
  await user
    .set('name', name)     // 入力された名前
    .set('working', false) // 勤務中のフラグ。デフォルトはfalse
    .set('acl', acl)       // ACL
    .update();             // 更新処理
}

ncmb.User.loginAsAnonymous() は匿名認証を行う処理です。この一行だけで匿名認証が完了します。匿名認証が完了すれば、 ncmb.User.getCurrentUser() でユーザー情報が取得できます。このユーザーはデフォルトで次のようなACLになっています。

  • ユーザー自身のみ読み書き可能

これでは、ほかの従業員から名前を見ることができませんので、ACLを次のように更新します。

  • 全体から読み込み可能(ユーザー自身含む)
  • ユーザー自身は書き込み可能

そして入力された名前を name として、さらに勤務中かどうかのフラグ 'working` をデフォルト falseとして適用し、保存します。これで認証処理が完了します。

まとめ

ここまでの流れで、NCMBを使った匿名認証の処理が完了しました。あえてID、パスワード認証をしなくとも、手軽に認証処理が実装できます。次回は出退勤データを保存する流れを開設します。

次回のブログ記事はこちらです。 Monacaとニフクラ mobile backendを使って勤怠管理アプリを作ろう【その2:データの保存と表示処理を実装する】

中津川 篤司

中津川 篤司

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