enebularを使って、Nefry BTでもMilkcocoaでリモートLチカ！


こんにちは、ちゃんとくです！

この記事は[enebular Advent Calendar 2018](https://qiita.com/advent-calendar/2018/enebular) 8日目の記事です（すみませんすみません）。

今回はenebularを使って「[Nefry BT](https://dotstud.io/docs/nefrybt/)」というWi-Fi・BLE対応のマイコンボードをリアルタイムに遠隔操作してみたいと思います！

![Image from Gyazo](https://i.gyazo.com/3e6fc238c2c643defdb98337166c9334.gif)
（ブラウザで選択した色がNefryBTのLEDに即時反映されています）

## 今回作る仕組み
今回作成した全体フローはこんな感じです。
![Image from Gyazo](https://i.gyazo.com/e35827ed8ed3e3fa586f4322bd4ca244.png)

「milkcocoa」というリアルタイムDBに投入されるデータをenebularで監視して、NefryクラウドにPOSTして即時にNefry BTに反映する仕組みです。

enebularを触るのは初めてなので、稚拙なところはご容赦ください…！

### Nefry BT単体で Web → Nefry BTのpushは難しい
Nefry BT単体でWebの情報を取得する際は、通常「[当Qiita記事がいいねされたら電飾が光りまくるX'mas Internet of Tree をつくる](https://qiita.com/ukk0/items/566899520520f442ef4f)」や「[みんなでﾀﾞｧｼｴﾘｲｪｽ！遅延すると光るガジェット](https://dotstud.io/blog/train-nefry-ihandson-report/)」のように、定期的にNefry BT側からWeb側へ問い合わせる実装にします。

### Nefryクラウドが登場
そこでNefryシリーズ開発者である[わみ](https://qiita.com/wamisnet)さんが、「**Nefryクラウド**」という**Nefry BTで簡単にWebリクエストを受け取れるサービス**を作ってくれました！

- [Nefryクラウド（仮）をつくってみた](https://qiita.com/wamisnet/items/38d6a5ac8332b090d0c2)

こちらもenebular製で、ユーザ名とメールアドレスの入力ですぐに利用することができます。ちなみにわみさんの[こちらの記事](https://qiita.com/wamisnet/items/5833ee73c35fda76ec43)を参照しながらNefryクラウドを自作することもできます。

[![Image from Gyazo](https://i.gyazo.com/803809a91eb3c6b28fc78bc0c66ddd6a.png)](https://gyazo.com/803809a91eb3c6b28fc78bc0c66ddd6a)


## 手順1: Nefryクラウドの準備

わみさんの「[Nefryクラウド（仮）をつくってみた](https://qiita.com/wamisnet/items/38d6a5ac8332b090d0c2)」という記事を参照して、Nefryクラウドのアカウントを準備してください。メールを送るだけで完了です！

![68747470733a2f2f692e6779617a6f2e636f6d2f33306631343738613035393161613030663363336130326263373134643364382e706e67.png](https://qiita-image-store.s3.amazonaws.com/0/119003/db623254-2336-f146-8b47-d9b927d34f93.png "68747470733a2f2f692e6779617a6f2e636f6d2f33306631343738613035393161613030663363336130326263373134643364382e706e67.png")

HTTPでPOSTリクエストを送ると、Nefry BTで受け取れる状態になりました。

## Milkcocoaの情報をenebularで受け取る
enebularでは「milkcocoa」ノードを使って、簡単にmilkcocoaのデータストアを連携できます。
[![Image from Gyazo](https://i.gyazo.com/6ce8a703dea887d3e326b4c63e482128.png)](https://gyazo.com/6ce8a703dea887d3e326b4c63e482128)

本来は自分でmilkcocoa上にappとDataStoreを作成しますが、milkcocoaの[ドット絵](https://mlkcca.com/sample.html)の情報は下記のようなIDで受け取ることができます。
[![Image from Gyazo](https://i.gyazo.com/9b45e79bad96163777a81c3bda88c278.png)](https://gyazo.com/9b45e79bad96163777a81c3bda88c278)

デバッグノードで表示するとリアルタイムにデータが取得されているのがわかります。
[![Image from Gyazo](https://i.gyazo.com/dac5dc9ea2f36f691beebaa70a32c507.gif)](https://gyazo.com/dac5dc9ea2f36f691beebaa70a32c507)

## 色情報を抜き出してデータを整形する
milkcocoaで受け取ったデータから、必要な情報（今回はカラーコード）を抜き出してNefryクラウドにPOSTする形に整形します。

![Image from Gyazo](https://i.gyazo.com/5b940e448575b5f52f55fb4481ffaf75.png)

enebularでは`msg.payload`にデータが入ってきます。`value.color`の値のみ欲しいので、`msg.payload.value.color`という形で色情報を取得します。

NefryクラウドへのPOSTはJSON形式で、下記のような形で送信します。

```
{user: "ユーザ名", key: "Key", data: "送信したい文字列"}
```

取得した色情報を合わせて、下記のように整形します。

```
const color = msg.payload.value.color;
msg.payload = { user: "ユーザ名", key: "Key", data: color };

return msg;
```

`msg.payload`に値を詰めることで、次のノードへ渡されます。

## NefryクラウドへPOSTする
HTTPノードを使ってNefryクラウドへPOSTします。
![Image from Gyazo](https://i.gyazo.com/4d209a84b743649404d0d9213e311636.png)

ドメインはNefryクラウドの`http://cloud.nefry.studio:1880/nefrysetting/setdata`、出力形式はJSONを指定します。

Nefry BTのシリアルモニタで正しく受信できているか確認しておきましょう。

## Nefry BTのプログラム



Nefry BTのLEDはR, G, Bそれぞれの値を0〜255で渡して表現するため、受け取ったカラーコードをRGB値に変換します。

カラーコードは`#RRGGBB`という形でRGB値を16進数で表現したものなので、プログラム内でカラーコードの文字列を分解し、それぞれ10進数に変換しています。

```
#include <Nefry.h>
#include <NefryCloud.h>

NefryCloud nefryCloud;

char* USER = "ユーザ名";
char* KEY = "Key";

void onpush(String message);

void setup() {
  nefryCloud.begin(USER, KEY);
  nefryCloud.on(onpush);
  
}

void loop() {
  nefryCloud.loop();
}

void onpush(String message) {
  Nefry.print("color code: ");
  Nefry.println(message);
  String redHex = message.substring(1,3);
  String greenHex = message.substring(3,5);
  String blueHex = message.substring(5,7);

  int red = convertDEC(redHex);
  int green = convertDEC(greenHex);
  int blue = convertDEC(blueHex);
  
  Nefry.setLed(red, green, blue);
}

int convertDEC(String stringHex) {
   char buf[3];
   int len = stringHex.length();
   stringHex.toCharArray(buf, len+1);
   long n = strtol(buf, NULL, 16);
   Nefry.println(n);
   return n;
}
```

Nefry BTにプログラムを書き込み、確認してみます。

![](https://i.gyazo.com/f2c57aefe09392b32b337a413cdc82da.gif)

## 挙動
リアルタイムな色変化を試してみます。
![Image from Gyazo](https://i.gyazo.com/3e6fc238c2c643defdb98337166c9334.gif)

やった〜〜！ラグ無く反映できています！

enebular初心者なのでデータ受け渡しまわりでちょっとハマってしまいましたが、自作すると何かと面倒な連携やHTTPリクエストをサクッと作ることができました！

相談にのってもらった @tseigo さん、Nefryクラウドの @wamisnet さん、ありがとうございました！！