Skip to content

dusty-jukebox: アルバム一覧をCDラックの分け方にする(R14) - #501

Merged
kumacha666 merged 1 commit into
mainfrom
claude/web-album-rack
Nov 1, 2026
Merged

kumacha666 merged 1 commit into
mainfrom
claude/web-album-rack

Conversation

@kumacha666

Copy link
Copy Markdown
Owner

概要

Android版で先に入れた「部屋のCDラック」のアルバム一覧を、Web版にもそろえる(R14)。

旧方式は「アルバム名+アルバムアーティスト(空なら曲のアーティスト)+フォルダ」で1枚にまとめていた。そのため次の2つの問題があった。

  • アルバムアーティストのタグが空で、曲ごとにアーティストが違う(feat.・コンピレーション等)と、1枚が複数に分かれる。
  • CD1/CD2のフォルダに分かれた2枚組も、2件に分かれる。

変更

  • 新設 src/albumRack.ts(純粋ロジック。Android版の core/AlbumRack・core/AlbumFolders と同じ規則)
    • CD1枚=1件:「アルバム名+まとめる単位のフォルダ」で1枚にする。
    • 何枚組:CD1・Disc 2・DISK04・ディスク1等のフォルダに入っている曲は、その上のフォルダで1枚にまとめる。収録曲はディスク番号の順に並べ、タグが無ければフォルダの番号を使う。その後トラック番号の順に並べる。
    • 棚(見出し):次の順で決める。見出しに枚数を出す。
      1. アルバムアーティスト
      2. 半分を超える曲のアーティスト
      3. どちらも無ければ「オムニバス」、アーティストが全く無ければ「不明なアーティスト」
    • 並べ方:アーティストの棚(既定。棚の中は発売の古い順。オムニバス・不明の棚は最後)/発売の古い順/発売の新しい順/アルバム名順。棚以外は見出し無しで、行にアーティストを出す。
    • 検索:アルバム名・棚の表示名の部分一致。
  • main.ts:loadCatalog()が読むfoldersタブのフォルダ名・親を使って何枚組をまとめる。今回Driveへ問い合わせた分も使う。一覧の描画はalbumRackRows()に置き換えた。
  • index.html:見出しの枚数の見た目。
  • dusty-jukebox/CLAUDE.mdに記録。

テスト(HEAD 4d8f959)

  • npm run deploy:unit 871件・E2E 122件すべて成功。app.js 315.84 kB、実クライアントIDを含むことを確認済み。SW v0.1.189→v0.1.190。
  • 新規ユニット albumRack.test.ts(24件)
    • ディスクのフォルダ名の判定(当たり・外れ)
    • feat.の寄せ集めが1枚になる/別フォルダの同名は別の1枚
    • CD1/CD2の2枚組が1枚になり、ディスク→トラック順に並ぶ
    • タグのディスク番号がフォルダより優先
    • 棚の決め方(アルバムアーティスト/過半数/ちょうど半分はオムニバス/不明)
    • 並べ方4種と見出しの枚数
    • 検索(オムニバスでも引ける)
  • 新規E2E
    • rackCatalogモック(foldersタブ付き)で、2枚組が1件になり、オムニバスの棚に入り、再生リストがディスク順になることを確認。
    • 既定の並べ方・選択肢・見出しの枚数を確認。
    • 既存のアルバムE2Eは、見出しの名前(.shelf-name)を見るように直した。
  • 変異チェック:foldersタブの情報を渡さないようにすると、新規E2Eが失敗する(2枚組が2件に分かれる)。元に戻して成功を確認済み。
  • 実機での見た目:未確認(ユーザー確認待ち)。
  • /code-review:未実施。

Generated by Claude Code

- CD1枚=1件:アルバム名+まとめる単位のフォルダで1枚にする(曲ごとのアーティストが違っても分けない)
- CD1/Disc 2等のフォルダに分かれた何枚組は、上のフォルダで1枚に(foldersタブのフォルダ名を使う)
- 棚:アルバムアーティスト → 半分を超える曲のアーティスト → オムニバス/不明。見出しに枚数
- 並べ方:アーティストの棚(発売順、既定)/発売の古い順/新しい順/アルバム名順
- 純粋ロジックはsrc/albumRack.ts(ユニット24件)、E2Eはfoldersタブ付きのモックで確認
- npm run deploy(871 unit + 122 E2E、SW v0.1.190)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Awe6vCLv7CpaEWVTkrHvpU
@kumacha666
kumacha666 marked this pull request as ready for review November 1, 2026 15:23

Copy link
Copy Markdown
Owner Author

レビュー対象HEAD: 4d8f9596c5667bcbf5edff3add629b4c3b61947b
Reviewed commit: 4d8f9596c5667bcbf5edff3add629b4c3b61947b

今回の確認範囲では、修正が必要な指摘はありません。

変更9ファイルと、関連するカタログ読み込み・フォルダ解決・絞り込み・再生リストへの設定を確認しました。Android版のcore/AlbumRack・AlbumFoldersとも照合しています。

  • アルバム名+まとめる単位のフォルダでの同一性、ディスクフォルダを親へまとめる処理、タグを優先してフォルダ番号を補う収録順を確認しました。
  • 棚の決定(アルバムアーティスト→曲のアーティストの過半数→オムニバス/不明)、特殊な棚を末尾に置く順序、4種類の並べ方、検索時の表示名を確認しました。
  • 項目別フィルタはアルバムの表示対象を絞り、再生ボタンにはそのアルバムの全収録曲を渡す従来の挙動が保たれています。棚の内部識別値はdisplayShelf()を通して表示されています。
  • フォルダ情報は既存キャッシュだけでなく、今回Driveで解決した情報も使うため、初回の読み込みでも何枚組をまとめられることを追加検証しました。

検証結果:

  • PLAYWRIGHT_CHROMIUM_PATH=/usr/bin/chromium npm run build: exit 0。ユニット 871件・既存E2E 122件すべて成功。TypeScript・Viteビルドも成功しました。
  • 実ブラウザでの追加検証 3件すべて成功:
    1. foldersキャッシュのデータ行が空の場合、DriveからCD1/Disc 2と親フォルダを取得し、2枚組を1件にまとめ、ディスク→トラック順で再生リストへ設定できる。
    2. 「オムニバス」での検索と枚数表示、見出しを持たない各並べ方、コンピレーションの全曲を再生リストへ渡す操作が機能する。
    3. 幅320px・表示倍率130%で、長い日本語の棚名・アルバム名・大きい枚数表示をレンダリング。見出しの折り返し、再生ボタンとの非重複、横方向へのはみ出しがないこと、ボタンの操作を確認した。スクリーンショットも目視確認しています。
  • Node 24.19.0 / npm 11.9.0 / Chromium 154.0.8037.57 available。OS依存ライブラリに不足はなく、実際にChromiumで実行しました。
  • Google Identity・Drive・Sheets APIはモックし、Service Workerは実物です。狭い画面の長い文字列は検証用にDOMへ設定しています。実ユーザーのDriveデータ・実機端末での表示や音声出力は今回未検証です。
  • この環境ではVITE_GOOGLE_CLIENT_IDが未設定のため、npm run deployは実行していません。コミット済みapp.jsの公開クライアントIDを子プロセスのみに渡して別の一時出力先へ再ビルドし、324,427バイトでコミット済みapp.jsと完全一致することを確認しました。IDは出力していません。SW版はv0.1.190です。
  • 差分チェック成功・作業ツリーはクリーン。投稿直前のremote HEADも上記SHAであることを確認しました。製品コードの変更、デプロイ、push、mergeは行っていません。レビューコメントの記録にはGitHub連携を使用しています。

@kumacha666
kumacha666 merged commit 9848501 into main Nov 1, 2026
@kumacha666
kumacha666 deleted the claude/web-album-rack branch November 1, 2026 15:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants