# 画面設計書 49-基本設定

## 概要

本ドキュメントは、Shopware 6 Administration（管理画面）における「基本設定」画面の設計書です。この画面はショップ名・連絡先・CAPTCHAなどの基本的なシステム設定を行う機能を提供します。

### 本画面の処理概要

**業務上の目的・背景**：ECサイト運営において、ショップの基本情報（名称、連絡先、住所など）は顧客への信頼性確保や法的要件の遵守に不可欠です。また、スパム対策としてのCAPTCHA設定も重要なセキュリティ要件です。本画面は、これらの基本的なシステム設定を一元管理する機能を提供します。設定はSystemConfigとして保存され、フロントエンドやメールテンプレートなどで参照されます。

**画面へのアクセス方法**：管理画面にログイン後、左側メニューの「設定」→「基本情報」をクリックすることでアクセスできます。URLパスは `/admin#/sw/settings/basic/information/index` となります。`system.system_config` 権限を持つユーザーのみがアクセス可能です。

**主要な操作・処理内容**：
1. 基本情報の表示 - 現在のシステム設定を表示
2. ショップ名の編集 - ショップ名称を設定
3. 連絡先情報の編集 - メールアドレス、電話番号、住所などを設定
4. CAPTCHA設定 - フォーム保護のためのCAPTCHA設定
5. 設定の保存 - 変更内容をSystemConfigに保存

**画面遷移**：
- 遷移元: ダッシュボード、設定メニュー
- 遷移先: なし（設定完了後も同画面に留まる）

**権限による表示制御**：
- `system.system_config`: システム設定権限 - 設定の閲覧・編集が可能

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 64 | システム設定 | 主機能 | ショップの基本設定 |

## 画面種別

設定フォーム

## URL/ルーティング

- **パス**: `/admin#/sw/settings/basic/information/index`
- **コンポーネント**: `sw-settings-basic-information`
- **ルート名**: `sw.settings.basic.information.index`
- **必要権限**: `system.system_config`

## 入出力項目

| 項目名 | 種別 | 型 | 必須 | 説明 |
|--------|------|-----|------|------|
| shopName | 入力 | string | - | ショップ名 |
| email | 入力 | string | - | 連絡先メールアドレス |
| phoneNumber | 入力 | string | - | 電話番号 |
| address | 入力 | string | - | 住所 |
| captchaActive | 入力 | boolean | - | CAPTCHAの有効/無効 |
| captchaType | 入力 | string | - | CAPTCHAの種類 |

## 表示項目

| 項目名 | 説明 | 編集可否 |
|--------|------|----------|
| ショップ名 | ECサイトの名称 | 可 |
| 連絡先メール | 顧客からの問い合わせ先 | 可 |
| 電話番号 | 店舗の電話番号 | 可 |
| 住所 | 店舗の所在地 | 可 |
| CAPTCHA設定 | スパム対策の設定 | 可 |

## イベント仕様

### 1-ページ読み込み

画面初期表示時にシステム設定を読み込む。

**処理フロー**:
1. `sw-system-config` コンポーネントが自動的に設定を読み込む
2. `onLoadingChanged` イベントで読み込み状態を監視
3. 読み込み完了後、フォームに現在値を表示

### 2-設定保存（onSave）

保存ボタンをクリックして設定を保存。

**処理フロー**:
1. `isLoading` を `true` に設定
2. `this.$refs.systemConfig.saveAll()` を呼び出し
3. 成功時、`isSaveSuccessful` を `true` に設定
4. 失敗時、`createNotificationError()` でエラー通知を表示
5. 完了後、`isLoading` を `false` に設定

### 3-保存完了（saveFinish）

保存完了後のコールバック処理。

**処理フロー**:
1. `isSaveSuccessful` を `false` にリセット
2. UI状態をリセット

### 4-読み込み状態変更（onLoadingChanged）

読み込み状態が変化した時のハンドラー。

**処理フロー**:
1. 引数 `loading` を受け取る
2. `isLoading` を更新

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| 設定取得 | system_config | SELECT | システム設定の取得 |
| 設定保存 | system_config | INSERT/UPDATE | システム設定の保存 |

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

#### system_config

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| SELECT | * | configuration_key LIKE 'core.basicInformation.%' | 基本情報設定 |
| INSERT/UPDATE | configuration_key, configuration_value, sales_channel_id | 入力値 | 設定保存時 |

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|--------------|----------|
| sw-settings-basic-information.notification.saveSuccess | 成功 | 設定を保存しました | 保存成功時（暗黙的） |
| - | エラー | エラーメッセージ | 保存失敗時（err内容を表示） |

## 例外処理

| 例外ケース | 処理内容 |
|-----------|---------|
| 保存失敗 | エラー通知を表示（createNotificationError） |
| 権限不足 | 画面アクセス不可 |
| 読み込み失敗 | sw-system-configのエラー処理に委譲 |

## 備考

- 設定は `sw-system-config` コンポーネントを使用して自動的に読み込み・保存される
- 設定キーは `core.basicInformation.*` プレフィックスで管理される
- 販売チャネルごとに異なる設定を持つことが可能
- CAPTCHA設定は `captchaService` を使用して管理
- notificationミックスインを使用して通知を表示

---

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

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

### 推奨読解順序

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

システム設定の保存構造を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | SystemConfigDefinition | `src/Core/System/SystemConfig/SystemConfigDefinition.php` | システム設定エンティティ |
| 1-2 | SystemConfigService | `src/Core/System/SystemConfig/SystemConfigService.php` | 設定取得・保存サービス |

**読解のコツ**: SystemConfigはkey-value形式で設定を保存し、sales_channel_idでチャネル別設定を管理する。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | index.js | `src/Administration/Resources/app/administration/src/module/sw-settings-basic-information/index.js` | モジュール登録、ルート定義 |

**主要処理フロー**:
1. **19-47行**: `Module.register('sw-settings-basic-information', ...)` でモジュールを登録
2. **30-38行**: `routes.index` で設定画面のルート定義
3. **41-46行**: `settingsItem` で設定メニューへの登録

#### Step 3: 画面コンポーネントを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | sw-settings-basic-information/index.js | `src/Administration/Resources/app/administration/src/module/sw-settings-basic-information/page/sw-settings-basic-information/index.js` | Vue.jsコンポーネントの定義 |

**主要処理フロー**:
- **12-14行**: `mixins` - notificationミックスインの使用
- **16-20行**: `data()` - コンポーネントの状態定義（isLoading, isSaveSuccessful）
- **34-49行**: `onSave()` - 保存処理（systemConfig.saveAll()）
- **52-54行**: `onLoadingChanged()` - 読み込み状態の監視

#### Step 4: CAPTCHAサービスを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | captcha.service.js | `src/Administration/Resources/app/administration/src/module/sw-settings-basic-information/service/captcha.service.js` | CAPTCHAサービス |

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

```
sw-settings-basic-information (Vue Component)
    │
    ├─ 設定読み込み
    │      └─ sw-system-config (子コンポーネント)
    │             └─ systemConfigApiService.getValues()
    │                    └─ Shopware API (GET /api/_action/system-config)
    │
    └─ 設定保存
           └─ this.$refs.systemConfig.saveAll()
                  └─ sw-system-config.saveAll()
                         └─ systemConfigApiService.batchSave()
                                └─ Shopware API (POST /api/_action/system-config/batch)
```

### データフロー図

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

設定フォーム入力 ─────────▶ sw-settings-basic-information
                                   │
                                   ├──▶ sw-system-config (子コンポーネント)
                                   │         │
                                   │         ▼
                                   │    systemConfigApiService
                                   │         │
                                   │         ▼
                                   │    Shopware API
                                   │         │
                                   │         ▼
                                   └──▶ 保存結果 ──▶ 成功/エラー通知
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| index.js | `src/Administration/Resources/app/administration/src/module/sw-settings-basic-information/index.js` | ソース | モジュール定義 |
| sw-settings-basic-information/index.js | `src/Administration/Resources/app/administration/src/module/sw-settings-basic-information/page/sw-settings-basic-information/index.js` | ソース | 画面コンポーネント |
| sw-settings-basic-information.html.twig | `src/Administration/Resources/app/administration/src/module/sw-settings-basic-information/page/sw-settings-basic-information/sw-settings-basic-information.html.twig` | テンプレート | 画面テンプレート |
| captcha.service.js | `src/Administration/Resources/app/administration/src/module/sw-settings-basic-information/service/captcha.service.js` | ソース | CAPTCHAサービス |
| sw-settings-captcha-select-v2/index.js | `src/Administration/Resources/app/administration/src/module/sw-settings-basic-information/component/sw-settings-captcha-select-v2/index.js` | ソース | CAPTCHA選択コンポーネント |
| SystemConfigDefinition.php | `src/Core/System/SystemConfig/SystemConfigDefinition.php` | ソース | エンティティ定義 |
