Monacaを開発するアシアル社が中心となって開発を進めているモバイルアプリ用のUIフレームワーク、Onsen UIは各種フレームワークに対応しています。その一つがVueです。日本でも人気の高いフレームワークとなっています。
そんなVue × Onsen UIの環境に対してNCMBのJavaScript SDKをインストールするとエラーになってしまいます。
node_modules/babel/index.js didn't return a function
その回避策として、JavaScript SDKをフォークしてNCMBMania/ncmb_js: ニフクラ mobile backend JavaScript SDKを作成しました。こちらはエラーの原因であるBabelを取り除いたものです。
インストール法
以下のようにリポジトリを直接指定します。
npm install github:NCMBMania/ncmb_js#master --save
初期設定
src/main.js にて以下のように読み込みます。
require('ncmb');
そして初期化します。
const applicationKey = 'YOUR_APPLICATION_KEY'; const clientKey = 'YOUR_CLIENT_KEY'; const ncmb = new NCMB(applicationKey, clientKey);
このncmbは使い回しますので、App.vueに送ります。
new Vue({ el: '#app', template:'<app :ncmb="ncmb"></app>', data: {ncmb}, components: { App } });
App.vueではpropsを使って受け取ります。
<script> import Vue from 'vue'; export default{ data() { return { title: 'My app' }; }, props: ['ncmb'], methods: { alert() { this.$ons.notification.alert('This is an Onsen UI alert notification test.'); } } }; </script>
使い方
簡単な使い方です。Appができあがった、createdでイベントを実行します。配列なので、Vue.setを使って変数の変化を通知するのがコツです。
created() { const Item = this.ncmb.DataStore('Item'); const me = this; Item .fetchAll() .then((items) => { Vue.set(me, 'items', items); }) },
注意点
babel/polyfill
を削除しています。これはBabelによって古いブラウザでもES2015のコードを動くようにするものです。これがなくなっているので古いブラウザでは動かないかも知れませんが、Vue.js自体がIE9をサポートしませんし、Onsen UIもハイブリッドアプリ向けなので特に問題にはならないでしょう。
まとめ
NCMBMania/ncmb_js: ニフクラ mobile backend JavaScript SDK版のJavaScript SDKを使えばVue × Onsen UIによるハイブリッドアプリでもmBaaSが活用できます。ぜひご利用ください!