前回は、天音結歌がどんな音楽Botなのかを、開発の歩みと一緒に紹介しました。今回はその続きで、「画面」のお話です。天音結歌には、ブラウザから使うWebUIと、ボイスチャンネルの中でみんなで触れるDiscord Activityという、2つの操作画面があります。順番で言うと、実はWebUIのほうが先に生まれました。今回は、その理由から順番に掘り下げていきます。
なぜWebUIから作ったのか
Activityより先にWebUIを作ったのには、理由が3つあります。
いちばんの理由は、やっぱり「コマンドを打たなくても操作できるようにしたかった」ことです。ボタンを押して曲を選べる画面がブラウザにあれば、コマンドを覚えなくても音楽を楽しめます。
2つ目は、管理画面として使いたかったこと。状態の確認や設定まわりは、チャットのコマンドより画面で見られたほうが分かりやすいんです。
そして3つ目は、「みんなが音楽をどんなふうに聴いているかを知りたかった」ことです。再生履歴やランキングを見れば、そのサーバーの音楽の傾向が見えてきます。聴き方を目に見える形にするのは、WebUIの大事な役割だと思っています。
WebUIの画面たち
ログインすると、Apple Music風のホーム画面が開きます。検索はサジェスト（入力の候補）付きで、ライブラリには最近追加した曲やお気に入り、ランキング、プレイリスト、アーティストごとのページもそろっています。
プレイヤー画面では、キューの曲順をドラッグ＆ドロップで並び替えられるようにしました。画面の下部にはプレイヤーが固定表示されるので、どの画面にいても今かかっている曲が見えるようになっています。
読み込みの速さにも気を配っていて、スケルトン表示や遅延読み込みで待ち時間を軽くしています。PWAにも対応しているので、スマホのホーム画面からアプリみたいに開けます。そして2026年9月には、「Quiet Stage」というデザインに全面刷新しました。使うたび目に入る画面なので、見た目にも気持ちよくあってほしかったんです。
ブラウザ再生とDiscord再生の「引き継ぎ」
WebUIでは、再生の方法を「Discordで再生」と「ブラウザで再生」の2つから切り替えられます。ブラウザ再生は、キャッシュ済みの音声をブラウザで直接流す仕組みです。
面白いのは、その「引き継ぎ」です。ボイスチャンネルに自分ひとりだけのときは、Discord側で流れていた再生状態をそのままブラウザに引き継いで、VCを抜けて持ち出せるようにしました。ひとりで聴いていた続きを、場所を変えてそのまま聴けるわけです。
でも、ほかの人も一緒に聴いているときは、この持ち出しはできないようにしています。みんなで聴いている音楽を、自分だけ抜けて持っていってしまうのは、やっぱり違うと思うんです。ささやかな配慮ですが、ここは譲れないところでした。
あわせて、画面を移動しても音楽が止まらないように、ページ全体を読み直さない部分遷移（SPA風の画面切り替え）も入れました。2026年10月にはMedia Session APIにも対応して、スマホのロック画面に曲情報が出て、そこから再生や一時停止ができるようになっています。
Discord Activity：ボイスチャンネルの中の共有画面
もうひとつの画面がDiscord Activityです。ボイスチャンネル内から起動すると、その場にいる全員が同じ画面を見て、触れるようになります。Now Playingの表示、再生コントロール、キューの操作、検索して曲を追加したり、お気に入りやプレイリストから追加したりといったことが、画面をポチポチ触るだけでできます。
実はこのActivity、2026年7月12日に、最小プロトタイプからPhase 4（お気に入り・プレイリストからの追加）までを1日で一気に作ってしまったものなんです。我ながら、勢いのある日でした。
なお、DJロールを設定したサーバーでは、操作できる人をDJロールを持っている人に限れるようにしてあります。誰でも触れる気軽さと、荒らされない安心感のバランスを取るための仕組みです。
同期は「3秒ポーリング」
Activityの画面は、みんなで同じ状態を見ていられる必要があります。本当は、サーバーからリアルタイムに更新を送るSSEという仕組みで同期したかったのですが、Discord Activityのサンドボックス環境ではEventSourceがうまく中継されず、使えませんでした。
そこで割り切って、3秒ごとに最新の状態を取りにいくポーリング方式に切り替えました。少し間隔はありますが、みんなで聴く音楽の操作画面としては十分に追いつく速さです。理想の仕組みが無理なら、まず動く仕組みに倒す。制約に合わせて判断するのも大事だなと思いました。
ついでに言うと、サンドボックスの外部接続の制限に合わせて、フォント（LINE Seed JP）はファイルを同梱し、アイコンはインラインSVGに、曲のサムネイルはプロキシ経由で表示するといった、細かい工夫も入れています。
Figmaのデザインを実測で再現する
2026年9月には、Activityの画面をFigmaのデザインに合わせて全面再構築しました。そのときにやったのが「実測」です。Figmaの7つのアートボードを1920×1080の基準で測って、余白やサイズをピクセル単位で合わせ込んでいきました。
この再構築で、歌詞ビューや背景のアニメーション、長いタイトルが流れて表示されるマーキーも入りました。画面の見た目って、使っていて気持ちいいかどうかを左右する大事なところだと思うので、時間はかかりましたが、こだわってよかったなと思っています。
同期歌詞の仕組み
Activityでは、曲の再生に合わせて歌詞が流れる「同期歌詞」が表示されます。歌詞のデータは、認証不要で使える無料の歌詞API「LRCLIB」のものを使っています。
ただ、動画のタイトルには「【MV】」みたいな飾りが付いていることが多いので、そのままでは歌詞が見つかりにくいんです。そこで、タイトルから飾りの部分を取り除いて候補を作り、曲名・アーティスト・曲の長さで点数を付けて、いちばん合いそうな歌詞を選ぶ仕組みにしました。地味な工夫ですが、歌詞がちゃんと出るかどうかは体験に直結するので、ここは丁寧に作ったところです。
小さい画面（PiP）の工夫
Activityをピクチャ・イン・ピクチャやフローティング表示にすると、画面がとても小さくなります。そこで、小さい表示のときは360×203の専用デザインに自動で切り替わるようにしました。ゲームや作業の片隅に小さく置いても、今の曲と最低限の操作は見えるように、という工夫です。
次回予告
第3回は「AI選曲編」です。「こんな雰囲気の曲をかけて」というお願いから選曲してくれる /mix の仕組みや、キューが尽きそうになると関連曲を足し続けてくれるインフィニティ再生、選んだ曲が本当に存在するのかを確かめる仕組み、費用を管理する工夫まで、AI選曲まわりを掘り下げます。お楽しみに。
コメント