M.
Webツール Web

非公式 学マス プレイリストメーカー

学園アイドルマスターのMVや歌唱動画から自分だけのプレイリストを作って連続再生できる非公式Webアプリ。アイドル・曲で絞り込み、URLで共有もできる。

非公式 学マス プレイリストメーカーの画面。アイドルの選択欄と動画一覧、プレイリストが並んでいる

「学園アイドルマスター(学マス)」の公式MVや歌唱動画を集めて、自分だけのプレイリストを作り、そのまま連続再生できるWebアプリ。インストールもログインも不要で、ブラウザだけで使える。ファンが個人で作った非公式アプリで、公式(バンダイナムコエンターテインメント)とは関係がない。

YouTubeで1曲ずつ探して再生するのが手間だったのがきっかけ。「このアイドルの曲だけ続けて聴きたい」「この曲を全員分聴き比べたい」といった聴き方を、手軽にできるようにした。

主な機能

  • 絞り込みと検索: アイドル・曲・動画の種類で絞り込める。曲名やアイドル名はひらがなでも検索できる。
  • プレイリスト作成: 「+」ボタンかドラッグで追加し、ドラッグで並べ替えもできる。「ランダム追加」なら指定した本数を自動で追加する。
  • 聴き比べ: 曲を1つに絞って「表示中を追加」を押すと、その曲のソロ歌唱を1人1本ずつまとめて追加できる。
  • 保存と共有: 作ったリストは保存して後から呼び出せる。URLで共有でき、Xなどに貼るとリスト名と曲名入りのカードが表示される。
  • ミニプレイヤー: 画面をスクロールすると右下に小窓のプレイヤーが出て、再生が続く。PCのChrome・Edgeではピクチャーインピクチャー(別窓)でも再生できる。
  • スマホ対応: スマートフォンのブラウザでも使える。

使い方

  1. アイドルや曲で絞り込む。
  2. 聴きたい動画を「+」ボタンかドラッグでプレイリストに追加する。
  3. 「再生」を押すと、リストの順に連続再生される。
  4. 気に入ったリストは保存するか、「共有」でURLを発行する。

技術構成

Next.jsで作り、静的なHTML・CSS・JavaScriptに書き出してCloudflare Pagesで配信している。公開しているのは静的ファイルだけで、アプリ用のサーバーやデータベース、ログインの仕組みは持たない。動画の再生にはYouTubeの埋め込みプレイヤーを使い、プレイリストやお気に入りはブラウザのlocalStorageに保存する。共有URLのカード画像は、Cloudflare Pages Functionsでリストの内容から生成している。

動画の一覧は、YouTube Data APIで公式チャンネルの動画を取得して自動で仮分類し、自分のPCだけで動く確認画面で曲名や参加アイドルを目で確かめてから公開データに反映している。APIキーや管理画面は公開サイトに一切含めない構成にした。

工夫した点

動画のタイトルや説明文の書き方は動画ごとにばらつきがあり、自動分類だけでは曲名や歌唱メンバーを取り違えることがある。そこで「自動で仮分類 → 自分で確認 → 確認済みのものだけ公開」という流れにし、確認していない分類の変更は公開側に出ないようにした。データを取り込む処理が失敗しても既存のデータを上書きしないようにしている。

聴く側の使い勝手では、ひらがな検索、スクロールしても再生が止まらないミニプレイヤー、曲ごとの聴き比べなど、ファンが実際にやりたくなる聴き方を優先して機能を足した。

よくある質問

ログインやアカウント登録は必要ですか?

必要ない。プレイリストやお気に入りは、使っているブラウザの中にだけ保存される。

公式のアプリですか?

公式とは関係のない、ファンによる非公式アプリ。動画はYouTubeの公式チャンネルなどで公開されているものを埋め込みで再生している。

別の端末でもリストを使えますか?

保存したリストはブラウザごとに保存されるので、ほかの端末へは「共有」で発行したURLを開いて引き継げる。

再生できない動画があるのはなぜ?

動画はYouTubeの埋め込みプレイヤーで再生している。元の動画が非公開や削除になっている場合は再生できない。

保存したリストが見当たらないときは?

リストは使っているブラウザの中にだけ保存される。別のブラウザやプライベートモードで開いている場合や、ブラウザのサイトデータを消した場合は表示されない。大事なリストは「共有」でURLを発行しておくと、バックアップ代わりになる。

別のアプリを使いながら再生できますか?

PCのChrome・Edgeでは、ピクチャーインピクチャー(別窓)で再生できる。ページ内でスクロールしたときは、右下のミニプレイヤーで再生が続く。

非公式 学マス プレイリストメーカー についての記事

Cloudflare Pages Functions で共有リンクごとに OGP 画像を作る(workers-og・エッジキャッシュ・Server-Timing)

静的サイトのまま、共有リンクごとに中身入りの OGP 画像を出す仕組みを Cloudflare Pages Functions で作りました。クローラー向けの HTML とブラウザの転送、workers-og での画像生成、エッジキャッシュ、Server-Timing で測った生成時間と、render が 0ms になる理由までまとめます。

同じカテゴリの制作物

Moeter のタイトル画像。AIが生成した4人のキャラクターイラストが並んでいる
Webツール Web

Moeter

4枚のイラストから好きな1枚を選ぶ30問の回答から好みのキャラ属性を読み解き、結果に合わせたオリジナルキャラをAIが1枚描く診断Webアプリ。

  • #TypeScript
  • #Vite
  • #Hono
  • #Cloud Run
  • #Cloudflare
  • #画像生成AI
てまぬい図鑑ジェネレーター
Webツール Web

てまぬい図鑑ジェネレーター

写真をアップロードするだけでてまぬい図鑑カードを作れるWebアプリ。AI背景除去・フォント選択・PNG書き出し対応。

  • #JavaScript
  • #Canvas
  • #@imgly/background-removal
うちの子ID写真メーカー
Webツール Web

うちの子ID写真メーカー

ペットやキャラクターの証明写真風画像を作れるWebアプリ。背景色・位置を調整してダウンロード。

  • #JavaScript
  • #Canvas
  • #@imgly/background-removal