ローカル環境でCursorとClaude Codeを使ってバイブコーディングを実施してWebサイトをつくり、これをNetlifyを使って本番に反映する、という実践動画をつくりました。
こちらの記事では、補足解説を行っていきます。動画と併せて参考にして頂ければと思います。
Netlifyとは？
Netlify（ネットリファイ）は、静的サイトやフロントエンド中心のWebアプリを簡単に公開できるホスティングサービスです。デンマーク出身のMathias Biilmann氏とChristian Bach氏によって創業。ツールは2015年に公開されました。
Vercel と似たサービスですが、Netlifyは「ドラッグ＆ドロップだけで公開できる」初心者向け機能が強いのが特徴だと感じました。
ローカル上のバイブコーディング
次のような流れで行っています
- ChatGPTと壁打ちでClaudeCode用のプロンプトを作成
- Claude CodeにWebサイトをつくってもらう
- Cursorで手直し
なお、今回はお問い合わせフォームを搭載しました。こちらは、フォームタグの中にdata-netlify=”true” または netlify 属性をいれることで、netlifyと連携ができます。
本番環境に公開（ドラッグ＆ドロップで公開）
この部分は、動画をご覧いただけるほうが分かりやすいかと思います。ざっと流れだけ書きますね。
—-
1.アカウント作成
Netlify公式サイトでアカウントを作成します。
2.プロジェクトを作成
3.ドラッグ＆ドロップで公開/GitHub連携も可能
4.Netlify上でフォームと連携・フォーム送信時に通知が送信されるようにする
Forms/Form notifications から行います。
もし「Form notifications 」が表示されない場合には、下記お試しください。
-
HTMLの
<form>タグ内に、が入っているか確認します。
-
もし属性の位置や記述が正しくない場合は、
-
netlifyと書いてある部分をdata-netlify="true"に変更する -
または逆に
data-netlify="true"をnetlifyに変更して試す
-
-
修正したら、もう一度本番環境にアップしてください。
フォームのセキュリティ対策
フォーム送信機能を搭載する上で、行った方が良い対策がいくつかありますので、ご紹介します。
① Akismet（アキスメット）
Netlifyでは、すべてのフォーム送信に対して Akismet というスパム判定サービスがデフォルトで有効になっています。こちらは、参考までに書いておきます。
② ハニーポット（Honey Pot）
ハニーポットは、ユーザーには見えない隠し入力フィールドをフォーム内に仕込む方法です。
人間はその項目に入力しませんが、Botは自動で全フィールドに入力するため、それを検知して送信をブロックできます。Netlifyフォームの場合は、次のようにします。
Netlify に隠しハニーポットフィールドを通知するには、
netlify-honeypotフォームに<form>隠しフィールドの名前を指定した属性を追加します。その後、そのフィールドがフォームに存在し、CSS または JavaScript で非表示になっていることを確認します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<form name="contact" method="POST" <span style="color: #ff0000;"> netlify-honeypot="bot-field"</span> data-netlify="true" > <p class="hidden"> <label> Don’t fill this out if you’re human: <input <span style="color: #ff0000;">name="bot-field"</span> type="text" /> </label> </p> <p> <label> Email: <input type="text" name="email" /> </label> </p> </form> |
詳細は公式マニュアルご覧ください。
③ reCAPTCHA（リキャプチャ）
Googleが提供するスパム防止サービスで、送信前に「私はロボットではありません」という認証を行わせます。
Netlifyフォームは reCAPTCHA v2 に対応しており、Botによる自動送信をさらに防げます。
設定は少し手間ですが、実運用でスパムが多い場合は導入をおすすめします。
https://docs.netlify.com/manage/forms/spam-filters/
フォームのセキュリティ対策・補足説明
今回は、認証機能なし・データベース保存なしのお問い合わせフォームのため、そこまで厳重なセキュリティ対策は必要ありません。
認証機能を付けたり、送信内容をデータベースに保存して、Webページ上に表示するような場合は、バックエンドサーバー側でのセキュリティ対策が必須になります。
Netlify無料版について
Netlifyは無料版であっても、商用利用OKです。ただ、転送量やフォーム送信数に制限があります。
フォーム送信は1サイトにつき、月々100個まで。ウェブサイトは500個まで。
無料版と有料版の比較は下記にあるので、ご興味あれば見てみてくださいね。
さいごに
Netlifyを使って、バイブコーディングで作成したWebサイトを簡単に公開する手順をご紹介しました。
バイブコーディングは、自分でコードを書かず、生成AIを使ってコードを書く方法です。今回のようにCursorやClaude Codeを使えば、ローカル上でのバイブコーディングが可能となります。
「バイブコーディング」については、マンガ付きの入門講座も連載しているので、ご興味あれば、併せて見てみてくださいねは
バイブコーディングや生成AIを使った開発内製化について、研修やコンサルティングのご相談を受け付けております。「サービス・お問い合わせ」ページご覧ください。
