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

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

React Native用JavaScript SDKがファイルアップロードに対応しました

f:id:mbaasdevrel:20180306160753p:plain

スマートフォンアプリはSwiftやJavaのように特定のプラットフォームで利用できるもの、そしてUnityやMonacaのように複数のプラットフォームで動作するものがあります。React Nativeは後者に属する技術です。

以前React Native用SDKを開発していたのですが、バージョンアップなどに伴って利用できなくなっていました。そこでTypeScriptに沿う形で改めてReact Native SDKを開発しはじめました。なお、これは非公式のSDKになりますので、サポート外になります。

今回はファイルアップロード機能を紹介します。

使い方

ファイルアップロードはテキストファイル、バイナリファイルの二種類が想定されています。まずテキストファイルの場合です。二つ目の引数にファイルの内容をそのまま適用してください。

const file = new ncmb.File();
const res = await file.upload('test.txt', 'Hello, world!');

次にバイナリです。例えばカメラの写真をアップロードする場合です。この場合、画像のURIを指定します。以下はiOSの場合です。

const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
if (status === 'granted') {
  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.All,
    allowsEditing: false
  });
  const fileName = result.uri.match(/^.*\/([a-zA-Z0-9\-]*\.jpg)$/)[1];
  const file = new ncmb.File();
  const res = await file.upload(fileName, {uri: result.uri.replace('file://', ''), type: result.type});
}

Androidは次のようになります。

const result = await ImagePicker.launchImageLibraryAsync({
  mediaTypes: ImagePicker.MediaTypeOptions.All,
  allowsEditing: false
});
const fileName = result.uri.match(/^.*\/([a-zA-Z0-9\-]*\.jpg)$/)[1];
const file = new ncmb.File();
const res = await file.upload(fileName, {uri: result.uri, type: result.type});

ACLの扱い

ACLは3つ目の引数で指定してください。

const acl = new ncmb.Acl();
acl
  .setPublicReadAccess(true)
  .setPublicWriteAccess(false);
  const file = new ncmb.File();
  const res = await file.upload(fileName, {uri: result.uri, type: result.type}, acl);

セットアップ

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

npm i ncmb-react-native -S

まずライブラリを読み込みます。

import NCMB from 'ncmb-react-native';

そして初期化します。

import config from './config.json';
const ncmb = new NCMB(config.applicationKey, config.clientKey);

コード

SDKはNCMBMania/ncmb-react-native: NCMB SDK for React Nativeにて公開しています。ライセンスはMIT Licenseです。

まとめ

カメラの写真をアップロードする、作成したテキストデータを保存するなど、ファイルアップロードを利用する機会は多いかと思います。ぜひReact Nativeアプリで活用してください。

中津川 篤司

中津川 篤司

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