JavaScript SDKのキッチンシンクアプリを作る【会員管理編】

キッチンシンクというのは、何かのフレームワークやライブラリがあった時に、その殆どの機能を体験できる仕組みになります。それがあることでフレームワークの全体像が分かったり、何か開発していて困った時に参考とできるコードになります。

元々MonacaとNCMBではアカウント連携機能があるのですが、NCMBからMonacaへ誘導した際にチュートリアルアプリを表示する機能は約1年ほど前になくなっています。チュートリアルアプリはデータの登録をしたり、写真を表示するアプリでした。つまりデータストアとファイルストアが体験できるというものです。アプリ自体はJavaScript SDKのver.1を使っていましたので、今となっては参考にはしづらいものでした。

今回から旧チュートリアルアプリに変わるキッチンシンクアプリを作っていきたいと思います。ステップを踏んで紹介していきますので、実際に試す際の参考にしてください。今回は会員管理機能について紹介します。

利用するフレームワーク

今回利用しているフレームワーク、ライブラリは次の通りです。

• Onsen UI
• Monaca CLI
• NCMB
• Bower

今回はOnsen UIをjQueryから使う形で進めています。ライブラリはBower経由でインストールしています。アプリのプレビュー表示を行うのに便利なのがMonaca CLIになります。インストールは Node.js をインストール後、 npm コマンドで行えます。

$ npm i monaca -g

ベースのコード

今回はNCMBMania/kitchensink-monaca: MonacaとJavaScript SDKを使ったキッチンシンクアプリです。にコードをアップロードしてあります。こちらを参考にしてください。ベースはOnsen UI V2 JS Navigationとなっています。

変更点

まず会員登録を行う処理です。今回はID/パスワードを使ったログインになります。

UIは次のようになります。

<ons-page id="idpw-register">
  <ons-toolbar>
    <div class="left"><ons-back-button>メイン</ons-back-button></div>
    <div class="center">ID/PWで新規登録</div>
  </ons-toolbar>

  <div class="content" style="text-align: center">
    <p>IDとパスワードを使って新規登録してください</p>
    <p>
      <ons-input placeholder="User name" float id="username">
      </ons-input>
    </p>
    <p>
      <ons-input type="password" placeholder="Password" float id="password">
      </ons-input>
    </p>
    <p>
      <ons-button modifier="large" style="margin: 6px 0" class="register">登録</ons-button>
    </p>
  </div>
</ons-page>

そして登録ボタンを押した時に、会員登録処理を行います。 showDialog は Onsen UIのダイアログを表示する関数です。

// IDとパスワードを使った会員登録に関するイベント
if (page.matches('#idpw-register')) {
  $(page).find('.register').on('click', function(e) {
    e.preventDefault();
    let user = new ncmb.User();
    user
      .set("userName", $('#username').val())
      .set("password", $('#password').val())
      .signUpByAccount()
      .then(function(obj) {
        // 登録完了
        showDialog('登録完了', '登録したID/パスワードでログインを行ってください');
      })
      .catch(function(err) {
        // 登録失敗
        showDialog('登録失敗', `登録に失敗しました<br />${err}`);
      })
  });
}

ログイン機能について

ログイン機能もID/パスワードを入力するのでUIは殆ど変わりません。ログイン処理は次のようになります。

// IDとパスワードを使った会員ログインに関するイベント
if (page.matches('#idpw-login')) {
  $(page).find('.login').on('click', function(e) {
    e.preventDefault();
    ncmb.User.login($('#username').val(), $('#password').val())
      .then(function(user){
        // ログイン後処理
        showDialog('ログイン完了', 'ログインしました');
        $('.member_login_status').text(user.userName);
        $('#navigator')[0].popPage();
      })
      .catch(function(err){
        // エラー処理
        showDialog('ログイン失敗', `ログインに失敗しました<br />${err}`);
      });
  });
}

ログアウト処理について

ログアウト処理は次のようになります。基本的にメソッドを実行するだけです。

$(page).find('.member_logout').on('click', function(e) {
  e.preventDefault();
  ncmb.User.logout()
    .then(function() {
      showDialog('ログアウト完了', 'ログアウトしました');
      $('.member_login_status').text('未ログイン');
    })
    .catch(function(err) {
      showDialog('ログアウト失敗', `ログアウトに失敗しました<br />${err}`);
    })
});

---

会員管理はさほど難しい処理ではありません。実装しておくとデータストアの管理などが適切なセキュリティに維持されるようになりますのでぜひ実装してください。