お待たせしました。いよいよ、スマートフォンのWebブラウザからNode.jsを介しArduino(アルドゥイーノ)をコントロールすることを目標としている連載の最終回です。第1回「Lチカ(LEDチカチカ)させてみよう!」、第2回「スイッチ・センサーからの入力値を取得しよう!」にてJavaScriptでArduinoをコントロールしLEDやセンサーから入出力値を取得する方法をご紹介してきました。今回は、実際にスマートフォンのWebブラウザからArduinoをコントロールする方法を2つのデモでご紹介します!

ドアが開いた時にスマートフォンに侵入者が入ってきたことを通知。焦電センサーを使って、ドアの開閉を検知。

ドアが開いた時にスマートフォンに侵入者が入ってきたことを通知。焦電センサーを使って、ドアの開閉を検知。

スマートフォンが傾いた角度をジャイロセンサーから取得しサーボモーターを回転させる。

スマートフォンが傾いた角度をジャイロセンサーから取得しサーボモーターを回転させる。

構成

構成図

まずArduinoを接続したPC上にNode.jsでHTTPサーバーを立てます。そこにスマートフォンのWebブラウザでアクセスし、Socket.IO経由で入出力値を取得します。今回はローカルネットワーク内でのコントロールを想定してご紹介します。
HerokuなどのPaaSを利用するとグローバルにコントロールできるようになります。
※Node.jsでのHTTPサーバーの立て方やSocket.IOについての詳細は記事「Node.jsとSocket.IOによるPCとスマホブラウザのペアリングデモ」をご覧ください。

作成したデモデータは下記にアップしましたので参考になさってください。

センサーからの入力値をスマートフォンに表示しよう

人の動きを検知する焦電センサーを使用したデモです。一定範囲(デモで使用したAMN31111の検出距離は最大5m)で物体が動くとスマートフォンのWebブラウザの表示を切り替えるという仕組みです。

回路の説明

焦電センサーから5V(電気的にプラス)、GND(電気的にマイナス)、出力端子が出ています。AMN31111は特に色分けされていないのでどの端子がどれにあたるのかデータシートをご確認ください。出力端子はアナログ0番ピンへ接続します。

焦電センサーを用いた回路図

Node.jsのJavaScriptの記述

// ----------
// demo1.js
// ----------

/*
    Socket.IO
*/
var socket;
// サーバーへのアクセスを監視。アクセスがあったらコールバックが実行
server.io.sockets.on("connection", function (s) {
    socket = s;
});

/*
    johnny-five [ Arduino Setting ]
*/
var five = require("johnny-five");
var board = new five.Board();
var sensor;

board.on("ready", function() {
    // アナログ0番ピンを100msごとに取得
    sensor = new five.Sensor({
        pin: "A0",
        freq: 100
    });

    // センサーを追加(アクセス許可)
    board.repl.inject({
        pot: sensor
    });

    // センサーの入力値を0~100にスケーリングして取得
    sensor.scale(0, 100).on("data", function() {
        var value = this.value;

        // Socket.IOで値を"sensor"というイベント名で送信
        if(socket) socket.emit("sensor", { value: value });
    });
});

※デモデータ内demo1.jsの主要部分を抜粋しています。

フロントエンドのJavaScriptの記述

// ----------
// js/main1.js
// ----------

// サーバーに接続
var socket = io.connect(location.origin);

// サーバーからセンサーの値を受信
socket.on("sensor", function(dataFromServer) {
    var value = dataFromServer.value;
    console.log(value);
}

※デモデータ内js/main1.jsの主要部分を抜粋しています。 データの存在するフォルダまで移動し下記のコマンドを実行します。同時にHTTPサーバーが立ち上がりますのでスマートフォンのWebブラウザでhttp://IPアドレス:5000/demo1.htmlと入力してご確認ください。

node demo1

スマートフォンからサーボモーターをコントロールしよう

スマートフォンに内蔵のジャイロセンサーで端末の傾き取得し、その値を元にサーボモーター(回転角度を制御できるモーター。主にロボットの関節などに使用されています)を目的の角度まで回転させます。端末のX軸・Y軸方向の傾きを2つのサーボモーターへ反映させました。

回路の説明

センサーから出ている黒い線はGND、赤い線は5V、黄色い線はそれぞれアナログ10番・11番ピンへ接続します。

サーボモーターを用いた回路図

Node.jsのJavaScriptの記述

// ----------
// demo2.js
// ----------

/*
    johnny-five [ Arduino Setting ]
*/
var five = require("johnny-five");
var board = new five.Board();
var servo1;
var servo2;

board.on("ready", function() {
    // デジタル10番ピンを設定
    servo1 = new five.Servo(10);
    // デジタル11番ピンを設定
    servo2 = new five.Servo(11);
});

/*
    Socket.IO
*/
// サーバーへのアクセスを監視。アクセスがあったらコールバックが実行
server.io.sockets.on("connection", function (s) {
    var socket = s;

    // クライアントからのデータの受信
    socket.on("servo", function(dataFromClient) {
        // サーボモーターを目的の角度まで回転
        if(servo1) servo1.to(Number(dataFromClient.angleX));
        if(servo2) servo2.to(Number(dataFromClient.angleY));
    });
});

※デモデータ内demo2.jsの主要部分を抜粋しています。

フロントエンドのJavaScriptの記述

ジャイロセンサーの値を取得する詳しい方法は記事「【保存版】スマートフォンって実はセンサーの塊! たった数行のHTML5とJSで扱えるセンサーまとめ(デモ・動画あり)」にてご紹介していますのでご覧ください。

// ----------
// js/main2.js
// ----------

// サーバーに接続
var socket = io.connect(location.origin);

// DeviceOrientation Event
window.addEventListener("deviceorientation", deviceorientationHandler);

// ジャイロセンサーの値が変化
function deviceorientationHandler(event) {
    // X軸
    var beta = event.beta;

    // Y軸
    var gamma = event.gamma;

    if(socket) {
        // サーバーへジャイロセンサーの値を送信
        socket.emit("servo", {
            angleX : beta,
            angleY : gamma
        });
    }
}

※デモデータ内js/main2.jsの主要部分を抜粋しています。 データの存在するフォルダまで移動し下記のコマンドを実行します。

node demo2

最後に

本連載は合計3回とやや駆け足でしたが、電子工作の始め方からセンサーやLED・モーターのコントロール、そしてスマートフォンのWebブラウザからコントロールできるようになりました。本連載では基礎中心にご紹介したかったため完全なIoT(モノのインターネット)ではありません。PCに接続することなく独立したコンパクトなデバイスを作成するには、Raspberry Piのような高性能なマイコンボードを用いてHTTPサーバを立て、ネットワークにデバイスから直接接続することで可能となります。
今話題のApple Watchも気になる存在です。その小さな画面から手軽に自宅や会社のIoT製品をコントロールできるようになればより身近なものになっていくでしょう。

連載目次

電子工作×インターネットの解説本を執筆しました

ICS MEDIAで紹介してきたIoT技術が1冊の本になりました。電子工作初心者がインターネットにつながるIoT装置を作れることを目標としています。本サイトで紹介しきれなかったネタや、新しい要素が盛りだくさんな内容になりました。本書をきっかけにあなたもIoTの世界に踏み込んでみてはいかがでしょうか? 詳しい内容は記事「『センサーでなんでもできる おもしろまじめ電子工作』を執筆しました」で紹介していますのでご覧ください。

センサーでなんでもできる おもしろまじめ電子工作の表紙

センサーでなんでもできる おもしろまじめ電子工作

  • ページ数:340ページ
  • 出版社:秀和システム
  • 発売日:2016年5月28日 (Amazon)
  • 執筆:蔵下 まさゆき

Amazonでチェックする