日次履歴の統計画像をダウンロードする機能の追加

[ka215]

目的:

• 履歴登録ページ（/history）に「登録済みの履歴画像をダウンロードする」機能を追加する。

要件:

• 対象日選択時かつ履歴データ保存済み時に「履歴画像のダウンロード」ボタンを活性化する
  • 対象日の「保存済み」判定: ローカルストアに存在すれば可とし、API再照会は不要
• 「履歴画像のダウンロード」ボタン押下によりシェア内容設定モーダルウィンドウ（components/HistoryStatsImageModal.vue）を開く
• シェア内容設定モーダル内には下記のチャートを表示:
  • A. グラフA名「最新の履歴推移」: 対象日を含む設定期間分の排出履歴棒グラフ（components/chart/LatestPullHistory.vue と同等）
    • 対象日が末尾になるように表示
    • 対象日の積み上げ棒グラフの色はハイライトする
    • 出力期間は 当日のみ/1週間（デフォルト）/2週間/1ヶ月 から指定可能
    • 画像出力時にはタイトルは非表示。凡例と各軸テキストのみ表示
    • モーダル上での表示時はタイトルを表示「最新の履歴推移（{指定期間}）」
  • B. グラフB名「アプリの履歴統計」: 対象アプリの設定期間分の統計パイチャート（components/HistoryStats.vue と同等だが、HistoryStats.vueの拡張が煩雑になるようであれば本画像化用にコンポーネントを新設しても構わない）
    • 指定期間中の レア排出数/総ガチャ回数 の割合を示すパイチャートを左側カラムに表示
    • 次の統計値を集計して右側カラムにグリッド表示: 総ガチャ数、レア排出数、（指定期間中の）総課金額、対象日の課金額、（指定期間中の）履歴登録日数、（指定期間中の）平均ガチャ回数÷レア排出数（≒平均レア引き当て率？）
    • 出力期間は 当日のみ/1週間（デフォルト）/2週間/1ヶ月/全期間 から指定可能
    • 画像出力時にはタイトル不要で、左右カラム全体を画像化
    • モーダル上での表示時はタイトルを表示「アプリの履歴統計（{開始日（YYYY-MM-DD）}～{終了日（YYYY-MM-DD）}）」
• 各グラフA/Bとも出力期間変更時にモーダル上のチャートA/Bの表示へ即時反映。
• モーダルでの表示レイアウト:
  • モーダルヘッダのタイトルは「履歴統計画像の出力」
  • チェックボックス+ラベル名「最新の履歴推移」: チェックされた場合のみグラフAを画像出力する（初期チェック済み）
  • ラジオボタンにて「出力期間」の選択肢: 当日のみ/1週間（デフォルト）/2週間/1ヶ月
  • グラフA（プレビューを兼ねる）
  • チェックボックス+ラベル名「アプリの履歴統計」: チェックされた場合のみグラフBを画像出力する（初期チェック済み）
  • ラジオボタンにて「出力期間」の選択肢: 当日のみ/1週間（デフォルト）/2週間/1ヶ月/全期間
  • グラフB（プレビューを兼ねる）
  • 生成画像の横幅サイズを指定できるラジオボタン: 小（主にスマートフォン向け）/中（デフォルト）/大（デスクトップPC向け）
    • 具体的なサイズは 小: 360～480px/中: 640px/大: 1080px で考えているが、これは画像生成処理のパフォーマンスも含めて最適化が必要
  • モーダルフッターにコミットボタン「画像ダウンロード」と「キャンセル」ボタン（モーダルを閉じる）
    • グラフAもしくはグラフBのチェックボックスのいずれかがチェックされていない場合はコミット不可
    • デモユーザーの場合、コミットボタン押下時にコミット処理をスキップして、利用不可のトーストを表示する（コミットさせない）
• 内容設定モーダルでコミットされたら、設定内容のグラフのスクリーンショットを生成（chart.jsの画像化機能を使用＋α）して画像をダウンロードする。成功時はモーダルを閉じてトースト表示。処理失敗時はモーダル内にエラーを表示して設定が続行できるようにする。
• 生成画像時のレイアウト:
  • 背景色はコミット時のテーマに準じてライトなら白、ダークなら --p-gray-900 の色とし、テキスト色はライトなら --p-surface-600 、ダークなら白
  • タイトルに「{アプリ名}の最新履歴（{対象日をYYYY-MM-DD形式で}）」
  • グラフA→グラフBの順で縦に並べる
  • 画像のpaddingは15px四方
  • ウォーターマークとして画像の右下に「© {PullLogのSVGアイコン（public/images/pulllog-icon.svg）} PullLog.net」の表記を追加する
• 生成画像ファイルについて:
  • 画像形式はPNG、ファイル名は pulllog_{アプリID（ULID）}_{対象日のYYYY-MM-DD}.png
• i18nについて: 日/英/中訳も本対応に含めること

対応内容:

• どのファイルを追加・修正するか記述してください（必要最小限のファイル構成で追加・更新を行うこと）。
• 出来る限りテストを作成し、result 画面に答えと解説が表示されるかを確認してください。
• pre-commit フック（lint-staged / Biome）が通るまで自動で修正を繰り返してください。
• コミットしたら新規ブランチで push し、PR を作成してください。
• PR の本文には、今回あなたが行った変更点の要約（ファイル別・箇条書き）、影響範囲、確認コマンドを日本語で記載する。

制約/規約:

• AGENTS.md とプロジェクト規約に従う（4スペース、原則セミコロン無し、any禁止、非nullアサーション禁止、console.log 残置禁止、API は fetch、JSDoc 原則必須、forEach は index 不使用なら for を使う、型は types/ へetc）。
• 特に勝手に文末にセミコロンを付けて回らないこと！
• 変更は最小で安全に（特に既存コードへの変更時は変更部分のみを規約に沿って実装し、他の部分は変更しない）。原則、破壊的変更はしない。
• i18n 文言変更時は翻訳更新を含めてください。
• 不要なファイルはコミットに含めないでください。

手順:

1. ベースブランチを検出（origin/HEAD があればそれ、無ければ dev を既定に）。新規ブランチを作成:
   • ブランチ名: feat/history-image-download
2. Biome と型チェックを実施し、指摘を修正:
   • npx @biomejs/biome check --write .
   • 可能なら pnpm build または pnpm typecheck を実行
3. すべての差分をステージし、コミットを試行:
   • git add -A
   • コミットメッセージ（日本語、命令形、スコープ付きで）
4. もし pre-commit が失敗したら、ログを読み取り、原因ファイルを自動修正して 2)〜3) を繰り返す（成功するまでループ）。
5. コミット成功後、push:
   • git push -u origin <作成ブランチ>
6. PR 作成:
   • 可能なら gh pr create --base <ベース> --head <作成ブランチ> --title <コミットタイトル> --body-file <一時ファイル>
   • gh が無い場合は PR URL を生成して表示: https://github.com/<owner>/<repo>/compare/<base>...<branch>?expand=1
7. PR 本文（日本語）を作成し、次の構成で記載:

## 対応内容
- <ファイルパス>
  - <変更点を箇条書き>
- <ファイルパス>
  - <変更点...>

## 影響
- 機能仕様の変更: なし/あり（あれば具体）
- ビルド/実行への影響: なし/あり（具体）
- コーディング規約への準拠状況: 準拠（any/非nullアサーション/console.log など禁止事項の対応）

8. PRが正常に終了したら完了です

[ka215]

不明点・要確認への回答

• 保存済み判定: 「ローカルストア」とは具体的にどのPiniaストア/キーですか（例: useHistoryStoreのどの状態）要確認
  • 回答: useLogStoreのlogsです。このマップデータに該当日のデータがあれば保存済みとなる
• デモユーザー判定: useUserStore等に判定フラグがありますか（プロパティ名・仕様）要確認
  • 回答: useUserStore.hasUserRole('demo') でユーザーが demo ロールを持つ場合がデモユーザーである
• グラフBの指標仕様
  • 「平均ガチャ回数÷レア排出数」は「(期間総ガチャ数/期間レア数)」で合っていますか（ゼロ割処理方針も要確認）
    • 回答: 合っている。期間レア数が 0 の場合は結果を 0 として処理する
  • 「全期間」はアプリ初回登録日から対象日までで良いか、上限件数の制約有無
    • 回答: アプリ初回登録日から対象日までで良い。上限件数の制約はなし
• 画像幅「小(360–480px)」は固定値にしますか（提案: 480px固定）。可変レンジが必要ならUIはスライダーで良いか
  • 回答: 480px固定。可変レンジは不要
• ウォーターマークのSVG描画方法: 画像合成時にSVGをビットマップ化してキャンバスに描画でOKか（SVG直描画の可否）
  • SVGをビットマップ化してキャンバス描画でOK
• 既存LatestPullHistory.vue/HistoryStats.vueの再利用方針: 直接再利用か、画像化用の軽量派生コンポーネント新設か要判断
  • LatestPullHistory.vue には toImage() メソッドが実装してあるので、そのまま再利用で良いと想定している
  • HistoryStats.vue は本機能用の派生コンポーネント新設が良いと考えている
• 日付/数値の表記: ロケールに応じたフォーマット規則（YYYY-MM-DD固定か、UIはロケール準拠か）
  • YYYY-MM-DD固定でOK

補足

• ブランチ作成
  • 既に feat/history-image-download ブランチ作成済み（カレント）なのでそこで作業してください
• 型/ユーティリティ整備
  • チャートの画像化についての型定義は types/chart.d.ts へ、オプション・統計型は types/stats.d.ts へ
  • 期間計算等は composables/useStats.ts で拡張/追加してください
  • 画像生成系のユーティリティは utils/image.ts を拡張/追加してください
  • テーマ色取得関数は composables/useChart.ts を参照・拡張または追加してください
• モーダルUI骨組み
  • components/HistoryStatsImageModal.vue がすでにあるのでそれを拡張・更新してください
• /historyへの組み込み
  • ボタンおよび活性制御もひな形実装してあるので適宜拡張・更新してください
• 仕上げ
  • i18n: ja.ts/en.ts/zh.ts にひな形実装してあるので、適宜キーの追加・更新をしてください

[ka215]

不明点・要確認への回答

• 画像仕様の細部: 出力フォーマット(PNGで良いか/透過可否)、DPI/メタデータ、ファイル名規約(現状コードは pulllog_{appId}{date}{range}_{AB|A|B}.png)で確定か。要確認。
  • 回答: PNGで透過なし。DPI/メタデータは確定。ファイル名規約は現行コード仕様ではなく pulllog_{アプリID（ULID）}_{対象日のYYYY-MM-DD}.png で確定。
• ウォーターマーク: 文字列のみか、SVGロゴ支給の有無/位置・不透明度(コードは右下、テキスト固定)。要確認。
  • 回答: SVGロゴはないので文字列「PullLog.net」のみ。
• グラフAのハイライト色: テーマ別の具体色/コントラスト基準。要確認。
  • 回答: テーマ別の基準色から彩度のコントラストを20%程度上げて、カレント色より鮮やかな色で定義してください
• グラフBの期間「全期間」のUI反映: モーダルUIに「全期間」が未実装のため、選択肢の最終決定。要確認。
  • 回答: 「全期間」が未実装なので追加実装してください
• BのKPI定義の厳密さ: 「対象日の課金額」の未登録時表示(0/—)や小数桁丸め、通貨記号と区切り。要確認。
  • 回答: 未登録時は0、アプリのcurrencyのminorに準じて小数桁丸め。通貨記号は数値の先頭に半角空白区切りで付与。
• エラー時UX: キャプチャ失敗時の再試行/リトライ、トースト文言。要確認。
  • 回答: キャプチャ失敗時は「画像の生成に失敗しました」エラーで再試行可能。
  • 回答: ダウンロード処理失敗時は「画像がダウンロードできませんでした」エラーで再試行可能。
  • 回答: デモユーザーによるコミット時は「デモユーザーによる制限/この機能は制限されており利用できません」のトースト表示（すでに同様のエラー内容のキーがあるので、それを利用してください）

[ka215]

不明点・要確認への回答

• DPI/メタデータ: 「確定」との記載あり（特別指定なし＝既定値で可、の理解で問題ないか）。要確認。
  • 回答: 特別指定なし＝既定値で可 でOK
• グラフAタイトルの扱い: 「モーダル表示時のみタイトル表示」の具体位置（チャート内or外部要素）。要確認。
  • 回答: 外部要素で現行の HistoryChart.vue の <h2 v-if="label" class="chart-title">{{ label }}</h2> の形式が良い。
• ハイライト色算出: 「彩度+20%」の基準となるベース色（useChartPalette 内のどれを基準にするか）。要確認。
  • 回答: defaultPalettes[theme].rare と defaultPalettes[theme].other が積み上げ棒グラフのレアとその他のベース色なので、この2色（テーマ別なので計4色）を基準にしてください。

[ka215]

追加確認事項への回答

• 全期間の適用範囲: 「全期間」選択はA/B共通にしますか？それともBのみ適用（Aは当日/1週/2週/1か月のまま）にしますか。
  • 回答: 全期間はBのみ
• 初回登録日の定義: 「全期間」の開始日は「最初に保存されたログ日付」で良いですか（アプリ作成日ではなく）。
  • 回答: 「最初に保存されたログ日付」で良い
• 天井補助線の出力: Aの保証線（annotations）は画像出力にも含めて良いですか。
  • 回答: 天井補助線は不要
• ハイライト対象: Aの対象日強調は「rare/other 両スタックをともに彩度+20%」で問題ないですか（枠線追加などは不要）。
  • 回答: 「rare/other 両スタックをともに彩度+20%」で問題ない。枠線追加などは不要
• ゼロデータ時の表示: 期間内データが0件の場合、A/Bとも「データなし」状態でも画像生成を許容しますか（例: 空グラフ+WMのみ）。
  • 回答: データ0件の場合は画像生成を許可しない
• ローディング挙動: 画像生成中はボタンを一時無効化し、スピナー表示で良いですか。
  • 回答: はい、それでOK
• 余白・間隔の固定値: 合成時の margin=15px/gap=15px（現行値）で確定して良いですか。
  • 回答: はい、それで確定です
• 背景色の基準: 画像背景はページのbody計算色を使用で確定（ライト/ダークに追随）で良いですか。
  • 回答: はい、それでOK
• 多言語の粒度: 新規キー（全期間/エラー文言等）は en/zh も当方で暫定訳を入れて良いですか（後で調整）。
  • 回答: はい、お願いします
• 全期間の取得方針: API全件取得で問題ないですか（件数上限なしの回答でしたが、パフォーマンス懸念があれば段階取得を検討）。
  • 回答: はい、全期間はAPI全件取得で問題ありません（パフォーマンス問題が発生した場合はその時に対応します）

[ka215]

最終確認への回答

• 全期間×AB選択時の挙動:
  • 回答: 理解が違う。全期間はBのみ選択可能で、Bは 当日/1週/2週/1ヶ月/全期間 の5種、Aは 当日/1週/2週/1ヶ月 の4種の選択となる。AとBはそれぞれ異なる期間を選択可能であり独立して処理する必要がある。
• データ0件の扱い（AB時）: 片方が0件の場合は「画像生成を不可」に統一しますか？それともユーザーにAのみ/Bのみへ切替を促す文言を出してボタンは非活性のままにしますか。
  • 回答: 片方が0件の場合も「画像生成を不可」にする。
• 天井補助線の可視化範囲: 画像には含めない前提で合意済みですが、モーダル内プレビューでも非表示にしますか（＝本モーダルでは常に非表示）？
  • 回答: モーダル内プレビューでも非表示にする。
• ファイル名の重複: 同じ日付でAのみ→Bのみ→ABなど連続DLした場合、pulllog_{appId}_{date}.png が重複します。上書き/連番付与/そのままユーザー任せ（ブラウザ側ダイアログ）いずれを想定しますか。
  • 回答: そのままユーザー任せでOK。

[ka215]

更新内容をdevへマージし、本issueは対応完了