← ALL WORKS

01 / アプリ

AI解析・経費管理Webアプリ「建経」

AI解析から仕訳・集計まで行える、建設会社向け経費管理Webアプリ

API連携JavaScriptPHP / MySQLPWA生成AI活用

OVERVIEW

概要

建経(KENKEI)は、建設会社での利用を想定したAI領収書解析・経費管理Webアプリです。

領収書・請求書の画像をアップロードすると、Gemini APIを利用して日付・現場名・品名・支払先・金額・勘定科目・税区分などを解析。内容を確認・修正したうえでデータベースへ登録できます。

登録後は仕訳の検索・編集・削除、現場別・勘定科目別の集計、CSV出力まで行えます。

目的・課題

Webサイト制作に加えて、PHP、MySQL、外部APIを組み合わせたWebアプリの構築と動作検証を経験することを目的に自主制作しました。

建設会社向けをテーマとして設定し、領収書解析から登録・管理・集計までを一つのアプリで行える構成にしています。

制作期間約2週間
制作形態自主制作
担当範囲テーマ設定 / データベース接続・環境設定 / 生成内容の確認・修正 / 動作検証 / PWA導入・検証
使用ツールChatGPT / Laragon / phpMyAdmin
使用技術HTML / CSS / JavaScript / PHP / MySQL
APIGemini API
その他
PWA / Service Worker / CSV出力 / レスポンシブ対応

SYSTEM

アプリの構成

アプリは、
AI解析 → 内容確認・登録 → 仕訳一覧 → 編集・削除 → 原価・現場別分析
という流れで利用できます。

領収書・請求書の画像からGemini APIで情報を取得し、確認後にMySQLへ保存します。

登録データはログインユーザーごとに管理され、一覧・編集・削除・集計・CSV出力まで行えるようになっています。

FEATURES

AI領収書解析

Gemini APIを利用して、領収書・請求書画像から、
日付/現場名/品名/支払先/金額/勘定科目/税区分/インボイス番号
などの候補を取得します。

AIによる解析結果は直接保存せず、一度フォームに表示し、内容を確認・修正してから登録できる仕様になっています。

仕訳管理

解析後に登録したデータをMySQLへ保存し、仕訳一覧から確認できます。

現場名や期間による絞り込みのほか、登録済みデータの編集・削除、CSV出力にも対応しています。

原価・現場別分析

登録されたデータをもとに、累計経費・登録件数・現場別経費・勘定科目別内訳などを表示します。

Chart.jsを利用してグラフでも確認できる構成です。

DEVELOPMENT / VERIFICATION

実装内容の確認と動作検証

ローカル環境でPHPとMySQLを接続し、データの登録・表示・編集・削除が正しく連動するかを確認しました。

制作中は各機能を実際に操作し、不具合が発生した場合には症状や問題箇所を確認して修正内容を整理し、修正後に再度動作検証する工程を繰り返しました。

特に、ユーザーごとのデータ分離、AI解析回数の制限、レスポンシブ表示、データベース接続などについて、実際の動作を確認しながら調整しています。

最後に本番サーバーへ移行し、本番環境でもデータベース接続や各機能が動作することを確認しました。

APIキーと利用回数の管理

Gemini APIのキーやDB接続情報はPHPファイルへ直接記述せず、環境設定ファイルへ分離しています。本番環境では、設定ファイルをWeb公開領域の外に配置しています。

また、公開デモでGemini APIが過剰に実行されることを防ぐため、1アカウントにつきAI解析を5回までに制限しています。

RESPONSIVE / PWA

現場からも利用できるPWA対応

PC・スマートフォンの両方で利用できるようレスポンシブ対応しています。

主要ナビゲーションは各ページで共通化し、スマートフォンでは画面幅に収まるよう調整。項目数の多い仕訳表については、ページ全体ではなく表部分のみ横スクロールできる仕様にしています。

また、Web App ManifestとService Workerを導入してPWA化し、対応ブラウザではホーム画面からWebアプリとして起動できるようにしました。Service Workerのキャッシュについても、更新時の挙動を確認しながら調整しています。