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でデモが動かせるようになりました。ファイルをアップロードして表示(ダウンロード)するだけのデモですが、以下で試せます。
まとめ
React Native SDKはネイティブに依存する機能を除いて、すべての実装が完了しています。React Native(Webを含む)でサーバ機能が必要になりましたら、ぜひ使ってみてください。