Arduinoをブラウザから動かした話

# はじめに
Arduinoをブラウザから動かせたので後でまた再現できるようここにメモとして残したいと思います。

# 使用するもの
- Arduino Uno
- Arduino IDE
- Node.js
- Express Generator
- Google chrome
- LED
- 抵抗100Ω
- ジャンパー線
- ブレッドボード
- USB

こんなところですかね？

# Hello World
電子創作のHello WorldはLチカです。
が、この記事では飛ばします。
[JavaScriptエンジニアへのIoTのすすめ：Node.jsとArduinoでスマートデバイスのプロトタイプをしてみよう](https://html5experts.jp/girlie_mac/17684/)
を見てください。  
注意点ですが、上の記事通りに進めてもWindowsではエラーを吐かれます。

```javascript
var five = require('johnny-five');
var board = new five.Board();
```

のところを

```javascript
var five = require("johnny-five");
var board = new five.Board({port:%ポート番号%});
```

にしないとダメです。  
ポート番号はArduino IDEの『ツール→シリアルポート』から確認できます。

例えば、シリアルポートが `COM1` であれば、

```javascript
var five = require("johnny-five");
var board = new five.Board({port:"COM1"});
```

になります。

また、 `npm install johnny-five`に加え、`npm install firmata`も実行する必要があります。

`Ctrl` + `c`二回で止めることが出来ます。光った状態で二回目を押すと、光った状態のまま止まってしまうので注意です。

# Arduinoをブラウザから制御する
この記事(メモ)の本題です。
今回はExpressを使ってルーティングや値の受け渡し、レンダリングなどのあれこれを行い、ejsファイルでDOMを構成しました。  
まず、先ほどのLチカとは別にディレクトリ(ここではこれを`Arduino_web_operate`とします)をつくり、まず`npm init`を実行します。色々聞かれますが、全部エンターしました。
そのあと以下のコマンドを実行しました。

```
- npm install --save express
- npm install --save ejs
- npm install --save body-parser
- npm install johnny-five
- npm install firmata
```

次に`Arduino_web_operate`の中に`public`ファイルを作成し、その中に`style.css`を作成し、以下のコードを記述しました。

```style.css
h1 {
    font-size: 128px;
    font-weight: bold;
    color: #f0f0f0;
    text-align: center;
    letter-spacing: -10px;
    margin: -50px 0px -140px 0px;
}
```

次に`Arduino_web_operate`の中にviewsファイルを作成し、その中に`index.ejs`を作成しました。

```html:index.ejs
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html" charset="utf-8">
        <title>NodeWebOperate</title>
        <link type="text/css" href="./style.css" rel="stylesheet">
    </head>
    <body>
        <head><h1>イエッタイガー！</h1></head>
        <main>
            <form action="/" method="post">
                <p>
                    <input type="radio" value="on" name="operate">ON
                    <input type="radio" value="off" name="operate">OFF
                    <input type="submit" value="送信">
                </p>
            </form>
            <p><%-content %></p>
        </main>
    </body>
</html>
```

次に`Arduino_web_operate`の中に`index.js`を作成しました。
ポートは`COM1`, ピンは`12番`に繋ぐものとします。また、回路はLチカと同じです。

```index.js
const express = require("express");
const five = require("johnny-five");
const board = new five.Board({port:"COM1"});

const app = express();
app.use(express.static("public"));

const bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({extended: false}));

let led;

board.on('ready', function() {
    led = new five.Led(12);
});

const message = "現在の状態：";

app.get("/", (req, res)=>{
    res.render("index.ejs",{
        content: message + "off",
    });
});

app.post("/", (req, res)=>{
    if(req.body.operate == "on"){
        led.on();
    }
    if(req.body.operate == "off"){
        led.off();
    }
    res.render("index.ejs",{
        content: message + req.body.operate,
    });
});

const server = app.listen(3000, ()=>console.log("イエッタイガー！"));
```

その光る様からイエッタイガーと叫ばせました。
参考：[視覚的イェッタイガーとは？](https://xn--nzwp98desh.com/2018/12/06/post-1782/)
`node index.js`を実行して、localhostの3000にアクセスして、いじってみてください。onを押して送信したら光る/offを押して送信したら暗くなるなら成功です。お疲れさまでした。以上です。

[終わりだよ～](https://dic.nicovideo.jp/a/%E9%BA%BB%E5%80%89%E3%82%82%E3%82%82)
# 参考
- [Johnny-Five](http://johnny-five.io/)
- [JavaScriptエンジニアへのIoTのすすめ：Node.jsとArduinoでスマートデバイスのプロトタイプをしてみよう](https://html5experts.jp/girlie_mac/17684/)
- [IoT的にJohnny-fiveでLED制御する！](http://hollywis.hatenablog.com/entry/2016/03/25/191147)
- [Node.js超入門[第2版] - 掌田 津耶乃 (著)](https://www.amazon.co.jp/Node-js%E8%B6%85%E5%85%A5%E9%96%80-%E7%AC%AC2%E7%89%88-%E6%8E%8C%E7%94%B0-%E6%B4%A5%E8%80%B6%E4%B9%83/dp/4798055220)