この記事は2026年ワンマンソン18班の参加記事です。
技術賞をいただきました！！
制作物
ライブをもっと身近に体験できるものにしたいという思いから、スマホをペンライトに見立てた同時視聴アプリを作成しました。
youtubeやニコニコ動画のボカロ曲のURLを貼るだけでルームが作成され、初音ミクがリズムに合わせて踊ってくれます
メンバー
24B エルマer 全員自認の魔法少女ということがきっかけにチームが結成されました。悪魔役担当です。そこ、黙りなさい。
24B あきも 最近はワスのことばかり考えています。すき……
24B otima 進捗の魔女。その性質はシンギュラリティ。勝手に手下だと思っているClaude Codeにコードを書かせ、自分で書くことはない。
サービス紹介
曲選択画面
似たサービスとして挙げられる音ゲーなんかは遊べる曲に限りがありますが、このアプリの対象楽曲は無限です！
『初音ミク「マジカルミライ 2026」楽曲コンテスト』の６曲から選んでもよし、YouTubeやニコニコ動画から好きな曲のURLを貼っても曲情報を解析できます。産総研のAPIスゴイネ。
待機画面
曲情報の解析が終わると部屋が作成され、QRコードを読み込むことで観客として参加できます。
スマホの画面は以下のようにペンライト風の画面になります。
ペンライトの色を変えられるだけでなくライブ中にtraQ上のスタンプを画面に送ることもできるよ！
ライブ画面
ライブが始まったらあとはスマホを心赴くままに振りまくってください。手元で設定したペンライトの色や振りがリアルタイムに反映されます！
開発の流れ
TextAlive App APIを使って何か作りたいという話があり、いろいろアイデアを出し合った結果リアルタイム型のアプリケーションを作ることになりました。分担は成り行きで
- フロントエンド：エルマer、otima
- バックエンド、同期周り：あきも
という感じになりました。
フロントエンド
なぜかフロントも最初の二週間くらいは何も動いてませんでしたね（？？？）
バックエンド側でAPIを叩いて楽曲情報を取得が実装されるまでに画面構成とか考えようとしたんですが、、、、
結局、最終発表前日に画面を作り終えました。
フロント側で特筆すべき点があるとすれば、MMD（初音ミクの3Dモデル）をブラウザ上で動かす部分ですかね。three.jsにMMDとVMDを読み込むための公式アドオンが用意されていたのでこれを軸に実装しました。
APIからサビかどうかの判定がもらえるので、サビ用のモーション配列とサビ以外でのモーション配列をあらかじめ作っておいて曲の小節ごとにモーションを切り替えるといった構成になっています。
バックエンド＆同期周り
仕様を決めるが大変というか面倒くさくて、最初の2週間ぐらいは何もしていませんでした。
技術賞をいただいたので技術的な部分について触れると、サーバーはRustで実装しています。これはリソースにそれほど余裕がないNeoShowcaseにデプロイするためです。しかし楽曲情報の取得にはTextAlive App APIを使わねばならず、規約上公式のJavaScriptクライアント以外を使うのは怪しそうだったため、必要なときだけDenoを起動して楽曲情報を取得するという構成にしました。
同期はWebTransportと、独自に定義した形式のバイナリで行っています。サーバー内部ではそれほど複雑な処理を行わないので、実装自体は思っていたより順調に進みました。ラスト3日ぐらいでフロントエンドとの繋ぎこみをやって完成！
感想
エルマer
マジカルミライにアプリ開発のプログラミングコンテストがあるんだ、いつか作ってみたいなと思っていたので、付き合っていただいた二人は感謝です。
TextAlive App APIを使ってアプリを作りたいと言い出した身として最初の二週間、班として動きがなかったのは反省ですね。最終発表があと一週間先だったら一曲を通してミクさんに気持ちよく歌ってもらえたかなぁって。でもwebの王と産総研にキャリーしてもらえて技術賞もらえてはっぴーなのでよしとしよう。
来年はプログラミングコンテストに作品を提出できるようにがんばります。
あきも
元々今年の1-Monthonは参加を見送ろうと考えていたのですが、おだてられたので気分が良くなってうっかり参加してしまいました。
思ったより夏休みにバイトを入れすぎてしまったので最初はちょっと後悔していましたが、結果は技術賞ということで頑張った甲斐があったなぁと感じています。
個人的には今年の春ハッカソンで最終日にいざサーバーを動かそうとしたら大量のバグが見つかって上手くいかなかった反省を踏まえ、ちゃんとテストを書くようにしたことで（問題はそれなりにあったものの）一応動くものが作れたのが良かったです。
WebTransportを触るのは初めてでしたが、使ってみて初めて分かること（ブラウザ間の挙動の差）などもありました。やっぱり新しい技術に触れるのは楽しいな〜と思います。
otima
主にスケジュール管理とコミュニケーションができてないせいで最後地獄を見ましたが、案と行動があればものって作れるもんだなと思いました。必要なのは金とコミュニケーション💪💪💪
技術賞は王とClaudeのおかげです。
