家にデジタルサイネージを作ったのでそれについて書きます
なんで作ったの？
家にモバイルディスプレイが余ってたからです
買ってみたけどあまり使わなかったのでもったいないなーっと思い作りました
作るまで
実は去年の秋ぐらいから考えていて、最初は表示するページから自分で作ろうと思い作っていました
作るのは簡単で CloudCode とかのコーディングエージェントによろしく頼んだらいい感じに作ってくれます
しかし、いい感じにレイアウトをしたいとか、外部サービスと連携するとか、そういうのをやりだすと一生終わらないです
実際終わらなくて作るのをやめてました
HomeAssistant というのを知る
最近 HomeAssistant というのを知りました
これはオープンソースの IoT 管理のためのソフトで、簡単に言うと GoogleHome とか Apple の Home アプリみたいなやつを自分でホストして色々出来るというやつです。
HomeAssistant にはダッシュボードというのがあり、Card を組み合わせて IoT デバイスの状態を見たり、操作をするページを自分でレイアウトして作成することが出来ます
Google のサービスとか Spotify などの外部サービスとの連携も可能です
つまり、去年の秋に作ろうと思っていたやつがすでにオープンソースで存在していました。車輪の再発明をしなくてよかった。
HomeAssistant をホストする
ちょうど家で動いてるサーバーがあったのでそこにホストしました。
Docker ですぐ立ち上げれるので便利。
家にあるサーバーから家にあるサイネージに表示するので外部に出す必要は無いのですが、無駄に外からもアクセスできるようにしました。Cloudflare便利。
モバイルディスプレイに表示する
常時表示しておきたいので、何らかのデバイスから出力する必要があります。
HomeAssistant はブラウザで見るので、ブラウザを使える必要があります。
あまりお金を使いたくなかったので Raspberry Pi Zero 2W を買って、そいつから出力するようにしました。
ラズパイの設定をする
Raspberry Pi Zero 2W は小型の PC なのでスペックがめっちゃ低いです。
最初にデスクトップ付きの OS を入れてたのですが、ブラウザを開くまでに一生掛かる、なかなか開かない。
なので、デスクトップが無い OS を入れて表示するようにしました。これでも結構しんどいけどさっきよりはマシ。
ダッシュボードを作成する
色々準備は出来たのでダッシュボードを作ります。
ダッシュボードは GUI から作れるのですが、見た目をいい感じにしようと思ったら結構めんどいです。
HomeAssistant には拡張機能的なやつがあって、そこで色んな人が便利な機能を作っています。
これを使ってダッシュボードを作るのですが、それでも自分の思ってるレイアウトに出来ないので書きます、CSS を、Dev Console を見ながら
ダッシュボードを改造する
HomeAssistant は Dev Console を見てるとわかるのですが、WebComponents を利用して UI を構築しています。
各 Card は WebComponents で作られていて、それに上書きする感じで CSS を書きます。
この WebComponents が結構バラバラで基本は Open な ShadowDOM になっているのですが、ある要素は Slot で要素をマウントしてれば ShadowDOM の中に入っていて単純に CSS を書くだけだとうまく動かなかったりします。
これにいい感じに CSS を当てるために Dev Console とにらめっこしながら CSS を書きます。コーディングエージェントに甘やかされきったフロントエンドエンジニア的にはなかなかしんどい作業でした。
CSS を当てる前は ↓ のような感じです。
配線をする
壁に掛けたいので取り回しをよくしたいです。
なので、配線に必要なパーツを買います。持っているディスプレイは側面にアダプタがついているので裏側に配線しやすいようにU字のコネクタとか短めのケーブルを買ったり、ラズパイを裏に貼り付けるために強めの両面テープを買ったりしました。
そんな感じで配線とかを済ますとこんな感じ
電気を消したら消したい
常時表示してるが、寝るときに電気を消したら消したいです。明るいので。
最初に書いた通り HomeAssistant は IoT の管理ツールなので「電気が消えたらなにかをする」を設定することが出来ます。
家にある電気は IoT デバイスなのでこれが出来ます。ただ、表示するディスプレイは IoT デバイスではないのでどうにか操作する必要があります。
幸い、使っているモバイルディスプレイは DDC 対応していたのでそれで制御しました。
DDC 制御をどうやるかですが、HomeAssistant は設定をするとサーバーから任意のシェルコマンドを実行することが出来るのでラズパイに SSH して DDC 制御するようにしました。これがベストか分からないです、AIが言ってた。
完成
そんなこんなで完成しました。かかった費用は1万くらいでした（ディスプレイ代金は除く）
完成したのですが、やっぱり何らかの操作をしたいのでタッチ操作に対応したモバイルディスプレイを買うかもしれないです。
おわり
作っていて思ったのですが、HomeAssistant の日本語情報がそんなになくてなかなかしんどかったです。
それもそうで、自分でホストしないといけないし、ぶっちゃけ IoT 操作なら GoogleHome とか SwitchBot で十分なので使われないのかなーと思いました。
なんなら、GoogleカレンダーとかSpotifyに連携するに自分で OAuth の ClientID を吐き出さないといけないのでなおさらしんどいです。
これを読んでる人はエンジニアが多いと思うので、やってみてはどうでしょうか。