ゼロからはじめるバイブコーディング(12) 話題のAntigravityで「領収書発行システム」を作って格安レンサバで動かそう

プログラミング不要の「バイブコーディング」を活用して、いろいろなアプリやツールを作っている本連載ですが、今回は、Antigravityを使って格安レンタルサーバーでも動く領収書発行システムを作ってみようと思います。

領収書発行システムを作ってみよう

Google Antigravityについて

さて、今回バイブコーディングに使うのは、Googleが公開したAIエディタのAntigravityです。こちらからダウンロードできます。

本連載では、前回も使い方を紹介しており、日本語化すると便利なので、そちらを確認して設定してみてください。

Googleが開発している便利なAIエディタAntigravity

領収書を発行するシステムを作ってみよう

さて、さっそくAntigravityを使ってアプリを作ってみましょう。

今回作るのは「領収書発行システム」です。というのも、今でも「レシートではなく領収書が欲しい」というやり取りをよく見かけます。多くの場合、レシートには、日付や金額、取引内容など、領収書に相当する項目が記載されており、レシートでも税務的には問題がない場合がほとんどです。それでも、経費精算をする際、しっかりした領収書が必要という場面も多いものです。

そこで、今回は、飲食店や小売店などで使える領収書発行システムを作ってみましょう。

なお、プロジェクトの名前は、ベタな名前で「receipt_service」としてみます。「receipt_service」という名前のフォルダを作成して、Antigravityで開きましょう。

領収書のひな形をAIで作ってみよう

なお、せっかくオリジナルの領収書発行システムを作るので、領収書のひな形画像もオリジナルで用意してみましょう。もちろん、ゼロから自分で領収書のひな形を作る必要はありません。

ChatGPTやGeminiを利用して、領収書のひな形を作ってもらうことにしましょう。今回は、下記のようなプロンプト(指示)を利用して、ひな形を作ってもらいました。

これから、領収書発行システムを作ります。
その中で利用する領収書のひな形画像を作成してください。
キラキラしていてゴージャスでオシャレな感じの領収書のテンプレートを作ってください。
サイズは、B6で、横向きのものにしてください。
なお、**領収書のテンプレート**なので、**文字や金額を入れないで**ください。

すると、次のような画像を作ってくれました。これを「template.png」という名前で保存しましょう。

領収書のひな形を作成してもらったところ

なお、PowerPointや画像編集ソフトなどを利用して、発行者の情報（会社名、住所、電話番号、インボイスのための登録番号など）を先に書き込んでしまいましょう。

会社名や住所などを記入した

このひな形画像を「template.png」という名前で保存しましょう。

フォントも用意しよう

また、領収書の画像に文字を書き込むためのフォントも用意します。ここでは、無料で使いやすいIPAフォントを使ってみましょう。こちらからダウンロードできます。ZIPファイルを解凍して「ipaexm.ttf」というフォントファイルをプロジェクトフォルダにコピーしましょう。

つまり、この時点で次のようなフォルダ構成になっています。

receipt_service/
├── ipaexg.ttf
├── ipaexm.ttf
└── template.png

実行環境のPHPを用意しよう

次に、Antigravityに作ってもらうプログラムを実行するために、PHPの開発環境を用意しましょう。今回作成する領収書発行システムは、PHPで作成します。多くの格安レンタルサーバーではPHPが利用できるので、PHPで作成することで、簡単にデプロイできるようになります。

【Windowsの場合】

Windowsの場合は、こちらから、Windows用のPHPをダウンロードしましょう。ZIPファイルを解凍して、適当なフォルダに配置します。例えば「C:\php」などです。

そして、環境変数PATHにPHPのフォルダを追加しておきましょう。環境変数にパスを通すには、スタートメニューの検索ボックスに「環境変数」と入力して、「システム環境変数の編集」を開きます。そして、「ユーザー環境変数」にある「Path」を選択します。「編集」ボタンをクリックして、「C:\php」を入力します。

【macOSの場合】

macOSであれば、Homebrewを使ってインストールするのが簡単です。ターミナルを起動して、次のコマンドを実行しましょう。

brew install php

なお、PHPの開発環境の準備に関しては、こちらの本連載7回目でも紹介しています。Chromebookの手順なども紹介しました。

Antigravityにプログラムを作ってもらおう

それでは、Antigravityに、プログラムの作成を依頼しましょう。画面右側にあるプロンプトの入力ボックスに次のような文言を入力してみましょう。今回はAIモデルに「Gemini 3 Flash」を選んで、下記のプロンプトを送信しました。

### 指示:
PHPで領収書の発行システムを作ります。
画像生成には、GDを利用してください。

### 詳しい動作:
1. 日付、宛名、金額、但し書き、税率を入力するフォームを表示します。
2. 作成ボタンを押すと、GUIDを生成して、領収書の画像を「history/<guid>.png」に作成します。
3. ユーザーが入力した情報は、CSVファイル「secrets/history.csv」に保存します。

上記2の画像生成に関してですが、以下を使ってください：
- テンプレート画像「template.png」をベースにする
- 文字フォント「ipaexm.ttf」を使ってテキストを書き込む
- 書き込む内容は以下の通りです：
  - 日付(date)
  - 宛名(to_name)
  - 金額 (amount)
  - 但し書き(proviso)
  - 税率、税抜き金額（自動計算）、消費税等（自動計算）(tax_info)

作成されたプログラムについて

すると、Antigravityが自動的にプログラムを作成してくれます。タスク一覧を作成して、それを元にプログラムを生成してくれます。とても便利です。

プログラムが完了したら、Antigravityの指示にしたがってプログラムの動作確認をしましょう。もし、Antigravityからの応答が英語で返されていたら、「以後、日本語で教えて」などと指示すると、動作確認の方法を日本語で確認できます。

大抵は、PHP内蔵のローカルWebサーバーを実行してくれるので、ブラウザを起動して、URLをアドレスバーに貼り付けましょう。URLにアクセスすると領収書の入力フォームが表示されます。

もし、Webサーバーを実行してくれなかったときは、ターミナルを起動して、作成したプログラムと同じフォルダに移動して「php -S localhost:8000」を実行します。PHPのローカルWebサーバーが起動したら、ブラウザで「http://localhost:8000」にアクセスします。

次の画面は、筆者が試したときの実行画面ですが、デザイン的にもスッキリとしていて、使いやすそうです。

領収書の入力フォームが表示された

とは言え、「領収書を生成する」ボタンを押したところ…次のように、デザイン的にはイマイチな領収書が生成されてしまいました。特に、日付など画面から飛び出してしまっています。

最初にAIが作った領収書 - コーディングAIにデザインセンスはない

追加で修正しよう

さすがに、テンプレート画像に重ねた座標がデタラメです。専門の画像生成AIであれば、デザインセンスがそれなりに良いのですが、今のところ、コーディングAIにはデザインセンスはありません。そこで、追加で次のような修正を依頼しましょう。

テンプレート画像に重ねるテキスト座標が間違っています。
そこで、座標データをJSONで与えることにします。
領収書プロット先の座標は手動で微調整ができるように「plot.json」という
座標定義ファイルから読み込むようにしてください。

「plot.json」の内容は次のようなものです：
{
    "date": {
        "x": 683,
        "y": 100,
        "size": 18
    },
    "to_name": {
        "x": 140,
        "y": 220,
        "size": 22
    },
    "amount": {
        "x": 200,
        "y": 380,
        "size": 40
    },
    "proviso": {
        "x": 680,
        "y": 370,
        "size": 18
    },
    "tax_info": {
        "x": 162,
        "y": 453,
        "size": 14,
        "line_height": 30
    }
}

すると、Antigravityが再度プログラムを修正してくれて、今度は、次のように、きちんとした領収書が生成されました。また、明朝体フォントだと文字がかすれてしまうようなので、IPAexゴシック(ファイル名: ipaexg.ttf)を使うように修正してもらいました。

そして、生成された領収書が次のようになります。サイズや位置は、「plot.json」をテキストエディタで開いて微修正することで、簡単に調整できます。

修正後の領収書 - きちんとした領収書が生成された

そもそも、Antigravityのプロンプトで「宛名をもう少し下に」とか「文字を小さくして」などと、繰り返し指定することも可能ですが、座標データをJSONデータにして、人間が微調整できるようにすることで、より綺麗な領収書が作成できるようになります。

レンタルサーバーに転送して使おう

今回作成した領収書発行システムは、PHPで作成されているので、多くの格安レンタルサーバーで動作します。画像の生成には、GDライブラリを使っているのですが、多くのレンタルサーバーでインストールされています。

Antigravityが作成したPHPのプログラムをFTPクライアントなどを使って、レンタルサーバーにアップロードしましょう。PHPであればアップロードして、フォルダ権限(755)などが正しく設定されていれば、すぐに動作するので便利です。PHPが利用できるレンタルサーバーであれば、問題なく動作するはずです。

ただし、このままだと誰でもアクセスできてしまうので、BASIC認証をかけたり、領収書を発行する際、パスワードを入力して認証を行うように、アプリを変更すると良いでしょう。

次のようなプロンプトを指定して、改良すると良いでしょう。

領収書を作成する際に、パスワードを指定して認証する仕組みにしてください。

なお、今回作成したプログラムは、こちらにアップロードしてあります。参考にしてください。

まとめ

今回は、Antigravityを使って、領収書発行システムを作成してみました。レンタルサーバーで動作するように、PHPで作成したので、簡単にデプロイできるのが便利でした。簡単な仕様書を指定することで、プログラムを自動生成してくれるので、プログラミング不要でアプリを作成できます。

自由型プログラマー。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。代表作に、日本語プログラミング言語「なでしこ」、テキスト音楽「サクラ」など。2001年オンラインソフト大賞入賞、2004年度未踏ユーススーパークリエータ認定、2010年 OSS貢献者章受賞。これまで50冊以上の技術書を執筆した。直近では、「大規模言語モデルを使いこなすためのプロンプトエンジニアリングの教科書(マイナビ出版)」「Pythonでつくるデスクトップアプリ(ソシム)」「実践力を身につける Pythonの教科書第2版」「シゴトがはかどる Python自動処理の教科書(マイナビ出版)」など。