いのなびは、水瀬いのりさんのライブでまだ聴いたことのない曲や聴いたことがある曲を見つけられるサービスです。
- まだ聴いたことのない曲の一覧表示
自分が参加したライブ・会場名をチェックすると、聴いたことのない楽曲が一覧でわかります。 - 聴いたことのある曲の一覧表示
「あなたが実際に参加したライブで聴いたことのある曲のリスト」も確認できます。
「どの曲をすでに聴いていて、どの曲をまだ聴いたことがないのか」が一目で分かるので、ライブの予習・復習に便利です！
主要なディレクトリとファイルは以下のような構成になっています。
（すべてではありませんが、ざっくりとイメージできるよう抜粋しています）
.
├── .github/ # CI やリリースの自動化設定
├── src/ # アプリケーションのメインソース
│ ├── app/ # Next.js App Router ディレクトリ
│ │ ├── (list)/ # ライブ・会場・結果表示など一覧系のページ
│ │ ├── report/ # 新機能「聴いたことがある曲一覧」を表示するページ
│ │ ├── api/og/ # OGイメージを動的生成するAPI
│ │ └── layout.tsx # 全体のレイアウト
│ ├── components/ # UIコンポーネントや機能別コンポーネント
│ ├── data/ # 楽曲やライブ情報など静的データのJSON
│ ├── lib/ # 汎用的な処理やユーティリティ関数
│ └── test/ # テストコード
├── package.json # プロジェクト情報とスクリプト
├── pnpm-lock.yaml # pnpm のロックファイル
├── playwright.config.ts # Playwright (E2E) テスト設定
├── tailwind.config.ts # Tailwind CSS の設定
└── README.md # このファイル（いのなびの説明）| ツール | バージョン |
|---|---|
| Node.js | 20 系推奨 |
| pnpm | 9 系推奨 |
Node.js は Windows + WSLで動作確認をしています。
パッケージマネージャーにはpnpmを使用しています。
- GitHub 上の「Code」ボタンからリポジトリをクローン（
git clone） - リポジトリディレクトリへ移動します
- 以下のコマンドで依存関係をインストールします
pnpm install以下のコマンドで.env.localを作成します
ローカル環境でAPIを実行するときに使用します
touch .env.local
echo "HTTP_PREFIX=http://" >> .env.local以下のコマンドを実行すると、ローカル開発環境が起動します。
pnpm dev- 単体・結合テスト は Vitest を利用しており、下記コマンドで実行できます。
pnpm test- E2E テスト (Playwright) は以下のコマンドです。
pnpm e2e- トップページ
- いのなびの紹介や「今すぐ始める！」ボタンが表示されます。
- ライブ選択ページ
- 過去に開催されたライブの一覧が表示されるので、参加したライブにチェックを入れます。
- 会場選択ページ
- 選んだライブごとに会場一覧が表示されるので、参加した会場にチェックを入れます。
- 未聴曲の結果ページ
- まだ聴いたことのない曲が一覧で表示されます。
- 「全て聴いていた！」場合もちゃんとお祝いメッセージが表示されます。
- 聴いたことのある曲の一覧ページ
- 参加したライブ・会場で実際に聴いた楽曲を一覧と回数で確認できます。
ライブの思い出を整理したり、これからのライブ予習にぜひお役立てください！
何かアイデアや改善点があれば、お気軽に Issue や Pull Request で共有していただけると嬉しいです。
ライブをもっと楽しみましょう！🎉