Skip to content

AIによる自動実装の準備

必要なもの

espar form のスキルを使ってフォームを自動実装・動作確認させるには、以下のものが必要となります。

(a) Claude Code

ターミナルから claude コマンドで起動する Claude Code 環境を用意して下さい。Claude デスクトップアプリではありません。

(b) Claude in Chrome

Claude Code がブラウザを操作するのに必要な Chrome 拡張です。自動実装後に Claude Code 自身がフォームの動作確認をするために使用します。

Claude in Chrome は MCP という拡張機能を使います。拡張のインストール後、使用できる状態になっていることを標準コマンド /mcp を使って確認して下さい。

/mcp の一覧に chrome in chrome が表示された状態

connected と表示されていれば使用できます。表示されない場合は、Claude Code を再起動してください。

(c) ccskill-esparform

ccskill-esparform の手順に従ってインストールして下さい。

インストール後、Claude Code から ccskill-esparform スキルが使える状態になっているか、一覧表示用の標準コマンド /skills を使って確認してください。スキル一覧に、以下の表示が含まれていれば使用できます。

/skills の一覧に ccskill-esparform が表示された状態

表示されない場合は、/exit で一度 Claude Code を終了してから再起動してください。

(d) esparformctl

esparformctl は、espar form の管理画面上の設定を行うための CLI で Claude Code が使用します。espar-esparformctl のページを参考にインストールして下さい。

インストール後は、ターミナルで以下コマンドを実行し、使用できる状態になっているかを確認して下さい。

esparformctl --version
esparformctl version 0.3.0 (commit 1d47eddc33e147710400fc69f3740326269bff67, built 2026-07-30T05:43:58Z)

エラーが表示される場合や上記のようにバージョン番号が表示されない場合は、ターミナル(または Visual Studio Code 等のIDE)を再起動して、改めて確認して下さい。

(e) espar form のアカウント

トライアル環境を申し込んだ際に、アカウント情報が記載された以下のようなメールが届きます。Claude Code が esparformctl 使用時にログインを求めたときに必要となります。

espar form をお試し頂ける環境が整いましたので
以下の通りログイン情報をお知らせ致します。
- - - - - - - - - - - - - - - - - - - -
■ 管理画面
https://admin.espar.biz/
■ ログイン情報
ホスト名 : example.com
パスワード : abcd1234
■ espar form オンラインマニュアル
https://doc.feedtailor.jp/espar/form/
- - - - - - - - - - - - - - - - - - - -
上記のマニュアルの「はじめに」と「基礎編」をご覧頂きまして、
簡単なhtmlファイルでメールが送信されるのを確認頂ければと存じます。

まだ受け取っていない場合、弊社担当にご連絡下さい。

(f) フォームID

フォームIDは各フォームを識別するための半角文字列で espf で始まります。espar form では複数のフォームを作ることができるため、それぞれのフォームを識別するために個別のフォームIDが割り当てられます。

契約初期はフォームは1つで、フォームIDは espf です。2つ目以降のフォームを追加する際にフォームIDを指定して追加依頼が必要です。詳しくは、こちらをご覧ください。

 

スキルの発動テスト

espar form でフォームを実装したいという主旨のプロンプトを入力すると、Claude Code が自動的に ccskill-esparform スキルを発動させます。明示的に /ccskill-esparform コマンドを使って発動させることもできます。

/ccskill-esparform コマンドでスキルを明示的に発動した状態

明示的に発動すると、上図のように何をやりたいかを聞いてきますので、選択してその後の指示に従ってください。途中で間違えても、自然言語でやり直しを指示することができます。