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

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

Vue × Onsen UIでNCMBを使う方法

f:id:mbaasdevrel:20180323175835p:plain

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);
    })
},

f:id:mbaasdevrel:20180323175947p:plain

注意点

babel/polyfill を削除しています。これはBabelによって古いブラウザでもES2015のコードを動くようにするものです。これがなくなっているので古いブラウザでは動かないかも知れませんが、Vue.js自体がIE9をサポートしませんし、Onsen UIもハイブリッドアプリ向けなので特に問題にはならないでしょう。

まとめ

NCMBMania/ncmb_js: ニフクラ mobile backend JavaScript SDK版のJavaScript SDKを使えばVue × Onsen UIによるハイブリッドアプリでもmBaaSが活用できます。ぜひご利用ください!

中津川 篤司

中津川 篤司

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