部屋の照明を操作するかっこいいWebアプリを作った - MANA-DOTGW中に上記画像のような見た目と操作感で部屋の証明をコントロールできるWebアプリを作ったので紹介します。 概要 ページを開くと上記アニメgifのような部屋の間取りのUIが表示されます。 青いエリアは照明がOFFのエリア、緑のエリアは照明がONのエリアとなっています。 照明をON/OFFしたいエリアをクリックすると、そこのON/OFFが逆転します。また、全部ONにするボタンと全部OFFにするボタンもあります。 今回部屋のすべての照明をコントロールできましたが、単に照明を操作するボタンを並べるだけだとどのボタンがどこに対応してるのか難しいため、このように部屋の間取りをUIとすることでわかりやすくしてみました。 また、最初はただ地図をクリッカブルにするだけのつもりだったのですが、それだとつまらないので無駄に近未来っぽいかっこいいデザインにしてみました。 Webアプリは自宅内のサーバーで稼働して
