jQueryでHueを制御する

スマートライト「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など)をローカルに作りましょう。

13行目のurlは、先ほど調べたAPIのurlに書き換えてください。

また、もしHueライトを複数持っている場合、/lights/の後の数字を変えてみてください。Hue公式アプリで登録順に数字がふられていると思います。一つしかなければ/lights/1です。

書き換えが完了したら、このHTMLをブラウザで開きます。

するとHueライトが赤色に変わります。

APIにJSONをPUTするだけ。分かってしまうと、簡単です。

ブラウザのJavaScriptで、自由にライトを操作できるようになりました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)