【React】理想の「枠なしミニマム音楽プレイヤー」を執念で作った話

1. なぜ作ったのか？

PC作業中に画面の隅に置いておける、無駄のないスタイリッシュな極小のミュージックプレイヤーが欲しいと思ったのがきっかけです。 「手元の音楽フォルダを一括で読み込めて、お気に入りのデザイン（黒背景にネオンブルー）で動く、自分だけの専用ガジェット」をReactで作ることにしました。

2. 立ちふさがる「セキュリティ」の壁との戦い

最初は、パソコン専用のアプリとして一番軽くて安全に動く仕組み（Tauri）を使って開発していました。しかし、ここで予期せぬ大ボスに遭遇します。

それは、Windowsやウイルス対策ソフトの「過剰防衛」です。

自作のプログラムを動かそうとした瞬間、セキュリティ機能から「お前は正体のわからない危険なアプリだ！」と認識されてしまい、ファイルを強制的にロックされてビルド（アプリ化）が一切通らなくなってしまったのです。

キャッシュを消したり、設定を変えたりとあらゆる手を尽くしましたが、OSの最深部でブロックされているため、これ以上このルートに時間を溶かすのはもったいないと判断。形を変えてアプローチすることにしました。

3. 「それならブラウザの仕組みを借りよう！」

次に試したのが、いつも使っているChromeなどのブラウザを通じてアプリ化する仕組み（PWA）です。これならセキュリティに引っかかることなく、安全に起動できます。

無事に画面は立ち上がったのですが、ここで新たなこだわりが生まれます。 ブラウザの仕組みを使っているせいで、画面の上部にどうしても「薄グレーのメニューバー（URLが表示される場所）」が残ってしまったのです。

「せっかくお気に入りのデザインにしたのに、この野暮ったいバーのせいで台無しになるのは嫌だ。透明なネオンの塊だけがデスクトップに浮いている状態を作りたい！」

そう考えた私は、さらに手段を変更し、「Electron（エレクトロン）」という別の技術へ舵を切りました。これを使うことで、「上のバーや枠線を完全に消し去り、背景を透明にする」という理想の見た目を手に入れることに成功しました。

4. 最後の難関：「使いやすさ」へのこだわり

枠を消して理想の姿になったプレイヤーですが、最後に2つの罠がありました。

• 罠1：背景を透明にしたら、クリックがすり抜けて操作できない
• 罠2：コンパクトすぎて、マウスを乗せたときに広がる「曲一覧リスト」が画面の外にはみ出て見えなくなる

これらも、アイデアで解決しました。 まず、人間の目には真っ黒に見えるけれど、システム的には「99%の黒（ほんのわずかに色がついている状態）」にCSSを設定。これで、見た目は透明感を保ったまま、ちゃんとマウスのクリックやホバーが反応するようになりました。

さらに、プレイヤーを画面の右下に配置していたため、リストが下にはみ出さないよう、「マウスが乗った瞬間、アプリの敷地を上にビューンと広げ、曲一覧が上に向かってスルスルと伸びる」という連動プログラムを実装しました。

これにより、起動するコマンドも1つに統合し、日常的にストレスなく使える「本物の実用的なガジェット」へと昇華させることができました。

5. この開発を通して学んだこと

今回の開発で一番の収穫は、エラーで行き詰まったときに「目的（理想の形を作ること）を達成するために、手段を柔軟に切り替えるおもしろさを知ったこと」です。

1つのやり方に固執せず、仕組みの違う技術（Tauri → PWA → Electron）へ柔軟にシフトし、泥臭く「これよこれ！」という理想の形まで持っていく課題解決力が身につきました。これからも、この執念を大切にモノづくりをしていきたいです。