カード画像ジェネレーター

カードゲーム用の画像を生成するWebアプリケーション。CSVファイルからカードデータを読み込み、480x720pxのカード画像を生成します。

🎯 概要

• 目的: TRPGやカードゲーム用のカード画像を効率的に生成
• 対象: ccfoliaのグリッド4x6に最適化（480x720px）
• 入力: CSVファイル
• 出力: PNG画像（個別 or ZIP一括）

📁 プロジェクト構成

zatsucard/
├── index.html          # メインHTML（UI構造）
├── styles.css          # スタイルシート（UI装飾）
├── test-cards.csv      # テストデータ
├── README.md           # 本ドキュメント
└── js/                 # JavaScriptモジュール
    ├── config.js       # 設定とDOM要素参照
    ├── ui-utils.js     # UI操作とメッセージ
    ├── text-renderer.js # テキスト描画機能
    ├── card-generator.js # カード生成とCanvas描画
    ├── csv-handler.js  # CSV処理とデータ変換
    ├── download-manager.js # ダウンロード機能
    └── drag-drop.js    # ドラッグ&ドロップ機能

🔧 機能仕様

CSVデータ構造

• 1行目: ヘッダー行（カードデータには含まれない）
• 1列目: カードタイトル
• 2列目以降: カード本文（複数列は改行区切りで結合）

カード仕様

• サイズ: 480x720px
• レイアウト:
  • タイトル: 上部中央揃え、自動改行対応
  • 本文: 左揃え、タイトル下30px開始
• フォント: "Hiragino Sans", "Meiryo", sans-serif

カスタマイズ機能

• 背景色
• 枠線色
• タイトル色・サイズ（16-64px）
• 本文色・サイズ（12-54px）

🖥️ UI構成

メインセクション

1. ヘッダー: タイトルとリセットボタン
2. CSVアップロード: ドラッグ&ドロップエリアとファイル選択、プレビュー
3. デザイン設定: 色とフォントサイズの調整
4. カードプレビュー: 生成されたカードの一覧

UX機能

• ドラッグ&ドロップ: CSVファイルをエリアにドロップして直接アップロード
• ファイル選択: 従来のファイル選択ボタンによるアップロード
• 自動更新: 新CSVアップロード時に既存カードをクリア
• ローディング状態: "処理中..."表示
• 成功通知: 緑色ポップアップ（3秒）
• リセット通知: 青色ポップアップ（2秒）

📊 データフロー

CSVファイル → Papa.parse → rawCsvData → convertToCardData → cardData → generateCards → Canvas描画

処理手順

1. ファイル読み込み: Papa.parseでCSV解析
2. プレビュー表示: ヘッダー情報と最大5行を表示
3. データ変換: 配列形式をオブジェクト形式に変換
4. カード生成: Canvas APIで描画
5. プレビュー: 240px幅にリサイズして表示

🎨 レンダリング仕様

タイトル描画

• 配置: 中央揃え（x: canvas.width/2, y: 80）
• 改行: 自動（maxWidth: canvas.width-60）
• 行間: fontSize * 1.2

本文描画

• 配置: 左揃え（x: 30, y: タイトル終了+30px）
• 改行: 自動（maxWidth: canvas.width-60）
• 行間: fontSize * 1.5
• 特殊記法: *テキスト* = イタリック体

🔽 ダウンロード機能

個別ダウンロード

• ファイル名: card_N.png (Nは連番)
• 形式: PNG
• サイズ: 480x720px

一括ダウンロード

• ファイル名: cards.zip
• 形式: ZIP圧縮
• 内容: 全カードのPNG画像

🛠️ 開発技術

フロントエンド

• HTML5: セマンティックマークアップ
• CSS3: Flexbox、Grid、カスタムプロパティ
• JavaScript ES6+: モジュール分割、Arrow関数

外部ライブラリ

• PapaParse 5.3.2: CSV解析
• JSZip 3.10.1: ZIP圧縮
• FileSaver.js 2.0.5: ファイルダウンロード

Canvas API

• 2D Context: 図形・テキスト描画
• テキスト測定: measureText()
• 画像出力: toDataURL(), toBlob()

🔧 設定可能項目

定数（config.js）

const CARD_WIDTH = 480;   // カード幅
const CARD_HEIGHT = 720;  // カード高さ

デフォルト値

• 背景色: #ffffff (白)
• 枠線色: #000000 (黒)
• タイトル色: #000000 (黒)
• 本文色: #000000 (黒)
• タイトルサイズ: 54px
• 本文サイズ: 40px

🚀 使用方法

セットアップ

# HTTPサーバー起動
python3 -m http.server 8002 --bind 127.0.0.1
# または
npx serve .

基本フロー

1. ブラウザで http://localhost:8002 を開く
2. CSVファイルを選択してアップロード
3. デザイン設定を調整（オプション）
4. 個別またはZIPでダウンロード

CSVファイル例

タイトル,説明,効果,備考
火球術,強力な火の魔法,対象に3ダメージを与える,燃焼効果付き
氷の盾,防御魔法,次のターン1ダメージ軽減,氷属性攻撃を無効化

🐛 トラブルシューティング

よくある問題

• カードが生成されない: CSVの1行目がヘッダーか確認
• 文字化け: CSVファイルの文字エンコーディングをUTF-8に
• レイアウト崩れ: ブラウザのキャッシュをクリア

デバッグ

• ブラウザの開発者ツールでコンソールエラーを確認
• CSVプレビューでデータ構造を確認

📝 ライセンス

このプロジェクトはMITライセンスの下で公開されています。

👥 貢献

このミニアプリは ChatGPT、Claude、Copilot、そして手作業で作られています。

---

最終更新: 2025年5月29日