monaca
onsenui
NCMB
mobilebackend
React

Onsen UI (React) + nifty mobile backendのアプリ開発でつまずいた点

More than 1 year has passed since last update.

Monaca + Onsen UI (v1) + nifty mobile backendで

nifty mobile backendの扱いが簡単だったため

タイトルの構成でも簡単に扱えると思いましたが2点ほどつまずきました。


Onsen UI (React) とは?

React Native + Material UIを組み合わせたようなことができます。

個人的に読み込むモジュールは少ない方が好きなので今回はOnsen UI (React) を試してみました。


Onsen UI (React) のインストール

https://ja.onsen.io/blog/getting-started-onsenui-with-react/


nifty mobile backendのインストール

npm install ncmb --save


つまずき1


  • ncmbをrequire(またはimport)するだけで下記のエラーが発生する

Error: apikey and clientkey required   


解決方法


  • node_modules/ncmb/lib/ncmb.js を直接修正 (参考)

 - 末尾の下記3行をコメントアウト

  // if (typeof define === 'function' && define.amd) {

// define([], NCMB);
// }


つまずき2


  • データストアに保存しようとすると下記のエラーが発生する

Error: SHA256 is not supported


解決方法

npm install webpack-sha-hash --save-dev


  • webpack.dev.config.jsのtry内に下記を追記

var WebpackSHAHash = require('webpack-sha-hash');


  • webpack.dev.config.jsのplugins内に下記を追記

new WebpackSHAHash()

※上記の2つを解決してもwarningレベルのエラーが2つ出るのが気になる...


マテリアルデザイン

Onsen UIは「iOSはフラットデザイン」「Androidはマテリアルデザイン」と自動的にデザインが使い分けられます。

どちらもマテリアルデザインで統一する方法


  • main.jsに下記2行を追記

import ons from 'onsenui'

ons.forcePlatformStyling('android');