#360

素材管理 (#306 ) (#381 )
開発環境では、**DB を壊さない前提で、migration → API → 画面 → 同期 → ZIP → 履歴**の順に見るのがよいです。今回の差分は素材管理全体に触っているので、単体でチョンチョン見るより、素材の一生を通すのが早いです。 ## 0. 先に方針 **やらないこと:** ```sh id="snb3i6" rails db:drop rails db:reset rails db:setup DISABLE_DATABASE_ENVIRONMENT_CHECK=1 ... ``` これは禁止。開発 DB に本番データを入れているなら、床板を剥がして耐震確認するようなものです。 --- ## 1. migration 確認まず現在の状態を見る。 ```sh id="qsdfpt" cd backend RAILS_ENV=development bundle exec rails db:migrate:status ``` その後、通常 migration。 ```sh id="a89fir" RAILS_ENV=development bundle exec rails db:migrate ``` 見るポイント: ```txt id="c1u57a" materials に source_* / normalized_source_key / version_no がある material_versions に event_type / file snapshot / source snapshot がある material_export_items がある material_sync_suppressions がある material_sync_sources がある既存 materials に material_versions version_no=1 create が backfill されている ``` 確認用: ```sh id="g4vd4m" RAILS_ENV=development bundle exec rails runner ' puts "materials=#{Material.count}" puts "versions=#{MaterialVersion.count}" puts "materials without versions=#{Material.left_joins(:material_versions).where(material_versions: { id: nil }).count}" puts "sync suppressions table=#{ActiveRecord::Base.connection.table_exists?(:material_sync_suppressions)}" ' ``` ここで `materials without versions=0` になれば、backfill は通っています。 --- ## 2. 既存素材一覧の画面確認フロントを起動して `/materials` を見る。 ```sh id="vl28jd" cd frontend npm run dev ``` 見る観点: ```txt id="i2ovxw" 初期表示で素材が出る初期表示ではグルーピングがオフタグなし素材も出るカード表示でサムネまたは代替テキストが出る一覧表示に切り替えられる q / tag_state / media_kind / sort / direction が効く ``` ここでまず、普通の素材一覧が壊れていないことを確認します。 --- ## 3. 左タグバーの確認 `/materials` を開いて左タグバーからタグを選ぶ。見る観点: ```txt id="n6udul" URL が tag_id=...&include_descendants=1&group_by=parent_tag になる選択中タグが左バーで強調される一覧上部に「選択中」の表示が出る「タグ選択を解除」で通常表示に戻れる解除後、tag_id / include_descendants / group_by / page が消える子タグ・孫タグの素材も一覧に出る親タググルーピングされる ``` 特に重要なのはこれ。 ```txt id="d33os0" 親タグ A を選択 A に直接紐づく素材 A > B に紐づく素材 A > B > C に紐づく素材が同じ一覧に出ること ``` --- ## 4. 選択タグから素材追加左タグからタグを選択した状態で、一覧上部の **このタグに素材を追加** を押す。見る観点: ```txt id="qdd5uw" 素材追加画面の tag 欄に選択中タグ名が初期入力されている file または url を指定して保存できる保存後 return_to で元のタグ選択済み一覧に戻る戻った一覧に追加した素材が出る material_versions に create が 1 件できる ``` Rails console でも確認できます。 ```sh id="i07rrb" RAILS_ENV=development bundle exec rails runner ' m = Material.order(id: :desc).first puts({ id: m.id, tag: m.tag&.name, versions: m.material_versions.count, version_no: m.version_no }.inspect) ' ``` --- ## 5. グループ見出しから素材追加親タググルーピング表示中に、各グループ見出しの **このタグに素材を追加** を押す。見る観点: ```txt id="fpx8w4" グループタグ名が tag 欄に初期入力される保存後、元の一覧に戻る追加素材がそのグループ内に出る ``` ここは今回の導線の肝です。棚の見出しから直接その棚へ素材を置けるかを見る。 --- ## 6. 素材更新と履歴既存素材の詳細または編集導線から、タグ・URL・ファイル・export path を更新する。見る観点: ```txt id="w36i61" 更新前 snapshot が無ければ create が補われる更新後 update version ができる file_blob_id / file_filename / file_sha256 が material_versions に入る export_paths_json が履歴に残る /materials/changes または /materials/versions で履歴が見える ``` console: ```sh id="a3okhv" RAILS_ENV=development bundle exec rails runner ' m = Material.order(updated_at: :desc).first puts m.material_versions.order(:version_no).map { |v| [v.version_no, v.event_type, v.tag_name, v.file_filename, v.file_sha256, v.export_paths_hash] }.inspect ' ``` --- ## 7. サムネイル画像素材を追加して、一覧にサムネイルが出るか確認。動画素材があるなら、`ffmpeg` が入っている環境で backfill。 ```sh id="qxm8fj" cd backend RAILS_ENV=development bundle exec rails materials:thumbnails:backfill ``` 見る観点: ```txt id="s9a1vf" 画像は 180x180 のサムネが付く動画はフレームからサムネが作られる非対応ファイルは代替テキスト表示になるログに result が出る ``` --- ## 8. ZIP export export path がある素材を用意して、ブラウザで確認。 ```txt id="aq7f7o" /materials/download.zip?profile=legacy_drive ``` 見る観点: ```txt id="h4rve5" ZIP が落ちる entry path が material_export_items.export_path になる disabled な export item は入らないファイル実体が欠けている場合は 422 と missing_files が返る ``` --- ## 9. 抑止 `/materials/suppressions` で path prefix 抑止を追加する。見る観点: ```txt id="w80jbu" member で作成できる guest は forbidden / unauthorized google_drive_path_prefix で既存素材が discard される discard 履歴が material_versions に残る同期時に同じ source_path 配下が再作成されない ``` --- ## 10. Google Drive 同期開発環境では、まず小さいフォルダでやるのがよいです。いきなり本番素材集フォルダを食わせると、ログが藪になります 🌿 必要な ENV: ```sh id="kzbb7f" GOOGLE_DRIVE_SERVICE_ACCOUNT_EMAIL=... GOOGLE_DRIVE_PRIVATE_KEY_PATH=... MATERIAL_SYNC_SOURCE_KIND=google_drive_path MATERIAL_SYNC_SOURCE_FILE_ID=<folder_id> MATERIAL_SYNC_SOURCE_NAME=dev-small-folder MATERIAL_SYNC_SOURCE_PROFILE=legacy_drive ``` seed で source 作成、または console で作成。 ```sh id="sec40c" RAILS_ENV=development bundle exec rails db:seed RAILS_ENV=development bundle exec rails materials:sync ``` 見る観点: ```txt id="a5ltqu" imported / updated / unchanged / suppressed / failed がログに出る 2 回目実行で unchanged が増える tag は nil のままでも保存できる人手で tag / url を付けた既存同期素材が、再同期で消えない Google native file は skip される download 後 sha256 block が効く ``` --- ## 11. schema.rb は別途確認これはテストというより merge gate です。今回まだ怪しいので、差分に以下が混ざっていないことを確認します。 ```txt id="s3k6da" wiki_assets 削除 wiki_pages.next_asset_no 削除素材管理と無関係な CHECK constraint 削除素材管理と無関係な index order 消失 ``` ここが残るなら、機能テストが通っても merge は止めた方がいいです。 --- ## 最小テスト順時間がないなら、この順で十分です。 ```txt id="c1k2pw" 1. db:migrate 2. materials without versions = 0 を確認 3. /materials 初期表示 4. 左タグ選択 → 子孫込み表示 → グルーピング 5. タグ選択解除 6. 選択タグから素材追加 → return_to で戻る 7. グループ見出しから素材追加 8. 更新して material_versions を確認 9. ZIP export 10. 小さい Drive folder で materials:sync を 2 回 ``` これで、今回の差分の主要な導線はほぼ踏めます。 Reviewed-on: #381 Co-authored-by: miteruzo <miteruzo@naver.com> Co-committed-by: miteruzo <miteruzo@naver.com>
2026-06-29 01:22:33 +09:00 · 2026-06-28 06:35:53 +09:00
@@ -1,9 +1,10 @@
-import { act, fireEvent, screen, waitFor } from '@testing-library/react'
+import { act, fireEvent, screen, waitFor, within } from '@testing-library/react'
 import { Route, Routes } from 'react-router-dom'
 import { beforeEach, describe, expect, it, vi } from 'vitest'

 import TheatreDetailPage from '@/pages/theatres/TheatreDetailPage'
 import { buildPost,
+	 buildTag,
 	 buildTheatre,
 	 buildTheatreComment,
 	 buildTheatreInfo,
@@ -96,6 +97,9 @@ const renderPage = (user = buildUser ({ id: 1, role: 'member' })) =>
      { route: '/theatres/7' },
  )

+const tagSection = (): HTMLElement =>
+  screen.getAllByRole ('heading', { name: 'タグ' })[0].closest ('section')!
+
 const mockDefaultApi = () => {
  api.apiGet.mockImplementation ((path: string) => {
    switch (path)
@@ -245,6 +249,54 @@ describe ('TheatreDetailPage', () => {
    expect (postEmbed.seek).not.toHaveBeenCalledWith (0)
  })

+  it ('shows child tags from the post tag tree in both vertical and horizontal layouts', async () => {
+    const childTag = buildTag ({ id: 12, name: '子タグ', category: 'general' })
+    const parentTag = buildTag ({
+      id:       11,
+      name:     '親タグ',
+      category: 'general',
+      children: [childTag],
+    })
+    const duplicateParentTag = buildTag ({
+      id:       13,
+      name:     '別親タグ',
+      category: 'general',
+      children: [childTag],
+    })
+
+    postsApi.fetchPost.mockResolvedValueOnce (buildPost ({
+      ...currentPost,
+      tags: [parentTag, duplicateParentTag],
+    }))
+
+    renderPage ()
+
+    await screen.findByText ('Embed:上映中の投稿')
+
+    expect (within (tagSection ()).getByRole ('link', { name: '親タグ' }))
+      .toBeInTheDocument ()
+    expect (within (tagSection ()).getByRole ('link', { name: '別親タグ' }))
+      .toBeInTheDocument ()
+    expect (within (tagSection ()).getByRole ('link', { name: '子タグ' }))
+      .toBeInTheDocument ()
+    expect (within (tagSection ()).getAllByRole ('link', { name: '子タグ' }))
+      .toHaveLength (1)
+
+    fireEvent.click (screen.getByRole ('button', { name: '2 列 A 型' }))
+    fireEvent.click (screen.getAllByRole ('button', { name: '横並び' })[0])
+
+    await waitFor (() => {
+      expect (within (tagSection ()).getByRole ('link', { name: '親タグ' }))
+	.toBeInTheDocument ()
+      expect (within (tagSection ()).getByRole ('link', { name: '別親タグ' }))
+	.toBeInTheDocument ()
+      expect (within (tagSection ()).getByRole ('link', { name: '子タグ' }))
+	.toBeInTheDocument ()
+      expect (within (tagSection ()).getAllByRole ('link', { name: '子タグ' }))
+	.toHaveLength (1)
+    })
+  })
+
  it ('does not advance host post while video length is unknown', async () => {
    api.apiPut.mockImplementation ((path: string) => {
      switch (path)
@@ -102,10 +102,33 @@ const compareTagName = (a: Tag, b: Tag): number =>
    a.name === b.name ? 0 : (a.name < b.name ? -1 : 1)


-const tagsByCategory = (tags: Tag[]): Partial<Record<Category, Tag[]>> => {
-  const grouped: Partial<Record<Category, Tag[]>> = { }
+const flattenTags = (tags: Tag[]): Tag[] => {
+  const flattened: Tag[] = []
+  const seen = new Set<number> ()
+
+  const visit = (tag: Tag) => {
+    if (seen.has (tag.id))
+      return
+
+    seen.add (tag.id)
+    flattened.push (tag)
+
+    for (const child of tag.children ?? [])
+      visit (child)
+  }

  for (const tag of tags)
+    visit (tag)
+
+  return flattened
+}
+
+
+const tagsByCategory = (tags: Tag[]): Partial<Record<Category, Tag[]>> => {
+  const flattenedTags = flattenTags (tags)
+  const grouped: Partial<Record<Category, Tag[]>> = { }
+
+  for (const tag of flattenedTags)
    {
      grouped[tag.category] ??= []
      grouped[tag.category]!.push (tag)