konashiモジュールをJavaScriptで動かせるiOSアプリ「konashi.js」経由でIFTTTと連携するメモです。
今回やりたいこと
仕組みの図としてはこんな流れです。Herokuの中継サーバーでMakerChannelのHTTP通信をSocketIOに変換してリアルタイム性を保ちつつ、konashi.jsが動くようJavaScriptを準備してlittleBitsのkonashiモジュールをIFTTT SocketIOと連動して動くようにしました。
- 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をつかってみた。
konashi Findボタン
konashi Findボタンを押すとkonashiを探しはじめます。
analogValueのところで、analog値を計測をはじめます!
このあたりは以前の記事を同じような動きですね。
- Web Bluetooth APIを使ってlittleBits Bluetooth(konashi)モジュールを連携したメモ – 1ft-seabass.jp.MEMO
- NodeJSでBLE通信ができるnobleライブラリでkonashiとつなげたメモ – 1ft-seabass.jp.MEMO
- myThings/IDCFチャンネルとlittleBits Bluetooth(konashi)モジュールを連携したメモ – 1ft-seabass.jp.MEMO
実際の動作
はじめにお伝えしたフローにそって実際の動作をしてみます。
IFTTTからlittleBitsへ
今回はIFTTT DoButtonを押すとSocketIO経由でkonashi.jsが反応しLED点滅します。
まず、DoButtonをおすとkonashi.jsが受け取ります。
その後の動きは以下のようになってLED点滅します!
うまく動いています!
littleBitsからIFTTTへ
今回はlittleBitsのボタンを押すとkonashi.jsが反応し、SocketIO経由でIFTTTのSlackチャンネルに伝えます。
ボタンが押された後のIFTTTのSlackチャンネルの様子です。
こちらも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を!