AIによる自動の動作確認
espar form では、フォームを実装した後の入力・送信テストや、実際に送信されたメールの受信チェクまでまとめて任せることができます。
自動の動作確認に必要なもの
| 必要なもの | 確認できること |
|---|---|
| Claude in Chrome | 完成したフォームをブラウザで確認し、入力→送信までの挙動 |
| ccskill-gmail | Gmailのスキル。入力内容に基づいて実際に送られたメールの確認 |
Claude in Chrome
Claude Code が自律的にブラウザを操作できるようにするための公式 Chrome 拡張です。実装したフォームの動作確認に使用します。
Claude Code が Claude in Chrome を介してブラウザを自動起動・自動操作します。実装完了したHTMLを開き、テスト用の入力と確認→完了の画面遷移までの動作を確認してくれるようになります。
ccskill-gmail または標準コネクタ(MCP)
上記の Claude in Chrome を使った動作確認 では、テスト用の入力と実際のメール送信までが行われます。
この際、送信先を Gmail のメールアドレスにしておくと、受信メールが正しく届いたかどうか、またその内容が正しいかどうかまで Claude Code に確認させることができます。
Claude Code に、Gmail を操作させるには以下の方法があります。
- ccskill-gmail スキルをインストールする
- Claude の標準コネクタ(MCP)で Gmail に接続する
espar form のスキル ccskill-esparform ではどちらの方法にも対応しています。前者の ccskill-gmail は、マルチアカウントや添付ファイルダウンロードにも対応しているため、以下のような場合に便利です。
- 同じGmailでも通知メール・返信メールでメールアドレスを変える場合
- フォームにファイル添付機能を搭載させた場合
自動動作確認の開始方法
espar form で実装した問い合わせフォームの動作確認を、Claude Code に任せることができます。動作確認は、入力・送信のフェーズと、受信確認のフェーズに分かれます。
入力・送信
espar form で実装した後、Claude Code に以下のように伝えることができます。
実装したフォームの送信テストをして下さい。フォームのメールアドレス入力欄には、sample@example.com を入れて下さい。テストなので他は適当でokです。このプロンプトを受けて、Claude Code が自動的にブラウザを起動し、入力と送信操作までを行います。途中でエラー等が発生すると、Claude Code は自ら原因を調査して実装を見直します。
受信
入力・送信のあとに以下のように依頼することができます。
先ほどのテストで、実際にメールが届いているか確認して下さい。メール内容がおかしければHTMLや設定を見直して下さい。このプロンプトを受けて、Claude Code が Gmail の受信箱からメールを探し、設定した通りにメールが届いているかどうか確認します。問題があれば、Claude Code が自ら原因調査とHTML側の実装や設定の修正を試みます。