MacのTouch Barで部屋の電球の色をすま〜とに変える🍰

# デモです

<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/ATb6ozlrRK">pic.twitter.com/ATb6ozlrRK</a></p>&mdash; 青いエンジニア🦋 (@itmono_sakuraya) <a href="https://twitter.com/itmono_sakuraya/status/1202233714412904449?ref_src=twsrc%5Etfw">December 4, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/UveYSIkPjC">pic.twitter.com/UveYSIkPjC</a></p>&mdash; 青いエンジニア🦋 (@itmono_sakuraya) <a href="https://twitter.com/itmono_sakuraya/status/1202235400351150082?ref_src=twsrc%5Etfw">December 4, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


# [Philips Hue](https://www2.meethue.com/ja-jp)
スマートライトというやつです。

![71DwxZ4bwUL._SX425_.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83183/cd813fe4-f5f7-7dfe-e7cf-6d3ef1032d25.jpeg)

フルカラーLEDのタイプは1600万色以上に制御できます。

![DSC_1274.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83183/816c4308-d177-52f2-9afa-8b7548b72849.jpeg)


通常のタイプは普通の白色、蛍光色のみです。

操作は専用のアプリから行えたり
<img width="305" alt=" 2019-12-02 19.35.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83183/5cc55236-e499-c6e0-d1e2-408248c0076b.png">

スマートスピーカーと連携して声で操作したり、
APIも公開されているので自由にインテグレーションが可能です。

# APIを触ってみる
APIにはローカルとリモートの2種類があります。
基本的にhueはブリッジを通してプライベートIPでローカルLAN内からアクセスするようになっています。
ブリッジのIPアドレスはアプリまたは[ここ](https://www.meethue.com/api/nupnp)にアクセスすると表示されます。

IPアドレスがわかったら以下のコンソールからAPIを試すことができます。
http://x.x.x.x/debug/clip.html

公式の [Get Started](https://developers.meethue.com/develop/get-started-2/) にやり方は書いてあるので詳しくは書きませんが、こんな感じのノリです。

**ライト1をonにする**

```
curl -X PUT x.x.x.x/api/your_user_name/lights/1/state -d '{"on": true}'
```

**ライト2を赤にする**

```
curl -X PUT x.x.x.x/api/your_user_name/lights/2/state -d '{"hue": 0}'
```

**ライト3を任意のHSVにする**

```
curl -X PUT x.x.x.x/api/your_user_name/lights/2/state -d '{"hue": 12403, "bri": 200, "sat": 150}'
```

アプリケーションの登録を行えば、LAN外からもリモートAPIとして接続することが可能です。
ただ導入のダイジェスト認証がちょっとややこしいので注意が必要。
そしてラグが体感3~5秒くらいあります。返ってこないこともしばしば。安定性は疑問です。

今回のようなリアルタイム性が求められる場合はローカル一択です。

# 色味について

hueのパラメータ指定では、われわれになじみ深いRGBではなく、HSV色空間を使用します。

>HSVモデル(英: HSV model)は色相(Hue)、彩度(Saturation・Chroma)、明度(Value・Brightness)の三つの成分からなる色空間。HSB色空間(Hue、Saturation、Brightness)とも言われる。HLS色空間(Hue、Saturation、Lightness)とよく似ている。
>
>環状のHSV色空間
>・色相 - 色の種類（例えば赤、青、黄色）。0 - 360の範囲（アプリケーションによっては0 - 100 % に正規化されることもある）。
>・彩度 - 色の鮮やかさ。0 - 100 % の範囲。刺激純度と colorimetric purity の色彩的な量と比較して「純度」などともいう。色の彩度の低下につれて、灰色さが顕著になり、くすんだ色が現れる。また彩度の逆として「desaturation」を定義すると有益である。
>・明度 - 色の明るさ。0 - 100 % の範囲。
>
>Wikipediaより

hueは0~65535（0, 65535が赤、25500が緑、46920が青）、
briとsatは0~254が有効な指定範囲となります。

HSVの計算はちょっとややこしいです。
計算ツールがあったりするんですが（[RGBとHSLの相互変換ツールと変換計算式](https://www.peko-step.com/tool/hslrgb.html)）、
hue用に正規化しないといけないので一手間かかります。

<img width="1199" alt=" 2019-12-02 19.56.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83183/f38078e5-cfa8-7900-93ae-a3498c7f58b2.png">

# すま〜とに色味を変える
普段の生活ではGoogle Home か Echo dot から操作することが多いです。
ベッドの上から「OK Google、電気消して」みたいな使い方は非常に快適です。
ちょっと目が疲れているときは「OK Google, ライト50%にして」と言って明度を落としたりしてます。


ただ、これでもまだ すま〜と ではない気がします。
自分も一エンジニアとしてハックしてみたいという衝動に駆られました。

そうだ、

Touch Barで操作しよう。

# インターフェース
![_20191202_201050.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83183/3aece702-bb9c-e095-4186-89c4b25028f5.jpeg)

![_20191202_201050.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83183/15787622-d097-e7b0-fbe1-c1fe1e24991d.png)

![_20191202_201039.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83183/6d90ab59-7b68-8cef-ef5e-8c5cefe4ec9d.jpeg)

![_20191202_201039.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83183/2f2f0dd8-183b-35c5-a629-7c179dfe1e3c.png)

![_20191202_201026.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83183/58ddc803-1800-bc72-ed5d-f2e8aec90a5a.jpeg)

![_20191202_201026.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83183/3495ea27-c7d9-e90b-1fae-b1faa367e566.png)

# どうやってるの
TouchBarのカスタマイズは[BetterTouchTool](https://folivora.ai/)で行なっています。
Custom Apple Script Slider というウィジェットがあり、そこから入力値を受け取って、Apple ScriptからAPIを叩いています。

```applescript
on bttWidgetSliderMoved(sliderValue)
    set hue to round(sliderValue * 65535)
    set body to "'{\"hue\":" & hue & "}'"
    do shell script "curl -X PUT 192.168.10.100/api/user_name/lights/1/state -d " & body
    return sliderValue
end bttWidgetSliderMoved
```

スクリプトはこんな感じ。
sliderValueは0~1の範囲なので正規化する。
`do shell script` を使ってcurl叩く。

# 地味に苦労したこと
- 指定したスクリプトが実行されない

これは BetterTouchTool 側の問題っぽくて、アクションに指定するスクリプトを最初はscptファイルとしてアップロードしていたんですが、時折動作してない感がありました。また、直接記述するようにアクションを変更したものの、アップロードされたファイルの方が残り続けるみたいな謎現象にも遭遇し、最終的にウィジェットを削除して一からベタ書きするように修正しました

- sliderが勝手に0に戻る

動かした後に勝手に0に戻る事象が発生しました。
ウィジェットの方の return value を設定して、アクションの方でも最後に `return sliderValue` とすることで滑らかに動くようになりました。

<img width="211" alt=" 2019-12-02 20.30.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83183/a2bdb541-2664-cee9-a858-3cdb9961e282.png">


# 余談
先日養老の滝ハッカソンでhueを使ったんですが、
こいつ、ブリッジ付きのやつは有線LANでWifiルーターと接続しなきゃいけないので、
クレードル付きのを新宿までレンタルしにいく羽目になりました。

現在は [Bluetooth 対応タイプ](https://www.gizmodo.jp/2019/07/philips-hue-bluetooth.html)が発売されています。
家で使う分にも絶対こっちの方がいいです。

その時作ったやつです。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/yorohack?src=hash&amp;ref_src=twsrc%5Etfw">#yorohack</a> 指ぱんっちんでオーダーww <a href="https://t.co/cLQ4cYdGlJ">pic.twitter.com/cLQ4cYdGlJ</a></p>&mdash; 菅原のびすけ (@n0bisuke) <a href="https://twitter.com/n0bisuke/status/1188389690891620354?ref_src=twsrc%5Etfw">October 27, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>