「学園アイドルマスター(学マス)」の公式MVや歌唱動画を集めて、自分だけのプレイリストを作り、そのまま連続再生できるWebアプリ。インストールもログインも不要で、ブラウザだけで使える。ファンが個人で作った非公式アプリで、公式(バンダイナムコエンターテインメント)とは関係がない。
YouTubeで1曲ずつ探して再生するのが手間だったのがきっかけ。「このアイドルの曲だけ続けて聴きたい」「この曲を全員分聴き比べたい」といった聴き方を、手軽にできるようにした。
主な機能
- 絞り込みと検索: アイドル・曲・動画の種類で絞り込める。曲名やアイドル名はひらがなでも検索できる。
- プレイリスト作成: 「+」ボタンかドラッグで追加し、ドラッグで並べ替えもできる。「ランダム追加」なら指定した本数を自動で追加する。
- 聴き比べ: 曲を1つに絞って「表示中を追加」を押すと、その曲のソロ歌唱を1人1本ずつまとめて追加できる。
- 保存と共有: 作ったリストは保存して後から呼び出せる。URLで共有でき、Xなどに貼るとリスト名と曲名入りのカードが表示される。
- ミニプレイヤー: 画面をスクロールすると右下に小窓のプレイヤーが出て、再生が続く。PCのChrome・Edgeではピクチャーインピクチャー(別窓)でも再生できる。
- スマホ対応: スマートフォンのブラウザでも使える。
使い方
- アイドルや曲で絞り込む。
- 聴きたい動画を「+」ボタンかドラッグでプレイリストに追加する。
- 「再生」を押すと、リストの順に連続再生される。
- 気に入ったリストは保存するか、「共有」でURLを発行する。
技術構成
Next.jsで作り、静的なHTML・CSS・JavaScriptに書き出してCloudflare Pagesで配信している。公開しているのは静的ファイルだけで、アプリ用のサーバーやデータベース、ログインの仕組みは持たない。動画の再生にはYouTubeの埋め込みプレイヤーを使い、プレイリストやお気に入りはブラウザのlocalStorageに保存する。共有URLのカード画像は、Cloudflare Pages Functionsでリストの内容から生成している。
動画の一覧は、YouTube Data APIで公式チャンネルの動画を取得して自動で仮分類し、自分のPCだけで動く確認画面で曲名や参加アイドルを目で確かめてから公開データに反映している。APIキーや管理画面は公開サイトに一切含めない構成にした。
工夫した点
動画のタイトルや説明文の書き方は動画ごとにばらつきがあり、自動分類だけでは曲名や歌唱メンバーを取り違えることがある。そこで「自動で仮分類 → 自分で確認 → 確認済みのものだけ公開」という流れにし、確認していない分類の変更は公開側に出ないようにした。データを取り込む処理が失敗しても既存のデータを上書きしないようにしている。
聴く側の使い勝手では、ひらがな検索、スクロールしても再生が止まらないミニプレイヤー、曲ごとの聴き比べなど、ファンが実際にやりたくなる聴き方を優先して機能を足した。