💻 Web管理画面
概要
Web管理画面は、ブラウザからアクセス可能な管理インターフェースです。Cloudflare Accessで保護された安全な環境で、全ブランドの管理業務を統合的に行えます。
🎯 Web管理画面の役割
主要機能:
- ブランド設定管理
- 注文状況監視
- 顧客データ管理
- システム設定
- 分析・レポート機能
アクセス方法:
- URL: https://admin.contents-print.jp
- 認証: Cloudflare Access + Google認証
- デバイス: PC・タブレット対応
システム構成
🏗️ 技術スタック
フロントエンド:
- Framework: Next.js 14
- UI: Tailwind CSS + shadcn/ui
- State: Zustand
- Authentication: Cloudflare Access連携
バックエンド:
- API: Cloudflare Workers (Hono)
- Database: Cloudflare D1 (SQLite)
- Storage: Cloudflare R2
- Cache: Cloudflare KV
インフラ:
- Hosting: Cloudflare Pages
- Domain: admin.contents-print.jp
- SSL: Automatic (Cloudflare)
- CDN: Global (Cloudflare)
🔐 セキュリティ設計
認証・認可:
- Primary: Cloudflare Access
- Identity: Google OAuth
- Session: 24時間
- MFA: 自動（Google Account）
アクセス制御:
- Geography: Japan only
- IP Filtering: なし（柔軟性重視）
- Device Trust: 登録デバイス推奨
- Rate Limiting: 100req/min
機能仕様
🐛 デバッグ画面（最優先・MVP前必須）
📊 デバッグダッシュボード（メイン画面）
システム全体ステータス:
🚥 総合ステータス:
- 🟢 ALL GREEN: すべて正常
- 🟡 PARTIAL: 一部警告あり
- 🔴 CRITICAL: 重要エラーあり
- ⚫ UNKNOWN: 未確認
📈 リアルタイム監視:
- システム稼働時間: XX時間XX分
- 最終ヘルスチェック: X分前
- 24時間エラー数: XX件
- アクティブ接続数: XX
🔗 クイックテスト:
- [全システムテスト実行] ボタン
- [緊急診断モード] ボタン
- [ログ確認] ボタン
重要システム一覧:
📡 Cloudflare Workers API: 🟢 正常 (12ms)
🗄️ D1 Database: 🟢 正常 (8ms)
🛒 Shopify API: 🟡 警告 (234ms)
📧 Email Service: 🟢 正常 (45ms)
🖨️ Factory System: 🔴 エラー (タイムアウト)
🔐 Cloudflare Access: 🟢 正常 (15ms)
🧪 段階的テストフロー
Phase 1: 基礎インフラ確認
ステップ1: Cloudflare Workers起動確認
- GET /api/health → 200 OK
- レスポンス時間測定 < 100ms
- メモリ使用量確認
ステップ2: D1データベース接続確認
- SELECT 1 → 成功
- brands テーブル読み取り → 3件取得
- ログテーブル書き込み → 成功
ステップ3: Cloudflare R2ストレージ確認
- バケット存在確認 → 成功
- テストファイル書き込み → 成功
- ファイル削除 → 成功
Phase 2: 認証・セキュリティ確認
ステップ4: Cloudflare Access確認
- ヘッダー取得: CF-Access-Authenticated-User-Email
- 権限確認: 管理者権限チェック
- セッション有効性確認
ステップ5: API認証確認
- JWTトークン生成・検証
- レート制限動作確認
- CORS設定確認
Phase 3: ブランド機能確認
ステップ6: ブランド設定テスト
- neko ブランド設定取得
- tokinoe ブランド設定取得
- 設定更新・保存テスト
ステップ7: 写真アップロード・画像処理テスト
- ファイルアップロード機能確認
- 印刷データ生成（高解像度）
- サムネイル生成（低解像度）
- R2ストレージ保存確認
- ブランド別仕様適用確認
- App Check認証下でのサムネイル表示確認
- CDN配信・キャッシュ動作確認
- 異なるデバイス・ブラウザでの表示確認
ステップ8: メールテンプレートテスト
- テンプレート読み込み
- Liquid レンダリング確認
- 出力形式確認
Phase 4: 外部連携確認
ステップ9: Shopify API連携
- 認証・接続確認
- 商品一覧取得テスト
- Webhook受信確認
ステップ10: 工場システム連携
- 印刷API接続確認
- 印刷データ転送テスト
- ステータス取得テスト
- テスト印刷依頼
ステップ11: メール送信確認
- SMTP接続テスト
- テストメール送信
- 配信ログ確認
Phase 5: エンドツーエンドフロー
ステップ12: 注文処理フロー模擬
- 模擬写真アップロード
- 画像処理・保存確認
- ブランド判定テスト
- 注文データ生成
- メール送信テスト
- 工場印刷データ転送テスト
ステップ13: 設定更新フロー
- ブランド設定変更
- サイト反映確認
- ロールバックテスト
🖥️ デバッグ画面UI設計
メインダッシュボード:
ヘッダー部分:
- 総合ステータスバッジ（大きく表示）
- 最終更新時刻
- [全システムテスト] ボタン
- [緊急診断] ボタン
システム状況カード（6列グリッド）:
Card 1: Cloudflare Workers
- ステータス: 🟢 正常
- レスポンス: 12ms
- 稼働率: 99.98%
- [テスト実行] ボタン
Card 2: D1 Database
- ステータス: 🟢 正常
- レスポンス: 8ms
- レコード数: 1,234
- [接続テスト] ボタン
Card 3: Shopify API
- ステータス: 🟡 警告
- レスポンス: 234ms
- API制限: 87%使用
- [Shopifyテスト] ボタン
Card 4: Email Service
- ステータス: 🟢 正常
- レスポンス: 45ms
- 送信数: 23通/日
- [メールテスト] ボタン
Card 5: Factory System
- ステータス: 🔴 エラー
- レスポンス: タイムアウト
- 最終成功: 2時間前
- [工場テスト] ボタン
Card 6: 画像処理システム
- ステータス: 🟢 正常
- 処理時間: 1.2s
- R2容量使用率: 23%
- [画像テスト] ボタン
段階的テスト画面:
プログレスバー:
- Phase 1: 基礎インフラ [完了]
- Phase 2: 認証・セキュリティ [実行中]
- Phase 3: ブランド機能 [待機]
- Phase 4: 外部連携 [待機]
- Phase 5: E2Eフロー [待機]
詳細テスト結果:
テーブル形式で表示:
| ステップ | テスト名 | 状態 | 時間 | 詳細 |
|---------|---------|------|------|------|
| 1.1 | Workers起動 | ✅ | 12ms | 正常 |
| 1.2 | DB接続 | ✅ | 8ms | 3テーブル確認 |
| 2.1 | 認証確認 | 🔄 | - | 実行中... |
エラー詳細表示:
エラー発生時のポップアップ:
- エラーメッセージ
- スタックトレース
- 推奨対処法
- 再試行ボタン
リアルタイムログビューア:
ログレベル選択:
- [ALL] [ERROR] [WARN] [INFO] [DEBUG]
ログ表示:
- タイムスタンプ
- レベル
- サービス名
- メッセージ
- 詳細（JSON展開可能）
検索・フィルタ:
- キーワード検索
- 時間範囲指定
- サービス絞り込み
🚨 自動診断・アラート機能
緊急診断モード:
トリガー条件:
- 総合ステータスが CRITICAL
- 3つ以上のサービスでエラー
- 手動実行
診断内容:
1. ネットワーク疎通確認
2. DNS解決確認
3. SSL証明書確認
4. データベース整合性確認
5. 設定ファイル確認
自動修復機能:
- キャッシュクリア
- 接続リセット
- 設定リロード
- サービス再起動
アラート設定:
即座通知（Critical）:
- システム全体ダウン
- データベース接続不可
- Shopify API認証失敗
- 工場システム3回連続失敗
定期通知（Warning）:
- レスポンス時間悪化（>500ms）
- API使用率80%超
- ディスク容量80%超
- エラー率5%超（1時間内）
レポート自動生成:
日次レポート:
- システム稼働率サマリ
- エラー発生状況
- パフォーマンス推移
- 改善推奨事項
週次レポート:
- 全テスト結果サマリ
- システム健全性スコア
- 外部サービス依存度分析
- 技術債務レポート
🎨 shadcn/ui コンポーネント実装
デバッグダッシュボード実装:
メインレイアウト:
- Alert（総合ステータス表示）
- Progress（全体進捗バー）
- Button（全システムテスト・緊急診断）
システム状況カード:
- Card（各サービスステータス）
- Badge（ステータス色分け）
- Progress（レスポンス時間・使用率）
- Button（個別テスト実行）
段階的テスト画面:
- Stepper（フェーズ進行状況）
- Table（テスト結果一覧）
- Dialog（エラー詳細表示）
- Toast（テスト完了通知）
ログビューア:
- Select（ログレベル選択）
- Input（検索・フィルタ）
- ScrollArea（ログスクロール表示）
- Code（JSON詳細表示）
🚀 MVP前必須テスト項目チェックリスト
Phase 1: 基礎インフラ（必須100%）
□ Cloudflare Workers 起動確認
- GET /api/health レスポンス確認
- メモリ使用量 < 128MB
- レスポンス時間 < 100ms
□ D1 Database 接続確認
- SELECT 1 実行成功
- brands テーブル 3件取得
- system_logs 書き込み成功
- 接続プール正常動作
□ Cloudflare R2 ストレージ確認
- バケット存在確認
- ファイル作成・読み込み・削除
- 権限設定確認
Phase 2: 認証・セキュリティ（必須100%）
□ Cloudflare Access 動作確認
- CF-Access-Authenticated-User-Email 取得
- 管理者権限確認
- セッション有効性確認
□ API セキュリティ確認
- CORS 設定動作確認
- レート制限動作確認
- 不正アクセス遮断確認
Phase 3: ブランド機能（必須80%）
□ ブランド設定管理
- neko ブランド設定取得・更新
- tokinoe ブランド設定取得・更新
- JSON 設定の保存・読み込み
□ 利用規約管理
- 規約テンプレート生成
- バージョン管理動作
- API エンドポイント動作
□ 写真アップロード・画像処理
- ファイルアップロード機能動作
- 印刷データ生成（高解像度）
- サムネイル生成（低解像度）
- R2ストレージ保存確認
- ブランド別画像仕様適用
- App Check + サムネイル表示確認
- CDN・キャッシュ動作確認
- クロスブラウザ表示確認
□ メールテンプレート管理
- Liquid レンダリング動作
- ブランド別出力確認
- Shopify 形式出力確認
Phase 4: 外部連携（重要70%）
□ Shopify API 連携
- API キー認証確認
- 基本エンドポイント接続
- レート制限対応確認
□ 工場システム連携
- 接続確認（最低限）
- ステータス取得
- エラーハンドリング
□ メール送信確認
- SMTP 接続テスト
- テストメール送信
- エラー処理確認
Phase 5: E2E フロー（MVP後でもOK）
□ 注文処理フロー模擬
□ 設定更新フロー
□ ロールバック機能
MVP開始判定基準:
✅ Phase 1: 100% 完了必須
✅ Phase 2: 100% 完了必須
✅ Phase 3: 80% 以上完了
✅ Phase 4: 70% 以上完了
⚠️ Phase 5: MVP後対応可
💻 実装推奨順序
Week 1: デバッグ基盤構築
Day 1-2: shadcn/ui デバッグ画面UI実装
Day 3-4: D1 データベース・基本API実装
Day 5: Phase 1 テスト完全実装
Week 2: 認証・ブランド機能
Day 1-2: Cloudflare Access 認証実装
Day 3-4: ブランド管理基本機能実装
Day 5: Phase 2-3 テスト実装
Week 3: 外部連携・統合テスト
Day 1-3: Shopify API・工場連携実装
Day 4: Phase 4 テスト実装
Day 5: 全体統合テスト・MVP判定
この順序で進めることで、MVP開発前に
システム全体の動作を確実に確認できます！
📸 写真アップロード・画像処理技術仕様
画像処理フロー:
1. ユーザーアップロード（フロントエンド）:
- 対応形式: JPEG, PNG, WebP, HEIC
- 最大サイズ: 50MB
- クライアント側事前チェック
2. フロントエンド画像処理:
- ライブラリ: Browser Image Compression
- EXIF回転情報自動修正
- 品質チェック・警告表示
3. 印刷データ生成（高解像度）:
- 目的: 工場印刷用
- サイズ: ブランド別設定
- neko: 89mm正方形 → 1050×1050px (300DPI)
- tokinoe: 可変サイズ → A4まで対応
- dog: 未定
- 形式: JPEG, 品質95%
- 色空間: sRGB
- ファイル名: {brand}_{orderId}_print.jpg
4. サムネイル生成（低解像度）:
- 目的: プレビュー・管理画面表示
- サイズ: 300×300px（統一）
- 形式: WebP（対応ブラウザ）/ JPEG（フォールバック）
- 品質: 80%
- ファイル名: {brand}_{orderId}_thumb.webp
技術実装方式:
フロントエンド（推奨）:
- ライブラリ: canvas + Browser-Image-Compression
- メリット: サーバー負荷軽減、即座プレビュー
- 処理: クライアント側で2つのサイズを生成
バックエンド（バックアップ）:
- Cloudflare Images API使用
- または Cloudflare Workers + Sharp.js
- フロントエンド処理失敗時のフォールバック
R2ストレージ構成:
バケット構造:
contents-print-images/
├── print-data/ # 印刷用高解像度
│ ├── neko/
│ ├── tokinoe/
│ └── dog/
├── thumbnails/ # サムネイル
│ ├── neko/
│ ├── tokinoe/
│ └── dog/
└── temp/ # 一時ファイル（24時間TTL）
アクセス制御:
- print-data: Private（工場システムのみ）
- thumbnails: Public（CDN配信）
- temp: Private（処理中のみ）
ブランド別画像仕様:
猫又商店（neko）:
印刷サイズ: 89mm × 89mm（正方形）
解像度: 1050×1050px (300DPI)
アスペクト比: 1:1（強制切り抜き）
用紙: 光沢紙推奨
時の絵（tokinoe）:
印刷サイズ: 可変（A4まで）
解像度: 最大 2480×3508px (300DPI)
アスペクト比: 元比率維持
用紙: マット紙・キャンバス対応
犬写真アプリ（dog）:
印刷サイズ: 未定（開発中）
解像度: 未定
アスペクト比: 未定
🧪 画像処理デバッグテスト詳細
デバッグ画面：画像テスト機能:
テストケース:
□ 正常パターン
- JPEG/PNG/WebP アップロード
- 適正サイズ（1MB-10MB）
- 正方形・横長・縦長画像
□ エラーパターン
- 巨大ファイル（50MB超）
- 非対応形式（GIF/BMP等）
- 破損ファイル
- EXIF異常ファイル
□ ブランド別仕様確認
- neko: 正方形切り抜き確認
- tokinoe: アスペクト比維持確認
- 解像度・品質確認
テスト実行画面UI:
- ファイル選択（ドラッグ&ドロップ対応）
- プログレスバー（処理進行）
- 結果表示:
- 印刷データプレビュー
- サムネイルプレビュー
- ファイルサイズ・解像度
- R2 URL確認
- 処理時間測定
期待値チェック:
- ファイルサイズ適正化確認
- 解像度仕様適合確認
- 色味・品質劣化チェック
- ストレージ保存確認
- メタデータ削除確認（プライバシー）
App Check + サムネイル表示テスト:
□ Firebase App Check設定確認
- Web: reCAPTCHA設定確認
- iOS: DeviceCheck設定確認
- Android: Play Integrity設定確認
□ 認証フロー確認
- App Check トークン生成成功
- APIリクエストヘッダー確認
- 認証失敗時のエラーハンドリング
□ サムネイル表示確認（重要）
- アップロード直後の即座表示
- リロード後の表示維持
- 異なるデバイスでの表示
- 異なるネットワーク環境での表示
□ CDN・キャッシュ問題対応
- Cloudflare CDN キャッシュ確認
- ブラウザキャッシュ動作確認
- Cache-Control ヘッダー確認
- ETag による更新検知確認
□ CORS・セキュリティ設定
- クロスオリジンアクセス確認
- 画像URL直接アクセス確認
- 認証付きサムネイル取得確認
- 不正アクセス遮断確認
□ エラーパターン対応
- App Check認証失敗時の動作
- ネットワークエラー時の表示
- 画像読み込み失敗時のフォールバック
- タイムアウト時の処理
実際の表示テストシナリオ:
Step 1: 正常フロー確認
1. 写真アップロード実行
2. 処理完了後、即座にサムネイル表示確認
3. ページリロード後、サムネイル維持確認
4. 別タブで同じページ表示、サムネイル確認
Step 2: App Check環境確認
1. App Check無効状態でテスト → エラー確認
2. App Check有効化 → 正常表示確認
3. 無効なトークンでテスト → 適切なエラー処理確認
Step 3: デバイス・ブラウザ横断確認
1. Chrome/Safari/Firefox での表示確認
2. モバイル（iOS Safari/Android Chrome）確認
3. 異なるネットワーク（WiFi/4G/5G）確認
Step 4: パフォーマンス確認
1. サムネイル読み込み時間測定（目標: <2秒）
2. 複数画像同時表示時の性能確認
3. 大量サムネイル（50+）表示時の確認
Step 5: エラー復旧確認
1. 一時的なCDN障害模擬 → フォールバック確認
2. R2ストレージ一時停止 → エラー表示確認
3. App Check一時無効化 → 認証エラー確認
トラブルシューティング対応表:
問題: サムネイル表示されない
原因候補:
□ App Check認証失敗
□ CORS設定不備
□ CDNキャッシュ問題
□ R2バケット権限設定
□ ファイルパス・URL生成エラー
解決確認手順:
□ ブラウザ開発者ツールでネットワークエラー確認
□ App Checkトークン存在確認
□ R2ストレージ直接アクセス確認
□ CDNキャッシュクリア実行
□ CORS preflight リクエスト確認
TypeScript 型定義
// デバッグ画面データ型定義
interface DebugDashboard {
systemStatus: {
uptime: string;
version: string;
environment: 'production' | 'staging' | 'development';
lastHealthCheck: Date;
errorCount24h: number;
};
serviceStatus: {
database: ServiceHealth;
shopify: ServiceHealth;
email: ServiceHealth;
printing: ServiceHealth;
auth: ServiceHealth;
};
recentLogs: LogEntry[];
}
interface ServiceHealth {
status: 'healthy' | 'warning' | 'error';
lastCheck: Date;
responseTime?: number;
errorMessage?: string;
}
interface LogEntry {
timestamp: Date;
level: 'info' | 'warn' | 'error';
service: string;
message: string;
details?: object;
}
// API接続テスト用インターフェース
interface ApiTestSuite {
tests: ApiTest[];
runAllTests: () => Promise<TestResults>;
runSingleTest: (testId: string) => Promise<TestResult>;
}
interface ApiTest {
id: string;
name: string;
description: string;
endpoint: string;
method: 'GET' | 'POST' | 'PUT' | 'DELETE';
expectedStatus: number;
timeout: number;
}
interface TestResult {
testId: string;
success: boolean;
responseTime: number;
statusCode: number;
responseData?: any;
error?: string;
timestamp: Date;
}
デバッグ画面のshadcn/uiコンポーネント構成
デバッグダッシュボード:
Layout:
- Card (システムステータス表示)
- Badge (サービス状態: healthy/warning/error)
- Button (テスト実行)
- Alert (エラー・警告表示)
API接続テスト:
- Tabs (テストカテゴリ別)
- Table (テスト結果一覧)
- Progress (テスト実行中)
- Dialog (詳細ログ表示)
- Toast (テスト完了通知)
ログ表示:
- ScrollArea (ログスクロール)
- Select (ログレベル選択)
- Input (ログ検索)
- Code (JSONデータ表示)
📊 ダッシュボード画面（システム監視特化）
システム概要ダッシュボード:
システム稼働状況:
- 各サービス稼働率（24時間）
- API レスポンス時間
- エラー発生状況
- 直近の重要イベント
ブランドサイト状況:
- 各ブランドサイトの稼働状況
- SSL証明書有効期限
- CDNキャッシュ状況
- ドメイン設定状況
外部連携状況:
- Shopify接続状態
- 工場システム接続状態
- メール送信状況
- 認証システム状態
クイックアクション:
- システム全体テスト実行
- メンテナンスモード切り替え
- 緊急アラート送信
- ログ確認
🏷️ ブランド管理機能（技術設定特化）
ブランド技術設定:
□ ドメイン・DNS設定
□ SSL証明書管理
□ CDN・キャッシュ設定
□ テーマ・UI設定（色・ロゴ）
□ 機能フラグ（有効/無効切り替え）
API・連携設定:
□ Shopify連携設定（各ブランド別）
□ メール送信設定（ブランド別テンプレート）
□ 工場システム連携設定
□ Analytics・トラッキング設定
デプロイ・管理:
□ ブランドサイトデプロイ状況
□ 設定変更履歴
□ ロールバック機能
□ A/Bテスト設定
📧 メール管理機能
メールテンプレート管理:
注文完了メール:
- 全ブランド共通ベース
- ブランド別カスタマイズ版
- Shopify Liquid形式で出力
- ワンクリックコピー機能
出荷完了メール:
- 配送業者情報対応
- 追跡番号自動挿入
- ブランド別配送期間表示
- Shopify Liquid形式で出力
テンプレート機能:
- リアルタイムプレビュー
- 変数一覧表示
- サンプルデータでテスト
- HTML/プレーンテキスト両対応
Shopify連携機能:
テンプレート出力:
- Liquid形式コード生成
- 設定手順書付き
- コピペ用整形済み
- 設定場所案内
変数マッピング:
- Shopify変数 ⇔ 独自変数
- ブランド判定ロジック
- 条件分岐テンプレート
- エラーハンドリング
プレビュー・テスト:
- 各ブランドでのプレビュー
- サンプルデータ表示
- メール送信テスト
- HTML レンダリング確認
メールテンプレート設計例
{%- comment -%}
Contents Print 注文完了メールテンプレート
ブランド: {{ order.metafields.nekomata.brand.value | default: 'neko' }}
{%- endcomment -%}
{% assign brand = order.metafields.nekomata.brand.value | default: 'neko' %}
ご注文ありがとうございます。
ご注文番号: {{ order.name }}
ご注文日時: {{ order.created_at | date: "%Y年%m月%d日 %H:%M" }}
{% case brand %}
{% when 'neko' %}
🐱 猫又商店をご利用いただきありがとうございます。
あなたの大切な猫ちゃんの写真を、心を込めて89mm正方形プリントに仕上げます。
📦 配送予定：通常3営業日以内に発送いたします
{% when 'tokinoe' %}
🎨 時の絵（TOKINOE）をご利用いただきありがとうございます。
日本画・アート作品の美しさを、高品質な印刷で表現いたします。
📦 配送予定：通常7営業日以内に制作・発送いたします
{% when 'dog' %}
🐶 犬写真プリントサービスをご利用いただきありがとうございます。
📦 配送予定：通常3営業日以内に発送いたします
{% else %}
Contents Print をご利用いただきありがとうございます。
{% endcase %}
■ ご注文内容
{% for line_item in order.line_items %}
・{{ line_item.title }} × {{ line_item.quantity }}個
単価: ¥{{ line_item.price | money_without_currency }}
{% endfor %}
合計金額: ¥{{ order.total_price | money_without_currency }}
■ お問い合わせ
ご不明な点がございましたら、お気軽にお問い合わせください。
📧 support@contents-print.jp
---
このメールは自動送信です。ご返信には対応できません。
UI設計（shadcn/ui）
メール管理画面:
Layout:
- Tabs（注文完了・出荷完了・カスタム）
- Select（ブランド選択）
- Textarea（テンプレート編集）
- Button（プレビュー・コピー・保存）
プレビュー:
- Card（プレビュー表示）
- Badge（ブランド表示）
- Code（Liquid コード表示）
- Dialog（全画面プレビュー）
コピー機能:
- Button（ワンクリックコピー）
- Toast（コピー完了通知）
- Alert（設定手順案内）
- Link（Shopify設定画面へ）
📄 利用規約設定機能
ブランド別利用規約管理:
基本機能:
- ブランドごとの利用規約作成・編集
- バージョン管理（更新履歴保持）
- 有効日設定（いつから適用するか）
- プレビュー・公開状態管理
規約カテゴリ:
- サービス利用規約
- プライバシーポリシー
- 特定商取引法表記
- 返品・交換ポリシー
- 著作権・知的財産権
テンプレート機能:
- 共通ベーステンプレート
- ブランド固有項目カスタマイズ
- 法的要件チェックリスト
- 必須項目自動チェック
ブランド固有設定:
猫又商店（neko）:
- 写真プリント特有の規約
- ペット写真の著作権取り扱い
- 89mm正方形プリント仕様
- 3営業日配送規約
時の絵（tokinoe）:
- アート作品印刷の規約
- 高品質印刷の品質保証
- カスタムサイズ対応規約
- 7営業日制作期間規約
犬写真アプリ（dog）:
- 開発中サービス向け規約
- ベータ版利用規約
- フィードバック収集規約
出力・連携機能（ヘッドレスShopify対応）:
フロントエンド配信:
- 各ブランドサイト（Next.js）への配信
- REST API経由でリアルタイム配信
- 静的生成時の埋め込み対応
- キャッシュ・CDN最適化
API エンドポイント:
- GET /api/terms/{brand} → 利用規約取得
- GET /api/privacy/{brand} → プライバシーポリシー取得
- GET /api/commerce-law/{brand} → 特定商取引法取得
- GET /api/legal/{brand}/all → 全法的文書一括取得
フロントエンド統合:
- Next.js ページ自動生成（/terms、/privacy、/commerce-law）
- コンポーネント形式での埋め込み
- SEO最適化（メタタグ・構造化データ）
- 印刷・PDF出力対応
更新・デプロイ連携:
- 規約更新時の自動デプロイトリガー
- ISR（Incremental Static Regeneration）対応
- Cloudflare Pages 自動更新
- バージョン管理・ロールバック対応
利用規約テンプレート例
# {{ brand_name }} サービス利用規約
最終更新日：{{ updated_date }}
施行日：{{ effective_date }}
## 第1条（適用範囲）
本規約は、{{ brand_name }}（以下「当サービス」）の利用に関して適用されます。
{% if brand == 'neko' %}
## 第2条（サービス内容）
当サービスは、お客様がアップロードされた猫の写真を89mm正方形の高品質プリントとして制作・配送するサービスです。
## 第3条（写真の取り扱い）
1. アップロードされる写真は、お客様ご自身が撮影されたもの、または適法に利用権限をお持ちのものに限ります
2. 他人のペットを無断で撮影した写真の利用は禁止します
3. 当サービスでは、動物の福祉を重視し、適切でない写真の印刷をお断りする場合があります
## 第4条（配送について）
通常3営業日以内に印刷・発送いたします。
{% elsif brand == 'tokinoe' %}
## 第2条（サービス内容）
当サービスは、日本画・アート作品を高品質なオンデマンド印刷として制作・配送するサービスです。
## 第3条（作品の取り扱い）
1. 印刷対象となる作品は、お客様が著作権を有するもの、または適法に利用許可を得たものに限ります
2. 著作権侵害の恐れがある作品の印刷はお断りします
3. 当サービスでは、作品の芸術的価値を最大限に表現できるよう、品質には特に注意を払います
## 第4条（制作・配送について）
通常7営業日以内に制作・発送いたします。カスタムサイズでの制作も承ります。
{% elsif brand == 'dog' %}
## 第2条（サービス内容）
当サービスは現在開発中のベータ版サービスです。
## 第3条（ベータ版利用について）
1. 本サービスはテスト段階のため、予告なくサービス内容が変更される場合があります
2. ご利用中にお気づきの点がございましたら、積極的にフィードバックをお寄せください
{% endif %}
## 第5条（禁止行為）
以下の行為を禁止します：
1. 法令に違反する行為
2. 他者の権利を侵害する行為
3. 当サービスの運営を妨害する行為
4. その他、当社が不適切と判断する行為
## 第6条（個人情報の取り扱い）
個人情報の取り扱いについては、別途定めるプライバシーポリシーに従います。
## 第7条（免責事項）
当社は、天災地変その他不可抗力により生じた損害については責任を負いません。
## 第8条（規約の変更）
本規約は必要に応じて変更することがあります。重要な変更の場合は、事前にお知らせします。
## 第9条（お問い合わせ）
本規約に関するお問い合わせは、以下までご連絡ください。
📧 support@contents-print.jp
---
{{ brand_name }}
Contents Print 運営事務局
UI設計（shadcn/ui）
利用規約管理画面:
メイン画面:
- Select（ブランド選択）
- Tabs（規約種類: 利用規約・プライバシー・特商法）
- Textarea（Markdown編集エディタ）
- Button（プレビュー・保存・公開）
バージョン管理:
- Table（履歴一覧）
- Badge（公開中・下書き・アーカイブ）
- Button（比較・復元）
- Calendar（有効日設定）
プレビュー機能:
- Card（Web表示プレビュー）
- Dialog（全画面プレビュー）
- Switch（レスポンシブ表示切り替え）
- Code（HTML出力確認）
出力・連携:
- Button（API URL生成・コピー）
- Input（各ブランドサイトURL確認）
- Alert（デプロイ状況通知）
- Toast（更新・公開完了通知）
テンプレート機能:
- Select（ベーステンプレート選択）
- Form（ブランド固有項目設定）
- Checkbox（法的要件チェックリスト）
- Progress（完成度・必須項目充足率）
デプロイ・更新管理:
- Button（各ブランドサイト一括更新）
- Table（デプロイ履歴・ステータス）
- Badge（公開状態: 本番・ステージング・下書き）
- Switch（自動デプロイON/OFF）
⚙️ システム設定機能
基本設定:
□ システム基本情報
□ タイムゾーン・言語設定
□ メンテナンスモード切り替え
□ バックアップ・復元機能
API設定:
□ Shopify API接続設定
□ 工場システムAPI設定
□ メール送信設定
□ 外部サービス認証管理
セキュリティ設定:
□ アクセスログ確認
□ セッション管理
□ API制限設定
□ セキュリティアラート設定
システム情報:
□ バージョン情報表示
□ 依存関係一覧
□ ライセンス情報
□ 更新履歴
🔗 外部システム連携
Shopify管理画面連携:
機能: 注文・顧客・商品・売上管理
アクセス: 直接リンク（新しいタブで開く）
データ同期: Webhook経由で必要な情報のみ取得
工場管理アプリ（Electron）連携:
機能: 印刷処理・配送管理・在庫管理
通信: API経由でステータス確認
モニタリング: 稼働状況・エラー監視
役割分担:
Web管理画面: システム設定・ブランド管理・監視
Shopify: 商品・注文・顧客・決済
工場アプリ: 印刷・製造・配送
ユーザーインターフェース
🎨 デザインシステム（推奨案）
🎯 採用決定: shadcn/ui Design System
デザインシステム: shadcn/ui + Tailwind CSS
コンセプト: "Modern Admin Dashboard"
カラーパレット (shadcn/ui準拠):
Background: "hsl(0 0% 100%)" - White
Foreground: "hsl(222.2 84% 4.9%)" - Near Black
Card: "hsl(0 0% 100%)" - White
Card Foreground: "hsl(222.2 84% 4.9%)"
Popover: "hsl(0 0% 100%)"
Primary: "hsl(222.2 47.4% 11.2%)" - Dark Blue
Primary Foreground: "hsl(210 40% 98%)"
Secondary: "hsl(210 40% 96%)" - Light Gray
Muted: "hsl(210 40% 96%)"
Accent: "hsl(210 40% 96%)"
Destructive: "hsl(0 84.2% 60.2%)" - Red
Border: "hsl(214.3 31.8% 91.4%)"
Ring: "hsl(222.2 84% 4.9%)"
レイアウトコンポーネント:
- Sidebar: shadcn/ui Navigation Menu
- Header: shadcn/ui Command + Avatar
- Cards: shadcn/ui Card + Badge
- Tables: shadcn/ui Data Table
- Forms: shadcn/ui Form + Input
- Dialogs: shadcn/ui Dialog + Sheet
🧩 shadcn/ui コンポーネント構成
主要コンポーネント:
Navigation:
- Navigation Menu (サイドバー)
- Breadcrumb (パンくずリスト)
- Command (検索機能)
Data Display:
- Card (メトリクス表示)
- Badge (ステータス表示)
- Data Table (注文・顧客一覧)
- Chart (Recharts連携)
Input:
- Form (各種設定画面)
- Input (テキスト入力)
- Select (選択肢)
- Switch (ON/OFF設定)
- Date Picker (日付選択)
Feedback:
- Alert (通知・警告)
- Progress (処理進行)
- Skeleton (ローディング)
- Toast (操作フィードバック)
Layout:
- Sheet (モバイル用サイドバー)
- Dialog (モーダル)
- Tabs (タブ切り替え)
- Separator (区切り線)
🎨 カスタムテーマ設定
/* globals.css - shadcn/ui カスタムテーマ */
@layer base {
:root {
/* Contents Print Admin Theme */
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--primary: 221.2 83.2% 53.3%; /* Blue-600 */
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96%;
--secondary-foreground: 222.2 84% 4.9%;
--accent: 210 40% 96%;
--accent-foreground: 222.2 84% 4.9%;
--success: 142.1 76.2% 36.3%; /* Green-600 */
--warning: 32.2 95.4% 64.9%; /* Orange-500 */
--destructive: 0 84.2% 60.2%; /* Red-500 */
}
}
🖥️ レイアウト詳細設計
ダッシュボード画面レイアウト
ヘッダー (h:60px):
Left: ロゴ + サイト名
Center: グローバル検索バー
Right: 通知 + ユーザーメニュー
サイドバー (w:280px):
Navigation:
📊 ダッシュボード（システム概要）
🐛 デバッグ画面
🏷️ ブランド管理
📧 メール管理
⚙️ システム設定
Footer: バージョン情報
外部リンク:
🛒 Shopify管理画面 → 注文・顧客・商品管理
🏭 工場管理アプリ → 印刷・配送管理
メインコンテンツ:
Breadcrumb: ホーム > ダッシュボード
Page Header: タイトル + アクションボタン
Content Area:
- 4列グリッド（デスクトップ）
- 2列グリッド（タブレット）
- 1列（モバイル）
メトリクスカード設計
売上カード:
Size: 300px × 120px
Content:
- 今日の売上: ¥123,456
- 前日比: +XX% (グリーン) / -XX% (レッド)
- 小さなチャート（スパークライン）
注文カード:
Size: 300px × 120px
Content:
- 新規注文: XX件
- 処理待ち: XX件
- 完了: XX件
ブランド別カード:
Size: 300px × 200px
Content:
- ブランド名 + アイコン
- 注文数・売上
- 小さな円グラフ
📱 レスポンシブ対応
Desktop (1200px+):
- フルレイアウト
- サイドバー常時表示
- 4列カードグリッド
Tablet (768px-1199px):
- コンパクトサイドバー（アイコンのみ）
- 2列カードグリッド
- タッチ操作最適化
Mobile (768px未満):
- ハンバーガーメニュー
- 1列レイアウト
- 大きなタッチターゲット
API設計
🔗 RESTful API
// ブランド管理API
GET /api/brands // ブランド一覧取得
POST /api/brands // ブランド作成
GET /api/brands/{id} // ブランド詳細取得
PUT /api/brands/{id} // ブランド更新
DELETE /api/brands/{id} // ブランド削除
// 注文管理API
GET /api/orders // 注文一覧取得
GET /api/orders/{id} // 注文詳細取得
PUT /api/orders/{id}/status // ステータス更新
POST /api/orders/bulk-update // 一括更新
// 分析API
GET /api/analytics/dashboard // ダッシュボード用データ
GET /api/analytics/sales // 売上分析データ
GET /api/analytics/performance // パフォーマンス分析
🔒 API認証・認可
// Cloudflare Access連携
interface ApiRequest {
headers: {
'CF-Access-Authenticated-User-Email': string;
'CF-Access-Authenticated-User-Groups': string;
'Authorization': string;
};
}
// 権限チェック
function checkPermission(email: string, action: string): boolean {
// 管理者メールアドレス確認
if (email !== ADMIN_EMAIL) return false;
// アクション別権限確認
return ADMIN_PERMISSIONS.includes(action);
}
データ管理
🗄️ Cloudflare D1 データベース設計
-- ブランド設定テーブル
CREATE TABLE brands (
id TEXT PRIMARY KEY, -- 'neko', 'tokinoe', 'dog'
name TEXT NOT NULL, -- '猫又商店', '時の絵（TOKINOE）'
domain TEXT UNIQUE, -- 'neko.contents-print.jp'
status TEXT DEFAULT 'active', -- 'active', 'inactive', 'development'
config JSON, -- UI設定、機能フラグ等
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
);
-- 利用規約・法的文書テーブル
CREATE TABLE legal_documents (
id INTEGER PRIMARY KEY AUTOINCREMENT,
brand_id TEXT NOT NULL,
document_type TEXT NOT NULL, -- 'terms', 'privacy', 'commerce_law'
title TEXT NOT NULL,
content TEXT NOT NULL, -- Markdown形式
version TEXT NOT NULL, -- 'v1.0.0'
status TEXT DEFAULT 'draft', -- 'draft', 'published', 'archived'
effective_date DATE, -- 施行日
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (brand_id) REFERENCES brands(id),
UNIQUE(brand_id, document_type, status) -- 各ブランド・種類で公開版は1つのみ
);
-- メールテンプレートテーブル
CREATE TABLE email_templates (
id INTEGER PRIMARY KEY AUTOINCREMENT,
brand_id TEXT NOT NULL,
template_type TEXT NOT NULL, -- 'order_confirmation', 'shipping_confirmation'
subject TEXT NOT NULL,
content TEXT NOT NULL, -- Liquid形式
version TEXT NOT NULL,
status TEXT DEFAULT 'draft', -- 'draft', 'published', 'archived'
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (brand_id) REFERENCES brands(id),
UNIQUE(brand_id, template_type, status) -- 各ブランド・種類で公開版は1つのみ
);
-- システムログテーブル
CREATE TABLE system_logs (
id INTEGER PRIMARY KEY AUTOINCREMENT,
level TEXT NOT NULL, -- 'info', 'warn', 'error', 'debug'
service TEXT, -- 'api', 'auth', 'email', 'shopify', 'printing'
message TEXT NOT NULL,
context JSON, -- 詳細情報
user_email TEXT, -- 操作者（あれば）
ip_address TEXT, -- アクセス元IP（あれば）
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);
-- API接続テスト結果テーブル
CREATE TABLE api_test_results (
id INTEGER PRIMARY KEY AUTOINCREMENT,
test_name TEXT NOT NULL, -- 'shopify_connection', 'email_send', 'printing_api'
endpoint TEXT, -- テスト対象エンドポイント
method TEXT, -- 'GET', 'POST', etc.
status_code INTEGER, -- HTTPステータスコード
response_time INTEGER, -- レスポンス時間（ms）
success BOOLEAN NOT NULL, -- テスト成功・失敗
error_message TEXT, -- エラーメッセージ（あれば）
response_data JSON, -- レスポンスデータ（一部）
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);
-- システム設定テーブル
CREATE TABLE system_settings (
id INTEGER PRIMARY KEY AUTOINCREMENT,
category TEXT NOT NULL, -- 'general', 'api', 'security', 'email'
key TEXT NOT NULL, -- 設定キー
value TEXT, -- 設定値
description TEXT, -- 設定の説明
is_encrypted BOOLEAN DEFAULT FALSE, -- 暗号化が必要な設定か
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
UNIQUE(category, key)
);
-- 初期データ挿入
INSERT INTO brands (id, name, domain, status, config) VALUES
('neko', '猫又商店', 'neko.contents-print.jp', 'active', '{}'),
('tokinoe', '時の絵（TOKINOE）', 'tokinoe.contents-print.jp', 'active', '{}'),
('dog', '犬写真アプリ', null, 'development', '{}');
INSERT INTO system_settings (category, key, value, description) VALUES
('general', 'system_version', 'v1.0.0', 'システムバージョン'),
('general', 'maintenance_mode', 'false', 'メンテナンスモード'),
('api', 'shopify_webhook_secret', '', 'Shopify Webhookシークレット'),
('email', 'support_email', 'support@contents-print.jp', 'サポートメールアドレス');
D1 データベース操作API
// Cloudflare D1 操作例
interface DatabaseService {
// ブランド管理
getBrand(brandId: string): Promise<Brand>;
updateBrandConfig(brandId: string, config: object): Promise<void>;
// 法的文書管理
getLegalDocument(brandId: string, docType: string): Promise<LegalDocument>;
saveLegalDocument(doc: LegalDocument): Promise<void>;
publishLegalDocument(id: number): Promise<void>;
// メールテンプレート管理
getEmailTemplate(brandId: string, templateType: string): Promise<EmailTemplate>;
saveEmailTemplate(template: EmailTemplate): Promise<void>;
// システム監視
logSystemEvent(level: string, service: string, message: string, context?: object): Promise<void>;
getRecentLogs(limit: number): Promise<SystemLog[]>;
// API テスト結果
saveTestResult(result: ApiTestResult): Promise<void>;
getTestHistory(testName: string, limit: number): Promise<ApiTestResult[]>;
// システム設定
getSetting(category: string, key: string): Promise<string | null>;
updateSetting(category: string, key: string, value: string): Promise<void>;
}
// 実装例（Cloudflare Workers + D1）
export class D1DatabaseService implements DatabaseService {
constructor(private db: D1Database) {}
async getBrand(brandId: string): Promise<Brand> {
const result = await this.db
.prepare('SELECT * FROM brands WHERE id = ?')
.bind(brandId)
.first();
return result as Brand;
}
async saveLegalDocument(doc: LegalDocument): Promise<void> {
await this.db
.prepare(`
INSERT INTO legal_documents
(brand_id, document_type, title, content, version, status, effective_date)
VALUES (?, ?, ?, ?, ?, ?, ?)
`)
.bind(doc.brand_id, doc.document_type, doc.title, doc.content, doc.version, doc.status, doc.effective_date)
.run();
}
async logSystemEvent(level: string, service: string, message: string, context?: object): Promise<void> {
await this.db
.prepare('INSERT INTO system_logs (level, service, message, context) VALUES (?, ?, ?, ?)')
.bind(level, service, message, JSON.stringify(context))
.run();
}
}
📁 ファイル管理
Cloudflare R2 構成:
Bucket構成:
- admin-assets/ # 管理画面用アセット
- brand-assets/ # ブランド別アセット
- print-files/ # 印刷データファイル
- reports/ # レポートファイル
アクセス制御:
- Private: 印刷データ・顧客データ
- Public: ブランドアセット（ロゴ等）
- Temp: 一時ファイル（TTL: 24時間）
開発・デプロイ
🛠️ 開発環境
ローカル開発:
- Framework: Next.js dev server
- Database: Local D1 (wrangler dev)
- Storage: Local R2 emulator
- Auth: Cloudflare Access Tunnel
開発ツール:
- TypeScript: 厳密な型チェック
- ESLint: コード品質管理
- Prettier: コードフォーマット
- Jest: ユニットテスト
🚀 デプロイメント
CI/CD Pipeline:
- Repository: GitHub
- Build: GitHub Actions
- Deploy: Cloudflare Pages
- Preview: Branch deployments
デプロイ設定:
- Production: main branch
- Staging: develop branch
- Feature: feature/* branches
- Rollback: 即座に前バージョンに復旧可能
監視・運用
📊 監視設定
パフォーマンス監視:
- Core Web Vitals: 自動測定
- API Response Time: <200ms目標
- Error Rate: <0.1%目標
- Uptime: >99.9%目標
アラート設定:
- Critical: システムダウン → 即時通知
- Warning: パフォーマンス低下 → 15分後通知
- Info: 使用量増加 → 日次レポート
ログ管理:
- Access Log: 7日保持
- Error Log: 30日保持
- Audit Log: 1年保持
- Performance Log: 30日保持
🔧 保守・運用
定期メンテナンス:
- Database: 週次最適化
- Cache: 日次クリア
- Log: 定期ローテーション
- Backup: 日次スナップショット
セキュリティ:
- Access Log監視: 異常検知
- 脆弱性スキャン: 週次実行
- 依存関係更新: 月次確認
- SSL証明書: 自動更新
今後の拡張計画
🚀 短期改善（3ヶ月）
機能追加:
□ ダークモード対応
□ 多言語対応（英語）
□ 高度な検索・フィルタ機能
□ バッチ処理機能
□ より詳細な分析機能
UI/UX改善:
□ 操作性向上
□ 表示速度最適化
□ エラーハンドリング改善
□ ヘルプ・ガイド機能
🎯 中期改善（6ヶ月）
高度機能:
□ AI支援機能（需要予測・異常検知）
□ 自動化機能拡張
□ 詳細権限管理
□ カスタムダッシュボード
□ API公開・連携機能
スケール対応:
□ 複数管理者対応
□ 部門別アクセス制御
□ 大量データ処理最適化
□ リアルタイム機能強化