JavaScript SDKのキッチンシンクアプリを作る【認証編】 - ニフクラ mobile backend（mBaaS）お役立ちブログ

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

元々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となっています。

変更点

まず変更点として、設定ページを追加してあります。このページはアプリケーションキーとクライアントキーを入力するだけの画面です。実際の保存処理は次のようになります。

// 保存されているデータを取得
let application_key = localStorage.getItem('application_key');
let client_key = localStorage.getItem('client_key');

// 設定ページに関するイベント
if (page.matches('#setting')) {
  // デフォルト表示
  $('#application_key').val(application_key);
  $('#client_key').val(client_key);
  
  // 保存処理
  $(page).find('.save').on('click', function(e) {
    e.preventDefault();
    application_key = $('#application_key').val();
    client_key      = $('#client_key').val();
    localStorage.setItem('application_key', application_key);
    localStorage.setItem('client_key', client_key);
    ncmb = new NCMB(application_key, client_key);
    $('#navigator')[0].popPage();
  });
}

続いて設定画面の表示があります。これは page1.html にアイコンを追加し、その処理をapp.jsで行っています。基本的にはナビゲーション機能のスタックとして追加するだけです。

$(page).find('.showMenu').on('click', function(e) {
  e.preventDefault();
  $('#navigator')[0].pushPage('setting.html');
});

基本的にはこれらの変更によって、設定画面の表示とアプリケーションキー、クライアントキーの保存を行っています。なお、キーは両方ともlocalStorageの中に保存しています。

キーの保存ができれば、後は各機能を細かく作っていくだけになります。次回は認証機能について紹介します。