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

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

jQueryプラグインでNCMBの認証を簡単に導入しよう

f:id:mbaasdevrel:20171212211252p:plain

mBaaSは皆さんのアプリ開発を簡単にする仕組みです。サーバサイドが不要になることでサーバサイドのコードはゼロになりますが、その代わりにクライアント側のコードが増えてしまいがちです(ロジックをすべて実装するため)。そこでよく使われる機能、処理フローについてはコンポーネント化することでさらに簡単に使えるようになります。

認証周りを簡単に行うためのjQueryプラグイン ncmb_login_jquery のテンプレートをライブラリ側に持たせることによって、もっと簡単に使えるようにしました。

続きを読む

会員登録/ログイン処理を簡略化するjQueryプラグインがBootstrapに対応しました

f:id:mbaasdevrel:20180214180352p:plain

会員登録とログイン処理を簡略化できるjQueryプラグインをBootstrapでも使えるように更新しました。ソースコードはNCMBMania/ncmb_login_jquery: ログイン処理のコードを簡略化できるフォームです。にて公開されています。

動作

動作は次のようになります。モーダルを使うので画面遷移なく実現できます。

f:id:mbaasdevrel:20180214190215g:plain

使い方

会員登録は次のように実装します。モーダル要素に対してsignUpメソッドを実行します。

$('#signUpButton').on('click', (e) => {
  $('#loginForm').signUp(
    (user) => {
      console.log(user);
      $('#result').text(`サインアップしました。userName -> ${user.userName}`);
    },
    (err) => {
      $('#result').text(`エラー -> ${JSON.stringify(err)}`);
    }
  );
});

モーダルは次のようになっています。

<div class="modal" tabindex="-1" role="dialog" id="loginForm">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">サインアップ</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form class="form">      
        <div class="modal-body">
          <div class="form-group">
            <label for="inputUserName">ユーザ名</label>
            <input type="text" id="userName" value="jqueryuser9" class="form-control" />
          </div>
          <div class="form-group">
            <label for="inputPassword">パスワード</label>
            <input type="password" id="password" value="jqueryuser9" class="form-control" />
          </div>
          <div class="form-group" id="password_confirmation_field">
            <label for="inputPasswordConfirmation">パスワード(確認入力)</label>
            <input type="password" id="password_confirmation" value="jqueryuser9" class="form-control" />
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">サインアップ</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">キャンセル</button>
        </div>
      </form>
    </div>
  </div>
</div>

さらにログインは次のようになります。会員登録とほぼ変わりません。

// ログイン
$('#signInButton').on('click', (e) => {
  $('#password_confirmation_field').hide();
  $('#loginForm').signIn(
    (user) => {
      $('#result').text(`ログインしました。userName -> ${user.userName}`);
    },
    (err) => {
      $('#result').text(`エラー -> ${JSON.stringify(err)}`);
    }
  );
});

依存性

Bootstrapのモーダル機能をそのまま使えます。BootstrapもjQueryに依存していますので、安心できます。

使い方

まず Bootstrap とncmb_login_jquery/ncmb_login_jquery.js at master · NCMBMania/ncmb_login_jqueryを読み込みます。

<script src="jquery.min.js"></script>
<script src="bootstrap.bundle.min.js"></script>
<script src="ncmb_login_jquery.js"></script>

そして ncmb_login_jquery.js を初期化します。アプリケーションキー、クライアントキーはそれぞれ自分のアプリのものを指定します。

$('#loginForm').initialize({
    applicationKey: applicationKey,
    clientKey: clientKey
});

オプションはこの他、以下が使えます。

  • userName
    ユーザ名入力用のフィールドをid指定します。デフォルトは #userName。
  • password
    パスワード入力用のフィールドをid指定します。デフォルトは #password。
  • password_confirmation
    パスワード確認入力用のフィールドをid指定します。デフォルトは #password_confirmation。

処理内容

処理としてはモーダルを表示し、フォームの送信処理をフックして会員登録またはログイン処理を行っています。モーダル表示なので画面遷移する必要もありませんし、返り値はログイン後のユーザ情報になっています。

まとめ

jQueryプラグイン化することで処理が隠蔽化されつつ、手軽に使えるようになります。ぜひお試しください。

このデモはJSFiddleで試せます。

中津川 篤司

中津川 篤司

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

Amazon Echoからプッシュ通知を送る

f:id:mbaasdevrel:20180209175819p:plain

最近、スマートスピーカーが流行っていますね。Amazon Echo、Google Home、LINE Clova、HomePodなど多彩に出てきています。多くのスマートスピーカーは単なるBluetoothスピーカーではなく、音声認識とAIによって音声操作ができるようになっています。

今回はAmazon Echoを使ってプッシュ通知を送る仕組みを作ってみます。うまく使えばリモートにいる人に対して音声でプッシュ通知を送ることだってできるでしょう。

続きを読む

ハイブリッドアプリを作るのに使いたいUIフレームワーク10選

f:id:mbaasdevrel:20180209164811p:plain

Monacaを使えばiOS/Android両方で動作するハイブリッドアプリが開発できます。しかしハイブリッドアプリという技術上、特定のUIフレームワークがありません。そのためアプリっぽく動作する部分を自分で工夫しなければなりません。

しかし、そのためのUIフレームワークはすでに多数存在します。これらを使えば、より優れたUI/UXのアプリが開発できるでしょう。

続きを読む

これからSwiftを学ぶためのオンラインリソース6選

f:id:mbaasdevrel:20180209155951p:plain

iOSは2014年に突如、Swiftを採用しました。とは言え、言語のバージョンアップも頻繁なことから、今なおObjective-Cをメインに使っているプログラマも多数います。しかし今後の開発についてはSwiftの採用が望ましいでしょう。

これからSwiftを学習していこうと考える方にお勧めのリソースを紹介します。

続きを読む

既存のカンバンシステムをmBaaSに置き換えてみよう(ログイン)

f:id:mbaasdevrel:20180121110856p:plain

既存のWebアプリケーションのバックエンドをmBaaSに置き換えてみる連載になります。一つずつ順番に紹介していきますので、同じようなシステムのリプレイスで参考にしてもらえるはずです。

前回はタスクのインポート、エクスポートに対応しましたので、今回は新しい機能として認証を追加したいと思います。認証を追加することで不特定多数の人たちに操作させるのではなく、認証したチームメンバーだけ使えるようになります。

続きを読む