概要

最近話題のReactjsベースでネイティブアプリを構築できるフレームワーク「React Native」
サーバー側と連携したいアプリを作りたい時に便利なのが「mobile backend as a Service(mbaas)」

今回はニフティクラウド mobile backendをReact Nativeで使用する方法を試してみる

環境

使用した環境

node.js
- 5.0.0
react-native
- 0.1.7
xcode
- 7.2

プロジェクト作成

まずは以下のコマンドを実行してReact Nativeのプロジェクトを作成

$ react-native init {project_name}

SDKをダウンロード

ニフティクラウド mobile backendはSDKとしてiOS用、Android用、Javascript用のSDKを提供している。
React NativeでiOSアプリを作る場合、iOS用とJavascript用どっちのSDKを使うべきか悩ましいところ。

React NativeはObjective-Cと簡単に連携できるので、今回は使い慣れているiOS用を使ってみる。

インストールはお馴染みのCocoaPodsで。

Podfile

target 'ncmb' do
    pod 'NCMB', :git => 'https://github.com/NIFTYCloud-mbaas/ncmb_ios.git'
end

$ pod install

Objective-C側の実装

mobile backendのコントロールを実施するクラスを作成する。
プロジェクトディレクトリに以下の2ファイルを作成。

NCMBController.h

#import "RCTBridgeModule.h"

@interface NCMBController : NSObject <RCTBridgeModule>
@end

NCMBController.m

#import "NCMBController.h"
#import <NCMB/NCMB.h>

@implementation NCMBController

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(init:(RCTResponseSenderBlock)callback)
{
  // APPLICATION_KEYとCLIENT_KEYはダッシュボードから取得してね
  NSString *const APPLICATION_KEY = @"";
  NSString *const CLIENT_KEY      = @"";
  
  // mobile backendアプリとの連携
  [NCMB setApplicationKey:APPLICATION_KEY clientKey:CLIENT_KEY];
  callback(@[@"init ok"]);
}

RCT_EXPORT_METHOD(post:(NSString *)msg callback:(RCTResponseSenderBlock)callback)
{
  // TestClassへmessageを登録する
  NCMBObject *obj = [NCMBObject objectWithClassName:@"TestClass"];
  [obj setObject:msg forKey:@"message"];
  [obj saveInBackgroundWithBlock:^(NSError *error) {
    if (error){
      NSLog(@"[ERROR] %@", error);
    } else {
      callback(@[@"post ok"]);
    }
  }];
}

RCT_EXPORT_METHOD(fetch:(RCTResponseSenderBlock)callback)
{
  // TestClassからmessageを取得する
  NCMBQuery *query = [NCMBQuery queryWithClassName:@"TestClass"];
  [query findObjectsInBackgroundWithBlock:^(NSArray *objects, NSError *error) {
    if (error){
      NSLog(@"[ERROR] %@", error);
    } else {
      NSString * resp = @"";
      for (NCMBObject * object in objects) {
        NSString * message = [object objectForKey:@"message"];
        resp = [resp stringByAppendingString: [@"\n" stringByAppendingString:message]];
      }
      callback(@[resp]);
    }
  }];
}
@end

ポイント

React NativeとObjective-Cの連携は、「RCTBridgeModule」プロトコルを実装したクラスを作成することで実現できる。
mobile backendを操作するために、RCT_EXPORT_MODULEで「init」「post」「fetch」3つのメソッドをreact側から呼べるようにしておく。

React側の実装

index.ios.jsを以下のように修正

index.ios.js

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  Text,
  View,
  TextInput,
  StyleSheet,
} = React;
// Objective-Cモジュールの読み込み
var NCMBController = require('NativeModules'). NCMBController;

var ncmb = React.createClass({
  getInitialState() {
    // init
    NCMBController.init((resp) => {});
    return{message:"", postData:""};
  },
  componentDidMount() {
    this.fetchData();
  },
  render: function() {
    return(
      <View style={styles.container}>
        <TextInput
          style={styles.input}
          onChangeText={(text) => this.setState({postData: text})}
          onBlur={(event) => this.submit(event)} />
        <Text>
          {this.state.message}
        </Text>
      </View>
    )
  },
  fetchData: function() {
    // データ取得
    NCMBController.fetch((resp)=> {
      this.setState({message:resp});
    });
  },
  submit: function(event) {
    var message = this.state.postData;
    // データ登録
    NCMBController.post(message, (resp) => {
      this.fetchData();
    });
  },
});


var styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 40,
    backgroundColor: '#F5FCFF',
  },
  input: {
    height: 40,
    borderWidth: 1,
    borderColor: 'gray',
    padding: 10,
    margin: 10,
    fontSize: 15,
  },
});
AppRegistry.registerComponent('ncmb', () => ncmb);

ポイント

NativeModuleを使うことでObjective-Cのメソッドを呼べる
submit()メソッドにてテキストボックスに入力した値をmBaaSに保存
fetchData()メソッドでmBaaSから値を取得

取得したデータは通常のReactのお作法と同じでsetStateすることで、Viewに表示させる

画面

Simulator Screen Shot 2015.12.22 0.16.36.png

まとめ

Objective-Cを通すことで、React NativeからmBaaSへのデータ保存、取得が簡単にできた。
しかしObjective-Cを結構書かないといけないのが辛いところ。
次回は全部Javascript上で実装してみたい。

以上、NIFTY Cloud Advent Calendar 2015