# 画面設計書 76-監査ログ一覧画面

## 概要

本ドキュメントはChatwootの監査ログ一覧画面に関する設計書です。アカウント内で発生した操作履歴を記録・表示する画面について記述しています。

### 本画面の処理概要

本画面では、アカウント内で実行された操作の監査ログを一覧表示します。管理者は誰がいつどのような操作を行ったかを追跡でき、セキュリティ監査やコンプライアンス要件への対応に活用できます。

**業務上の目的・背景**：企業のセキュリティポリシーやコンプライアンス要件により、システム内での操作履歴を記録・追跡する必要があります。監査ログにより、不正アクセスの検知、問題発生時の原因調査、規制当局への報告などが可能になります。特に金融、医療、政府機関などの業界では必須の機能です。

**画面へのアクセス方法**：サイドバーの「設定」から「監査ログ」メニューを選択してアクセスします。または、URLで直接 `/app/accounts/:accountId/settings/audit-logs/list` にアクセスすることもできます。

**主要な操作・処理内容**：
1. 監査ログの一覧表示：アクティビティ内容、タイムスタンプ、IPアドレスを表示
2. ページネーション：大量のログを効率的に閲覧

**画面遷移**：
- 遷移元：設定ホーム画面
- 遷移先：なし

**権限による表示制御**：管理者（administrator）権限を持つユーザーのみがアクセス可能です。Cloud/Enterprise版でのみ利用可能です。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 15 | 監査ログ | 主機能 | 監査ログの一覧表示 |
| 196 | 監査ログ | 補助機能 | 操作ログの検索・フィルタリング |

## 画面種別

一覧

## URL/ルーティング

| 項目 | 値 |
|------|-----|
| パス | `/app/accounts/:accountId/settings/audit-logs/list` |
| ルート名 | `auditlogs_list` |
| コンポーネント | `Index.vue` |

## 入出力項目

| 項目名 | 項目ID | 種別 | 型 | 必須 | バリデーション | 説明 |
|--------|--------|------|-----|------|---------------|------|
| ページ | page | URLクエリ | Number | No | - | 表示するページ番号 |

## 表示項目

| 項目名 | データソース | 説明 |
|--------|-------------|------|
| ログ一覧 | records (auditlogs/getAuditLogs) | 監査ログのリスト |
| アクティビティ | generateLogText(auditLogItem) | 操作内容の説明文 |
| 日時 | messageTimestamp(auditLogItem.created_at) | フォーマット済みタイムスタンプ |
| IPアドレス | auditLogItem.remote_address | 操作元IPアドレス |
| 現在ページ | meta.currentPage | 現在のページ番号 |
| 総件数 | meta.totalEntries | 総ログ件数 |
| ページサイズ | meta.perPage | 1ページあたりの件数 |

## イベント仕様

### 1-ページ切り替え

**トリガー**: TableFooterのページネーションボタンのクリック

**処理フロー**:
1. `onPageChange`でページ番号を受け取る
2. `router.push`でURLクエリパラメータを更新
3. `watch(routerPage)`でURLの変更を検知
4. `fetchAuditLogs`で新しいページのログを取得

### 2-画面マウント

**トリガー**: 画面のマウント

**処理フロー**:
1. `onMounted`で`agents/get`と`fetchAuditLogs`を呼び出し
2. エージェント情報を取得（ログ内のユーザー名解決用）
3. 現在のページ（URLクエリまたはデフォルト1）のログを取得

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| 一覧表示 | audit_logs | SELECT | 監査ログの取得（読み取りのみ） |

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

#### audit_logs（読み取りのみ）

| 操作 | 項目（カラム名） | 取得条件 | 備考 |
|-----|-----------------|---------|------|
| SELECT | id | - | ログID |
| SELECT | auditable_id | - | 操作対象のID |
| SELECT | auditable_type | - | 操作対象の種類 |
| SELECT | action | - | 操作種別（create/update/delete等） |
| SELECT | audited_changes | - | 変更内容のJSON |
| SELECT | associated_id | - | 関連オブジェクトのID |
| SELECT | associated_type | - | 関連オブジェクトの種類 |
| SELECT | user_id | - | 操作者のID |
| SELECT | remote_address | - | 操作元IPアドレス |
| SELECT | created_at | - | 操作日時 |

## メッセージ仕様

| 種別 | キー | メッセージ | 表示条件 |
|------|-----|-----------|---------|
| エラー | AUDIT_LOGS.API.ERROR_MESSAGE | 監査ログの取得に失敗しました | API通信エラー時 |
| 空状態 | AUDIT_LOGS.LIST.404 | 監査ログが見つかりません | ログが0件の場合 |
| ローディング | AUDIT_LOGS.LOADING | 読み込み中... | データ取得中 |

## 例外処理

| 例外条件 | 処理内容 |
|---------|---------|
| 権限不足 | 管理者権限がない場合、画面にアクセスできない |
| 機能制限 | Cloud/Enterprise版以外では画面にアクセスできない |
| API通信エラー | エラーメッセージをアラートで表示 |

## 備考

- Cloud/Enterprise版でのみ利用可能
- ログのテキストは`generateTranslationPayload`と`generateLogActionKey`で動的に生成
- エージェント名の解決には`agents/get`で取得したエージェントリストを使用
- 日時フォーマットは`MMM dd, yyyy hh:mm a`形式（例：Jan 15, 2024 02:30 PM）
- ページサイズはデフォルト15件

---

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

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

### 推奨読解順序

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

まず、監査ログのデータ構造を理解することが重要です。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | auditlogs.js (store) | `app/javascript/dashboard/store/modules/auditlogs.js` | stateのrecords配列とmeta構造 |

**読解のコツ**: 監査ログオブジェクトには操作内容(action)、操作対象(auditable_type/auditable_id)、変更内容(audited_changes)等のプロパティがある。metaにはページネーション情報が含まれる。

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

処理の起点となるVueコンポーネントを理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | Index.vue | `app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue` | ログテキスト生成、ページネーション処理 |

**主要処理フロー**:
1. **行15-21**: `useStoreGetters`で監査ログとメタ情報を取得
2. **行26**: `routerPage`でURLクエリからページ番号を取得
3. **行37-51**: `generateLogText`でログ内容を人間が読める形式に変換
4. **行57-66**: `watch(routerPage)`でページ変更時の再取得

#### Step 3: ヘルパー関数を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | auditlogHelper.js | `app/javascript/dashboard/helper/auditlogHelper.js` | generateTranslationPayload, generateLogActionKey |

**主要処理フロー**:
- `generateTranslationPayload`: ログ内容からi18n用のパラメータを生成
- `generateLogActionKey`: 操作種別からi18nキーを生成

#### Step 4: APIレイヤーを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | auditLogs.js (API) | `app/javascript/dashboard/api/auditLogs.js` | ページネーション付きのGETリクエスト |

**主要処理フロー**:
- **行10-13**: `get`でページ番号をクエリパラメータとして送信

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

```
Index.vue (エントリーポイント)
    │
    ├─ onMounted
    │      ├─ store.dispatch('agents/get')
    │      │
    │      └─ fetchAuditLogs(routerPage)
    │             └─ store.dispatch('auditlogs/fetch', { page })
    │                    └─ AuditLogsAPI.get({ page })
    │
    ├─ watch(routerPage)
    │      └─ fetchAuditLogs(newPage)
    │
    ├─ generateLogText(auditLogItem)
    │      ├─ generateTranslationPayload(auditLogItem, agentList)
    │      ├─ generateLogActionKey(auditLogItem)
    │      └─ t(translationKey, mergedPayload)
    │
    └─ TableFooter
           └─ @page-change → onPageChange
                  └─ router.push({ query: { page } })
```

### データフロー図

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

URLクエリ(page) ────────▶ routerPage computed ─────────▶ ページ番号
       │                        │
       │                        ▼
       │                 auditlogs/fetch ─────────────▶ APIリクエスト
       │                        │
       │                        ▼
       │                 レスポンス処理 ───────────────▶ records / meta更新
       │
       └── watch ─────────▶ 再取得 ────────────────────▶ UI更新

[ログ表示]

auditLogItem ──────────▶ generateTranslationPayload ──▶ payload
       │                        │
       │                        ▼
       ├───────────────▶ generateLogActionKey ────────▶ translationKey
       │                        │
       │                        ▼
       └───────────────▶ t(key, payload) ─────────────▶ 表示テキスト
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| Index.vue | `app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue` | ソース | メイン画面コンポーネント |
| auditLogs.js (API) | `app/javascript/dashboard/api/auditLogs.js` | ソース | API通信クラス |
| auditlogs.js (store) | `app/javascript/dashboard/store/modules/auditlogs.js` | ソース | Vuexストアモジュール |
| auditlogHelper.js | `app/javascript/dashboard/helper/auditlogHelper.js` | ソース | ログテキスト生成ヘルパー |
| audit.routes.js | `app/javascript/dashboard/routes/dashboard/settings/auditlogs/audit.routes.js` | ソース | ルーティング定義 |
| TableFooter.vue | `app/javascript/dashboard/components/widgets/TableFooter.vue` | ソース | ページネーションコンポーネント |
| BaseSettingsHeader.vue | `app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue` | ソース | 設定ヘッダーコンポーネント |
| timeHelper.js | `app/javascript/shared/helpers/timeHelper.js` | ソース | 日時フォーマットヘルパー |
