【React】安全性を限界突破させた「SF風環境モニター」と、未来のジュークボックス構想
【概要・やったこと】
現在、日々のタスク管理や進捗ログの一元化を目的とした「自作デスクトップ・ダッシュボード（カレンダー、環境モニター、音楽プレイヤー」をReactベースでスクラッチ開発しています。
先日の記事のネタでもありましたが、「枠なしミニマム音楽プレイヤー」をその後完全に満足のいく形まで完成させました。しかし、日々の開発作業に熱中する中で「今が何日なのか」という日付の感覚が迷子になりがちであることに気づき、「この音楽プレイヤーを基盤にして、日付を一目で把握できるカレンダーや、部屋の状況がわかる温湿度計を融合させたら、最高に実用的なスマートボードになるのでは？」と思いついたのが、今回のダッシュボード開発のキッカケです。
現在は、画面上でノイズが美しく瞬くサイバー・カレンダーや雪のエフェクトの実装を終え、右パネルの要となる「SwitchBot APIを利活用したリアルタイム室温・湿度モニター」の安全な実装、および音楽プレイヤーのインフラ設計に注力しています。
【利用技術の選定】
フロントエンド：React + Vite
前作の音楽プレイヤーのコンポーネント資産をそのまま活かしつつ、コンソール風のUIをSPA（シングルページアプリケーション）として高速かつモダンに構築するため採用。
ハードウェア：SwitchBot 温湿度計 + Hub Mini
もともと自宅でSwitchBotの「Hub Mini2」を利用していたため、ここに「温湿度計」を買い足すだけで、自室の環境データを即座にクラウド経由で取得できる環境が整っていました。「すでにあるスマートホーム資産を、自分の開発したコードとAPIでマッシュアップする」というワクワク感が、今回のデバイス選定の決め手です。
バックエンド：PHP
当初はReactのみで完結させる手軽な実装も検討しましたが、Webサーバーへデプロイした際、フロントエンド側に機密情報（APIキー等）が露出する脆弱性を回避するため、サーバー側で安全に認証署名を生成できるPHPをバックエンドとして採用しました。
表示端末：数年前から眠らせていた「ZenPad」（リサイクル活用）
今回のダッシュボードを常時表示させる「専用モニター」として、数年前に使わなくなって引き出しに眠っていたASUSのタブレット「ZenPad」を引っ張り出してきました。ノートPCの画面を占有することなく、デスクの傍らでサイバーカレンダーや室温計を24時間光らせておくための、最高の相棒としてリサイクル活用しています。
【直面した課題とアプローチ】
課題1：APIキーやサブドメインURLの隠蔽（セキュリティ担保）
自作アプリを最終的にネット上へ公開してスマホ等からマルチデバイスで閲覧するにあたり、フロントエンド側にSwitchBotのTokenやSecret、通信先URLを記述するとブラウザ側に露出してしまうセキュリティリスクがありました。
実装アプローチ：PHPによる「隠し壁」の構築
Reactから直接APIを叩くルートを捨て、バックエンド（PHP）を経由する堅牢な設計を選択。ブラウザからは絶対アクセスできないWebサーバーの非公開エリアに秘密鍵のみを隔離する「設定ファイルの塚」を作りました。公開エリアの get_room_data.php から内部的に require_once で鍵を読み込み、サーバー側で毎回認証署名を動的生成して通信する安全な仕組みを構築しました。また、React側でもURLを .env.local で環境変数化し、安全性を徹底しました。
課題2：音楽データをどうホストするか
ダッシュボードへの音楽プレイヤー実装にあたり、ネット上のクラウドやレンタルサーバーへ「絶対に外部に出したくない大切な楽曲データ」をアップロードすることは規約やセキュリティ上NGであり、かつノートPCを常時起動させて配信サーバー化することはマシンの熱劣化を招くため避けたいという、インフラ面のジレンマに直面しました。
【現在の進捗】
PHP側のタイポによる500エラーのデバッグを乗り越え、現在はブラウザ上に {"success":true,"temp":28.0,"humidity":55} のような生の室温・湿度データがクリーンに返却されるバックエンドを100%完成させました。これにより、React側へのリアルタイムな数値反映（5分ごとのスキャン）に成功しています。ちなみに、完成した瞬間のネオンブルーの文字盤が最初に叩き出してきた数値は「28.6°C」。 開発に熱中しすぎて、自分がそんなに暑い部屋にいたことに全く気が付いていませんでした（画面を見て即エアコンをポチりました）。夏場も間近に迫り、室内での熱中症リスクが高まる季節です。コードのデバッグだけでなく、「自分の体調のデバッグ」のためにも、このリアルタイムモニターは大活躍する予感がしました（皆様も熱中症には本当に気をつけましょう……自戒を込めて）。
音楽プレイヤーについては、一旦ネット上に上げても問題のない「著作権フリーの作業用音源」数曲をPHPサーバーに仮置きし、再生・停止などのUIコントロールのプロトタイプ作成を進めています。
【今後の展望】
短期的にはフリー音源を用いた音楽プレイヤーのUI/UXをブラッシュアップし、ダッシュボードとしてのデザイン的な完成度を高めます。
長期的には、現在の転職活動を成功させた暁の「自分へのご褒美」として、中古の国内ビジネス向け省スペースミニPCを格安で調達し、Linuxを導入した「完全プライベートな自宅サーバー」を構築、そこに保存した楽曲を再生できるようにする計画を立てています。
これにより、インターネット（外の世界）に1ミリもデータを漏らすことなく、家のWi-Fi（ローカルネットワーク）内だけで門外不出の音楽や写真データをどの端末からでも自由・安全に閲覧できる「真の最強司令塔」としてデプロイすることを目指しています。
