Publishコンポーネント

このドキュメントでは、作品公開ウィザード (/project/[id]/publish) で使用されるタブコンポーネントとその関連サービスについて説明します。

1. 概要

作品公開ウィザードは、4つのタブ（Metadata / Localization / Quality / Final）で構成されるタブチェックポイント方式を採用しています。各タブは独立したコンポーネントとして実装され、任意の順序でアクセス可能です。タブにはステータスインジケーター（✅完了 / ⚠未完了）が表示され、全タブ完了時のみPublishボタンが有効になります。

アーキテクチャの変更（旧→新）

旧方式では5ステップの直進型ウィザード（Step 1→2→3→4→5）でしたが、タブチェックポイント方式に再構築されました。主な変更点:

直進型→タブ切替: ステップ番号による順序進行から、タブ名による独立アクセスに変更
Destination選択の統合: 旧StepDestination（独立ステップ）をFinalTab内に統合
共通タブコンポーネント: atom依存を排除したprops-onlyインターフェース
認証ガード: FinalTabのDestination Selectionセクションに認証チェックを追加

2. コンポーネント一覧

2.1. タブコンポーネント

コンポーネント	ファイル	役割	ステータス判定
`MetadataTab`	`components/publish/tabs/MetadataTab.tsx`	メタデータ（タイトル、あらすじ、タグ、表紙画像）の入力・AI提案	✅ titleOriginal && synopsisOriginal
`LocalizationTab`	`components/publish/tabs/LocalizationTab.tsx`	言語別メタデータの入力・AI翻訳	✅ title (en) && synopsis (en)
`QualityTab`	`components/publish/tabs/QualityTab.tsx`	AI品質レビュー（查読）の実行と結果表示	✅ reviewReportが存在しis_publishable
`FinalTab`	`components/publish/tabs/FinalTab.tsx`	最終プレビューと公開先選択・公開実行	✅ 上記3つがすべて ✅

2.2. 共通コンポーネント

コンポーネント	ファイル	役割
`AiSettingsSheet`	`components/common/AiSettingsSheet.tsx`	AIプロバイダー・モデル・パラメーターの統一設定シート

2.3. 関連サービス・フック

名前	ファイル	役割
`CoverImageService`	`lib/coverImageService.ts`	SHA-256ハッシュによる重複排除付き画像ストア（CRUD）
`useCoverImageUrl`	`hooks/useCoverImageUrl.ts`	CoverImageRecordからObject URLを非同期生成するReactフック
`usePublishActions`	`hooks/usePublishActions.ts`	Publish操作の統合ハンドラー（タブステータス計算・翻訳・查読・公開）
`calculateDimensions`	`lib/image-processing.ts`	アスペクト比を維持した画像リサイズ計算（純粋関数）

3. タブコンポーネント詳細

3.1. `MetadataTab`

作品の基本メタデータを入力します。旧StepMetadataをベースに、props-onlyインターフェースで再構築。

入力項目:
- タイトル（原典言語）
- キャッチコピー（headline）
- あらすじ
- タグ（最大10個）
- カバー画像（1:1.6クロッピング対応、CoverImageService経由で保存）
AI提案: AiSettingsSheetからプロバイダー設定を指定し、AIによるタイトル・あらすじの自動生成が可能

3.2. `LocalizationTab`

言語別メタデータ（localizationsフィールド）の管理とAI翻訳を行います。旧StepTranslationをベースに拡張。

機能:
- 言語別のタイトル・headline・あらすじ・タグの入力
- AI翻訳による自動生成（AiSettingsSheetから設定）
- プロット構造翻訳（structuredPlotが存在する場合）
- 言語ステータス表示（完了/部分/推奨/利用可能）
データフロー: ProjectRecord.localizations に { [lang]: ProjectLocalization } 形式で保存

3.3. `QualityTab`

AI品質レビューを実行し、結果を表示します。旧StepReviewをベースにprops-only化。

機能:
- AI查読レポートの生成（プロバイダー設定はAiSettingsSheetから）
- 禁止事項・警告事項の確認
- プレビュー表示
判定: レポートのis_publishableフィールドで公開可否を判定

3.4. `FinalTab`

最終プレビューと公開実行を統合したタブ。旧StepFinalとStepDestinationを統合。

セクション構成:
- Section 1（常時表示）: 入力内容の最終プレビュー
- Section 2（認証ガード付き）: 公開先スロットの選択・作成
  - 未認証時: ログイン案内Cardを表示（Destination Selection非表示）
  - 認証済み時: 通常のDestination Selection UI

4. 共通コンポーネント

4.1. `AiSettingsSheet`

AIプロバイダー・モデル・パラメーターを統一的に設定するSheetコンポーネント。MetadataTab、LocalizationTab、QualityTabで共有利用。

設定項目:
- プロバイダー選択（Gemini/OpenAI/Anthropic等）
- モデル選択
- Temperature / TopP パラメーター

5. 画像ストア

5.1. `CoverImageService`

SHA-256ハッシュによる重複排除付きBlobストア。coverImagesテーブルに画像を保存します。

メソッド:
- save(blob) → SHA-256ハッシュIDを返す（同一内容は重複排除）
- get(id) → CoverImageRecordを返す
- getUrl(id) → Object URLを生成して返す
- delete(id) → レコードを削除

5.2. `useCoverImageUrl`

CoverImageRecordからObject URLを非同期で生成するReactフック。コンポーネントのアンマウント時にURLを自動解放します。

6. 状態管理

Publish関連の状態は stores/publishStateAtoms.ts で管理されます。

タブ状態: activeTab: "metadata" | "localization" | "quality" | "final"
タブステータス計算: getTabStatus(state) / getAllTabStatuses(state) で各タブの完了状態を導出
Localizations: getLocalization(state, lang) / updateLocalization(state, lang, data) で言語別メタデータを操作

7. Publish ID（公開枠）概念

PublishIDは、ローカルのプロジェクトIDとは独立した「公開スロット」を識別するIDです。

特徴:
- プロジェクトを複製しても同じPublishIDを保持
- 更新公開時に同一スロットを上書き可能
- 閲覧統計はPublishID単位で集計

関連ドキュメント:

00_component_index - コンポーネント一覧
04_database_schema - IndexedDBスキーマ（coverImagesテーブル）
04_database_schema_supabase - Supabaseスキーマ
05_api_specification - API仕様
03_state_management - 状態管理

Publishコンポーネント

On this page