マニュアル
EN/JA

AI Web ビルダー

サンプル: チャットでウェブサイトをエンドツーエンドに構築する様子。

Webpage Builder は Pro プランに同梱される組み込み Agent Skill で、チャットをウェブサイトのエンドツーエンド作成ツールに変えます。「予約ページが欲しい」「会員制ポータルを作りたい」「問い合わせフォームを置きたい」と話すだけで、AI が HTML、裏側のワークフロー YAML、必要なシートスキーマ、仕様書 / 変更履歴まで一式生成します。

このスキルは Pro アカウントで初めて IDE を開いたときに skills/webpage-builder/ へ自動プロビジョニングされ、リリースのたびに上書き更新されます。インストール作業は不要で、チャットで有効化するだけです。

有効化

  1. チャットパネルを開き、入力欄横のSparklesアイコンをクリック。
  2. Webpage Builderを選択 — 入力欄の上に紫のチップが表示されます。
  3. （または、メッセージ冒頭に/webpage-builderと入力。）

Plan → Approval フロー

Webpage Builder は固定の 3 ステッププロトコルに従うため、Drive にファイルが書き込まれる前に必ず内容を確認できます。

  1. ヒアリング。 AI が必要な情報を絞った質問で集めます — サイトの目的、ログインするアカウントタイプ（例: talent、company）、データを置くシート、通知メールの宛先など。ファイル構成を把握している必要はなく、自然な日本語で答えれば OK。
  2. プラン提示。 AI が作成予定の全ファイルを web/... / admin/... のフルパス付きで番号リストとして返します — ページ、ワークフロー YAML、モック、スキーマ差分、spec / history への追記。この時点ではまだ何も書き込まれません。
  3. 承認。 OK / 進めて / yes と返すと作成が始まります。プランに修正を入れたい場合（「予約フォームを 2 ページに分けて」「新規シートではなく既存の members シートを使って」など）はそのまま指示すれば AI が再プランします。

承認後、ファイルは create_drive_file で 1 つずつ作成され、各ファイルに対して Pre-Save Checklist（認証境界、エスケープ、スキーマ整合性、モック対応）が走ります。新しいシート列が必要な場合は、書き込みワークフローの実行前に migrate_spreadsheet_schema でマイグレーションされます。

生成されるファイル

web/
  index.html, login/talent.html, partner/...      ← 公開ページ
  api/<endpoint>.yaml                             ← ワークフロー API
    （/__gemihub/api/<endpoint> として配信）
  __gemihub/
    auth/me.json                                  ← IDE プレビュー用 auth モック
    api/<endpoint>.json                           ← エンドポイント別モック
    schema.md, spec.md, history.md                ← リビングドキュメント

admin/                                            ← IDE 専用の運営者ページ
  bookings.html, inquiries.html, ...              ← （プレミアムプラン章を参照）
  api/<endpoint>.yaml                             ← admin ワークフロー

この分割は意図的です: web/ はカスタムドメインで一般公開される領域、admin/ は IDE プレビューからしか到達できず、Drive 所有者の OAuth で動きます。

AI が守る規約

  • ソフトデリート。 キャンセル / 無断 / アーカイブは sheet-update で status 列を書き換えるだけ。予約系レコードに sheet-delete は使いません。
  • 認証 ≠ 認可。 requireAuth 付きワークフローは必ず sheet-read を {{auth.email}} でフィルタします — フィルタなしでは、ログイン済みユーザーが他人の行まで見えてしまいます。
  • IDE プレビュー用モック。 各 API エンドポイントには web/__gemihub/api/... にサンプル JSON が置かれ、iframe プレビューがネットワークに出ずにレンダリングできます。
  • リビングドキュメント。 イテレーションごとに web/__gemihub/history.md に日付付きエントリを追加し、spec.md を更新します。

生成済みサイトの編集

ファイルツリーから生成済みファイルを開けば直接編集できます。HTML エディタのプレビュータブはキャッシュ済みモックを使ってページをレンダリングするので、Drive に Push しなくても結果を確認できます。AI に追加の改修を頼みたい場合は、Webpage Builder を有効にしたまま自然言語で指示すれば、差分だけを対象にした Plan → Approval フローが再走します。

AI 自体の挙動を恒久的に調整したい場合（毎回既存の members シートを使ってほしい、ウェルカムメールには必ず特定の URL を含めたい等）は、Skill 設定のModify Skill with AIから指示を追記すれば、毎回伝え直す必要がなくなります。

管理画面（運営者向けページ）

予約のキャンセル、無断キャンセル記録、問い合わせ返信といった運営者向け画面は、web/admin/ ではなく admin/ 配下に置かれるため、公開ドメインからは到達できません。Drive 所有者が IDE プレビューから操作し、リクエストは IDE の OAuth セッションで /api/hubwork/admin/* に橋渡しされます。橋渡しの仕組み・セキュリティ・ソフトデリート規約の詳細は、プレミアムプラン章の管理画面（IDE プレビュー）セクションを参照してください。

プレミアムプラン設定一覧