LIFULL Creators Blog

LIFULL Creators Blogとは、株式会社LIFULLの社員が記事を共有するブログです。自分の役立つ経験や知識を広めることで世界をもっとFULLにしていきます。

トップ > node.jsとjohnny-fiveを使って、JavaScriptでarduinoを操作してみる

node.jsとjohnny-fiveを使って、JavaScriptでarduinoを操作してみる

こんにちは、上津原です。

またArduino関連です。以前はUnityを使ってそれぞれを動かしてみましたが、JSで動かせるんだぜ、ということを聞きやってみることにしました。

johnny-fiveって？

www.npmjs.com

node.jsの説明は割愛するとして、johnny-fiveってなんじゃ？という話ですが、Firmataを利用して、JSからarduinoを動かすことができるワンダフルなライブラリです。

npm install johnny-five

とやればインストールできます。

書き方はとってもシンプルで、

var five = require("johnny-five");
var board = new five.Board();

board.on("ready", function() {
  // Create an Led on pin 13
  var led = new five.Led(13);
  // Blink every half second
  led.blink(500); 
});

（johnny-fiveのページから抜粋）

こんな風に書くと、これだけでLチカができるようになります。とっても簡単です。

socket.ioもくっつけてみよう

で、ただちかちかさせるだけじゃっちょっとつまらないので、socket.ioをつないで、特定の文字列を送るとLEDが光るようにしてみました。

www.youtube.com

コードは以下です。（node.jsは超初心者なんで変な書き方してたらごめんなさい。一応動きます。）

npm install socket.io

をまずやって、arduinoにStandard Firmataを入れておきます。

server.js

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

board.on("ready", function() {

  // SERVER //////////////////////////////
  var html = require('fs').readFileSync('index.html');
  var http = require('http').createServer(function(req, res) {
    res.writeHead(200, {
      'Content-Type': 'text/html'
    });
    res.end(html);
  });

  // SOCKET IO ///////////////////////////
  var io = require('socket.io')(http);
  http.listen(3000);

  var led = new five.Led(6);

  io.on('connection', function(socket) {
    socket.on('msg', function(data) {
      console.log(data);

      if (data == "on") {
        led.on();
      } else if (data == "off") {
        led.off();
      } else {
        io.emit('msg', data);
      }
    });
  });
});

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>arduino-socket.io</title>
  <script src="/socket.io/socket.io.js"></script>
  <script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
<body>
  <form>
    <input id="message">
  </form>
  <!-- SCRIPT -->
  <script type="text/javascript">
    // SocketIO/////////////////////////////////////
    var socket = io();
    // フォームに文字列を入れたときの動作
    $('form').submit(function() {
      socket.emit('msg', $('#message').val());
      $('#message').val('');
      return false;
    });
  </script>
</body>
</html>

こんな感じでとりあえずフロントからarduinoを操作できちゃったりします。簡単です。

どんなふうに使えるか？

こうすることで何ができるかっていうと、サービスを作って、ブラウザをキオスクモードにしといて、特定の操作はハードボタンを作ってあげる、とかそういう事ができるわけですね。
マウスの操作とか、タッチパネルとかよくわかんない人の為だったり、もしくはゲームの為だったり、様々なコントローラとして活用ができたりもしますよね。

気軽に動かせるので想像の幅が広がりますよね。

そんなこんなで、とりあえず動かしてみたの回でした。それではまたー。