Karaoke Library

Karaoke Library

公開日: 2026/10

Firebase Logomark Full Color
Firebase
Vercel_logo
Vercel
Next.js_logo
Next.js

Karaoke Library

自分に合うキーとレパートリーを記録するカラオケ曲帳

Karaoke Libraryは、歌いたい曲や得意な曲を、自分に合うキー・音域・採点履歴と一緒に管理できるWebアプリです。スマートフォンでの使いやすさを重視し、曲の検索・登録からオフラインでの閲覧・編集まで、カラオケでの選曲をサポートします。

アプリの概要

カラオケで「歌える曲が思い出せない」「前回ちょうどよかったキーを忘れてしまった」といった場面に役立つ、自分専用の楽曲ライブラリです。

iTunes検索や手動入力で楽曲を登録し、曲ごとにキー、オクターブ、歌える度、タグ、メモを保存できます。得意な曲とこれから挑戦したい曲を整理し、さまざまな条件から、その場で歌いたい一曲を探せます。

採点結果や音域も記録できるため、選曲だけでなく、日々の練習や振り返りにも活用できます。

こちらから利用可能=>https://karaoke.fvkuinu.com/

主な機能

楽曲検索・登録

iTunes検索から楽曲を探して追加できます。検索で見つからない曲は手動で登録でき、重複登録の検知にも対応しています。

キー・歌える度の管理

曲ごとにキーやオクターブ、歌える度、メモを記録できます。変更内容は自動保存されるため、カラオケ中にも手早く設定を残せます。

タグと条件による絞り込み

自由に作成できるタグで楽曲を分類。曲名・アーティスト・アルバムの検索に加え、歌える度やキー、最高得点などによる絞り込みで、歌いたい曲を見つけられます。

音域の管理・共有

原曲の音域を登録し、キーやオクターブの変更に応じた音域を計算できます。自分用の音域設定に加え、ほかのユーザーが投稿した原曲音域を参照する機能も備えています。

スコアの記録

採点結果を履歴として保存し、最高得点や過去の記録を確認できます。練習の成果を振り返り、次の目標づくりに役立てられます。

PWA・オフライン対応

ホーム画面に追加して、アプリのように起動できます。端末保存を有効にすると、保存済みの楽曲はオフラインでも閲覧・編集でき、通信復帰後に変更内容を同期します。

※初回ログイン、iTunes検索、共有音域の取得・投稿には通信が必要です。

表示のカスタマイズ

ライト/ダーク表示、アクセントカラー、一覧の表示密度を変更できます。使う環境や好みに合わせて、見やすい表示を選べます。

実装で工夫した点

カラオケ中に使いやすい操作設計

スマートフォンで曲を探し、設定を確認する流れを重視しました。検索・絞り込み・自動保存を組み合わせ、少ない操作で楽曲を管理できる構成にしています。

通信状況を考慮したデータ保存

Firestoreのローカル保存とSerwistによるPWA対応を組み合わせ、オフラインでも保存済みのデータを扱えるようにしました。通信完了を待たずに編集を続けられ、通信復帰時に変更を同期します。

個人データと共有データの分離

個人のキー設定・メモ・スコアと、共有する原曲音域を分離して管理しています。Firestoreのセキュリティルールでアクセスを制御し、個人の記録を保ちながら音域情報を共有できる仕組みにしました。

必要な場面に合わせたデータ取得

スコア履歴は楽曲詳細画面で読み込むなど、操作に応じて必要なデータを取得する構成にしています。検索処理にも入力待ちやキャッシュを取り入れ、不要な通信を抑えています。