# 画面設計書 11-エンタープライズページ

## 概要

本ドキュメントは、OpenCodeコンソールのエンタープライズページの画面設計書である。法人向けの問い合わせフォームとFAQを提供する公開ページの仕様を定義する。

### 本画面の処理概要

エンタープライズページは、法人顧客向けの問い合わせ機能を提供する公開Webページである。企業がOpenCodeのエンタープライズ向けサービスに興味を持った際に、営業チームへ直接連絡を取るための窓口として機能する。

**業務上の目的・背景**：OpenCodeは個人開発者だけでなく、企業向けにもサービスを提供している。エンタープライズ顧客は特別なサポート、カスタマイズ、ボリュームライセンスなどを必要とすることが多いため、専用の問い合わせ窓口を設けることで、法人顧客の獲得と適切なサポート提供を実現する。

**画面へのアクセス方法**：コンソールサイトのヘッダーナビゲーション、またはランディングページからのリンクを通じて`/enterprise`パスにアクセスする。認証不要で誰でもアクセス可能な公開ページである。

**主要な操作・処理内容**：
1. 問い合わせフォームへの入力（名前、役職、メールアドレス、メッセージ）
2. フォーム送信によるAPIへのPOSTリクエスト
3. 送信成功時のサクセスメッセージ表示
4. FAQセクションの閲覧（アコーディオン形式で展開・折りたたみ）

**画面遷移**：ヘッダーからランディングページ、ダウンロードページ、Zen紹介ページ等へ遷移可能。フッターからはプライバシーポリシー、利用規約へ遷移可能。

**権限による表示制御**：公開ページのため、権限による表示制御は存在しない。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 56 | 国際化 | 主機能 | エンタープライズ向け説明の多言語表示 |

## 画面種別

登録（問い合わせフォーム）/ 情報表示（FAQ）

## URL/ルーティング

| 環境 | URL |
|------|-----|
| 本番 | `https://opencode.ai/enterprise` |
| 開発 | `http://localhost:3000/enterprise` |

ルーティング定義: `packages/console/app/src/routes/enterprise/index.tsx`

## 入出力項目

### 入力項目（問い合わせフォーム）

| 項目名 | 項目ID | データ型 | 必須 | 入力形式 | バリデーション | 備考 |
|--------|--------|----------|------|----------|----------------|------|
| 名前 | name | string | Yes | テキスト入力 | 必須チェック | プレースホルダーは国際化対応 |
| 役職 | role | string | Yes | テキスト入力 | 必須チェック | プレースホルダーは国際化対応 |
| メールアドレス | email | string | Yes | メール入力 | 必須チェック、メール形式 | type="email"による形式チェック |
| メッセージ | message | string | Yes | テキストエリア（5行） | 必須チェック | プレースホルダーは国際化対応 |

### 出力項目

| 項目名 | データ型 | 表示条件 | 備考 |
|--------|----------|----------|------|
| ページタイトル | string | 常時 | i18n対応（enterprise.title） |
| ヒーローセクションタイトル | string | 常時 | i18n対応（enterprise.hero.title） |
| ヒーローセクション本文1 | string | 常時 | i18n対応（enterprise.hero.body1） |
| ヒーローセクション本文2 | string | 常時 | i18n対応（enterprise.hero.body2） |
| FAQセクション | component | 常時 | 4つのQ&Aを表示 |
| 送信成功メッセージ | string | 送信成功時 | 5秒間表示後自動非表示 |

## 表示項目

### ヘッダーセクション
- サイトロゴ
- ナビゲーションリンク

### コンテンツセクション（2カラムレイアウト）

#### カラム1（左側）
- ヒーローセクションタイトル（h1）
- ヒーロー本文1（p）
- ヒーロー本文2（p）
- テスティモニアル（現在非表示: `Show when={false}`）

#### カラム2（右側）
- 問い合わせフォーム
  - 名前入力フィールド
  - 役職入力フィールド
  - メールアドレス入力フィールド
  - メッセージ入力フィールド
  - 送信ボタン
  - 成功メッセージ（条件付き表示）

### FAQセクション
| 項目 | 内容キー |
|------|----------|
| FAQ質問1 | enterprise.faq.q1 / enterprise.faq.a1 |
| FAQ質問2 | enterprise.faq.q2 / enterprise.faq.a2 |
| FAQ質問3 | enterprise.faq.q3 / enterprise.faq.a3 |
| FAQ質問4 | enterprise.faq.q4 / enterprise.faq.a4 |

### フッターセクション
- サイトフッター
- 法的情報リンク

## イベント仕様

### 1-フォーム入力変更

| 項目 | 内容 |
|------|------|
| トリガー | 入力フィールドへの入力（onInput） |
| 処理 | handleInputChange関数によりformDataシグナルを更新 |
| 結果 | 入力値がリアクティブに保持される |

### 2-フォーム送信

| 項目 | 内容 |
|------|------|
| トリガー | 送信ボタンクリック |
| 処理 | handleSubmit関数が実行される |
| 詳細フロー | 1. e.preventDefault()でデフォルト動作を防止<br>2. isSubmittingをtrueに設定<br>3. `/api/enterprise`にPOSTリクエスト送信<br>4. 成功時: showSuccessをtrue、formDataをリセット、5秒後にshowSuccessをfalse<br>5. 失敗時: コンソールにエラー出力<br>6. 最終的にisSubmittingをfalseに設定 |

### 3-FAQ展開・折りたたみ

| 項目 | 内容 |
|------|------|
| トリガー | FAQ項目のクリック |
| 処理 | Faqコンポーネント内部で展開状態を切り替え |
| 結果 | 回答テキストの表示/非表示が切り替わる |

## データベース更新仕様

### 操作別データベース影響一覧

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| フォーム送信 | (外部API) | POST | `/api/enterprise`エンドポイントへのリクエスト |

### テーブル別更新項目詳細

本画面では直接的なデータベース操作は行わない。フォーム送信は`/api/enterprise`APIエンドポイントを介して処理され、バックエンドで適切に処理される。

## メッセージ仕様

| メッセージID | メッセージ種別 | 表示条件 | メッセージ内容（キー） | 表示時間 |
|-------------|---------------|----------|----------------------|---------|
| success | 成功 | API応答がOKの場合 | enterprise.form.success | 5秒 |
| sending | 処理中 | 送信処理中 | enterprise.form.sending | 処理完了まで |
| send | ボタンラベル | 通常時 | enterprise.form.send | 常時 |

## 例外処理

| 例外パターン | 検出方法 | 対応処理 | ユーザーへの通知 |
|------------|----------|---------|----------------|
| API通信エラー | try-catchでエラー捕捉 | console.errorでログ出力 | なし（現在の実装） |
| 必須項目未入力 | HTML5 required属性 | フォーム送信をブロック | ブラウザ標準のバリデーションメッセージ |
| メール形式不正 | HTML5 type="email" | フォーム送信をブロック | ブラウザ標準のバリデーションメッセージ |

## 備考

- テスティモニアルセクションは実装されているが、現在`Show when={false}`により非表示となっている
- 国際化はuseI18nフックを使用し、i18n.t()関数で翻訳キーを参照
- LocaleLinksコンポーネントにより、言語別の代替URLが設定される
- フォーム送信後のエラーハンドリングは現在最小限の実装（コンソールログのみ）

---

## コードリーディングガイド

本画面を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

本画面ではシンプルなフォームデータを扱う。フォームの状態管理にSolidJSのcreateSignalを使用している。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | index.tsx | `packages/console/app/src/routes/enterprise/index.tsx` | formData、isSubmitting、showSuccessの3つのシグナル定義（13-20行目） |

**読解のコツ**: SolidJSのcreateSignalはReactのuseStateに似ているが、値取得時に関数呼び出し（例: formData()）が必要。

#### Step 2: エントリーポイントを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | index.tsx | `packages/console/app/src/routes/enterprise/index.tsx` | Enterprise関数コンポーネントがデフォルトエクスポート（11行目） |

**主要処理フロー**:
1. **11行目**: Enterprise関数コンポーネント定義
2. **12行目**: useI18nフックで国際化コンテキストを取得
3. **13-18行目**: フォームデータのシグナル初期化
4. **22-25行目**: handleInputChange - 入力変更ハンドラ
5. **27-55行目**: handleSubmit - フォーム送信ハンドラ
6. **57-233行目**: JSXによるUI描画

#### Step 3: 共通コンポーネントを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | header.tsx | `packages/console/app/src/component/header.tsx` | ヘッダーナビゲーション |
| 3-2 | footer.tsx | `packages/console/app/src/component/footer.tsx` | フッター |
| 3-3 | faq.tsx | `packages/console/app/src/component/faq.tsx` | FAQアコーディオンコンポーネント |
| 3-4 | legal.tsx | `packages/console/app/src/component/legal.tsx` | 法的情報表示コンポーネント |

#### Step 4: 国際化システムを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | i18n.tsx | `packages/console/app/src/context/i18n.tsx` | useI18nフック、t()関数の実装 |
| 4-2 | locale-links.tsx | `packages/console/app/src/component/locale-links.tsx` | 多言語URL対応 |

### プログラム呼び出し階層図

```
Enterprise (index.tsx)
    |
    +-- useI18n() -> i18nコンテキスト取得
    |
    +-- handleInputChange()
    |       +-- setFormData() -> シグナル更新
    |
    +-- handleSubmit()
    |       +-- fetch("/api/enterprise", {...})
    |       +-- setShowSuccess(true)
    |       +-- setFormData({reset})
    |       +-- setTimeout() -> 5秒後にsetShowSuccess(false)
    |
    +-- <Header />
    +-- <Faq /> x 4
    +-- <Footer />
    +-- <Legal />
```

### データフロー図

```
[入力]                    [処理]                         [出力]

ユーザー入力 ───────> handleInputChange()
(name,role,               |
 email,message)           v
                     formDataシグナル更新
                          |
                          v
送信ボタン押下 ────> handleSubmit()
                          |
                          v
                    POST /api/enterprise ─────> 外部API
                          |
                          v
                    (成功時)
                          |
                          v
                    showSuccess(true) ────────> 成功メッセージ表示
                          |
                          v
                    5秒後setTimeout
                          |
                          v
                    showSuccess(false) ───────> メッセージ非表示
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| index.tsx | `packages/console/app/src/routes/enterprise/index.tsx` | ソース | メイン画面コンポーネント |
| index.css | `packages/console/app/src/routes/enterprise/index.css` | スタイル | 画面固有のスタイル定義 |
| header.tsx | `packages/console/app/src/component/header.tsx` | ソース | 共通ヘッダーコンポーネント |
| footer.tsx | `packages/console/app/src/component/footer.tsx` | ソース | 共通フッターコンポーネント |
| faq.tsx | `packages/console/app/src/component/faq.tsx` | ソース | FAQアコーディオンコンポーネント |
| legal.tsx | `packages/console/app/src/component/legal.tsx` | ソース | 法的情報コンポーネント |
| locale-links.tsx | `packages/console/app/src/component/locale-links.tsx` | ソース | 多言語リンクコンポーネント |
| i18n.tsx | `packages/console/app/src/context/i18n.tsx` | ソース | 国際化コンテキスト |
