Nefry BTのLEDをWebから制御する #nefry



Nefryクラウドを使ってWebブラウザからNefry BTのLEDの色を変えてみます。

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

> 注: Nefryクラウドはテスト的に作ってるので急になくなる場合もあります。ご利用はご自身の責任で。

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

> バグってたのでそのうち修正 ~~ホスティングもしたのでここにキー入れるだけでも出来そうです https://n0bisuke.github.io/nefrycloud/~~

## 環境

* Nefry BT R2
* Nefry ライブラリ v1.1.1
* Arduino IDE v1.8.5
* macOS High Sierra
* Google Chrome v63

## Nefryクラウド登録

[こちら](http://cloud.nefry.studio:1880/nefrysetting/)から登録します。

APIキーを取得しましょう。

## Nefry BTにプログラムを書き込む

[Nefry Cloudライブラリ](https://drive.google.com/open?id=15wHNn3ceyG7f0QEh2PPrnWGt0kIyStfW)をArduino IDEに読み込ませます。

以下のスケッチをNefry BTに書き込みます。

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

NefryCloud nefryCloud;

void onpush(String message);

void setup() {
  nefryCloud.begin("user","apikey");//サイトで登録したuser,メールで受け取ったapikeyを入力してください
  nefryCloud.on(onpush);
  Nefry.setProgramName("NefryBT Nefry Cloud");
  analogRead(A0);
}

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

void onpush(String message) {//Nefryクラウド(仮)から通知が来ます
  Nefry.print("onpush : ");
  Nefry.println(message);

  if(message.equals("red")){
    Nefry.setLed(255,0,0);
  }else if(message.equals("green")){
    Nefry.setLed(0,255,0);
  }else if(message.equals("blue")){
    Nefry.setLed(0,0,255);
  }
}
```

これでNefryクラウドから情報が送られてきたらLEDの色が変わるようになりました。

## 制御用のWebサイト作成

以下のhtmlファイルを作成し、ブラウザで確認します。

```index.html
<html>
    <head>
        <meta charset="utf-8">
        <title>Nefry BT LED制御するやつ</title>
    </head>

    <body>
        <h1>Nefry BT LED制御するやつ</h1>
        
        <div>
            User: <input type="text" id="user" />
        </div>

        <div>
            API Key: <input type="text" id="apikey" />
        </div>

        <div>
            LED Color: 
            <input type="button" class="red" value="red" />
            <input type="button" class="green" value="green" />
            <input type="button" class="blue" value="blue" />
        </div>

        <a href="http://cloud.nefry.studio:1880/nefrysetting/" target="_blank">API Keyの取得</a>

        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script>
            'use strict';

            const $buttons = document.querySelectorAll('input[type=button]');
            const BASE_URL = `http://cloud.nefry.studio:1880/nefrysetting/setdata`;

            const ncPost = (ref) => {
                const USER = document.querySelector('#user').value;
                const APIKEY = document.querySelector('#apikey').value;
                const COLOR = ref.toElement.value;
                const API_ENDPOINT = `${BASE_URL}?user=${USER}&key=${APIKEY}&data=${COLOR}`

                axios.post(BASE_URL,{
                    user: USER,
                    key: APIKEY,
                    data: COLOR
                })
                .then(response => console.log(response))
                .catch(error => console.log(error));

                //GETの場合
                // axios.get(API_ENDPOINT)
                // .then(response => console.log(response))
                // .catch(error => console.log(error));
            }

            $buttons[0].addEventListener('click', ncPost);
            $buttons[1].addEventListener('click', ncPost);
            $buttons[2].addEventListener('click', ncPost);
            
        </script>

    </body>
</html>
```

## 使ってみる

説明するまでもないくらいシンプルなフォームしかないです。笑

![](https://i.gyazo.com/f7240ebfb3ae3e65f96b0ef9e362745b.png)

`User`と`apikey`を入れてボタンを押すとNefry BTのLEDの色が変わりました！

## 終わりに

Nefry BT -> Webにはいくつか実装がありましたが、 Web -> Nefry BTの例は少なかったので参考になれば幸いです。