最新のお知らせ
8.212026
Claude Codeにメールフォームを作らせてみる
AIにコーディングをさせるというのがずいぶん普及したようですが、実例を探してみても、作ろうとしているものが、いかにも今どきの先進IT企業っぽいものだったりして「そもそも作ろうとしているもの自体がわからん」という人もいるかもしれません。
古典的なWEBアプリケーションを作らせてみるというのをやってみます。
作らせるのはメールフォームです。
AIにやらせるんだからプログラム言語やらフレームワークやら何を使ってもよさそうなものですが(コードはいちいち人間が見ないという前提)、レンタルサーバで使いやすいPHP+PHPMailerで作らせてみました。
事前準備
いつもはCLIなのですが、Claude Desktopでやってみました。
Claude Desktopのインストールや、Claude Codeを使うためのサブスクリプションやらAPIやらの申し込みの手順は、それだけでページを使ってしまいますので割愛します。それこそClaudeに聞いてください。
とりあえず普通にフォルダを作り、指定しておきます。

開発開始
というわけで作らせてみた動画です。
たった一言「メールフォームを作って」と指示しただけ。
できあがったもの
出来上がったファイルの一覧がこちら。
| index.php | フォーム画面 |
| send.php | 送信処理(CSRF検証・入力チェック・PHPMailer送信) |
| thanks.php | 送信完了画面 |
| config.php | SMTP/送信先設定 |
| assets/style.css | スタイル |
| composer.json | 依存パッケージ |
| README.md | インストール方法 |
ちゃんとインストール方法まで用意してくれてます。
マークダウン形式ですが、中身はテキストなのでそのまま読めます。
マークダウンリーダーがあるといいですね。読むだけならGoogle ChomeにMarkdown Viewer 拡張を入れると便利です。
サーバに置いてみる
ここからはClaude Code関係なく、レンタルサーバでの設置手順です。
サーバへのアップロードはFTPなどでもできますが、ここはPleskのファイルマネージャを使いました。
PHPMailerをインストールするためにComposerを使う必要があります。SSHログインしなきゃ、と考えがちですが、composer.jsonさえ用意していれば、Plesk上でパッケージのインストール・アップグレードができます。composer.jsonはClaude Codeが作ってくれています。
ファイルマネージャもComposerもPleskから利用できます

ファイルマネージャからアップロードしたところ

設定ファイルの編集もファイルマネージャから。

続いてPHP Composer。「スキャン」をクリックするとcomposer.jsonを検索します。

検索完了し、インストールを実行した状態。

アクセスしてみる
シンプルですが、ちゃんと動くものができました。
入力画面

送信完了画面

この先は…
ここまで見ても、難しい顔で「セキュリティは?reCAPTCHAなどは対応しないの?」「見た目がそっけなさすぎるのでもっと凝ったデザインを」など言い出す方もおられるかもしれません。そこはさらに指示をしてどんどん良くしていけばいいのです。
ウェブデザインは、いかにもAIが作ったような、になることが多いですが、より洗練されたデザインができる「スキル」などを追加することで、かなりましになります。
もちろん人がソースを触るのも可(混乱しないよう、触ったことは教えてあげてください)。全部AIに任せる必要もありません。自分の仕事をAIに肩代わりさせるというより、自分の相棒または部下のイメージで利用していくのがいい感じだなと思います。

