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

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

React Native SDK ver.2系の使い方【ファイルストアの使い方】

f:id:mbaasdevrel:20210123134614p:plain

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

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

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

今回はファイルストアの使い方について解説します。

インストール

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

npm i ncmb-react-native

読み込み

import NCMB, { NCMBFile } 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);

ファイルのアップロード

ファイルをアップロードするのは NCMBFile.upload になります。

static async upload(
  fileName: string,
  fileData: string | expoMediaFormat | Buffer,
  acl?: NCMBAcl,
  contentType?: string | null
): Promise<NCMBFile> {

使い方は次のようになります。スマートフォンネイティブアプリ、Webともに同じ使い方です。画像の選択は ImagePicker(expo-image-picker)を使っています。

const result = await ImagePicker.launchImageLibraryAsync({
  mediaTypes: ImagePicker.MediaTypeOptions.All,
  allowsEditing: true,
  aspect: [4, 3],
  quality: 1,
});
// ランダムなファイル名
const fileName = `${Math.random().toString(32).substring(2)}.jpg`;
const file = await NCMBFile.upload(fileName, result);

レスポンスであるfileはNCMBFileになります。

ダウンロード

コンテンツのダウンロードは NCMBFile.download になります。

const bin = await file.download('dataurl');

React Nativeで画像を表示する場合、dataURL で返却されなければいけません(または画像のURI)。そのため、引数に dataurl を指定します。そのほか text または binary が指定できます。必要に応じて使い分けてください。

画像表示を行うならば bin をそのままsourceにuriとして指定すればOKです。

ファイルのmimeTypeを指定する

バイナリの場合、mimeTypeを指定する必要はありません。テキストなどの場合は、別途指定可能です。3つ目の引数はACLです。

const file = await NCMBFile.upload(fileName, 'Hello, world', null, 'text/plain');

ACLはNCMBAclを使ってください。

const acl = new NCMBAcl;
acl
  .setPublicReadAccess(true)
  .setPublicWriteAccess(false);
const file = await NCMBFile.upload(fileName, 'Hello, world', acl, 'text/plain');

ファイルの検索

ファイルを検索する場合は NCMBFile.query() を使います。以下は拡張子が txt であるファイルを取得する例です。

const query = NCMBFile.query();
const files = await query.regularExpressionTo('fileName', /^.*?\.txt/).fetchAll();
assert.equal(files.length, 3);

デモ

React Native for Webに対応したことで、Expo Snackでデモが動かせるようになりました。ファイルをアップロードして表示(ダウンロード)するだけのデモですが、以下で試せます。

NCMB File Store - Snack

まとめ

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

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

中津川 篤司

中津川 篤司

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