Philips hue と API と JavaScript

2013.12.3

この記事はFrontrend Advent Calendar 2013 3日目の記事です。
一年ぶりの更新ですね。月日が流れるのは早いものです。

以前から、ArduinoやらLeap Motionやら何やら、フィジカルコンピューティング的なものに興味だけはあるのですが、この度、Philips hueという素敵なアイテムを手に入れることができたので、それのアレコレについて。

Philips hue

Meet hue - Philips hue (https://www.meethue.com/ja-US)

hue

“Philips hue”はPhilips社から発売されている、照明システムです。
見た目はただの電球ですが、スマホ用のアプリ等から、ON/OFFはもちろんのこと、明るさ/色調の操作やタイマー設定とかジオロケーション連動とかできる優れもの電球です。これに加えて、RESTfulなAPIも公開されていることが最も素敵な特徴の電球です。

APIの仕様とかディベロッパー向けの情報はこちらから。
Philips hue API (http://developers.meethue.com/)

フォーラムもこちら。
Philips Hue Support (http://www.everyhue.com/)

ちなみに、IFTTTというものに連動させると、様々なサービスと連携できるそう。メール着信したら光ったり、InstagramやFacebook、天気などと連動したり、標準アプリの充実さと相まって、素のままでも十分なくらいです。

今回の流れ

今回はAPIを叩いて、光を変えてみるところまで追っかけていきます。
そこまでの流れは下記の通り。

下準備

購入する
セッティングする

APIでアレコレする

IPアドレスを調べる
Debuggerに接続してみる
ユーザ認証する
hueの現在の情報を取得する
光を操作してみる
JSで操作してみる

購入する

最近まで日本では発売されてなかったのですが、現在はApple Storeで購入することができます。
http://store.apple.com/jp/product/HA779J/A/philips-hue-ledランプ-スターターセット

近くにAppleの直営店があれば、そこにある場合もあり。（自分のは渋谷店で買いました）
他ではAmazonあたりに輸入品が並んでます。

で、価格なんですが、電球3個とブリッジと呼ばれる中核のデバイスとセットで、26,000円です。電球1個だと、6,980円。 ※最大100個まで同時制御可
ただの電球と考えると何だかとんでもないので、敬意を払って高級電球と呼ばせてもらってます。

あと、外見はただの電球なので、E26口金のソケットか照明機器の準備も忘れずに。すっかり忘れていて、翌日スポットライト買い足しに行ったりしてしまいました。

セッティングする

公式の方で紹介されているので、詳しくはこちらで。
https://www.meethue.com/ja-US/getstarted

図をお借りすると、こんな構成で繋げます。
hueのセットアップ

hueのブリッジと操作するデバイスが同一のネットワーク上にある必要があって、ブリッジは有線LANしか持っていないため、無線LANしかない環境だとちょい面倒ですね。
ブリッジと電球との連動は、ZigBee Light Link（ジグビー・ライト・リンク）という規格が使われているそう。

ブリッジの中央にボタンがあるのですが、これはちょいちょい使うことになるので、手の届くところに配置しておいた方がよいです。

また、hueのポータルにブリッジを登録すれば、外部のネットワークからでも操作可能になるそうです。が、うちのネットワークがアレなせいか上手く認識してくれず、検証できておらず。

ネットワークに繋がない場合は、もちろん普通の照明としても使えます。

IPアドレスを調べる

このあたりからが本題です。
標準アプリで遊ぶ場合はそちらの案内に従ってもらえればOKですが、ブリッジ自身に各種APIが搭載されていて、APIを叩くためにはブリッジのIPアドレスを特定する必要があります。

同一のネットワークに接続されていれば、https://www.meethue.com/api/nupnpにアクセスするとブリッジを検出して下記のレスポンスを返してくれます。

[{"id":"**********","internalipaddress":"192.168.11.8"}]

というように、ブリッジのIPが192.168.11.8だと分かりますね。

Debuggerに接続してみる

特定したIPを元に、http://{bridge ip address}/debug/clip.htmlにアクセスすると、下のようなページが表示されます。

CLIP API Debugger

hueでは簡単にAPIを実行するために、こんなインターフェースが提供されているので便利です。もちろん、最初からごりごりコード書いてもよいです。

ユーザを作成する

ブリッジのIP特定/実行環境の準備が整ったので、早速、、といきたいところですが、その前にユーザ作成が必要になります。使用するAPIはこちら。

// URL
http://{bridge ip address}/api

// Body
{"devicetype":"test user","username":"newdeveloper"}

// Method
POST

devicetype, usernameともに任意の値で大丈夫です。

usernameは省略してもOKで、その場合はランダムの文字列になります。が、後々APIのURLにも使うことになるので、分かりやすい値にしておいた方がよいです。
なお、10文字以上必要なのでそちらも注意。エラーが出て何故だ！と引っかかっていましたが、普通にドキュメントに書いてありました。。（最大文字数はどちらも40文字）

これを実行すると、下記レスポンスが返ってきます。

// Response
[
	{
		"error": {
			"type": 101,
			"address": "",
			"description": "link button not pressed"
		}
	}
]

と言われるので、
ブリッジのボタンを押してから、もう一度実行してみるとOKです。

// Response
[
	{
		"success": {
			"username": "newdeveloper"
		}
	}
]

これで"newdeveloper"というユーザが作成できました。

hueの現在の情報を取得する

さきほど作成したユーザ名も元に下記APIを実行すると、全情報が取得できます。

盛りだくさんですが、lightsにブリッジが認識している電球の情報が表示されます。なので、今は1つ繋がっている状態ですね。

ここで表示されなければ、電球の検索や追加用のAPIも用意されているので、接続状態など確認した上で実行するといけるかと。

// URL
http://{bridge ip address}/api/{username}

// Body
-

// Method
GET

// Response
{
	"lights": {
		"1": {
			"state": {
				"on": false,
				"bri": 254,
				"hue": 14922,
				"sat": 144,
				"xy": [
					0.4595,
					0.4105
				],
				"ct": 369,
				"alert": "none",
				"effect": "none",
				"colormode": "ct",
				"reachable": true
			},
			"type": "Extended color light",
			"name": "Hue Lamp 1",
			"modelid": "LCT001",
			"swversion": "66009663",
			"pointsymbol": {
				"1": "none",
				"2": "none",
				"3": "none",
				"4": "none",
				"5": "none",
				"6": "none",
				"7": "none",
				"8": "none"
			}
		}
	},
	"groups": {},
	"config": {...},
	"schedules": {},
	"scenes": {...}
}

光を操作してみる

ここまで書いていて、大分長くなりました。。
下準備諸々が済んだので、ようやくhueを操ってみます。

まず、ON/OFFするだけだとこんな感じ。
onをtrue/falseと切り替えるとOKです。

// URL
http://{bridge ip address}/api/{username}/lights/{id}/state

// Body
{
	"on": true // falseにすると消える
}

// Method
PUT

// Response
[
	{
		"success": {
			"/lights/1/state/on": true
		}
	}
]

せっかくなので、色も変えてみたい。そんな場合は下記パラメータを追加します。

bri Brightness:明度 0〜255
hue Hue:色相 0〜65535
sat Saturation:彩度 0〜255

// Body
// 真っ赤にしてみる
{
	"on": true,
	"bri": 255,
	"hue": 65535,
	"sat": 255
}

// 緑色にしてみる
{
	"on": true,
	"bri": 255,
	"hue": 20000,
	"sat": 255
}

それぞれ並べてみました。

体感だと赤色にするとかなり変化が分かりやすいです。

JSで操作してみる

Debuggerだと、微妙な操作がつらいので、簡単なControllerをJSで書いてみました。
これで明るさも色もヌルヌルと操作できるように。

ちょっと中身の作りが雑なのでソース公開するのは避けるとして、、単純に光らせるくらいであればJavaScriptでも比較的簡単に実装できてしまいます。

hue-controller

締め

API実行できる環境さえあれば言語は何でもOKなので、アイディア次第で色々とできそうです。普段の開発あたりで考えると、Jenkinsのビルドの可否によって色変えて光らせるとか、Raspberry Piとつなげるとかは、ベタでパッと思いつくところ。
あと基本的なAPIしかさらっていないので、位置情報とかタイマーとかArduino繋げての各種センサ利用とか。

某同僚2名もhueゲットしているので、ひとまず、繋げて9灯でなんやらしてみたいですね。