Vue.jsでobnizをつかおう


IoTツールである[obniz](https://obniz.io)を[Reactから使う記事](https://qiita.com/wicket/items/324ab34bfdabeb5767cb)を先日書きましたが、
Vue.js版もほしい！との声があったので書いてみます。

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

<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="ja" dir="ltr">vue版のobniz連携！<br><br>やっぱりリアルタイムレンダリングが気持ちいい！ <a href="https://t.co/35o1h3OQ9i">pic.twitter.com/35o1h3OQ9i</a></p>&mdash; kido (@9wick) <a href="https://twitter.com/9wick/status/1271052593762992128?ref_src=twsrc%5Etfw">June 11, 2020</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

**とにかく結論だけ知りたいんだという方は、[こちらのgithub](https://github.com/9wick/obniz-vue-sample)を参照ください。**





### 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を使って設定します。

```javascript: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というプロパティがあるので、コレを使って接続中かどうか判断します。


```javaScript

 ...

  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', ()=>{ ... })`はいくつ登録しても、全部の関数が呼ばれます。



```javascript

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


<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="ja" dir="ltr">vue版のobniz連携！<br><br>やっぱりリアルタイムレンダリングが気持ちいい！ <a href="https://t.co/35o1h3OQ9i">pic.twitter.com/35o1h3OQ9i</a></p>&mdash; kido (@9wick) <a href="https://twitter.com/9wick/status/1271052593762992128?ref_src=twsrc%5Etfw">June 11, 2020</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>