大東 信仁（ものくろ） 
Googleカレンダーの予約状況を、自分のWordPressサイトにいい感じに表示したい……と思いまして。
結論からお伝えすると、Claude Codeのバイブコーディングで、WordPressプラグインを一から作ることができました。
しかも、コードを1行も手書きしていません。会話だけです。
バイブコーディングって何？
バイブコーディングは、AIに自然言語で「こういうものが欲しい」と伝えて、対話しながらソフトウェアを作っていくスタイルのことです。
コードを一行一行書くのではなく、"雰囲気（バイブ）"を伝えるという感じですね。
今回はAnthropicが提供するCLIツール「Claude Code」を使いました。
ターミナル上でClaude（AI）と会話しながらプラグインを完成させた、という流れです。
作ったプラグイン「Cal Amid」
「Cal Amid」は、公開Googleカレンダーから「○受付中」のイベントを自動取得して、サイト上にカレンダー形式で表示するWordPressプラグインです。
実際の画面はこちら ↓
https://amid.co.jp/about/nobuhito/n-1on1-session-calendar/
主な機能はこんな感じです。
- Google Calendar API v3 でイベント取得（繰り返しイベントにも対応）
- 「○受付中」などのキーワードでフィルタリング
- 本日の2日後以降のイベントのみ表示（直前の予約を防ぐ仕組み）
- 開始〜終了時間の表示
- 2時間以上のイベントは、希望の時間帯を選べるダイアログが出る
- 選んだ日付・時間帯がお問い合わせフォームに自動で渡される
- スマホでも快適に操作できるレスポンシブ対応
- 管理画面にAPI接続のデバッグパネル搭載
けっこう盛りだくさんですよね。
でもこれ、全部会話だけで作ったんです。
開発の流れ — 会話だけで進んでいく
実際にClaude Codeとやりとりした流れをお伝えします。
ステップ1：最初の一言で雛形が完成
最初の指示はこれだけでした。
WordPressのサイトに、私の公開しているGoogleカレンダーの「○受付中」のイベントをカレンダー形式で表示するプラグインを作って
あっ、これだけでプラグインの基本構造が全部できた！という感じです。
PHPメインファイル、CSS、JavaScript、uninstall.php……一式まるごと生成してくれました。
Settings APIを使った管理画面、ショートコード、AJAXエンドポイント、キャッシュ機構まで含まれています。ドキドキしながら見守っていたら、あっという間でした。
ステップ2：デザインの修正
最初に出来上がったカレンダーは7列のグリッド形式だったんです。
でも僕が欲しかったのは、参考サイトのような縦型テーブルレイアウト（1行1日）のデザイン。
カレンダーのデザインが指示したのと違う。こっちのデザインにして
と伝えて、参考サイトのURLを渡しただけで、Claude CodeがそのサイトのHTMLを自動的に取得・分析して、配色や構造まで合わせて全面書き換えてくれました。
なんでやねん、すごいやん……と思わず声が出ました。
ステップ3：UI/UXの磨き込み
「最高最善のUI/UXにして」と伝えたところ、こんな仕上がりになりました。
- グラデーションとシャドウで立体感
- ホバー時のマイクロインタラクション
- 44pxのタッチターゲット（スマホで押しやすい）
- フォーカス表示のアクセシビリティ対応
ここまでやってくれるのか、という感じです。
ステップ4：問題の切り分けと解決
ここで壁にぶつかりました。
iCalフィードでイベントが取れない……という問題が発生したんです。
するとClaude CodeがiCSファイルをダウンロードして解析し、「iCalのbasic.icsフィードは繰り返しイベント（RRULE）を展開しないため、未来のイベントが取れない」という原因を特定してくれました。
そしてGoogle Calendar API v3への一本化を提案。
ほっ、としました。自分で原因を調べていたら、かなり時間がかかっていたと思います。
ステップ5：デバッグパネルの追加
APIキーを設定してもイベントが表示されない、という次の壁が来ました。
Claude Codeに相談したら、管理画面にデバッグパネルを追加してくれました。
HTTPステータス、エラー詳細、リクエストURL、取得イベント数、フィルター結果などが一目でわかる画面です。
実際にこのパネルから**「APIキーのHTTPリファラー制限が原因」**と即座に判明。サクッと解決できました。
ステップ6：ビジネスロジックの追加
こんな要望も、一言ずつ伝えるだけで実装されていきました。
- 「本日の2日後以降のものだけ表示して」→ カットオフ日付によるフィルター追加
- 「終了時間もわかりやすく表示して」→ 「10:00〜16:00」形式の時間範囲表示
- 「2時間以上のイベントは開始時間を選べるダイアログを表示して」→ 2時間枠の時間帯選択モーダル
- 「お問い合わせフォームに送る時間は時間帯にして」→ URLパラメータの形式変更
- 「今日の日付にスクロールするようにして」→ 初回表示時の自動スクロール
一言で伝えて、数秒で実装される。
この体験は、感動モノです。
セキュリティも自動でチェック
WordPressプラグイン開発用のエージェントスキルを使って、セキュリティ監査も実施しました。
| チェック項目 | 結果 |
|---|---|
| CSRF対策（Nonce） | OK |
| 権限チェック | OK |
| 入力サニタイズ | OK |
| 出力エスケープ | OK |
| SQLインジェクション対策 | OK |
| XSS対策 | OK |
全項目クリアです。
wp_unslash() の追加漏れなど、細かい改善点も自動で発見・修正してくれました。
セキュリティまでカバーしてくれるのは、ほんとありがたい感じです。
バイブコーディングで感じたこと
良かった点
- 圧倒的なスピード — 通常なら数日かかるプラグイン開発が、会話ベースで数時間で完成しました
- 反復の速さ — 「ここを変えて」と言うだけで即座に修正されます。トライ＆エラーのコストが極めて低い感じです
- 知識の補完 — Google Calendar APIの仕様やWordPressのセキュリティベストプラクティスなど、調べる手間が省けます
- デバッグ力 — 問題発生時に原因を自力で分析し、解決策まで提案してくれます
気をつけたいポイント
- 確認は必要 — 生成されたコードが意図通りか、実際に動かして確認する工程は欠かせません
- 具体的な指示が大事 — 「いい感じにして」より「border-radius 16pxで、前後の月ボタンは6px」のように具体的に伝えた方が精度が高いです
- 参考を見せる — デザインの指示は言葉だけより、参考サイトのURLを渡す方が圧倒的に伝わります
まとめ
Claude Codeによるバイブコーディングは、「コードを書く」から「要件を伝える」へと開発体験を変えてくれるという感じです。
今回のCal Amidプラグインは、v1.0.0からv1.5.1まで、すべてClaude Codeとの対話だけで開発しました。
途中のiCalの技術的な壁も、セキュリティ監査も、UI/UXの磨き込みも、すべて会話の中で解決しています。
「プログラミングはできないけど、作りたいものがある」という方にとって、バイブコーディングは強力な選択肢になるのではないでしょうか。
ぜひお試しください。
