スマートライト「Hue」。ローカルのブラウザでjQueryを使って簡単に操作できます。やってみれば簡単ですが、毎回やり方を忘れて調べることになります。また、HueにjQueryを使おうとする記事がほぼないので、ここに書き留めます。
Hueをローカルで制御する準備
前程として、Hueブリッジが必要です。また、公式アプリでHueライトの動作確認が済んでいる状態で話を進めます。
Hueをローカルから制御するには、HueブリッジのAPIを発行します。
http://0.0.0.0/api/XXXXXXXX/lights/1/state/
上記のようなアドレスに、{“on”:true} というようなJSONを送ると、ライトがONになります。
まずはHueブリッジのIPアドレスを調べます。
https://discovery.meethue.comへアクセスすると、”internalipaddress”:”0.0.0.0″というような、HueブリッジのIPアドレスが表示されます。
ここから先は、公式ページのHow to develop for Hue? Step 3に沿って進めたほうが確実です。
Googleページ翻訳でだいたい意味は分かり、このページに沿って設定するのが最速でした。
1点だけ、途中にHueブリッジの物理ボタンを押す必要があるので、注意が必要です。PCの画面のボタンではなく、ブリッジのボタンです。
Go and press the button on the bridge and then press the POST button again and you should get a success response like below.
jQueryでPUTすればよい
APIを発行出来たら、{“on”:true} というようなHueライトの状態を書いたJSONをPUTします。Web制作でPUTメソッドを使う機会はほぼなく、ブラウザによっては問題が起こりそうなので、jQueryに頼ります。
適当なHTML（test.htmlなど）をローカルに作りましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<html> <head> <meta charset="utf-8"> <title>Hue Test</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <script> $(function(){ var json = JSON.stringify({"on":true, "sat":154, "bri":154,"hue":1000}); console.log(json) $.ajax({ url: 'http://<ip address>/api/<username>/lights/1/state', method: 'PUT', headers: {'Content-Type':'application/json'}, data: json, success: function(result) { console.log(result); } }); }); </script> </body> </html> |
13行目のurlは、先ほど調べたAPIのurlに書き換えてください。
また、もしHueライトを複数持っている場合、/lights/の後の数字を変えてみてください。Hue公式アプリで登録順に数字がふられていると思います。一つしかなければ/lights/1です。
書き換えが完了したら、このHTMLをブラウザで開きます。
するとHueライトが赤色に変わります。
APIにJSONをPUTするだけ。分かってしまうと、簡単です。
ブラウザのJavaScriptで、自由にライトを操作できるようになりました。