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

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

React Native SDK ver.2系の使い方【Installationとプッシュクラスの使い方】

f:id:mbaasdevrel:20180306160753p:plain

React NativeでmBaaSを使いやすくするReact Native SDKを非公式に開発しています。

NCMBMania/ncmb-react-native: NCMB SDK for React Native

これまでJavaScript SDKに似せる形で開発してきましたが、TypeScriptに沿った形で書くのに限界があったこと、React Native for Webでも使える形にしたかったので、バージョンアップすることにしました。これまでとは互換性はありませんが、より使いやすくなったはずです。

今回はプッシュ通知に関わるInstallationおよびプッシュクラスの使い方について解説します。

インストール

SDKのインストールはnpmで行います。

npm i ncmb-react-native

読み込み

import NCMB, { NCMBInstallation, NCMBPush } from 'ncmb-react-native';

読み込めるライブラリはほかにも下記があります。

  • NCMBUser(会員管理)
  • NCMBObject(データストア。保存、更新、削除)
  • NCMBQuery(データストア。検索、取得)
  • NCMBFile(ファイルストア)
  • NCMBAcl(権限管理)
  • NCMBRole(ロール、ユーザやロールのグルーピング)
  • NCMBRequest(NCMBへのリクエスト用。通常は利用しません)
  • NCMBRelation(データストアのリレーション)
  • NCMBGeoPoint(位置情報)
  • NCMBInstallation(デバイストークン)
  • NCMBPush(プッシュ通知)

初期化

SDKの初期化はアプリケーションキーとクライアントキーで行います。

const applicationKey = 'YOUR_APPLICATION_KEY';
const clientKey = 'YOUR_CLIENT_KEY';
new NCMB(applicationKey, clientKey);

Installationについて

Installationの保存

デバイストークンは NCMBInstallation クラスで管理します。なお、デバイストークンの取得自体は別途行う必要があります。React Native SDKはWebにも対応しているため、デバイストークンの取得機能はありません。

const installation = new NCMBInstallation;
await installation
  .set('deviceToken', 'aaa')
  .set('deviceType', 'ios')
  .save();

Installationの更新

更新は作成と同様に save メソッドで行います。

await installation
  .set('message', 'Hello')
  .save();

Installationデータの取得

データを一件だけ取得する場合は fetch メソッドが便利です。別なデバイスなどから更新された場合、これでアプリ内部のデータを更新できます。

await installation.fetch();

Installationデータの削除

削除は delete メソッドで行います。

await installation.delete();

Installationの検索

保存されているデバイストークンを検索する処理は次のように書きます。 NCMBInstallation.query() はNCMBQueryが返ってきますので、自由に条件を設定して検索を行えます。

const query = NCMBInstallation.query();
const ary = await query
  .fetchAll();

プッシュ通知について

プッシュ通知は NCMBPush クラスで管理されます。

プッシュ通知の作成

プッシュ通知を作成するコードです。NCMBInstallationクラスと同様にNCMBObjectを継承しているので、使い方はほぼ同じです。

const push = new NCMBPush;
await push
  .set('immediateDeliveryFlag', true)
  .set('target', ['ios'])
  .save();

プッシュ通知の更新

更新も save メソッドを使います。

await push
  .set('immediateDeliveryFlag', true)
  .set('target', ['ios'])
  .save();

プッシュ通知の削除

削除は delete メソッドになります。

await push.delete();

プッシュ通知の取得

一件だけ取得する際には fetch メソッドを使います。

await push2
  .set('objectId', push.get('objectId'))
  .fetch();

プッシュ通知の検索

プッシュ通知の検索は query メソッドで返ってきたNCMBQueryを使って行います。検索条件は自由に設定できます。

const query = NCMBPush.query();
const ary = await query
  .equalTo('objectId', 'aaa')
  .fetchAll();

プッシュ通知の配信先を絞り込む

プッシュ通知の配信先を絞り込む場合 searchCondition を使います。React Native SDKでは、この条件をNCMBQueryを利用して行えます。これであれば詳細な条件を指定したプッシュ通知も簡単に送れるでしょう。

// 配信条件
const query = NCMBPush.query();
query
  .equalTo('objectId', 'aaa');
// プッシュ通知作成
const push = new NCMBPush;
await push
  .set('immediateDeliveryFlag', true)
  .set('message', 'Hello')
  .set('searchCondition', query) // ← 配信条件設定
  .set('target', ['ios'])
  .save();

まとめ

React Native SDKはネイティブに依存する機能を除いて、すべての実装が完了しています。React Native(Webを含む)でサーバ機能が必要になりましたら、ぜひ使ってみてください。

Installationはデバイストークンの取得処理を実装していないので注意してください。また、作成時には deviceToken と deviceType が必須です。プッシュ通知は deliveryTime または immediateDeliveryFlag が必須なので注意してください。

NCMBMania/ncmb-react-native: NCMB SDK for React Native

中津川 篤司

中津川 篤司

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