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

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

React Native用SDKでプッシュ通知に対応しました!

f:id:mbaasdevrel:20180306160753p:plain

最近盛り上がりを見せているハイブリットアプリ開発用フレームワークのReact Native向けSDKを非公式ながら開発中です。今回はついにプッシュ通知に対応しました。まだトークンの受信と通知の受信くらいしか対応していませんが、今後に期待してください。Androidではまだテストしていませんので、今回はiOSでの実装方法です。

続きを読む

スロークエリを防ぐクラス設計をしよう!

f:id:mbaasblog:20180315132439p:plain

毎日、アプリに対して様々なリクエストが投げられるかと思います。そんな中、大量データの入っているクラスに対するリクエストや、クラスに対する検索内容が複雑なリクエストの場合、レスポンスまでかなり時間がかかってしまうことがあります。この様な検索に時間のかかるリクエストを、「スロークエリ」と言います。スロークエリが大量発生すると、アプリユーザー様のイライラを招いてしまうだけではなく、mobile backend システム全体の負荷も高まってしまい、アプリを一時停止させていただく・・・といった大事態に発展することもあります。 今回は上記現象を回避していただくために、スロークエリを発生させないクラス設計方法を、例と共にご紹介したいと思います!

続きを読む

プレママ向けアプリを使ってみた~

f:id:mbaasblog:20180307093902p:plain

皆さん、こんにちは。ニフクラ mobile backend (以下mBaaS) の運用・サポートを担当しています、ズオンです。 実は最近妊娠をしていて、プレママになりました。初めてのこと、気持ちは嬉しいですが、分からないことだらけで色々戸惑っています!専門の本を貸して勉強する方法もありですが、仕事も家事もあるので、ちゃんと勉強する時間が取れません。通勤の電車に乗りながら、プレママの知識をアプリでゲットしてます。

今回はそんな自分に役に立ったアプリを簡単に紹介したいと思います~ また、普段mBaaSを運用していて、アプリを作っている方々をサポートしながら、色々アプリを見てきました。 今回自分はアプリを使う側になり、違う観点でアプリを触って気づいたこともお話できたらと思います!

続きを読む

近日公開『mBaaSマスター育成有償講座』開講のお知らせ

f:id:mbaasblog:20180227194346p:plain

mBaaSユーザーの皆様、こんにちは。セミナー担当している池田ですヽ(•̀ω•́ )ゝ✧ mBaaSの使い勝手はいかがですか? まだまだ知らない機能や 実は使っている機能でも半分も使いこなせてないなんてこともあるかもしれません。 もっともっとmBaaSを知っていただくためにちょっと今いろいろ企画をしています٩(๑❛ᴗ❛๑)۶

続きを読む

mBaaSのアカウントを引き継ぐ方法

f:id:mbaasblog:20180228165446p:plain

ニフクラ mobile backend (以下mBaaS) は無料ではじめることができるため、会社内でスマホアプリ開発を行う際に、開発当初は個人のアカウントで利用していたけれど、他の方にアカウントを引き継ぎたい場面があります。例えばアプリが運用モードになって開発者と運用者が変わったり、部署異動にともなって担当が変わったときなどが想定されます。

今回は、mBaaSで、AさんがSNSアカウント(google)でmBaaSを利用し始め、そのうちBさんのSNSアカウント(google)に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」活動をスタート。