LoginSignup
57

More than 5 years have passed since last update.

Javascriptで照明を操作 [Cylon.js x Philips Hue]

Last updated at Posted at 2015-08-13

Hueを最近触ってるのでCylon.js経由で操作してみます。
あと、Milkcocoaも使ってWebとつなげてみたいと思います。

Philips Hue

Webの人向けに簡単に言うとプログラミングで制御できる照明です。
http://www2.meethue.com/ja-JP

過去のIoTLTでカヤックのネロさんがデモを見せてくれてましたが、Web開発者でも扱いやすいAPIインターフェイスがあるのが特長です。

HTTPリクエストでAPIを叩けるのでどんな言語でも問題無く制御できると思います。

Cylon.js

http://cylonjs.com/

前にJSオジサンで紹介したNode.jsのIoT向けフレームワーク(ライブラリ)です。

Cylon.jsでIoT (第5回 #JSオジサン : 5分)

Hue向けのアダプタも存在します。

HueのAPIを使うにあたって

色々遊べるハイテク照明 「Philips hue」のAPIを叩いてみた。

こちらのブログを参考にしました。
ユーザー名とhueブリッジのIPアドレスを確認しましょう。

Cylon.jsでHueを操作してみる。

  • 準備 npm経由でいつもどおり
$ npm install cylon cylon-hue
hue-cylon.js
var Cylon = require('cylon');

Cylon.robot({
  connections: {
    hue: { adaptor: 'hue', host: '192.168.1.85', username: 'XXX' }
  },

  devices: {
    bulb: { driver: 'hue-light', lightId: 2 }
  },

  work: function(my) {
    every((1).second(), function() {
      my.bulb.toggle();
    });
  }
}).start();

サンプルどおりに書いて実行します。

$ node hue-cylon

会社の電球につけてやってみました↑

簡単です。

MilkcocoaとつなげてWebから操作

https://mlkcca.com/

Milkcocoaはリアルタイム通信/IoT向けのバックエンドを提供してくれるサービスです。

いつも思うけど、Milkcocoaのトップページのドット絵と連携すると、Web側を作らなくていいから凄く楽ですw

$ npm i milkcocoa
hue-milkcocoa.js
var Cylon = require('cylon');
var Milkcocoa = require('milkcocoa');
var milkcocoa = new Milkcocoa('dogi9jz8c16.mlkcca.com');
var ds = milkcocoa.dataStore('dots');
var hue;

Cylon.robot({
  connections: {
    hue: { adaptor: 'hue', host: '192.168.2.2', username: 'newdeveloper' }
  },

  devices: {
    bulb: { driver: 'hue-light', lightId: 1 }
  },

  work: function(my) {
    my.bulb.turnOn(); //点灯
    hue = my; //hue変数に操作メソッド諸々を渡しておく
  }
}).start();

ds.on('push',function(data){
  switch (data.value.color){
    case '#ce071b':
      console.log('');
      hue.bulb.rgb(255,0,0); //赤
      break;
    case '#fdbc00':
      console.log('');
      hue.bulb.rgb(255, 165, 0); //黄
      break;
    case '#097b28':
      console.log('');
      hue.bulb.rgb(107, 142, 35); //緑
      break;
    case '#0f5aa6':
      console.log('');
      hue.bulb.rgb(30, 144, 255); //青
      break;
    default:
      hue.bulb.rgb(255, 255, 255);
      break;
  }
});

実行するとこんな感じです。

Milkcocoaのトップページのドット絵は操作するとpushイベントが発火してdata.value.colorに色の情報が渡ってくるのでハンドリングしています。

APIドキュメントとかをそこまで読んでないのでこんな感じで振り分けてるけど、16進の値をそのまま色情報に渡せるメソッドもあるかも

http://www.developers.meethue.com/documentation/core-concepts

まとめ

HueのAPIがHTTPリクエストで叩けるのがいいですね。
BLEだけじゃなくてこういったインターフェイスも増えてくるとJavascriptだけじゃなくてPHPとかでもIoTできそう。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
57