最新のお知らせ

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.phpSMTP/送信先設定
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に肩代わりさせるというより、自分の相棒または部下のイメージで利用していくのがいい感じだなと思います。

    ページ上部へ戻る