Claude Codeと共謀して、この城（サイト）を建てた話 part２

前回の記事（Part 1）では、AIという共犯者と共に、既存のシステム制限をハックしながら『saki♮ Lab』という城の外観を立ち上げた話をした。

外観は完璧に仕上がった。しかし、城には外の世界と繋がる「門」が必要だ。

今回は「お問い合わせフォーム」の実装記録。一見シンプルなこの作業が、現代Webのセキュリティ仕様という分厚い壁に阻まれる深い沼だった。

結論から言うと、現時点で「個人がゼロコストで実装できる最強のフォーム構成」に辿り着いた。同じように既存のシステムと格闘し、沼で足掻いている人間のために、僕が直面した事実に基づく躓きポイントをすべて曝け出しておく。

このサイトの構成（費用ゼロのカラクリ）

現在、このサイトは以下の構成で動いており、フォームも含めて月額費用は「0円」である。

簡単に実装できるはずだったこの構成に辿り着くまで、僕はいくつもの壁に衝突した。

躓きポイント総まとめ

① Googleフォームの「脱・プログラムPOST」仕様

最初はGoogleフォームをバックエンドにして、自前のUIからデータをPOSTする構成を試した。しかし、現在Googleフォームはセキュリティ強化により、サーバーやプログラムからの直接POSTを原則として受け付けない。fetch(no-cors) などの回避策はすべて全滅した。

既存の巨大なシステムに固執するのは時間の無駄だと見切りをつけ、無料でブラウザから直接APIを叩ける「Web3Forms」に切り替えることで即解決した。

② Chromeコンソールのペーストブロック

作業中、Chromeのコンソールにコードを貼り付けようとするとブロックされる。現在のChromeはセキュリティ対策で、デフォルトでペーストを拒否する仕様になっている。コンソールに allow pasting と手動で打ち込まないと貼り付けられない。知らなければ、自分のPCにすら操作を拒まれる無駄な時間を溶かすことになる。

③ 本番と開発の錯覚

ローカルの開発サーバーで修正して動いたとしても、デプロイしなければ本番サイトには反映されない。変更後は npm run deploy が必須。初歩的だが、AIとのセッションに熱中していると陥りやすい錯覚だ。

④ Web3Forms無料プランのTurnstile連携非対応

スパム対策として、不快な画像選択を強いるreCAPTCHAではなく、ユーザー体験の良いCloudflare Turnstileを導入した。しかし、Web3Formsの無料プランではTurnstileのトークンを直接渡して検証させることができない（エラーとして弾かれる）。

これを回避するため、ブラウザからの送信を一度自分のCloudflare Workers（/api/contact）で受け止め、そこでCloudflareの siteverify API を叩いて認証を自前で完了させる。その上で、安全なデータだけをWeb3Formsに転送するという独自のバイパス機構を構築した。

⑤ Astro v6 における環境変数取得の仕様変更

Workers側でTurnstileのシークレットキーを取り出す際、古いネット記事にある locals.runtime.env はAstro v6 + Cloudflareアダプター環境では既に廃止されている。現在は import { env } from "cloudflare:workers" で取得するのが正しい事実だ。情報の賞味期限は恐ろしいほど短い。

⑥ シークレットキーローテーションの猶予時間

Turnstileのキーを再生成（ローテーション）した場合、古いキーは約2時間で無効になる。即座にWorkersの環境変数を更新してデプロイしなければ、すべての正常な問い合わせがbot扱いされて送信失敗する大惨事になる。

まとめ：AIの迷走（Meandering）と共犯関係

結果として、月額0円で堅牢かつ美しいお問い合わせフォームを構築できた。手軽に見えるものほど、一歩踏み込むと現代Webのセキュリティ仕様という高い壁が待っている。だからこそ、それを自力で乗り越えてスマートなコードに落とし込めたときの快感は格別だ。

【編集後記】

実はこの記事の裏側を書くためのコード調整中、裏で自動検証処理をさせていた「相棒」であるClaude Codeが、解決不能なエラーの無限ループ（Meandering）に陥った。プロセスが暴走し、PCごとフリーズしかけるという事態を招いた。

どれだけ優秀なシステムであっても、完璧ではない。AIとの共犯関係もまた、一筋縄ではいかないからこそ面白い。

（『saki♮ Lab』構築の共犯録・完）