Vue.jsでobnizをつかおう

IoTツールであるobnizをReactから使う記事を先日書きましたが、
Vue.js版もほしい！との声があったので書いてみます。

気持ち、Vue版のほうがハマリポイント少なかったです。

vue版のobniz連携！

やっぱりリアルタイムレンダリングが気持ちいい！ pic.twitter.com/35o1h3OQ9i

— kido (@9wick) June 11, 2020

とにかく結論だけ知りたいんだという方は、こちらのgithubを参照ください。

dialog-polyfill が必要

obnizの内部ではdialog-polyfillを使っています。（nodejs版では不要ですが、HTML版にwebpackする際に必要）。

npm install で入れてしまいましょう

npm install -D dialog-polyfill

リソース読み込みのためにyamlファイルを読み込めるようにする

obniz.js内部ではcssファイルやyamlファイルを扱っています。
vueで使われているwebpackのデフォルト設定ではこれらを読み込むことができないので、
コレを読めるようにします

Reactの場合はここでcssも読めるように変えましたが、vueの場合は大丈夫でした。

npm i -D json-loader yaml-loader 

webpackの設定のrulesにもyamlが読めるように設定します。
vue内部で使われるwebpackの設定は、vue.config.jsを使って設定します。

vue.config.js

module.exports = {

  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(yml|yaml)$/,
          use: [
            {
              loader: require.resolve('json-loader'),
            },
            {
              loader: require.resolve('yaml-loader')
            },
          ],
        },
      ]
    }
  }
}

obnizとvueで使うときのサンプル

ここまでの対策でobnizは無事に動くようになります。
どんなふうにobnizとvueを使うとよいかちょっと書いてみましょう。

connectする前にはobniz.displayやobniz.switchなどのプロパティにアクセスできない

obniz.onconnectが呼ばれるまでは、obnizのプロパティは一部存在しなく、obniz.displayなどにアクセスすることはできません。

obnizにはconnectionStateというプロパティがあるので、コレを使って接続中かどうか判断します。

 ...

  methods: {
    handleChange : function(e){
      const text = e.target.value;
      if(this.obniz.connectionState === "connected"){
        this.obniz.display.clear();
        this.obniz.display.print(text);
      }
    }
  }

 ...

コールバック関数の設定タイミング

スイッチの入力などのコールバック関数の設定タイミングに注意する必要があります。

vueのDOMが作られる瞬間に、obnizがオンラインなのか未接続なのかは状況次第になります。
未接続の場合はonconnectが呼ばれた段階でコールバック関数を設定したいですが、接続済みの場合はその後onconnectが呼ばれることはないので、そこに設定しても動作しません。

そこで、ここでも接続状況教によって場合分けをする必要があります。

また、この際、obniz.onconnectを上書きすると、他のところで設定しているものが使えなくなるので、
１つしか登録できないobniz.onconnectではなく、obniz.on('connect', ()=>{ ... })を使いましょう

※obniz.on('connect', ()=>{ ... })はいくつ登録しても、全部の関数が呼ばれます。

export default {
  ...
  created : function() {
    if (this.obniz.connectionState === "connected") {
      this.setupObniz();
    } else {
      this.obniz.on('connect', () => {
        this.setupObniz();
      })
    }
  },

  methods : {
    setupObniz : function(){
      this.obniz.switch.onchange = (state) => {
        this.switchState = state;
      }
    }
  }

 ...
}

　というわけでサンプル

こちらのgithubに上げています。
https://github.com/9wick/obniz-vue-sample

obnizIDの設定だけ変えてもらえればこんな形でうごきます。
https://github.com/9wick/obniz-vue-sample/blob/master/src/App.vue#L28

vue版のobniz連携！

やっぱりリアルタイムレンダリングが気持ちいい！ pic.twitter.com/35o1h3OQ9i

— kido (@9wick) June 11, 2020