Receipt Editor — PDF明細合計計算＆記入ツール

モバイルSuicaなどの利用明細PDFを読み込むと、金額列を自動で拾って合計し、その合計金額をPDF上の好きな位置に書き込めるブラウザ完結型のツールです。

経費精算で「明細PDFに合計金額を手書きで書き足す」作業をなくすために作りました。

公開URL: https://kiyopiyomobile-code.github.io/receipt-editor/

特徴

• サーバーにファイルを送信しません。 PDFの解析・描画・保存はすべてブラウザ内（クライアントサイド）で完結します。
• 金額列の自動読み取り。 ページ右半分にある数値を列ごとにまとめ、最も件数の多い列を明細金額とみなして自動合計します。
• 合計金額の書き込み位置を微調整可能。 読み取った明細列の右端・最終行の直下を初期位置として自動セットし、そこからスライダーや ±1px ボタンで調整できます。
• PDF / JPEG で保存。
• 手入力にも対応。 PDFなしで金額を足していくだけの電卓としても使えます。

使い方

1. 明細PDFをドラッグ＆ドロップ（または「クリックして選択」）
2. 金額列が自動で読み取られ、合計が「合計金額」に入ります
   • うまく拾えない場合は「再読取」、または「明細の足し算」から手入力で加算／個別削除
3. 位置（X / Y）・文字色・文字サイズを調整
4. 「PDFで保存」または「画像(JPEG)で保存」

出力される文字列の形式は 合計　￥4,320 です（右揃えで描画）。

制約事項

• 処理対象は PDFの1ページ目のみ です。
• 出力PDFは、ページをJPEG画像としてレンダリングし直したものです。元PDFのテキスト情報や埋め込みフォントは保持されません（見た目の再現優先）。
• 金額列の判定はヒューリスティックです。日付や枚数などの数値を金額と誤認する場合があるため、保存前に合計金額を必ず目視確認してください。
• テキスト情報を持たないスキャンPDF（画像PDF）からは金額を読み取れません（手入力で対応可能）。

開発

npm install
npm run dev      # 開発サーバー
npm run build    # dist/ にビルド
npm run preview  # ビルド結果をローカル確認

技術構成: React 19 / Vite / Tailwind CSS v4 / lucide-react。 PDF解析は pdf.js、PDF出力は jsPDF をCDNから動的読み込みしています。

base は GitHub Pages のプロジェクトサイト（/receipt-editor/）向けに設定済みです。ルート直下で公開する場合は BASE_PATH=/ npm run build でビルドしてください。

Google Drive連携（任意）

Driveから直接PDFを選ぶ機能を有効にする場合のみ、Google Cloud Console で「APIキー」と「OAuth 2.0 クライアントID」を取得して設定します。

• ローカル: .env.example を .env にコピーして値を入力
• GitHub Actions: リポジトリの Settings → Secrets and variables → Actions → Variables に VITE_GOOGLE_DRIVE_API_KEY と VITE_GOOGLE_DRIVE_CLIENT_ID を登録

未設定でもローカルPDFのアップロード機能はそのまま動作します（Drive連携ボタンのみ無効）。

これらの値は Vite のビルド成果物に埋め込まれ、ブラウザから参照できる公開値です。クライアントシークレット等の秘密情報は置かないでください。APIキーには Google Cloud Console 側で必ずHTTPリファラー制限を設定してください。

デプロイ

main ブランチへの push で GitHub Actions が dist/ をビルドし、GitHub Pages へ自動デプロイします（.github/workflows/deploy.yml）。

出自

元は Google Gemini の Canvas 機能で作成した単一Reactコンポーネントです。GitHubへの移行にあたり、Vite + Tailwind のプロジェクト構成に載せ替え、APIキーをハードコードから環境変数（VITE_*）へ移しています。アプリのロジック・UIは元のまま維持しています。

ライセンス

MIT