1ft-seabass.jp.MEMO

ワンフットシーバス.メモ > memo [名] 覚え書き, 控え書き, 葉書, 端書き

konashiモジュールをJavaScriptで動かせるiOSアプリ「konashi.js」経由でIFTTTと連携するメモ

konashiモジュールをJavaScriptで動かせるiOSアプリ「konashi.js」経由でIFTTTと連携するメモ

konashiモジュールをJavaScriptで動かせるiOSアプリ「konashi.js」経由でIFTTTと連携するメモです。

今回やりたいこと

仕組みの図としてはこんな流れです。Herokuの中継サーバーでMakerChannelのHTTP通信をSocketIOに変換してリアルタイム性を保ちつつ、konashi.jsが動くようJavaScriptを準備してlittleBitsのkonashiモジュールをIFTTT SocketIOと連動して動くようにしました。

konashijs-websocket-ifttt-connect_1

  • Herokuの中継サーバーでMakerChannelのHTTP通信をSocketIOに変換
  • Herokuの中継サーバーでJavaScriptで動かせるiOSアプリ「konashi.js」で開発中のlittleBits konashiモジュールを動かせるようにする
  • littleBitsのkonashiモジュールをIFTTT SocketIOと連動して動くようにする

実際の実装

Herokuの中継サーバーでMakerChannelのHTTP通信をSocketIOに変換

Herokuの中継サーバーでMakerChannelのHTTP通信をSocketIOに変換する処理はIFTTT連携した以前の記事のexpressサーバーをベースにSocketIO通信を加えて変換しました。

var express = require('express');
var request = require('request');
var bodyParser = require('body-parser');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.set('port', (process.env.PORT || 5000));
app.use(express.static(__dirname + '/public'));
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());

// ドメインの開放
io.set("origins","*:*");

// SocketIOの接続成立
io.on('connection', function(socket){
    console.log('connection')
    console.log(socket);
    // メッセージ受信
    socket.on('message', function(msg){
        io.emit('receiveMessage', msg);
    });
    // konashi.jsからIFTTTへ送信
    socket.on('sendIFTTT', function(msg){
        io.emit('receiveMessage', msg);
        // 実際の送信する sendIFTTT
        sendIFTTT(
            "socket.on",
            msg,
            "value3"
        );
    });
});

app.get('/', function(request, response) {
    response.send('Hello World!');
});

// IFTTTから送信されてきた情報をkonashi.jsに通知する
app.post('/ifttt/recieve', function(request, response) {
    response.set('Content-Type', 'application/json');
    console.log('---------- input[/ifttt/recieve]');
    console.log(request.body);
    response.send("{'request':'/ifttt/recieve'}");
    io.emit('recieveIFTTT',{event:"recieveIFTTT",body:request.body});
});

http.listen(app.get('port'), function() {
    console.log('Node app is running on port', app.get('port'));
});

// 実際の送信する sendIFTTT
function sendIFTTT(value1,value2,value3){
    var _request = require('request');

    var IFTTT_EVENT_NAME = "ifttt_send";
    var IFTTT_SECURITY_KEY = "                                      ";

    var options = {
        uri: 'http://maker.ifttt.com/trigger/' + IFTTT_EVENT_NAME + '/with/key/' + IFTTT_SECURITY_KEY,
        form: {
            value1:value1, // title
            value2:value2, // message
            value3:value3
        },
        json: true
    };

    console.log('---------- [sendIFTTT]');
    console.log(options);

    _request.post(options, function(error, response, body){
        if (!error && response.statusCode == 200) {
            console.log(body);
        } else {
            console.log('error: '+ response.statusCode);
        }
    });

}

JavaScriptで動かせるiOSアプリ「konashi.js」で開発中のlittleBits konashiモジュールを動かす

こちらは、jsdoitにある以下の記事を参考にしました。

ソースはこんな感じ。

$(function() {
    var socket;
    // 点滅用フラグ
    var blinkFlag = false;
    var preAnalogValue = 0;
    var preAnalogFlag = false;
    var timerIDLED_ON_OFF;

    // ボタンの設定 -----------------------------------------------------

    $("#findButton").on("click", function(){
        k.find();
        appendMessage("find Start");
    });

    $("#blinkClearButton").on("click", function(){

        k.digitalWrite(k.PIO2, k.LOW);
        blinkFlag = false;
    });

    $("#blinkStartButton").on("click", function(){
        k.digitalWrite(k.PIO2, k.HIGH);
        blinkFlag = true;
    });

    // -------------------------------------------------------------------

    // Socket接続
    function connectSocket(socketURL) {
        if (socketURL) {
            appendMessage("start connecting... " + socketURL);

            socket = io(socketURL);
            // SocketIO成立
            socket.on("connect", function() {
                appendMessage("OK!");

                // SocketIOの通信が成立したらイベント設定 -----------------

                // receiveMessage
                // メッセージ受信イベント
                socket.on("receiveMessage", function(msg) {
                    appendMessage(msg);
                });
                // recieveIFTTT
                // メッセージ受信イベント
                socket.on("recieveIFTTT", function(msg) {
                    console.log(msg);
                    if(msg.body.type == "donote1"){
                        $("#IFTTTmessage").text("DoNote : " + msg.body.NoteText);
                    } else if(msg.body.type == "dobutton1"){
                        $("#IFTTTmessage").text("DoButton : " + msg.body.TestValue);

                        blinkFlag = !blinkFlag;
                    } else {
                        $("#IFTTTmessage").text("else");
                    }
                });
            });
            // SocketIO接続失敗
            socket.on("connect_failed", function() {
                appendMessage("NG!");
            });
        }
    }

    // メッセージ表示
    function appendMessage(msg) {
        $("#messages").append($("<div>").text(msg));
    }

    // アナログ計測開始
    function startAnalogCheck(){
        var AIO0Id = setInterval(function(){
            k.analogReadRequest(k.AIO0);
        }, 500);
    }

    // LED点滅スタート
    function startBlinkLed(){
        var toggle = false;
        timerIDLED_ON_OFF = setInterval(function(){
            if(blinkFlag){
                if(toggle){
                    // LEDをON
                    k.digitalWrite(k.PIO2, k.HIGH);
                    appendMessage("OFF");
                } else {
                    // LEDをOFF
                    k.digitalWrite(k.PIO2, k.LOW);
                    appendMessage("ON");
                }
                // 次の状態をセット
                toggle = !toggle;
            }
        }, 500);
    }

    // konashiが認識された
    k.ready(function(){
        appendMessage("konashi OK");
        // まずはI/Oの設定から
        k.pinMode(k.PIO2, k.OUTPUT);
        // LED点滅スタート
        startBlinkLed();
        // アナログ計測開始
        startAnalogCheck();
        //
        return;
    });


    // アナログ値が受信できたら表示に反映
    // アナログ値が受信できたらON/OFFチェック
    k.updateAnalogValueAio0(function(data){
        // appendMessage(data);
        var currentAlnalogValue = data;
        if(preAnalogFlag){
            if( preAnalogValue < 500 ){
                // OFF
                preAnalogFlag = false;
                // IFTTTに送る
                socket.emit('sendIFTTT','konashiがOFF');
            }
        } else {
            if( currentAlnalogValue > 900){
                // ON
                preAnalogFlag = true;
                // IFTTTに送る
                socket.emit('sendIFTTT','konashiがON');
            }
        }
        // 表示に反映
        $("#analogValue").text(currentAlnalogValue);
        //
        preAnalogValue = currentAlnalogValue;
    });

    connectSocket("http://                                        .herokuapp.com:80");

});

littleBitsのkonashiモジュールをIFTTT SocketIOと連動して動くようにする

ソースは先ほどの感じで、表示の雰囲気はこんな感じ。今回はBootflatをつかってみた。

konashijs-websocket-ifttt-connect_2

konashi Findボタン

konashi Findボタンを押すとkonashiを探しはじめます。

konashijs-websocket-ifttt-connect_3_1

analogValueのところで、analog値を計測をはじめます！

konashijs-websocket-ifttt-connect_4_1

このあたりは以前の記事を同じような動きですね。

実際の動作

はじめにお伝えしたフローにそって実際の動作をしてみます。

konashijs-websocket-ifttt-connect_1

IFTTTからlittleBitsへ

今回はIFTTT DoButtonを押すとSocketIO経由でkonashi.jsが反応しLED点滅します。

まず、DoButtonをおすとkonashi.jsが受け取ります。

konashijs-websocket-ifttt-connect_5_2

その後の動きは以下のようになってLED点滅します！

うまく動いています！

littleBitsからIFTTTへ

今回はlittleBitsのボタンを押すとkonashi.jsが反応し、SocketIO経由でIFTTTのSlackチャンネルに伝えます。

konashijs-websocket-ifttt-connect_6

ボタンが押された後のIFTTTのSlackチャンネルの様子です。

konashijs-websocket-ifttt-connect_7

こちらもONとOFF通知されてます！

konashi.jsアプリすごい

いやー、konashi.jsアプリすごいですね。イメージ通りに動いて感動しました。

こんな素敵なkonashi.jsアプリですが、ひとつだけもったいない点がありましてスリープで画面がOFFになっていると動作が止まってしまうようです。スリープしない設定にしていただければ回避が可能です。

もしできることならMESHアプリがバックグラウンドで実行できるようになったので、konashi.jsもバックグラウンドで実行してくれるとうれしいなーと思いました！

おわりに

Herokuの中継サーバーをかませることでMaker ChannelをSocekt化したことで、スムーズにIFTTTとkonashi.jsが連携することができました。

IFTTTが連携できることで、konashi自体の制御が中心だったJavaScriptが、IFTTTによって様々なAPIやWEBサービスと連携できるようになるので「天気が晴れだったらlittleBitsサーボ入りの人形が動いたり」ことだったり「littleBitsのボタンを押すとTwitterに投稿される」ようなことを、気軽に試行錯誤することが可能になりWEBというソフトウェアと、littleBitsというハードウェアのそれぞれの反応を行き来しやすくなりますね。

同じようにAPIが試行錯誤できるものとしてmyThingsなどとも連携ができそうなので、また機会があればやってみようとおもいます。

それでは、よき konashi & littleBits & konashi.js & Heroku Lifeを！