joe/h-1.flutter.4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
h-1.flutter.4/docs/pdf_template.md

7.9 KiB
Raw Blame History

PDF 帳票テンプレート設計 - 母艦お局様

1. ポリシー概要

項目 内容
テンプレート基準 A5 サイズ（210mm x 297mm）- 印刷・メール送信対応
レイアウト方式 縦型フォーマット - ヘッダー / フッター統一デザイン
帳票種別 見積書 / 伝票類 / 請求書 / 領収書
PDF 生成ライブラリ flutter_pdf_generator（機能性重視）

2. レイアウト定義

📐 ヘッダーエリア（統一）

┌─────────────────────────────────────┐
│ 🏢 LOGO                             │ ← 右上に配置
│ ────────────────────────────────── │
│ 会社名：〇〇株式会社                │
│ 代表者：田中次郎                   │
│ アドレス：東京都港区_test 1-1-1      │
│ TEL:03-1234-5678 / FAX:03-1234-5679│
│ 📧 mail@example.com                │ ← メールアイコン付き
│ ────────────────────────────────── │
│ 帳票種別：見積書                   │
│ 作成日：2026/03/08                 │
└─────────────────────────────────────┘

要件:

  • 🖼️ LOGO: 右上隅に配置（100 x 50px）
  • 🏢 会社情報：左揃え、フォント 12pt, 灰色系
  • 📋 帳票種別と作成日：右揃え、太字で強調

📦 商品明細エリア（標準化）

カラム 幅 内容 例
No 40px シーケンス番号 EST-260301-0001
得意先名 150px クライアント名称 テスト株式会社 Alpha
商品コード 80px JAN / コード PRD001
商品名 200px 商品詳細 テスト商品 A
単価（¥） 60px ユニットプライス ¥3,500
数量 50px Units 1
小計 80px 金額合計 ¥3,500

デザインガイド:

  • 奇数行：白色背景
  • 偶数行：薄いグレー (#f5f5f5) のアルナテレーティング
  • フォントサイズ：10pt（明細）/ 11pt（ヘッダー）

💰 合計金額エリア

┌─────────────────────────────────────┐
│ 合    計                             │
│ ────────────────────────────────── │
│   ¥3,500                            │ ← タイトル（左揃え）
│   ¥3,850 (税込)                     │ ← 合計金額（太字/オレンジ色）
│                                     │
│                                    │
│ 📝 備考                              │ ← フッターの付帯情報
│ ・納期：即日                          │
│ ・決済条件：前金                      │
└─────────────────────────────────────┘

🖨️ フッターエリア（統一）

┌─────────────────────────────────────┐
│ 請求書番号：EST-260301-0001        │ ← 左上（灰色）
│                                       │
│ QR コード：                         │ ← QR（右上隅に配置）
│ 発行日：2026/03/08                   │
│   [QR パターンのエリア]              │
│                                       │
│ ────────────────────────────────── │
│ © ○○株式会社 全著作権所有            │ ← 会社ロゴ + 免責事項（グレー）
│ ────────────────────────────────── │
│ 📞 03-1234-5678 | 🌐 www.example.co.jp│
└─────────────────────────────────────┘

3. PDF 帳票の出力フロー

🔧 flutter_pdf_generator の基本構造

import 'package:flutter_pdfgenerator/flutter_pdfgenerator.dart';
import 'package:pdf/pdf.dart';
import 'package:pdf/widgets.dart' as pw;

Future<void> generateEstimatePdf() async {
  // PDF ドキュメントの作成
  final doc = pw.Document();

  doc.addPage(
    pw.MultiPage(
      pageFormat: PdfPageSize.a5, // A5 サイズ設定
      build: (pw.Context context) => [
        // ヘッダーエリア
        _buildHeader(context),

        // 商品明細エリア
        _buildItemsTable(context),

        // 合計金額エリア
        _buildFooter(context),
      ],
    ),
  );

  // PDF ファイルの保存
  await doc.save(path: 'estimates/EST-260301-0001.pdf');
}

📋 パッケージ依存関係

# pubspec.yaml
dependencies:
  flutter_pdf_generator: ^3.0.0
  pdf: ^3.10.8
  printing: ^5.9.0

注: flutter_pdf_generator はレンダリングエンジン最適化済みなので、パフォーマンス優先に選定。

4. テンプレート拡張仕様

🔁 レイアウトの再利用可能性

ファイル 目的 共有リソース
pdf_template/estimate_template.dart 見積書用テンプレート ヘッダー / フッター
pdf_template/sales_template.dart 伝票用テンプレート ヘッダー（統一）/ フッター（簡易）
pdf_template/invoice_template.dart 請求書用テンプレート QR コード付与エリア

設計原則:

  • ✅ ヘッダー / フッターを共有クラスで抽象化
  • ✅ コンテンツ領域を動的に差し替え可能
  • ✅ QR コードは右揃え（Google Drive 連携用）

5. マイルストーンチェックポイント

フェーズ 完了条件 担当チーム 期限
T1: テンプレート設計 PDF ファイル出力テストパス Sales チーム 3/12（3 営業日）
T2: レイアウト実装 flutter_pdf_generator インテグレーション完了 UI/UX チーム 3/16（7 営業日）
T3: Google Drive 連携 QR コードによるファイル保存・開示機能動作確認 Cloud チーム 3/20（11 営業日）

依存関係:

graph LR
    A[見積入力画面完了] --> B[PDF テンプレート設計]
    B --> C[flutter_pdf_generator インテグレーション]
    C --> D[売上伝票・請求書のテンプレート展開]

6. テストケース定義

# テストシナリオ 期待結果 検証タイミング
T-01 見積書 PDF 出力テスト（単品） ファイル生成・A5 印刷動作確認 3/12
T-02 商品明細の文字切替確認 行間が正常に折り返されている 3/12
T-03 フッター QR コード有効化 Google Drive で開示可能 3/18
T-04 売上伝票テンプレート展開 見積書から派生し、伝票用レイアウト動作 3/16

注: テストは test/widget_test.dart のフローに従う。

📋 ドキュメント管理履歴

日付 更新者 変更内容
2026/03/08 AI / 開発者 見積書テンプレート定義・拡張仕様明記

最終更新: 2026/03/08
バージョン: 1.0 (PDF Template Init)

📚 関連ドキュメント