Node-RED Sonos ノードについて調べてみた。

# はじめに
こんにちは。野良ハックチーム ざっきー と申します。
この記事は 2019 年 11 月 29 日に開催された「<A HREF="https://node-red.connpass.com/event/153172/">Node-RED UG 勉強会 2019 年末 LT パーティ</A>」で LT 登壇した Node-RED Sonos ノードに関する詳細メモです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/93ad2aa5-8b1b-353d-3b7d-abb8cd763578.png" width="50%">
※ LT 登壇資料は<A HREF="https://www.slideshare.net/kitazaki/20191129-node-redugkitazakiss">こちら</A>。

# Sonos とは？
米国サンタバーバラ生まれのワイヤレスホームサウンドシステムです。
https://www.sonos.com/ja-jp/home
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/a578480a-17b0-8266-2721-3ea4e7f70c39.jpeg" width="35%">

Wi-Fi (有線接続も可) でネットワークに接続され、自由な組み合わせが可能なスピーカーシステムです。
<img width="50%" alt="スクリーンショット 2019-12-12 15.25.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/8f6f4abb-2389-2481-75e7-ed395753ec00.png">

UPnP 対応で API が公開されていますので、ハックすることが可能です。
<A HREF="https://musicpartners.sonos.com/?q=docs">Sonos Labs</A>
<img width="50%" alt="スクリーンショット 2019-12-12 15.25.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/a9c90cfc-0661-5fb0-a91f-5c4b598e212d.png">

# Sonos ノードの追加
※ 画面は <A HREF="https://docs.enebular.com/ja/EnebularEditor/">enebular editor</A> を使用して操作方法の説明をしますが、Node-RED での操作も同様です。

Node-RED の「メニュー」から「パレットの管理」を選択すると「ユーザ設定」画面が表示される。
<img width="75%" alt="スクリーンショット 2019-12-14 23.00.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/af29d57f-c4af-2c12-74d5-65cf9fe5ef54.png">
<img width="75%" alt="スクリーンショット 2019-12-14 23.01.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/1fd91150-45e5-8fec-6c7b-fb56b3c647da.png">

「ノードを追加」タブを選択し、検索フォームで「Sonos」と入力して検索するといくつかリストアップされます。
<img width=75%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/e72fbb76-f328-e8df-3db3-9ae4e29c1207.jpeg">

- <A HREF="https://flows.nodered.org/node/node-red-contrib-sonos">node-red-contrib-sonos</A>  
 2 年以上更新されていませんでしたが、最近 queue function の機能が更新されました。<A HREF="https://github.com/bencevans/node-sonos">node-sonos</A> を利用しています。
- <A HREF="https://flows.nodered.org/node/node-red-contrib-better-sonos">node-red-contrib-better-sonos</A>  
 1 年以上更新されていません。サンプルの説明は<A HREF="https://qiita.com/kitazaki/items/ccde18e10f49fcbb9437#node-red-contrib-better-sonos">こちら</A>にまとめています。
- <A HREF="https://flows.nodered.org/node/node-red-contrib-sonos-plus">node-red-contrib-sonos-plus</A>  
 <A HREF="https://flows.nodered.org/node/node-red-contrib-better-sonos">node-red-contrib-better-sonos</A> が 1 年以上更新されていないので、コードを利用して新しくパッケージを作成したとのことです。サンプルの説明は<A HREF="https://qiita.com/kitazaki/items/ccde18e10f49fcbb9437#node-red-contrib-sonos-plus">こちら</A>にまとめています。
- <A HREF="https://flows.nodered.org/node/node-red-contrib-sonos-http-api">node-red-contrib-sonos-http-api</A>  
 HTTP APIブリッジツール。Sonos と同じネットワークにいなくても HTTP API 経由で Sonos を操作できるのが特徴。別途、<A HREF="https://github.com/jishi/node-sonos-http-api">node-sonos-http-api</A> が必要です。
- <A HREF="https://flows.nodered.org/node/node-red-contrib-sonospollytts">node-red-contrib-sonospollytts</A>  
 Amazon Polly (テキスト読み上げサービス) を利用して Sonos から音声を再生します。詳細の説明は<A HREF="https://qiita.com/kitazaki/items/a22af844ee83e7922352">こちら</A>にまとめています。

## node-red-contrib-sonos
リストアップされた中から「ノードを追加」を選択するとパレットに新しいノードが追加されます。
<img width="75%" alt="スクリーンショット 2019-12-15 10.32.36 2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/02924516-c2f5-f215-71ad-5440908c529f.png">
<img width="50%" alt="スクリーンショット 2019-12-15 10.33.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/798034da-6ea3-47a2-3fd1-94baf7b2bee0.png">
<img width="25%" alt="スクリーンショット 2019-12-15 9.54.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/208cf05b-1ee6-ff0f-6271-85f327cba7f1.png">
<A HREF="https://flows.nodered.org/node/node-red-contrib-sonos">ホームページ</A>にサンプルフローが掲載されていますので、ホームページからフローをコピーして Node-RED の「メニュー」→「読み込み」→「クリップボード」に貼り付けてフローを追加します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/b98240a1-f309-668c-7ee9-ed555aacf2a8.png" width=75%">
<img width="75%" alt="スクリーンショット 2019-12-15 10.46.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/d8173e68-36c9-d679-492c-fe907ceb4486.png">
<img width="75%" alt="スクリーンショット 2019-12-15 10.18.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/61a395da-5b62-01fb-5799-8bf4acf8c421.png">
<img width="519" alt="スクリーンショット 2019-12-15 10.48.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/11c8f1ef-f5f9-df78-5458-fd9900257a70.png">
<img width="516" alt="スクリーンショット 2019-12-15 10.50.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/dc2bb28b-6de8-6035-8f8f-17342ae791d8.png">
<img width="75%" alt="スクリーンショット 2019-12-15 10.19.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/e7a604c4-185b-5a89-8576-4f67eb6aef14.png">
次に Control Sonos ノードの設定を行います。Control Sonos ノードをダブルクリックして「Control ノードを編集」メニューを表示します。
<img width="75%" alt="スクリーンショット 2019-12-15 11.28.55 2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/e522e367-bfda-ac02-339d-8cb8f7b9151b.png">
<img width="477" alt="スクリーンショット 2019-12-15 11.29.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/03c55bc9-58f2-06b5-b0c2-569ac09608b5.png">
「SONOS Play Node」の編集ボタンを押して Sonos システムの設定を追加します。
<img width="477" alt="スクリーンショット 2019-12-15 11.29.28 2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/a90f26d9-037d-95cd-1223-074e0aa86da9.png">
「sonos-config ノードを編集」メニューでネットワークに接続された Sonos システムの IP アドレスを入力して更新ボタンを押します。
<img width="477" alt="スクリーンショット 2019-12-15 14.42.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/ebe84728-4319-2534-26ec-b97a8b976a5f.png">
inject ノードの左側のボタンを押して Sonos を操作します。
<img width="75%" alt="スクリーンショット 2019-12-15 14.47.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/78bf936c-ef62-01e9-76d3-397861debbfc.png">

## node-red-contrib-sonos-http-api
まず、<A HREF="https://github.com/jishi/node-sonos-http-api">node-sonos-http-api</A> を導入する必要があります。コマンドラインで行います。

```bash
$ git clone https://github.com/jishi/node-sonos-http-api
$ cd node-sonos-http-api
$ npm install --production
$ npm start
```

ブラウザから http://localhost:5005 へアクセスして下記の画面が表示されれば正常です。
<img width="75%" alt="スクリーンショット 2019-12-15 15.37.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/79a34e60-aaa3-5f9d-9c24-a992cebdfab4.png">
次に Node-RED の「メニュー」から「パレットの管理」→「ノードを追加」タブ→検索フォームで「Sonos」と入力して検索します。リストアップされた中から「ノードを追加」を選択するとパレットに新しいノードが追加されます。
<img width="75%" alt="スクリーンショット 2019-12-15 10.32.36 2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/dc6b2515-5487-cb91-ca22-b69e0debe20a.png">
<img width="167" alt="スクリーンショット 2019-12-15 15.41.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/fda94b56-21d7-a03a-a5dc-37f97f9cfb28.png">
ホームページから<A HREF="https://raw.githubusercontent.com/naimo84/node-red-contrib-sonos-http-api/master/examples/play_notify.json">サンプルフロー</A>をコピーして Node-RED の「メニュー」→「読み込み」→「クリップボード」に貼り付けてフローを追加します。
<img width="75%" alt="スクリーンショット 2019-12-15 15.56.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/3ec8235c-0d1b-dadd-e518-bdcbd3a94d6b.png">
Control Sonos ノードの設定を行います。Control Sonos ノードをダブルクリックして「Control ノードを編集」メニューを表示します。「Sonos Config Node」の編集ボタンを押して Sonos システムの設定を変更します。
<img width="75%" alt="スクリーンショット 2019-12-15 15.56.42 2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/3d0fd70f-94d8-6c45-c596-3a5ac2f808bd.png">
<img width="479" alt="スクリーンショット 2019-12-15 15.57.48 2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/aee40a77-0a2c-b09c-942d-2f291c1a9f98.png">
「sonos-http-api-config ノードを編集」メニューで「「IP Address / hostname of SONOS HTTP Api」項目に http://localhost:5005 を入力して更新ボタンを押します。
<img width="477" alt="スクリーンショット 2019-12-15 16.11.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/c66d377a-1c62-cdce-9d69-aeb4b87487f5.png">
「Player」項目に「ルーム名」を入力して完了ボタンを押します。
「ルーム名」は <A HREF="https://github.com/jishi/node-sonos-http-api">node-sonos-http-api</A> のブラウザ表示画面から確認することができます。
「Info」欄の「GET /zones」項目をクリックして「roomName」項目の値を確認します。
<img width="75%" alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f37323437392f37396133346536302d616161332d356639642d396332342d6139393263656264666162342e706e67 2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/71de0e70-c43a-acda-5d31-47eedea1205a.png">
<img width="75%" alt="スクリーンショット 2019-12-15 16.00.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/3875877e-5f70-e820-bd68-844deacb56f8.png">
<img width="479" alt="スクリーンショット 2019-12-15 15.57.48 3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/2d81e7e5-6a47-7479-e0fc-3d60843c167e.png">
inject ノードの左側のボタンを押して Sonos を操作します。
<img width="75%" alt="スクリーンショット 2019-12-15 15.56.42 2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/c3f84f78-b216-6ba6-8572-b56aa45c2850.png">

# まとめ
Sonos One 1 台でも Node-RED Sonos ノードを試すことができますが、2 台を組み合わせてステレオペアとして設定すると高音質な音楽スピーカーに変身します。
音質は然ることながら、拡張性 (1 台〜複数台 )、柔軟性 (組み合わせ自由) に優れ、オープン (UPnP 対応)、ハッカブル (API 公開) な Sonos を是非試してみてください。
Listen Better!
みなさまにも良き音を！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/86deba53-4404-6827-b561-d37ec12b619a.jpeg" width="50%">