Geminiに丸投げ!プログラミング未経験のあなたでも5分で請求書管理Webアプリを作る方法

Geminiに丸投げ!プログラミング未経験のあなたでも5分で請求書管理Webアプリを作る方法

  「また今日も、この入力作業で一日が終わってしまうのか・・・」

顧客リストの転記、請求書の発行、SNSの予約投稿。 他にやりたい作業があるのに、気づけば単純作業に追われている。

「自分がもう一人いればいいのに!」と思ったことはありませんか?
実は、多くの人が同じ悩みを持っています。

あなたの「手」の代わりに、プログラムが自動でやってくれたらいいのに、と思いませんか。

とはいえ、プログラミングの知識は無いし、外部に依頼して作ってもらう余裕もない・・・とお悩みのあなたへ。
生成AIのGoogle Geminiに丸投げしちゃいましょう。

今回は、商売をやっている人なら必ずやらなければならない、請求書の作成作業を効率化するアプリをGeminiに作ってもらいました。

※Geminiの使い方は、ここでは説明しません。他の方が説明されているページを参照ください。  

 

普通にお願いしてもうまくいかない・・・

まずは、プロンプトで下記のような依頼をしてみました。

プロンプト
請求書の自動発行を行うWEBアプリを作ってください。売上があったときに請求台帳(ローカルファイル)へ記録をし、 毎月決められた締め日になったら取引先ごとに請求書をPDFで出力したいです。 請求台帳の項目は、日付、項目、数量、単価、支払期限、会社名にしてください。

 

これに対して、Geminiから返ってきた応答がこちら:

Geiminiの応答

請求書の自動発行・送付システムをゼロから構築するには、いくつかの技術スタック(バックエンド、フロントエンド、PDF生成ライブラリ)の組み合わせが必要です。
ここでは、最も導入ハードルが低く、かつ柔軟にカスタマイズ可能なPython(Flask)とPandasを使った構成案を紹介します。

1. システム構成のイメージ
このシステムは、以下の3つのステップで動作します。
入力: Webフォームから売上を入力し、ローカルのCSV(請求台帳)に保存。
集計: 締め日に、取引先ごとにデータをフィルタリング。
発行: HTMLテンプレートにデータを流し込み、PDFとして出力。

2. 必要なライブラリのインストール
Pythonがインストールされている環境で、以下のコマンドを実行してください。

(以降、省略)

 

こんな応答が返ってくると、プログラミングの知識がない初心者にはどう対応したらいいかわかりませんよね。

やはり生成AIにプログラムを作ってもらうためには、プログラミングの知識がないと難しいのか・・・と思ってしまいます。

 

魔法のおまじないをかけてみると

そこで、今度は下記のように魔法のおまじないをかけて依頼してみました。

プロンプト
請求書の自動発行を行うツールを作りたいです。HTMLとCSSとjavascriptを使って、WEBアプリを作ってください。 売上があったときに請求台帳(ローカルファイル)へ記録をし、毎月決められた締め日になったら取引先ごとに請求書をPDFで出力したいです。 請求台帳の項目は、日付、項目、数量、単価、支払期限、会社名にしてください。

 

さっきと変わったのは黄色マーカーの部分で、これが魔法のおまじないです。

これに対するGeminiからの応答がこちら:

dtタイトル

Webアプリで請求管理を行うための、シンプルかつ機能的なテンプレートを作成しました。

ブラウザのセキュリティ制限により、JavaScriptだけでPC内のローカルファイルを直接上書き保存することはできません。
そのため、今回は「ブラウザ内に保存(LocalStorage)」しつつ、「CSVとして台帳をダウンロード」できる仕組みにしています。

PDF作成には定評のあるライブラリ html2pdf.js を使用します。

 

1. 請求管理Webアプリのコード
このコードを一つのHTMLファイル(例:invoice-app.html)として保存し、ブラウザで開いてください。
HTML
(ここにコードが表示される)

 

2. ツールの特徴と使い方
データの記録: 上部のフォームから売上を入力し「記録を追加」を押すと、ブラウザ(LocalStorage)に保存され、下の台帳に即座に反映されます。
CSV保存: 「台帳をCSV保存」を押すと、Excelなどで開けるCSVファイルとしてPCにダウンロードできます。これが「ローカルファイルへの記録」の代わりとなります。
自動一括PDF発行: 「締め日の請求書を一括発行」を押すと、台帳にあるデータを「会社名ごと」に自動でまとめ、別々のPDFファイルとして連続ダウンロードします。
例:「A社」への2件の案件があれば、自動的に1枚の請求書に合算されます。



!? たったこれだけで請求書発行を効率化するWebアプリができてしまいました。ここまで5分!

 

ブラッシュアップ

これだけでも十分に使えるのですが、もう少し使いやすくするために、以下のようなやり取りをしてアプリをブラッシュアップしました。

プロンプト
請求書に表示する登録番号と振込先を設定できる機能をつけてください。
Geminiの応答

登録番号(インボイス登録番号)と振込先を自由に変更し、ブラウザに保存できる機能を追加しました。

これにより、一度設定しておけば次回以降も同じ内容が自動的に請求書に反映されます。

 

改良版:設定機能付き請求管理ツール

以下のコードをコピーして、以前のファイルと差し替えてください。

HTML
(ここにコードが表示される)

 

プロンプト
登録済の請求台帳から1件削除する機能もつけてください。
Geminiの応答

請求台帳から1件ずつ個別に削除できる「削除ボタン」をテーブルに追加しました。

これで、入力ミスをした際や特定のデータだけ消したい場合に、すぐに対応できるようになります。

 

改良版:個別削除機能付き請求管理ツール

以下のコードをコピーして、以前のものと差し替えてください。テーブルの右端に「操作」列を追加し、赤い「削除」ボタンを設置しています。

HTML
(ここにコードが表示される)

 

プロンプト
「売上を記録」の欄にある日付の意味が分かりにくいので、左端の日付が売上日、右端の日付が支払期限であることがわかるようにしてください。
Geminiの応答

「売上を記録」セクションの入力欄に、それぞれ何を入力すべきか一目でわかるよう、各項目の上にラベル(見出し)を追加しました。

これにより、左端が「売上日」、右端が「支払期限」であることが明確になります。また、他の項目(会社名や単価など)にもラベルを付け、入力ミスを防ぐデザインに整えています。

 

改良版:項目ラベル付き請求管理ツール

HTML
(ここにコードが表示される)

 

プロンプト

請求台帳の各項目のステータスがわかるようにしてください。

ステータスの種類は、未処理、請求済、入金済としてください。

Geminiの応答

請求台帳に「ステータス」の項目を追加しました。 「未処理」「請求済」「入金済」を切り替えられるようにし、状況がひと目で分かるよう色分けも行っています。

また、台帳上で直接ステータスを変更できるようにしたため、入金を確認した後にすぐ「入金済」へ更新することが可能です。

 

改良版:ステータス管理機能付き請求管理ツール

HTML
(ここにコードが表示される)

プロンプト

請求書の発行を一括発行ではなく、チェックボックスで選択できるようにしてください。

それで、「全て選択」、「全て解除」できるボタンがほしいです。

dtタイトル

請求台帳の中から発行したい項目だけをチェックボックスで選択し、選択したものだけを会社ごとにまとめてPDF発行する機能を追加しました。

また、ご要望通り「全て選択」「全て解除」ボタンも設置しています。

 

改良版:チェックボックス選択・一括操作機能付き

HTML
(ここにコードが表示される)

 

プロンプト
請求台帳で、ステータスでフィルタをかける機能をつけることはできますか?
dtタイトル

ステータスでのフィルタ機能、もちろん可能です! 台帳のデータが増えてくると、「未処理の案件だけを確認したい」「入金が済んでいないものを一括で請求したい」という場面が増えるため、フィルタ機能は非常に実用的です。

台帳の上部に「表示フィルタ」の選択メニューを追加し、選んだステータスに応じて表の表示がリアルタイムで切り替わるように改良しました。

 

改良版:ステータスフィルタ機能付き請求管理ツール

HTML

(ここにコードが表示される)
 

 

このように、プロンプトから機能追加の依頼を行うことで、アプリをブラッシュアップすることができます。

 

まとめ

最初は「WEBアプリを作ってください。」という曖昧な依頼だったため、GeminiがおすすめだというPython(Flask)とPandasを使った構成案を紹介されたわけですが、2回目は「HTMLとCSSとjavascriptを使って、WEBアプリを作ってください。」と具体的に依頼をしたおかげで、すぐに所望のWebアプリを作ってもらえました。

しかも、Geminiが作成してくれたコードをコピーして、HTMLファイルとしてPC内に保存し、そのファイルをブラウザで開くだけで動くという気軽さ。
Pythonを使おうと思ったら、まずはPythonをインストールして、環境構築というめんどくさい作業が必要ですが、それも不要。

この魔法のおまじないは、Geminiに他のWebアプリを作ってもらいたい時にも使えますので、試してみてください。

この記事をシェアする

記事一覧へ戻る