b24014/Q-A_test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit
CI / typecheck (push) Successful in 1m8s
Details
CI / format (push) Failing after 1m6s
Details
CI / lint (push) Failing after 49s
Details
CI / test (push) Failing after 1m8s
Details

Browse Source
This commit is contained in:
SDI
2026-07-15 18:05:12 +09:00
commit 12e4f17b62
4633 changed files with 817125 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current.json
+27
View File
@@ -0,0 +1,27 @@
{
"version.label": {
"message": "Next",
"description": "The label for version current"
},
"sidebar.docs.category.소개": {
"message": "紹介",
"description": "The label for category Introduction in sidebar docs"
},
"sidebar.docs.category.사용자 가이드": {
"message": "ユーザーガイド",
"description": "The label for category User Guide in sidebar docs"
},
"sidebar.docs.category.설정": {
"message": "設定",
"description": "The label for category Settings in sidebar docs"
},
"sidebar.docs.category.개발자 가이드": {
"message": "開発者ガイド",
"description": "The label for category Developer Guide in sidebar docs"
},
"sidebar.docs.category.설치": {
"message": "インストール",
"description": "The label for category Installation in sidebar docs"
}
}
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/00-introduction/00-index.md
+40
View File
@@ -0,0 +1,40 @@
---
sidebar_position: 1
slug: /
---
# ようこそ
ようこそ！このドキュメントは、ABC User Feedbackに関する包括的なガイドを提供します。
![ABC User Feedback](/assets/cover.png)
## ABC User Feedbackとは？
ABC User Feedbackは、顧客の声（VoC）フィードバックを効率的に収集、分類、管理するために設計されたスタンドアロンのWebアプリケーションです。フィードバックタギングシステム、カンバンモード、イシュートラッカー、SSO認証など、さまざまな機能を提供します。現在、1,000万MAUを有するサービスで利用されています。
<p align="center">
<video src="https://github.com/user-attachments/assets/a2ef7a1a-41ec-4cec-b7d1-bda5fbd7d48b" width="100%" />
</p>
## 主な機能
- **フィードバックタギングシステム**: トピック別にフィードバックを分類・管理
- **カンバンモード**: イシューグループを効率的に視覚化・管理
- **イシュートラッカー統合**: ステータスインジケーターでイシューを追跡し、外部システムと統合
- **シングルサインオン（SSO）**: エンタープライズレベルの認証要件をサポートするOAuth認証
- **ロールベースアクセス制御（RBAC）**: きめ細かいユーザー権限管理
- **ダッシュボード**: フィードバックとイシューの統計データを視覚化
## はじめに
- [インストールガイド](/ja/developer-guide/installation/docker-hub-images) - Docker、CLIツール、または手動セットアップによるインストール方法
- [チュートリアル](/ja/user-guide/getting-started) - 基本的な使用方法ガイド
## サポートを受ける
質問がある、またはヘルプが必要ですか？以下のリソースをご利用ください：
- [GitHub Issues](https://github.com/line/abc-user-feedback/issues) - バグレポートと機能リクエスト
- [GitHub Discussions](https://github.com/line/abc-user-feedback/discussions) - コミュニティディスカッション
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/00-introduction/01-project-overview.md
+75
View File
@@ -0,0 +1,75 @@
---
sidebar_position: 1
title: "プロジェクト概要"
description: "プロジェクト概要を紹介します。"
---
# プロジェクト概要
## ABC User Feedbackとは？
ABC User Feedbackは、顧客の声（Voice of Customer、VoC）を効率的に収集、分類、管理するために設計されたスタンドアロンのWebアプリケーションです。このオープンソースソリューションは、ユーザーフィードバックを体系的に管理し、製品とサービスの改善に必要なインサイトを導き出すことに重点を置いています。
現在、このアプリケーションは月間アクティブユーザー（MAU）1,000万人規模のサービスで利用されており、大規模なフィードバック処理に対する実証済みの安定性を備えています。
## コアバリュー提案
ABC User Feedbackは、以下のコアバリューを提供します：
1. **中央集約型フィードバック管理**: さまざまなチャネルから収集されたユーザーフィードバックを一箇所で管理
2. **構造化された分析**: イシューシステムを通じたフィードバックの分類とトレンドの把握
3. **イシュー追跡**: フィードバックで発見された問題点をイシューに変換して追跡管理
4. **データ駆動型意思決定**: ダッシュボードを通じたフィードバックデータの視覚化とインサイトの導出
## 技術スタック
ABC User Feedbackは、最新のWeb技術に基づいて構築されています：
- **フロントエンド**: [Next.js](https://nextjs.org/) - Reactベースのフロントエンドフレームワーク
- **バックエンド**: [NestJS](https://nestjs.com/) - TypeScriptベースのスケーラブルなバックエンドフレームワーク
- **データベース**: [MySQL v8](https://www.mysql.com/) - 信頼性の高いリレーショナルデータベース
- **検索エンジン**: [OpenSearch v2.16](https://opensearch.org/)（オプション） - 大量のフィードバックデータに対する高性能検索機能
## アーキテクチャ概要
ABC User Feedbackは、以下の主要コンポーネントで構成されています：
1. **Web管理インターフェース**: フィードバック管理、イシュー追跡、ダッシュボードなどのユーザーインターフェースを提供するNext.jsベースのWebアプリケーション
2. **APIサーバー**: データ処理、ビジネスロジック、認証などを担当するNestJSベースのバックエンドサーバー
3. **データベース**: フィードバック、イシュー、ユーザー情報などを保存するMySQLデータベース
4. **検索エンジン**: 大量のフィードバックデータに対する高性能検索を提供するOpenSearch（オプション）
5. **SMTPサーバー**: アカウント作成時のメール認証、パスワードリセットなど、ユーザー認証プロセスに必要なメール送信を担当するコンポーネント
これらのコンポーネントは、Dockerを通じてコンテナ化されており、簡単にデプロイおよびスケールできます。
## 主な使用例
ABC User Feedbackは、以下の状況で特に有用です：
1. **製品改善プロセス**: ユーザーフィードバックを収集・分析して製品改善の方向性を設定
2. **カスタマーサポート**: ユーザーの問い合わせとイシューを効率的に追跡・管理
3. **ユーザー体験の最適化**: ユーザーの意見に基づいてUX/UIを改善
4. **品質管理**: バグレポートと機能リクエストを体系的に管理
5. **データ駆動型意思決定**: ユーザーフィードバック統計を活用した戦略的意思決定のサポート
## 差別化要素
ABC User Feedbackは、以下の特徴により、他のフィードバック管理ツールと差別化されています：
1. **完全なオープンソース**: 商用ソリューションとは異なり、完全に無料で使用でき、カスタマイズ可能
2. **エンタープライズレベルの機能**: SSO認証、RBACなど、企業環境に必要な機能を提供
3. **スケーラビリティ**: 大規模なユーザーベース（1,000万MAU）で実証されたパフォーマンス
4. **統合の容易さ**: RESTful APIとWebhookによる既存システムとの簡単な統合
5. **コンテナ化**: Dockerサポートによる簡単なデプロイとスケーリング
## 次のステップ
ABC User Feedbackを始めるには、以下のドキュメントを参照してください：
- [主な機能](./02-key-features.md) - 詳細な機能説明
- [インストールガイド](/ja/developer-guide/installation/docker-hub-images) - インストール方法
---
このドキュメントは、ABC User Feedbackの基本的な概要を提供します。より詳細な情報については、該当セクションのドキュメントを参照してください。
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/00-introduction/02-key-features.md
+173
View File
@@ -0,0 +1,173 @@
---
sidebar_position: 3
title: '主な機能'
description: '主な機能の紹介。'
---
# 主な機能
ABC User Feedbackは、ユーザーフィードバックを効果的に収集、管理、分析するための様々な機能を提供します。このドキュメントでは、コア機能について詳しく説明します。
## フィードバックタグシステム
![フィードバックタグ](/assets/01-feedback-tag.png)
フィードバックタグシステムは、大量のユーザーフィードバックを体系的に分類・管理するためのコア機能です。
### 主な機能
- **複数イシューの割り当て**:各フィードバックに複数のイシューを割り当てて多次元的に分類
- **カスタムイシューの作成**:プロジェクトの特性に合わせたカスタマイズされたイシューの作成と管理
- **イシュー別フィルタリング**:イシュー別にフィードバックをフィルタリングして特定のトピックに集中
- **イシュー統計**:イシューの使用頻度とトレンド分析による洞察の導出
### 使用方法
1. 管理パネルでイシューカテゴリとイシューを作成
2. 受信したフィードバックに関連イシューを割り当て
3. イシュー別にフィードバックをフィルタリングして分析
4. イシューの使用パターンから主要なイシューとトレンドを特定
## カンバンモード
![イシューカンバン](/assets/02-Issue-Kanban.png)
カンバンモードは、イシューグループを視覚的に管理し、ワークフローを最適化するための機能です。
### 主な機能
- **直感的なドラッグ&ドロップ**:イシューのステータス変更のためのシンプルなインターフェース
- **ステータスベースのカラム構成**:イシューの進行状況に基づくカラム分離(例:To Do、In Progress、Done)
- **ワークフローの可視化**:チームの作業プロセスと進捗を一目で把握
- **作業負荷管理**:各ステータスのイシュー数を通じた作業負荷のモニタリング
- **フィルタとソート**:カンバンボード内のイシューを様々な基準でフィルタリング・ソート
### 使用方法
1. カンバンモードビューを選択
2. ステータス別にイシューを確認・管理
3. ドラッグ&ドロップでイシューのステータスを変更
4. チームのワークフローを最適化し、ボトルネックを特定
## イシュートラッカー連携
![イシュートラッカー](/assets/03-issue-tracker.png)
イシュートラッカー連携は、フィードバックで発見された問題や改善事項を体系的に管理するための機能です。
### 主な機能
- **ステータスインジケーター**:イシューの現在のステータスを視覚的に表示(New、In Progress、Resolvedなど)
- **外部システム連携**:イシュートラッカーシステム(JIRA)との接続
### 使用方法
1. フィードバックからイシューを作成、またはイシューメニューで作成
2. 外部イシュートラッカー接続を設定(オプション)
3. イシューの詳細とイシュー追跡チケットを設定
4. イシューの進捗をモニタリング・更新
5. 解決後にイシューをクローズ
## シングルサインオン(SSO)
![シングルサインオン](/assets/04-single-signon.png)
シングルサインオンは、企業環境での認証プロセスを簡素化し、セキュリティを強化します。
### 主な機能
- **OAuthサポート**:様々なOAuthプロバイダーを通じた認証サポート
- **企業IDとの統合**:既存の企業IDシステムとのシームレスな統合
- **一元化されたユーザー管理**:単一の認証システムを通じたユーザーアクセス管理
- **セキュリティの強化**:多要素認証と企業セキュリティポリシーの適用
- **簡素化されたログイン体験**:ユーザーが追加アカウントを作成する必要がない
### サポートされるSSOプロバイダー
- Google
- カスタム(標準的なOAuth 2.0およびOpenID Connectプロバイダー)
### 使用方法
1. 管理設定でSSOプロバイダーを設定
2. 認証パラメータとリダイレクトURLを設定
3. ユーザー属性マッピングを設定
4. SSOログインを有効化してテスト
## ロールベースアクセス制御(RBAC)
![ロール管理](/assets/05-role-management.png)
ロールベースアクセス制御は、ユーザー権限を効果的に管理し、システムセキュリティを維持するための機能です。
### 主な機能
- **事前定義されたロール**:管理者、アナリスト、閲覧者などの基本ロールを提供
- **カスタムロールの作成**:組織構造に合わせたカスタマイズされたロールと権限の作成
- **詳細な権限制御**:機能とデータ別にアクセス権限を設定
- **ロール割り当て管理**:ユーザーごとにロールを割り当て・変更
- **権限の継承**:階層的な権限構造をサポート
### 使用方法
1. 管理パネルでロール管理メニューにアクセス
2. 必要に応じて新しいロールを作成、または既存のロールを修正
3. ユーザーに適切なロールを割り当て
4. ロール別の権限とアクセス範囲を定期的にレビュー
## ダッシュボード
![ダッシュボード](/assets/06-dashboard.png)
ダッシュボードは、フィードバックデータを可視化し、重要な洞察を一目で理解できる機能です。
### 主な機能
- **リアルタイム統計**:フィードバック数、イシュー数、解決率などの主要指標をリアルタイム表示
- **トレンド分析**:時間経過によるフィードバックとイシューのトレンドをグラフで表示
- **イシュー分布**:イシュー別のフィードバック分布を可視化
### 提供されるチャートとウィジェット
1. **フィードバックサマリーカード**:総フィードバック数、新規フィードバック、処理済みフィードバックなどの主要指標
2. **時系列グラフ**:日次/週次/月次のフィードバックトレンド
3. **イシューステータスドーナツチャート**:イシューステータス別の分布
### 使用方法
1. ダッシュボードページにアクセス
2. 期間とフィルター設定を通じてデータ範囲を調整
3. 主要指標とトレンドを分析
4. 洞察に基づいた意思決定とアクションアイテムを導出
## 追加機能
上記の主要機能に加えて、ABC User Feedbackは以下の追加機能を提供します:
### API連携
- RESTful APIを通じた外部システムとの統合
- プログラムによるフィードバック収集と管理
### Webhook
- 主要イベント発生時に外部システムに通知
- 自動化されたワークフローの構築をサポート
### 画像ストレージ連携
- S3互換ストレージを通じたユーザー提出画像の管理
- フィードバックへのスクリーンショットと画像の添付
### データエクスポート
- CSV、Excel形式でのフィードバックデータのエクスポート
### 多言語サポート
- 様々な言語でのインターフェース提供
- 国際チーム向けの多言語フィードバック管理
---
このドキュメントは、ABC User Feedbackの主な機能の概要を提供します。各機能の詳細な使用方法については、[ユーザーガイド](/user-guide/getting-started)セクションを参照してください。
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/00-introduction/_category_.json
+5
View File
@@ -0,0 +1,5 @@
{
"position": 1,
"label": "紹介"
}
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/01-user-guide/01-getting-started.md
+263
View File
@@ -0,0 +1,263 @@
---
title: はじめに
description: ABC User Feedbackインストール後、初期設定から最初のフィードバック収集まで、システムを開始する方法を説明します。
sidebar_position: 1
---
# はじめに
ABC User Feedbackを初めてインストールした後、システムを使用するには初期設定が必要です。このドキュメントでは、テナント作成から最初のフィードバック収集までの全プロセスを段階的に説明します。
---
## 初期設定の概要
ABC User Feedbackを開始するには、次の順序で設定を進めます：
1. **テナントと管理者アカウントの作成**
2. **初回ログインとプロフィール設定**
3. **プロジェクトの作成**
4. **チャネルの作成とフィールド設定**
5. **APIキーの発行**
6. **最初のフィードバック収集のテスト**
---
## システムへのアクセス
ABC User Feedbackのインストールが必要な場合は、まず[Docker Hubイメージを使用したインストール](/ja/developer-guide/installation/docker-hub-images)を進めてください。
インストールを完了したら、Webブラウザを通じてABC User Feedbackにアクセスします：
```
http://localhost:3000
```
> ポートやドメインを変更した場合は、設定に応じたアドレスを入力してください。
---
## テナントと管理者アカウントの作成
![member-register.png](/img/tenant.png)
初めてアクセスすると、**テナント作成と管理者アカウント登録**画面が表示されます。
### Step 1: テナント情報の入力
テナント名を設定します。
テナント名を入力した後、**Next**ボタンをクリックします。
> このテナント名はログインUIに表示されます。
### Step 2: 管理者アカウントの作成
システムの最初の管理者アカウントを作成します。
1. 管理者アカウントのメールアドレスを入力し、**Request Code**ボタンをクリックします。
2. メールボックスで認証コードを確認して入力します
3. **Verify**ボタンをクリックします
4. 認証が完了したら、パスワードを設定します。
:::info パスワード要件
- **8文字以上**
- **英字を含む**（A–Z、a–z）
- **特殊文字を含む**（例：`@`、`#`、`!`）
- **連続文字禁止**（例：`aa`、`11`）
> **例**: ✅ `MyCompany2024!`, ❌ `12345678`、`password`
:::
テナントと管理者アカウントの作成が完了すると、確認画面が表示されます。
**次のステップ**: **確認**ボタンをクリックしてログイン画面に移動します。
---
## ログイン
作成した管理者アカウントで初回ログインを行います。
1. **Email**: 先ほど登録した管理者メールアドレスを入力します
2. **Password**: 設定したパスワードを入力します
3. **Sign In**ボタンをクリックします
---
## 最初のプロジェクトの作成
ログインすると、プロジェクト作成ウィザードが自動的に開始されます。
### システム構造の理解
ABC User Feedbackは、次の階層構造を持っています：
```
テナント（組織）
└── プロジェクト（製品/サービス単位）
└── チャネル（フィードバック収集パス）
```
### Step 1: プロジェクト基本情報
| 項目 | 説明 | 例 |
| --------------- | -------------------------------------- | ------------------------------- |
| **Name** | プロジェクト名 | `モバイルアプリ`、`Webサービス` |
| **Description** | プロジェクトの説明（オプション） | `顧客フィードバック収集と分析` |
| **Time Zone** | 時間基準（ダッシュボードと統計に影響） | `Asia/Tokyo` |
**完了後**: 情報を入力した後、**Next**ボタンをクリックします。
### Step 2: チームメンバーの招待（オプション）
このステップでは、プロジェクトにチームメンバーを招待できます。今スキップしても、後でいつでも追加できます。
### Step 3: APIキーの生成（オプション）
外部システムとの統合用のAPIキーを事前に生成できます。
### プロジェクト作成完了
すべての情報を入力すると、プロジェクト作成が完了します。
**次のステップを選択**：
- **Create Channel**: すぐにチャネルを作成してフィードバック収集を開始
- **Skip for Now**: 後でチャネルを作成
---
## 最初のチャネルの作成
プロジェクト作成後、実際にフィードバックを収集するには**チャネル**を作成する必要があります。
### チャネルの概念の理解
チャネルは**フィードバック収集パス**を意味します：
- ウェブサイトのお問い合わせフォーム
- モバイルアプリ内のフィードバック
- カスタマーサービスVoC
- アンケート回答
### Step 1: チャネル基本情報
| 項目 | 説明 | 例 |
| ---------------------------------- | ----------------------------------------------------- | ------------------------------------- |
| **Name** | チャネル名 | `Webフィードバック`、`アプリレビュー` |
| **Description** | チャネルの説明（オプション） | `ウェブサイトユーザーの意見` |
| **Maximum Feedback Search Period** | フィードバック検索可能期間（30/90/180/365日、すべて） | `90日` |
**完了後**: 情報を入力した後、**Next**ボタンをクリックします。
### Step 2: フィールド設定
チャネルで収集するデータ構造を定義します。
#### デフォルトフィールド
システムで自動的に作成されるフィールド：
| フィールド名 | 形式 | プロパティ | 説明 |
| ------------ | ----------- | ---------- | -------------------------- |
| `id` | number | Read Only | フィードバック固有ID |
| `createdAt` | date | Read Only | 作成時間 |
| `updatedAt` | date | Read Only | 更新時間 |
| `issues` | multiSelect | Editable | リンクされたイシューリスト |
#### カスタムフィールドの追加
実際のフィードバック収集のためにカスタムフィールドを追加します：
1. **Add Field**ボタンをクリック
2. フィールド情報を入力：
| 項目 | 説明 | 例 |
| ---------------- | --------------------------------------------------- | --------------------------------------------------------------------------------- |
| **Key** | 一意の識別子（大文字/小文字、数字、`_`） | `message`、`rating` |
| **Display Name** | UIに表示される名前 | `フィードバック内容` |
| **Format** | データ形式 | `text`、`keyword`、`number`、`date`、`select`、`multiSelect`、`images`、`aiField` |
| **Property** | `Editable`（UIで変更可能）/ `Read Only`（変更不可） | `Editable` |
| **Status** | `Active` / `Inactive` | `Active` |
#### 推奨デフォルトフィールド構成
最初のチャネルには、次のフィールドを追加することをお勧めします：
| Key | Display Name | Format | 説明 |
| ----------- | ---------------------- | ------- | ---------------------- |
| `message` | フィードバック内容 | text | ユーザーフィードバック |
| `userEmail` | ユーザーメールアドレス | keyword | 連絡先（オプション） |
| `rating` | 満足度 | number | 1-5点評価 |
### フィールドプレビュー
フィールド設定を完了した後、**Preview**ボタンでフィードバック入力画面をプレビューできます。
**完了後**: **Complete**ボタンでチャネル作成を完了します。
### チャネル作成完了
**次のステップ**: **Start**ボタンをクリックしてフィードバック収集を開始します。
---
## 最初のフィードバック収集のテスト
チャネル作成が完了すると、実際にフィードバックを収集できます。
### APIによるフィードバック登録
作成したAPIキーを使用して最初のフィードバックを登録してみましょう。
#### APIリクエスト例
```bash
curl -X POST http://localhost:4000/api/projects/1/channels/1/feedbacks \
-H "Content-Type: application/json" \
-H "X-API-KEY: YOUR_API_KEY" \
-d '{
"message": "アプリの実行速度が遅いです",
"userEmail": "user@example.com",
"rating": 3
}'
```
> `YOUR_API_KEY`は、先ほど作成した実際のAPIキーに置き換えてください。
#### 成功レスポンスの確認
APIリクエストが成功すると、次のようなレスポンスが返されます：
```json
{
"id": 1
}
```
### フィードバックの確認
登録したフィードバックをWebインターフェースで確認してみましょう。
1. 上部メニューで**Feedback**タブをクリック
2. フィードバックリストで登録されたフィードバックを確認
3. フィードバックをクリックして詳細情報を確認
### 最初のイシューの作成
フィードバックに基づいてイシューを作成してみましょう。
1. フィードバック詳細画面で、**Issue**セクションの**`+`ボタン**をクリック
2. イシュー名を入力し、**Enter**キーまたは**Create**ボタンをクリック
3. 作成されたイシューを確認
## 次のステップガイド
基本的な設定と最初のフィードバック収集が完了しました！
## 関連ドキュメント
- [API統合](/ja/developer-guide/api-integration) - 詳細なAPI使用ガイド
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/01-user-guide/02-project-management.md
+347
View File
@@ -0,0 +1,347 @@
---
title: プロジェクト
description: ABC User Feedbackでプロジェクトを作成、設定、管理し、チームメンバーの役割と権限を設定する方法を説明します。
sidebar_position: 2
---
# プロジェクト
ABC User Feedbackでは、**プロジェクト**はフィードバックを収集・分析する最も基本的な単位です。プロジェクトの作成からチーム管理、権限設定の機能を説明します。
---
## プロジェクトの概要
プロジェクトは次の階層構造を持ちます：
```
テナント
└── プロジェクト（複数可能）
├── チャネル（複数可能）
├── メンバーと役割
├── イシュートラッカー統合
├── ウェブフック統合
├── AI機能
└── APIキー
```
各プロジェクトは複数のチャネルを含む管理単位で、チームメンバーと役割、イシュートラッカー統合、外部システム統合などを独立して設定・運用できます。
---
## プロジェクトの作成
### アクセス権限
プロジェクトの作成は**Superユーザー**のみ可能です。一般ユーザーは既存のプロジェクトにメンバーとして招待されて参加できます。
> Superユーザー権限が必要な場合は、システム管理者にお問い合わせください。
### アクセス方法
新しいプロジェクトを作成する方法は2つあります：
1. **初回ログイン時**: プロジェクト作成ウィザードが自動的に開始されます
2. **追加プロジェクト**: 左サイドバー上部の**Create Project**ボタンをクリックします
### Step 1: プロジェクト基本情報
![create-project-1](/img/project/1.png)
プロジェクト作成時に次の情報を入力します：
| 項目 | 説明 | 例 |
| --------------- | ---------------------------------------------------- | -------------------------------------------------------- |
| **Name** | プロジェクト名（必須） | `モバイルアプリ`、`カスタマーサービス`、`ベータサービス` |
| **Description** | 簡単な説明（オプション） | `iOS/Androidアプリユーザーフィードバック収集` |
| **Time Zone** | フィードバックとレポートの時間基準として使用（必須） | `Asia/Seoul` |
> タイムゾーンは**ダッシュボード統計**に影響します。
**完了後**: すべての情報を入力した後、**Next**ボタンをクリックします。
### Step 2: チームメンバーの追加（オプション）
![create-project-2](/img/project/2.png)
このステップは**スキップ可能**です。後でプロジェクト設定からいつでも追加できます。
#### メンバーの追加
1. 右上の**Register Member**ボタンをクリックします
2. 次の項目を入力します：
- **Email**: システムに登録されたユーザーを選択
- **Role**: Admin、Editor、Viewerから選択
> カスタム役割を使用したい場合は、**Role Management**ボタンをクリックして追加設定が可能です。
**完了後**: メンバーリストを確認して**Next**をクリックします。
### Step 3: APIキーの生成（オプション）
![create-project-3](/img/project/3.png)
APIキーは外部システムからフィードバックを収集する際に使用されます。設定メニューから後で生成できるため、今はスキップしてもかまいません。
#### キー生成方法
1. 右上の**Create API Key**ボタンをクリックします
2. キーが自動生成されてリストに表示されます
3. 生成されたキーをコピーして安全な場所に保存します
### プロジェクト作成完了
![create-project-4](/img/project/4.png)
すべてのステップを完了すると、**要約画面**が表示されます：
- プロジェクト情報: 名前、説明、タイムゾーン
- メンバーリスト
- 生成されたAPIキー
- 役割設定状態
#### 次のステップ
- すぐにチャネルを作成してフィードバック収集を開始するには、**Create Channel**ボタンをクリックします
- または**Later**ボタンで後で作成できます
---
## プロジェクト設定の管理
![project-setting.png](/img/project/project-setting.png)
### アクセス方法
プロジェクト設定を変更するには：
1. 上部メニューで**Settings**をクリック
2. 左メニューから**Project Setting**を選択
### 基本情報の編集
次の項目をいつでも変更できます：
| 項目 | 説明 | 注意事項 |
| --------------- | ---------------------------------- | ---------------------------------- |
| **Name** | プロジェクト名 | チームメンバーに表示される名前 |
| **Description** | 説明（オプション） | プロジェクトの目的 |
| **Time Zone** | 統計と時間関連データの基準時刻設定 | 変更時、既存データには影響しません |
**保存方法**: 変更後、右上の**Save**ボタンをクリックします。
### タイムゾーン変更時の注意事項
- 既存のフィードバック/イシューの時間情報には影響しません
- 変更後、ダッシュボード統計でデータの不一致が発生する可能性があります。
### プロジェクトの削除
#### 削除手順
プロジェクトを完全に削除するには：
1. Project Setting画面下部の**Delete Project**ボタンをクリックします
2. 確認ポップアップでプロジェクト名を正確に入力します
3. **Delete**ボタンで最終確定します
#### 削除時の注意事項
- そのプロジェクト内の**すべてのフィードバック、イシュー、設定が永続的に削除**されます
- **元に戻せないため**、事前のバックアップまたはエクスポートを推奨します
- 削除時、接続されたチャネルとAPIキーも一緒に削除されます
---
## メンバー管理
![member-setting.png](/img/project/member-setting.png)
### メンバーリストの確認
現在プロジェクトに参加しているメンバーを確認するには：
1. 上部メニューで**Settings**をクリック
2. 左メニューから**Member Management**を選択
メンバーリストには次の情報が表示されます：
| 項目 | 説明 |
| ---------- | ------------------------------ |
| Email | アカウントメールアドレス |
| Name | ユーザー名（プロフィール基準） |
| Department | 所属部門 |
| Role | プロジェクト内の役割 |
| Joined | プロジェクト参加日 |
### 新しいメンバーの招待
![member-register.png](/img/project/member-register.png)
#### 招待手順
1. **Register Member**ボタンをクリックします
2. 招待情報を入力します：
| 項目 | 説明 |
| --------- | ------------------------------------------- |
| **Email** | 招待するユーザーのメールアドレス |
| **Role** | 割り当てる役割（Admin、Editor、Viewerなど） |
3. **Invite**ボタンをクリックして招待を完了します
### メンバー情報の編集
既存のメンバー情報を変更するには：
1. メンバーリストで編集したいメンバーの行をクリックします
2. ポップアップでRoleを変更できます：
3. **Save**ボタンで変更を保存します
### メンバーの削除
メンバーをプロジェクトから削除するには：
1. メンバー編集ポップアップ下部の**削除**ボタンをクリックします
2. 確認メッセージで**確認**をクリックします
> メンバーを削除しても、そのユーザーが作成したフィードバック/イシュー記録はそのまま維持され、プロジェクトアクセス権限のみが削除されます。
---
## 役割と権限管理
![role-setting.png](/img/project/role-setting.png)
### デフォルト役割
システムでは次のデフォルト役割を提供します：
| 役割 | 権限要約 |
| ---------- | --------------------------------------------------------- |
| **Admin** | すべての機能にアクセス可能。プロジェクト削除を含む |
| **Editor** | フィードバック/イシューの作成、編集、削除可能。設定は不可 |
| **Viewer** | 閲覧のみ可能。編集、削除、設定アクセス不可 |
### カスタム役割の作成
![role-create.png](/img/project/role-create.png)
より細分化された権限が必要な場合は、カスタム役割を作成できます：
1. Member Management画面で**Role Management**リンクをクリックします
2. **Create Role**ボタンをクリックします
3. 役割名と権限を入力します：
### 権限設定
各役割について、次の機能別権限を設定できます：
#### フィードバック権限
| 権限項目 | 説明 |
| ----------------------------------- | ------------------------------------- |
| **Download Feedback** | フィードバックデータのダウンロード |
| **Edit Feedback** | フィードバックの編集 |
| **Delete Feedback** | フィードバックの削除 |
| **Attach/Detach Issue in Feedback** | フィードバックとイシューのリンク/解除 |
#### イシュー権限
| 権限項目 | 説明 |
| ---------------- | -------------- |
| **Create Issue** | イシューの作成 |
| **Edit Issue** | イシューの編集 |
| **Delete Issue** | イシューの削除 |
#### プロジェクト管理
| 権限項目 | 説明 |
| --------------------- | ---------------------- |
| **Edit Project Info** | プロジェクト情報の編集 |
| **Delete Project** | プロジェクトの削除 |
#### メンバー管理
| 権限項目 | 説明 |
| ------------------------- | -------------------------- |
| **Read Project Member** | プロジェクトメンバーの閲覧 |
| **Create Project Member** | プロジェクトメンバーの招待 |
| **Edit Project Member** | プロジェクトメンバーの編集 |
| **Delete Project Member** | プロジェクトメンバーの削除 |
#### 役割管理
| 権限項目 | 説明 |
| ----------------------- | ---------------------- |
| **Read Project Role** | プロジェクト役割の閲覧 |
| **Create Project Role** | プロジェクト役割の作成 |
| **Edit Project Role** | プロジェクト役割の編集 |
| **Delete Project Role** | プロジェクト役割の削除 |
#### APIキー管理
| 権限項目 | 説明 |
| ------------------ | ------------- |
| **Read API Key** | APIキーの閲覧 |
| **Create API Key** | APIキーの作成 |
| **Edit API Key** | APIキーの編集 |
| **Delete API Key** | APIキーの削除 |
#### イシュートラッカー
| 権限項目 | 説明 |
| ---------------------- | ------------------------ |
| **Read Issue Tracker** | イシュートラッカーの閲覧 |
| **Edit Issue Tracker** | イシュートラッカーの設定 |
#### ウェブフック管理
| 権限項目 | 説明 |
| ------------------ | ------------------ |
| **Read Webhook** | ウェブフックの閲覧 |
| **Create Webhook** | ウェブフックの作成 |
| **Edit Webhook** | ウェブフックの編集 |
| **Delete Webhook** | ウェブフックの削除 |
#### AIとチャネル設定
| 権限項目 | 説明 |
| ---------------------- | ------------ |
| **Read Generative AI** | AI設定の閲覧 |
| **Edit Generative AI** | AI設定の編集 |
#### チャネル関連設定
| 権限項目 | 説明 |
| ---------------------- | -------------------- |
| **Edit Channel Info** | チャネル情報の編集 |
| **Delete Channel** | チャネルの削除 |
| **Read Field** | フィールドの閲覧 |
| **Edit Field** | フィールドの編集 |
| **Read Image Setting** | 画像設定の閲覧 |
| **Edit Image Setting** | 画像設定の編集 |
| **Create Channel** | 新しいチャネルの作成 |
### 権限設定のヒント
#### セキュリティのベストプラクティス
- **最小権限の原則**: 業務に必要な最小限の権限のみを付与
- **定期的なレビュー**: チーム変更や退職者発生時に権限を確認
- **Admin役割の制限**: 管理者は可能な限り少ない数で維持
### 役割の編集と削除
- **編集**: 役割リストで希望する項目をクリックして名前と権限を変更できます
- **削除**: 使用されていない役割は**Delete**ボタンで削除可能です
> **注意**: Admin役割は常に1つ以上存在する必要があり、削除できません。
---
## 関連ドキュメント
- [チャネル管理](./03-channel-management.md) - チャネルの作成とフィールド設定
- [フィードバック管理](./04-feedback-management.md) - フィードバックの収集と分析
- [API統合](/ja/developer-guide/api-integration) - APIキーの使用方法
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/01-user-guide/03-channel-management.md
+235
View File
@@ -0,0 +1,235 @@
---
title: チャネル
description: ABC User Feedbackでフィードバック収集チャネルを作成、設定、管理し、カスタムフィールドと画像設定を扱う方法を説明します。
sidebar_position: 3
---
# チャネル
**チャネル（Channel）**は、フィードバック収集パスまたは目的に応じて区別される単位です。各チャネルは独立したフィールド構造、画像設定、AI機能を持ち、さまざまなフィードバック収集シナリオに合わせて設定できます。
---
## チャネルの概要
### チャネルの役割
チャネルは次の役割を果たします：
- **フィードバック収集パスの区別**: Web、アプリ、カスタマーサービス、アンケートなど
- **データ構造の定義**: チャネル別の固有フィールド設定
- **収集ポリシーの管理**: 画像許可、検索期間、セキュリティ設定など
- **分析単位の提供**: チャネル別の独立した統計と分析
---
## チャネルの作成
### アクセス方法
新しいチャネルを作成する方法：
1. **プロジェクト作成直後**: プロジェクト完了画面で**Create Channel**ボタンをクリック
2. **追加チャネル作成**: **Settings > Channel List**で**Create Channel**ボタンをクリック
### Step 1: チャネル基本情報
![channel-create-1](/img/channel/1.png)
| 項目 | 説明 | 例 |
| ---------------------------------- | ----------------------------------------------------------- | ----------------------------------------------------------- |
| **Name** | チャネル名（必須） | `Webフィードバック`、`アプリレビュー`、`カスタマーサービス` |
| **Description** | チャネルの簡単な説明（オプション） | `ウェブサイトユーザーの意見収集` |
| **Maximum Feedback Search Period** | フィードバック検索可能な最大期間（30/90/180/365日、すべて） | `90日` |
#### 最大フィードバック検索期間設定時の注意事項
- **影響範囲**: フィードバックダウンロード機能に直接影響します
- **ダウンロード動作**: 設定された検索期間内のすべてのフィードバックがダウンロード対象になります
- **パフォーマンステスト**: 1日のフィードバック数が多い場合、さまざまな期間でテストして最適値を探すことをお勧めします
- **段階的調整**: 最初は短い期間から始め、必要に応じて段階的に延長するのが安全です
**完了後**: 情報を入力した後、**Next**ボタンをクリックします。
### Step 2: フィールド設定
![channel-create-2](/img/channel/2.png)
チャネルで収集するデータ構造を定義します。これはAPIリクエスト構造とフィードバックテーブル構成に直接影響します。
#### デフォルトシステムフィールド
すべてのチャネルに自動的に含まれるフィールド：
| Key | Format | プロパティ | 説明 |
| ----------- | ----------- | ---------- | -------------------------- |
| `id` | number | Read Only | フィードバック固有ID |
| `createdAt` | date | Read Only | フィードバック作成時刻 |
| `updatedAt` | date | Read Only | フィードバック更新時刻 |
| `issues` | multiSelect | Editable | リンクされたイシューリスト |
> これらのフィールドは削除したり、主要なプロパティを変更したりできません。
#### カスタムフィールドの追加
実際のビジネス要件に合わせたフィールドを追加します。
1. **Add Field**ボタンをクリックします
2. フィールド情報を入力します
| 項目 | 説明 | 例 |
| ---------------- | ----------------------------------------------- | ---------------------------------------------- |
| **Key** | 一意の識別子（大文字/小文字、数字、`_`） | `message`、`rating` |
| **Display Name** | UIに表示される名前 | `フィードバック内容`、`ユーザーメールアドレス` |
| **Format** | データ形式（下の表を参照） | `text`、`keyword`、`number` |
| **Property** | `Editable`（入力可能）/ `Read Only`（閲覧のみ） | `Editable` |
| **Status** | `Active` / `Inactive` | `Active` |
| **Description** | チームメンバーが理解しやすい説明（オプション） | `ユーザーが入力したフィードバック内容` |
### フィールド形式の種類
| Format | 説明 | 使用例 | API例 |
| ------------- | -------------------- | -------------------------------- | -------------------------------- |
| `text` | 自由テキスト入力 | フィードバック内容、詳細説明 | `"アプリが頻繁にフリーズします"` |
| `keyword` | 短いキーワード/タグ | バージョン情報、ページ名 | `"v1.2.3"` |
| `number` | 数字 | 評価、年齢、使用時間 | `5` |
| `date` | 日付 | 発生日、有効期限 | `"2024-03-01T00:00:00Z"` |
| `select` | 単一選択 | カテゴリ、優先度 | `"機能リクエスト"` |
| `multiSelect` | 複数選択 | タグ、関連機能 | `["バグ", "UI"]` |
| `images` | 画像URL配列 | スクリーンショット、添付ファイル | `["https://..."]` |
| `aiField` | AI分析結果フィールド | 感情分析、要約、キーワード抽出 | `"ポジティブ"` |
> **images形式について**: 詳細な画像設定方法については、[画像設定](/ja/user-guide/settings/image-setting)ドキュメントを参照してください。
>
> **aiField形式について**: AIフィールド設定とテンプレート構成方法については、[AI設定](/ja/user-guide/settings/ai-setting)ドキュメントを参照してください。
### フィールド構成例
#### Webフィードバックチャネル
| Key | Display Name | Format | 用途 |
| ------------- | ------------------ | ------- | ---------------------------- |
| `message` | フィードバック内容 | text | ユーザーの意見 |
| `userEmail` | メールアドレス | keyword | 連絡先（オプション） |
| `pageUrl` | ページURL | keyword | フィードバック発生位置 |
| `category` | カテゴリ | select | バグ/機能リクエスト/改善事項 |
| `priority` | 優先度 | select | 高/中/低 |
| `screenshots` | スクリーンショット | images | 問題状況のキャプチャ |
#### モバイルアプリレビューチャネル
| Key | Display Name | Format | 用途 |
| ------------ | ---------------- | ------- | ---------------- |
| `message` | レビュー内容 | text | ユーザーレビュー |
| `rating` | 評価 | number | 1-5点評価 |
| `appVersion` | アプリバージョン | keyword | バグ追跡用 |
| `deviceType` | デバイスタイプ | select | iOS/Android |
| `crashLogs` | クラッシュログ | text | 技術的エラー情報 |
### フィールドプレビュー
フィールド設定を完了した後、**Preview**ボタンで実際のフィードバック入力画面をプレビューできます。
このプレビューは、APIリクエストに必要なフィールド構造と同じです。
**完了後**: **Next**ボタンで次のステップに進みます。
### Step 3: チャネル作成完了
![create-channel-3](/img/channel/3.png)
すべてのステップを完了すると、**要約画面**が表示されます：
- チャネル情報：名前、説明、タイムゾーン
- フィールド情報
---
## フィールド管理
### フィールドの編集
既存のフィールドを編集するには、フィールドリストで編集したいフィールドの行をクリックして情報を変更します。
> **注意**: `Key`と`Format`は作成後に変更できません。データの一貫性のために制限されています。
### フィールドの削除
フィードバックデータの整合性と一貫性を保証するため、**フィールド削除機能は提供されていません**。
#### 削除の代わりに推奨される方法
1. **Inactive状態に変更**: フィールドを無効化して新しいフィードバック収集から除外
2. **データの保持**: 既に収集されたフィードバックデータはそのまま維持
3. **フィルタリングの活用**: フィールドリストでActiveフィールドのみを表示して管理効率を確保
#### 完全削除が必要な場合
フィールドを完全に削除する必要がある状況では：
- チャネル全体を削除して新しく作成する方法を検討
- データをエクスポート後、新しい構造に移行
- 開発チームと相談してデータベースレベルで処理
### フィールドステータス管理
#### Active / Inactiveの切り替え
- **Active**: フィードバック収集時に使用されるフィールド
- **Inactive**: 一時的に無効化されたフィールド（データは保持）
#### フィルタリングオプション
上部のコントロールで次の条件でフィールドをフィルタリングできます：
- **Status**: `Active` / `Inactive`
- **Property**: `Editable` / `Read Only`
---
## チャネル情報管理
![channel-setting](/img/channel/channel-setting.png)
### チャネル基本情報の編集
作成されたチャネルの基本情報を変更できます。
#### アクセス方法
1. **Settings > Channel List > [チャネル選択]**
2. **Channel Information**タブをクリック
#### 編集可能な項目
| 項目 | 編集可能 | 注意事項 |
| ---------------------------------- | -------- | ---------------------------------------- |
| **Channel ID** | ❌ 不可 | システム内部識別子 |
| **Channel Name** | ✅ 可能 | チームメンバーに表示される名前 |
| **Description** | ✅ 可能 | チャネルの目的 |
| **Maximum Feedback Search Period** | ✅ 可能 | パフォーマンスに影響する可能性があります |
### チャネルの削除
使用しなくなったチャネルを削除できます。
#### 削除手順
1. Channel Information画面下部の**Delete Channel**ボタンをクリック
2. 確認ポップアップでチャネル名を正確に入力
3. **Delete**ボタンで最終確定
#### 削除時の注意事項
- そのチャネルの**すべてのフィードバックデータが永続的に削除**されます
- **元に戻せないため**、事前のバックアップまたはエクスポートを推奨します
- 関連するAPIキー設定も確認が必要です
---
## 関連ドキュメント
- [プロジェクト管理](./02-project-management.md) - プロジェクト設定と権限管理
- [フィードバック管理](./04-feedback-management.md) - 収集されたフィードバックの分析と活用
- [API統合](/ja/developer-guide/api-integration) - 外部システムとの統合方法
- [AI統合](/ja/user-guide/settings/ai-setting) - AI機能設定
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/01-user-guide/04-feedback-management.md
+336
View File
@@ -0,0 +1,336 @@
---
title: フィードバック
description: ABC User Feedbackでフィードバックを作成、閲覧、分析、管理する方法を説明します。
sidebar_position: 4
---
# フィードバック
フィードバックはABC User Feedbackのコアデータです。このドキュメントでは、フィードバックの作成から分析、管理まで、フィードバックに関連するすべての機能を説明します。
![feedback](/img/feedback/0.png)
---
## フィードバックの作成
フィードバックは主に外部システム（ウェブサイト、モバイルアプリ、API統合）によって作成されますが、管理者が直接作成することもできます。
### APIによるフィードバック作成
最も一般的なフィードバック作成方法です。
#### 基本APIリクエスト構造
```bash
curl -X POST http://your-domain.com/api/v1/projects/{projectId}/channels/{channelId}/feedbacks \
-H "Content-Type: application/json" \
-H "X-API-KEY: YOUR_API_KEY" \
-d '{
"message": "ユーザーフィードバック内容",
"userEmail": "user@example.com",
"category": "バグレポート"
}'
```
#### チャネルフィールドに応じたリクエスト例
各チャネルのフィールド設定に応じてリクエスト構造が異なります：
**Webフィードバックチャネル例**：
```json
{
"message": "ログインボタンが動作しません",
"userEmail": "user@company.com",
"pageUrl": "https://example.com/login",
"category": "バグ",
"priority": "高",
"browserInfo": "Chrome 119.0.0"
}
```
**モバイルアプリチャネル例**：
```json
{
"message": "アプリが頻繁にフリーズします",
"rating": 2,
"appVersion": "v2.1.3",
"deviceType": "iOS",
"crashLogs": "Exception in thread main..."
}
```
#### 画像を含むフィードバック
画像URL方式を使用する場合：
```json
{
"message": "画面が壊れて表示されます",
"userEmail": "user@example.com",
"images": [
"https://cdn.example.com/screenshot1.png",
"https://cdn.example.com/screenshot2.png"
]
}
```
### フィードバック作成の確認
作成されたフィードバックはすぐにフィードバックリストに表示されます。
---
## フィードバックリストへのアクセス
作成されたフィードバックを確認・管理するためにフィードバックリストにアクセスします。
### アクセス方法
1. 左サイドバーから目的の**プロジェクト**を選択します
2. 下部のチャネルリストから目的の**チャネル**をクリックします
3. 上部メニューで**Feedback**タブを選択します
### フィードバックテーブル構成
フィードバックリストはテーブル形式で表示され、次の基本構造を持ちます：
| 列タイプ | 説明 | 例 |
| ---------------- | ---------------------------------- | ---------------------------- |
| **デフォルト列** | すべてのチャネルに共通表示 | ID、Created、Updated、Issue |
| **カスタム列** | チャネルフィールド設定に応じて表示 | Message、UserEmail、Category |
---
## フィードバックフィルタリング/ソート/ビューオプション
大量のフィードバックデータから目的の情報を素早く見つけるためのさまざまなツールを提供します。
![feedback-option](/img/feedback/1.png)
### 日付フィルタリング
上部の**Date**ボタンで閲覧期間を設定できます。
#### 提供される期間オプション
| オプション | 説明 | 使用例 |
| ------------ | ---------------------------- | ------------------------ |
| **今日** | 当日登録されたフィードバック | リアルタイムモニタリング |
| **昨日** | 前日のフィードバック | 日次レビュー |
| **過去7日** | 最近1週間のデータ | 週次分析 |
| **過去30日** | 最近1ヶ月のデータ | 月次トレンド把握 |
| **カスタム** | 開始日-終了日を直接設定 | 特定期間分析 |
### 高度なフィルタ
**Filter**ボタンをクリックすると、さまざまな条件でフィードバックをフィルタリングできます。
![feedback-filter](/img/feedback/2.png)
#### フィルタ構造
```
Where: 最初の条件
And: すべての条件を満たすフィードバック
Or: いずれかを満たすフィードバック
```
> **注意**: `And`と`Or`は同時に混在して使用できません。
#### フィールドタイプ別フィルタオプション
| フィールドタイプ | 使用可能な演算子 | 例 |
| ---------------- | ------------------------------------ | ---------------------------- |
| **text** | Contains（部分一致） | message contains "バグ" |
| **keyword** | Is（完全一致） | category is "機能リクエスト" |
| **number** | Is（完全一致） | rating == 3 |
| **select** | Is（完全一致） | |
| **multiSelect** | Is（完全一致）、Contains（部分一致） | |
| **aiField** | Contains（部分一致） | |
| **date** | Is（完全一致）、Between（期間一致） | created between 日付範囲 |
#### フィルタ使用例
**マルチセレクトカテゴリの高度な検索**：
```
Where: category contains "バグ"
And: priority is "高"
```
**複数のイシューがリンクされたフィードバックを検索**：
```
Where: issues contains "ログインイシュー"
Or: issues contains "UI改善"
```
**特定カテゴリの4評価フィードバックを検索**：
```
Where: category is "機能リクエスト"
And: rating is 4
```
### ソート機能
テーブルヘッダーをクリックして、その列基準でソートできます。Created列とUpdated列でこの機能が提供されます。
### ビューオプション
フィードバックリストの表示方法をユーザーのニーズに合わせて調整できます。
#### Expand機能
**Expand**ボタンをクリックすると、テーブルで各フィードバックの詳細内容をプレビューできます。
**活用方法**：
- 詳細パネルを開かずに主要な内容を確認
- 複数のフィードバックを素早く閲覧
- 長いテキストフィールドの全体内容を確認
#### 列の表示/非表示
テーブル上部の**View**ボタンで表示する列を選択できます。
**機能**：
- **必須列**: ID、Createdは常に表示（非表示不可）
- **オプション列**: カスタムフィールドを個別に表示/非表示設定
- **画面最適化**: 必要な情報のみを表示して画面スペースを効率的に活用
**使用のヒント**：
```
モニタリング用: ID、Created、Messageのみ表示
分析用: すべてのカスタムフィールドを表示
レビュー用: Message、Category、Priorityを表示
```
## フィードバックの確認/編集/削除
個別のフィードバックの詳細情報を確認し、必要に応じて編集または削除できます。
### フィードバック詳細表示
#### アクセス方法
フィードバックテーブルで**行をクリック**すると、右側に詳細表示パネルが開きます。
![feedback-detail](/img/feedback/3.png)
### 詳細パネル構成
詳細パネルは次のように構成されます：
#### 1. 基本情報エリア
- **フィードバックID**: 一意の識別番号
- **作成時刻**: 初回登録日時
- **更新時刻**: 最後の変更日時
- **イシュー**: タグ付けされたイシュー
#### 2. カスタムフィールドエリア
チャネルで設定したすべてのカスタムフィールドが表示されます。
### フィードバックの編集
#### 編集可能なフィールド
詳細パネルで**Edit**ボタンをクリックして編集モードに切り替えることができます。
#### 編集可能な項目
| 項目 | 編集可能 | 注意事項 |
| ------------------------ | -------- | ---------------------------------------------------------------------- |
| **デフォルトフィールド** | ❌ 不可 | ID、作成日など |
| **カスタムフィールド** | ✅ 可能 | フィールド設定のPropertyによって異なる、StatusがInactiveの場合は不可能 |
#### 編集完了
1. 必要な情報を編集します
2. **Save**ボタンをクリックします
3. 変更内容がすぐに反映され、"Updated"時刻が更新されます
### イシューリンク管理
#### 新しいイシューの作成
1. イシュー列の**+ボタン**をクリックします
2. イシュー名を入力し、**Create**オプションをクリックします
#### 既存イシューのリンク
1. イシューセクションの**+ボタン**をクリックします
2. リンクするイシューの名前を入力します
3. ドロップダウンからリンクするイシューを選択します
#### イシューリンクの解除
1. イシューセクションの**+ボタン**をクリックします
2. 解除するイシューを選択します
### フィードバックの削除
#### 単一フィードバックの削除
1. 詳細パネル下部の**Delete Feedback**ボタンをクリックします
2. 確認ダイアログで削除を承認します
#### 複数フィードバックの削除
1. フィードバックリストで**チェックボックス**を使用して複数のフィードバックを選択します
2. 上部に表示される**Delete Selected**ボタンをクリックします
3. 一括削除を確認します
#### 削除時の注意事項
- **復元不可能**: 削除されたフィードバックは元に戻せません
- **イシューリンク解除**: リンクされたイシューはそのまま維持されますが、リンクが解除されます
- **統計への影響**: ダッシュボード統計から該当データが除外されます
---
## フィードバックのダウンロード
収集されたフィードバックデータを分析またはバックアップするために、さまざまな形式でエクスポートできます。
### ダウンロード機能へのアクセス
#### すべてのフィードバックのダウンロード
1. フィードバックリスト上部の**Export**ボタンをクリックします
#### フィルタされたフィードバックのダウンロード
1. 希望する条件でフィルタリングを適用します
2. **Export**ボタンをクリックして、現在のフィルタ条件に一致するデータのみをダウンロードします
#### 選択されたフィードバックのダウンロード
1. チェックボックスで特定のフィードバックを選択します
2. **Export Selected**ボタンをクリックします
### ダウンロード形式の選択
Exportボタンをクリックすると、ダウンロード形式を選択できます。
#### サポートされる形式
| 形式 | 拡張子 | 利点 | 推奨使用例 |
| --------- | ------- | ------------------------ | ------------------------ |
| **CSV** | `.csv` | 軽量で互換性が高い | Excel、Google Sheets分析 |
| **Excel** | `.xlsx` | 書式保持、複数シート対応 | 詳細分析、レポート作成 |
---
## 関連ドキュメント
- [チャネル管理](./03-channel-management.md) - フィードバック収集のためのチャネルとフィールド設定
- [イシュー管理](./05-issue-management.md) - フィードバックからイシューを作成・管理
- [API統合](/ja/developer-guide/api-integration) - 外部システムからフィードバックを送信する方法
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/01-user-guide/05-issue-management.md
+314
View File
@@ -0,0 +1,314 @@
---
title: イシュー
description: ABC User Feedbackでイシューを作成、管理し、カンバン/リストビューで効率的に追跡する方法を説明します。
sidebar_position: 5
---
# イシュー
**イシュー（Issue）**は、フィードバックで発見された問題点や改善点を体系的に管理するためのコア機能です。イシューの作成からカテゴリ管理、さまざまなビューモードの活用まで、イシュー管理のすべての機能を説明します。
![issue](/img/issue/1.png)
---
## イシューの概要
### イシューの役割
イシューは次の目的で使用されます：
- **問題の追跡**: バグ、エラー、パフォーマンス問題などを体系的に管理
- **機能リクエスト管理**: ユーザーリクエストを構造化して開発計画に反映
- **改善点の導出**: フィードバック分析による改善ポイントの特定
### イシューステータス
各イシューは次のステータスを持ちます：
| ステータス | 説明 | 使用タイミング |
| --------------- | ---------- | ---------------------- |
| **New** | 新規登録 | イシュー初回作成 |
| **On Review** | レビュー中 | 担当者がレビュー開始 |
| **In Progress** | 処理中 | 実際の作業進行中 |
| **Resolved** | 解決完了 | 問題解決および完了 |
| **On Hold** | 一時保留 | 追加情報待ちまたは延期 |
---
## イシューの作成/編集/削除
### イシュー作成方法
イシューは2つの方法で作成できます。
#### 1. フィードバックからイシュー作成（推奨）
最も一般的な方法で、特定のフィードバックに基づいてイシューを作成します。
1. **Feedback**タブでフィードバックをクリックして詳細表示を開きます
2. 右側の詳細パネルの**Issue**セクションで**`+`ボタン**をクリックします
3. イシュー名を入力し、**Enter**キーを押すか**Create**オプションをクリックします
#### 2. イシューリストから直接作成
1. 上部メニューで**Issue**タブをクリックします
2. 左上の**+ Create Issue**ボタンをクリックします
3. イシュー作成ダイアログで情報を入力します：
| 項目 | 説明 | 必須 | 例 |
| --------------- | --------------------------------- | ---------- | ------------------------ |
| **Title** | イシュータイトル | 必須 | `ログインボタンの誤動作` |
| **Description** | 詳細説明 | オプション | `特定のブラウザで発生` |
| **Category** | イシュー分類 | オプション | `バグ` |
| **Status** | 初期ステータス（デフォルト: New） | オプション | `New` |
### イシューの編集
作成されたイシューの情報を変更できます。
#### 編集方法
1. イシューリストで編集したいイシューをクリックします
2. 右側に開く**Issue Details**パネルで**Edit**ボタンをクリックします
3. 編集モードで次の項目を変更できます：
#### 編集可能な項目
| 項目 | 編集可能 | 説明 |
| --------------- | -------- | -------------------------------------- |
| **Title** | ✅ 可能 | イシュータイトル |
| **Description** | ✅ 可能 | 詳細説明 |
| **Category** | ✅ 可能 | イシュー分類（ドロップダウンから選択） |
| **Status** | ✅ 可能 | 現在の進行状況 |
| **Ticket** | ✅ 可能 | 外部イシュートラッカーチケット番号 |
| **ID** | ❌ 不可 | システム自動生成 |
| **Created** | ❌ 不可 | 作成日時 |
#### 保存とキャンセル
- **Save**ボタン: 変更を保存して編集モードを終了します
- **Cancel**ボタン: 変更をキャンセルして元の状態に戻します
### 外部イシュートラッカー統合
外部イシュートラッカー（Jiraなど）との統合が設定されている場合、イシューに外部チケットをリンクできます。
#### チケットリンク方法
1. イシュー詳細パネルの**Ticket**フィールドに外部チケット番号を入力します
2. 入力された番号は自動的に外部システムリンクに変換されます
> **参考**: 外部イシュートラッカー統合は**Settings > Issue Tracker Management**で事前設定が必要です。
### イシューの削除
不要になったイシューを削除できます。
#### 削除方法
1. イシュー詳細パネルで**Delete**ボタンをクリックします
2. 確認ダイアログで削除を承認します
#### 削除時の注意事項
- **復元不可能**: 削除されたイシューは元に戻せません
- **フィードバックリンク解除**: リンクされたフィードバックのイシューリンクが削除されます
- **統計への影響**: ダッシュボードイシュー統計から該当データが除外されます
---
## カンバンビュー
カンバンビューは、イシューをステータス別の列に分けて視覚的に管理できるビュー方式です。
![issue-kanban](/img/issue/2.png)
### カンバンビューへのアクセス
1. 上部メニューで**Issue**タブをクリックします
2. 右上で**Kanban**ビューを選択します
### カンバンボード構成
各ステータス別に列が構成され、イシューがカード形式で表示されます。
#### カンバン列構成
| 列 | 表示情報 | カード数表示 |
| --------------- | ---------------------- | ------------ |
| **New** | 新規登録されたイシュー | 上部に数字 |
| **On Review** | レビュー中のイシュー | 上部に数字 |
| **In Progress** | 進行中のイシュー | 上部に数字 |
| **Resolved** | 解決完了したイシュー | 上部に数字 |
| **On Hold** | 保留されたイシュー | 上部に数字 |
#### イシューカード情報
各イシューカードには次の情報が表示されます：
- **イシュータイトル**: クリックで詳細表示に移動
- **フィードバック数**: リンクされたフィードバック数（📝アイコンとともに）
- **カテゴリ**: 設定されている場合は下部に表示
- **外部チケット**: リンクされている場合はチケット番号を表示
### ドラッグアンドドロップによるステータス変更
カンバンビューのコア機能で、イシューカードをドラッグして別の列に移動させてステータスを変更できます。
#### 使用方法
1. イシューカードをマウスでクリックしてドラッグします
2. 希望するステータス列の上に移動させます
3. マウスを離すとステータスが自動的に変更されます
### カンバンビューフィルタリング
上部のフィルタ機能を使用して、特定条件のイシューのみを表示できます。
#### 使用可能なフィルタ
1. **Date**フィルタ: 特定期間に作成されたイシューのみを表示
2. **Filter**ボタン: 高度なフィルタ条件設定
#### フィルタ条件例
| フィルタタイプ | 条件例 | 使用例 |
| -------------- | ------------------------- | -------------------------------- |
| **Category** | Category = "バグ" | バグイシューのみ確認 |
| **Title** | Title contains "ログイン" | ログイン関連イシュー検索 |
| **Created** | Created >= 2024-03-01 | 特定日付以降に作成されたイシュー |
| **Status** | Status != "Resolved" | 未解決イシューのみ表示 |
### カンバンビューソート
各列内でイシューカードのソート順序を変更できます。
#### ソートオプション
- **Created Date ↓**: 最新作成順
- **Created Date ↑**: 古い順
- **Feedback Count ↓**: リンクされたフィードバック数が多い順
---
## リストビュー
リストビューは、イシューをカテゴリ別にグループ化してテーブル形式で表示するビュー方式です。
### リストビューへのアクセス
1. 上部メニューで**Issue**タブをクリックします
2. 右上で**List**ビューを選択します
### リストビュー構成
カテゴリ別にグループ化されたイシューが階層的に表示されます。
#### カテゴリグループ
各カテゴリは折りたたみ/展開可能なグループとして表示されます：
- **グループヘッダー**: カテゴリ名と含まれるイシュー数
- **折りたたみ/展開矢印**: グループ内容の表示/非表示を切り替え
- **"No Category"**: カテゴリが指定されていないイシュー
### リストビューフィルタリング
カンバンビューと同じフィルタ機能を提供します。
#### フィルタ適用方法
1. 上部の**Date**または**Filter**ボタンをクリックします
2. 希望する条件を設定します
3. フィルタリングされた結果がカテゴリ別にグループ化されて表示されます
#### 空のカテゴリ処理
フィルタリング結果にイシューがないカテゴリは自動的に非表示になります。
### リストビューソート
各列ヘッダーをクリックしてソートできます。
#### ソート動作
- **最初のクリック**: 昇順ソート ↑
- **2回目のクリック**: 降順ソート ↓
#### 各ソート内容
| ソート基準 | 使用例 |
| -------------------- | -------------------------------- |
| **Created ↓** | 最新イシューから確認 |
| **Feedback Count ↓** | 影響度が大きいイシュー優先処理 |
| **Status** | ステータス別にグループ化して確認 |
---
## イシューカテゴリ
イシューカテゴリは、イシューを分類して体系的に管理できるようにする機能です。
### カテゴリの目的
- **イシュー分類**: バグ、機能リクエスト、改善事項などに区分
- **分析の容易性**: カテゴリ別のイシュー発生パターン分析
### デフォルトカテゴリ例
一般的に使用されるカテゴリ分類：
| カテゴリ | 説明 | 優先度 | 担当チーム例 |
| ------------------ | ---------------------------- | ------ | -------------- |
| **バグ** | 機能誤動作、エラー | 高 | 開発チーム |
| **機能リクエスト** | 新機能追加リクエスト | 中 | 企画チーム |
| **改善事項** | 既存機能向上 | 中 | UXチーム |
| **パフォーマンス** | 速度、安定性問題 | 高 | インフラチーム |
| **UI/UX** | ユーザーインターフェース問題 | 低 | デザインチーム |
| **ドキュメント** | ヘルプ、ガイド関連 | 低 | 技術文書チーム |
### カテゴリ管理
#### カテゴリの追加
イシュー詳細パネルで新しいカテゴリを追加できます：
1. イシュー詳細パネルの**Category**フィールドで**Add**ボタンをクリックします
2. 新しいカテゴリ名を入力します
3. **Enter**キーを押すか確認ボタンをクリックします
#### カテゴリの割り当て
既存のイシューにカテゴリを割り当てたり変更したりできます：
1. イシュー詳細パネルで**Edit**ボタンをクリックします
2. **Category**ドロップダウンから希望するカテゴリを選択します
3. **Save**ボタンで変更を保存します
### カテゴリ別イシュー管理
#### リストビューでカテゴリ別確認
リストビューでは、カテゴリ別にグループ化されたイシューを一目で確認できます：
- **カテゴリ別イシュー数**: 各グループヘッダーに含まれるイシュー数を表示
- **グループ折りたたみ/展開**: 必要なカテゴリのみを選択的に確認
- **"No Category"グループ**: 未分類イシューの別管理
#### カテゴリ別フィルタリング
特定カテゴリのイシューのみを確認したい場合：
1. **Filter**ボタンをクリックします
2. **Category**条件を追加します
3. 希望するカテゴリを選択します
---
## 関連ドキュメント
- [フィードバック管理](./04-feedback-management.md) - フィードバックからイシューを作成・リンクする方法
- [イシュートラッカー統合](/ja/user-guide/settings/issue-tracker-management) - 外部ツールとの統合設定
- [プロジェクト管理](./02-project-management.md) - チーム構成と権限管理
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/01-user-guide/07-settings/01-tenant-settings.md
+236
View File
@@ -0,0 +1,236 @@
---
title: テナント設定
description: ABC User Feedbackのテナント情報、ログイン方式、ユーザー管理など、組織全体に影響を与える設定を管理する方法を案内します。
sidebar_position: 1
---
# テナント設定
テナント設定はABC User Feedbackの最上位管理機能で、組織全体に影響を与える重要な設定を扱います。このドキュメントでは、テナント情報管理、ログイン方式設定、全ユーザー管理方法を説明します。
> **注意**: これらの設定は**Super Admin権限**を持つユーザーのみがアクセスできます。
---
## テナント設定
テナントは組織の最上位単位で、すべてのプロジェクトとユーザーが含まれる範囲です。
### アクセス方法
1. 右上メニューで**Home**アイコンをクリックします
2. 左メニューから**Tenant Information**を選択します
### 編集可能な項目
| 項目 | 説明 | 編集可能 | 例 |
| --------------- | ------------------------------------- | -------- | ----------------------- |
| **ID** | テナント固有識別子（システム自動生成） | ❌ 不可 | `1` |
| **Name** | テナント名（組織名、会社名など） | ✅ 可能 | `ABC Company` |
| **Description** | テナント説明（オプション） | ✅ 可能 | `顧客フィードバック管理システム` |
### 情報編集方法
1. **Name**または**Description**フィールドを編集します
2. 右上の**Save**ボタンをクリックします
3. 保存完了時に成功メッセージが表示されます
> テナント名はログインUIに表示される場合があります。
---
## ログイン設定
ユーザーがシステムにアクセスする際に使用する認証方式を設定します。
### アクセス方法
1. 右上メニューで**Home**アイコンをクリックします
2. 左メニューから**Login Management**を選択します
### サポートされるログイン方式
#### 1. メールログイン
デフォルトで提供されるメール+パスワードの組み合わせ方式です。
**特徴**：
- 追加設定なしでデフォルト有効化
- ユーザー招待 → メール認証 → パスワード設定の順序
- パスワードリセット機能提供
**パスワードポリシー**：
- 最低8文字以上
- 英字、数字、特殊文字を含むことを推奨
- 連続文字禁止（例：`aa`、`11`）
#### 2. Googleログイン
Google OAuth 2.0によるソーシャルログイン方式です。
**設定方法**：
1. **Googleログイン有効化**: トグルをONに切り替えます
2. **Google Cloud Console設定が必要です**：
> **参考**: Google OAuth統合の詳細な実装方法については、[OAuth統合ガイド](/ja/developer-guide/oauth-integration)を参照してください。
#### 3. カスタムOAuthログイン
独自のOAuthサーバーや他のOAuthプロバイダーを使用する方式です。
**設定項目**：
| 項目 | 説明 | 例 |
| ----------------- | ----------------------------- | ---------------------------------------- |
| **Provider Name** | ログインボタンに表示される名前 | `Microsoftでログイン` |
| **Client ID** | OAuthクライアントID | `abc123xyz` |
| **Client Secret** | OAuthクライアントシークレット | `supersecret` |
| **Auth URL** | 認証リクエストURL | `https://auth.example.com/oauth2/auth` |
| **Token URL** | トークンリクエストURL | `https://auth.example.com/oauth2/token` |
| **User Info URL** | ユーザー情報リクエストURL | `https://auth.example.com/oauth2/userinfo` |
| **Scope** | リクエストする権限範囲 | `openid email profile` |
| **Email Key** | ユーザー情報のメールフィールド名 | `email` |
**設定順序**：
1. 各フィールドにOAuthサーバー情報を入力します
2. **Save**ボタンをクリックして保存します
3. ログイン画面で設定されたProvider Nameでボタンが表示されます
### ログイン方式の組み合わせ
複数のログイン方式を同時に有効化できます：
- **メールのみ**: デフォルトログインフォームのみ表示
- **メール+Google**: ログインフォーム+「Googleでログイン」ボタン
- **メール+カスタム**: ログインフォーム+カスタムOAuthボタン
### ログイン設定のテスト
設定変更後、必ずテストを実施してください：
1. ブラウザのシークレットモードでログインページにアクセス
2. 設定したログイン方式が正常に表示されるか確認
3. 各方式で実際のログインテストを実行
---
## ユーザー管理
テナント全体のユーザーを中央で統合管理する機能です。
### アクセス方法
1. 右上メニューで**Home**アイコンをクリックします
2. 左メニューから**User Management**を選択します
### ユーザーリストの確認
#### 表示される情報
| 列 | 説明 | 表示例 |
| ---------- | ------------------------- | ---------------------- |
| Email | ログインアカウントメールアドレス | `user@company.com` |
| Name | ユーザー名（プロフィール基準） | `山田太郎` |
| Department | 所属部門 | `開発チーム` |
| Type | ユーザータイプ | `SUPER` / `GENERAL` |
| Project | アクセス可能なプロジェクトリスト | `プロジェクトA、プロジェクトB` |
| Created | アカウント作成日時 | `2024-03-15 14:30` |
#### ユーザータイプの説明
| タイプ | 説明 | 権限範囲 |
| --------- | -------------------------------------------------------- | --------------- |
| `SUPER` | すべてのプロジェクトと設定にアクセス可能。全体システム管理者の役割 | テナント全体 |
| `GENERAL` | 指定されたプロジェクトにのみアクセス可能 | 特定のプロジェクトのみ |
### ユーザー検索とフィルタリング
大量のユーザーがいる場合、希望するユーザーを素早く見つけることができます。
#### フィルタ機能
上部の**Filter**ボタンをクリックして条件を設定します。
**フィルタ条件**：
- **Email**: メールアドレスで検索
- **Name**: ユーザー名で検索
- **Department**: 部門名で検索
**演算子オプション**：
- **CONTAINS**: 含む場合
- **IS**: 完全一致する場合
### ユーザーの招待
新しいユーザーをシステムに招待します。
#### 招待方法
1. 右上の**Invite User**ボタンをクリックします
2. 招待情報を入力します
| 項目 | 説明 | オプション |
| ----------- | --------------------------- | ----------------------------- |
| **Email** | 招待するユーザーのメールアドレス | 必須入力 |
| **Type** | ユーザータイプ | `GENERAL` / `SUPER` |
| **Project** | アクセスを許可するプロジェクト | プロジェクトリストから選択 |
| **Role** | そのプロジェクトでの役割 | `Admin` / `Editor` / `Viewer` |
3. **Invite**ボタンをクリックして招待を完了します
#### 招待後のプロセス
1. 招待されたユーザーにメールが送信されます
2. ユーザーがメールのリンクをクリックして登録手続きを進めます
3. 登録完了後、指定されたプロジェクトに自動的に追加されます
### ユーザー情報の編集
既存のユーザーの情報と権限を変更できます。
#### 編集方法
1. ユーザーリストで編集したいユーザーをクリックします
2. **Edit User**ポップアップが開きます
#### 編集可能な項目
| 項目 | 編集可能 | 説明 |
| --------- | -------- | ------------------------------ |
| **Email** | ❌ 不可 | アカウント識別子として変更不可 |
| **Type** | ✅ 可能 | `GENERAL` ↔ `SUPER`変更可能 |
#### 保存と適用
1. 必要な情報を編集します
2. **Save**ボタンをクリックします
3. 変更は即座に適用され、該当ユーザーの次回ログインから反映されます
### ユーザーの削除
システムを使用しなくなったユーザーを削除できます。
#### 削除方法
1. ユーザー編集ポップアップ下部の**Delete**ボタンをクリックします
2. 確認ダイアログで削除を承認します
#### 削除時の注意事項
- **復元不可能**: 削除されたユーザーアカウントは元に戻せません
- **アクセス権限の即座削除**: 削除時、すべてのシステムアクセスが即座にブロックされます
---
## 関連ドキュメント
- [プロジェクト管理](../02-project-management.md) - プロジェクト別メンバーと権限管理
- [OAuth統合ガイド](../../02-developer-guide/03-oauth-integration.md) - OAuth設定の技術的実装方法
- [API統合](/ja/developer-guide/api-integration) - APIによるユーザー管理方法
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/01-user-guide/07-settings/02-api-key-management.md
+134
View File
@@ -0,0 +1,134 @@
---
title: APIキー設定
description: ABC User Feedbackで外部システム統合のためのAPIキーを作成、管理し、セキュリティを維持する方法を説明します。
sidebar_position: 2
---
# APIキー設定
APIキーは、外部システムがABC User Feedbackと安全に統合できるようにする認証手段です。このドキュメントでは、APIキーの作成から管理、セキュリティ維持まで、画面中心で説明します。
![api-key-setting.png](/img/api-key/api-key-setting.png)
---
## APIキーの概要
### APIキーの役割
APIキーは次の目的で使用されます：
- **外部システム認証**: ウェブサイト、モバイルアプリからフィードバック送信
- **自動化統合**: バッチジョブ、スクリプトによるデータ収集
- **サードパーティツール接続**: 分析ツール、モニタリングシステム統合
- **セキュリティ制御**: プロジェクト別の独立したアクセス権限管理
### セキュリティ特徴
- **プロジェクト別独立性**: 各プロジェクトごとに別々のキー発行
- **ステータス管理**: Active/Inactiveステータスで即座に制御可能
---
## APIキーの作成
### アクセス方法
1. 上部メニューで**Settings**をクリック
2. 左メニューから**APIキー管理**を選択
### キー作成プロセス
#### 1. 作成ボタンをクリック
APIキー管理画面で右上の**Create API Key**ボタンをクリックします。
#### 2. 自動生成と表示
ボタンをクリックするとすぐに新しいAPIキーが自動生成され、ポップアップで表示されます。
**ポップアップ構成要素**：
- **APIキー値**: 完全なキー文字列を表示
- **Copyボタン**: クリップボードに即座にコピー
---
## APIキーリスト管理
### キーリスト画面構成
作成されたAPIキーはテーブル形式で管理されます。
#### テーブル列情報
| 列 | 説明 | 表示形式 |
| ----------- | ---------------------- | -------------------------- |
| **APIキー** | 生成されたキー値 | `AbcdEfgh...` |
| **Status** | 現在の有効化ステータス | Active / Inactive |
| **Created** | キー作成日時 | `2024-03-15 14:30` |
| **Actions** | 管理アクションボタン | ステータス変更、削除ボタン |
#### キー識別方法
完全なキー値を再度確認できないため、次の方法でキーを区別します：
- **作成時刻**: いつ作成されたキーか確認
- **使用目的メモ**: 別途キーの用途を記録しておく
---
## APIキーステータス管理
![api-key-detail.png](/img/api-key/api-key-detail.png)
### Active / Inactiveの切り替え
各APIキーは即座に有効化/無効化できます。
#### ステータス別の意味
| ステータス | 説明 | API呼び出し結果 |
| ------------ | --------------------------- | ---------------- |
| **Active** | 実際のAPI呼び出しに使用可能 | 正常処理 |
| **Inactive** | 呼び出しブロック状態 | 401 Unauthorized |
#### ステータス変更方法
1. APIキーリストで**Status**列のトグルスイッチをクリックします
2. ステータスが即座に変更され、画面に反映されます
3. そのキーを使用する外部システムで即座に影響を受けます
---
## APIキーの削除
### 削除タイミング
次の場合、APIキーを削除する必要があります：
- **キー公開**: 誤ってキーが公開された場合
- **プロジェクト終了**: 該当プロジェクトの使用終了
- **セキュリティポリシー**: 定期的なキー交換ポリシーに従って
- **未使用キー**: 使用しなくなったキーの整理
### 削除方法
#### 1. 削除ボタンをクリック
キーリストで削除したいキーの**Actions**列の削除ボタンをクリックします。
#### 2. 削除確認
確認ダイアログで削除を最終承認します。
#### 3. 削除完了
**Delete**ボタンをクリックすると、キーが即座に削除され、リストから削除されます。
---
## 関連ドキュメント
- [API統合ガイド](/ja/developer-guide/api-integration) - APIキーを使用した実際の統合実装方法
- [プロジェクト管理](/ja/user-guide/project-management) - プロジェクト別APIキー管理
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/01-user-guide/07-settings/03-issue-tracker-management.md
+167
View File
@@ -0,0 +1,167 @@
---
title: イシュートラッカー設定
description: ABC User Feedbackで外部イシュートラッカー（Jiraなど）と統合してイシューを追跡し、リンクする方法を案内します。
sidebar_position: 3
---
# イシュートラッカー設定
イシュートラッカー設定により、ABC User Feedbackのイシューを外部イシュー管理システム（Jiraなど）と統合できます。内部イシューに外部チケットリンクを接続して、開発ワークフローと自然に統合できます。
---
## イシュートラッカーの概要
### 統合の目的
イシュートラッカー統合は次の目的で使用されます：
- **ワークフロー統合**: 顧客フィードバックと開発作業の接続
- **イシュー追跡**: 内部イシューと外部チケットの1対1マッピング
- **進行状況共有**: 開発チームとカスタマーサポートチーム間の情報同期
- **効率性向上**: 重複作業の防止とコンテキストの維持
### 統合方式
- **手動リンク接続**: ABCイシューに外部チケット番号を手動で入力
- **URL自動生成**: 設定されたBase URLとProject Keyで自動リンク生成
- **クリック移動**: 生成されたリンクをクリックして外部システムにすぐに移動
> **参考**: リアルタイム双方向同期はサポートしていません。ステータス変更などの同期が必要な場合は、[Webhook](./04-webhook-management.md)を活用してください。
---
## 設定画面へのアクセス
### アクセス方法
1. 上部メニューで**Settings**をクリック
2. 左メニューから**イシュートラッカー管理**を選択
### 設定画面構成
イシュートラッカー管理画面は次のように構成されます：
- **Issue Tracking System**: 統合するシステムを選択するドロップダウン
- **Connection Settings**: 接続情報入力エリア
- **Link Preview**: 生成されるリンクのプレビュー
- **Test Connection**: 接続テストボタン
---
## Jira統合設定
### システム選択
#### 1. Issue Tracking System設定
ドロップダウンから**Jira**を選択します。
### 接続情報入力
#### 2. Base URL設定
Jiraシステムの基本アドレスを入力します。
| 入力例 | 説明 |
| ----------------------------------- | ----------------------- |
| `https://yourcompany.atlassian.net` | Jira Cloudインスタンス |
| `https://jira.company.com` | セルフホスティングJira Server |
| `https://jira.internal:8080` | 内部ネットワークJira |
**注意事項**：
- `https://`または`http://`プロトコルを含める必要があります
- 最後のスラッシュ（`/`）を削除
- ポート番号がある場合は含める
#### 3. Project Key設定
Jiraプロジェクトの固有キーを入力します。
| 入力例 | 説明 |
| --------- | -------------------- |
| `PROJ` | 一般的なプロジェクトキー |
| `DEV` | 開発チームプロジェクト |
| `CS` | カスタマーサポートチームプロジェクト |
| `BUG` | バグ管理専用 |
**Project Key確認方法**：
1. Jiraで該当プロジェクトにアクセス
2. イシュー番号の`-`の前の部分がProject Key
3. 例：`PROJ-123`で`PROJ`がProject Key
### リンクプレビュー
設定した情報に基づいて生成されるリンクをプレビューできます。
#### プレビュー構成
```
Base URL + /browse/ + Project Key + - + Issue Number
```
**例**：
- Base URL: `https://yourcompany.atlassian.net`
- Project Key: `PROJ`
- Issue Number: `123`（ユーザーが入力）
- **生成されたリンク**: `https://yourcompany.atlassian.net/browse/PROJ-123`
#### リンク形式検証
プレビューで次を確認してください：
- URL形式が正しいか
- 実際のJiraイシューにアクセス可能か
- チームメンバーがアクセス権限を持っているか
---
## イシューでのチケット接続
### チケット番号入力
イシュートラッカー設定が完了すると、個別のイシューで外部チケットを接続できます。
#### 接続方法
1. **Issue**タブで希望するイシューをクリックします
2. 右側の**Issue Details**パネルが開きます
3. **Ticket**フィールドに外部チケット番号を入力します
#### 入力形式
| 入力方式 | 説明 | 生成されるリンク |
| --------- | ----------- | ------------------------------------------ |
| `123` | 数字のみ入力 | `https://jira.company.com/browse/PROJ-123` |
システムが自動的にProject Keyを追加するため、数字のみ入力すれば十分です。
### リンク自動生成
チケット番号入力後、**Save**ボタンをクリックするとリンクが自動生成されます。
#### リンク機能
- **クリック移動**: リンクをクリックすると新しいタブで外部Jiraイシューに移動
- **外部リンク表示**: リンクの横に外部リンクアイコンを表示
- **編集可能**: Editモードでチケット番号を変更可能
### 接続解除
外部チケット接続を削除するには：
1. イシュー詳細パネルで**Edit**ボタンをクリック
2. **Ticket**フィールドの内容を削除
3. **Save**ボタンで変更を保存
---
## 関連ドキュメント
- [イシュー管理](/ja/user-guide/issue-management) - イシュー作成とチケット接続の使用方法
- [Webhook管理](/ja/user-guide/settings/webhook-management) - イシューステータス変更時の外部システム通知
- [API統合ガイド](/ja/developer-guide/api-integration) - APIによるイシュー管理
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/01-user-guide/07-settings/04-webhook-management.md
+170
View File
@@ -0,0 +1,170 @@
---
sidebar_position: 4
title: 'ウェブフック設定'
description: '外部システムと自動統合するためにウェブフックを設定し、イベント発生時に通知を送信する方法を説明します。'
---
# ウェブフック設定
ウェブフックは、ABC User Feedbackで**特定のイベント発生時に外部システムに自動通知**を送信する機能です。フィードバック作成、イシューステータス変更などのイベントをリアルタイムで外部サービス（Slack、Discord、独自サーバーなど）に配信できます。詳細な統合ガイドについては、[ウェブフック統合](/ja/developer-guide/webhook-integration)ドキュメントを参照してください。
![webhook-setting](/img/webhook/webhook-setting.png)
---
## アクセス方法
1. 上部メニューで**Settings**をクリック
2. 左メニューから**Webhook Integration**を選択
---
## Webhook Integration画面の概要
![webhook-list.png](/img/webhook/webhook-list.png)
ウェブフック統合画面は次のように構成されます：
### ウェブフックリストテーブル構成
| 列 | 説明 |
| ----------------- | --------------------------------------- |
| **On/Off** | ウェブフック有効化/無効化トグルスイッチ |
| **Name** | ウェブフック名 |
| **URL** | 通知を受信する外部エンドポイント |
| **Event Trigger** | 購読中のイベントトリガー |
| **Created** | ウェブフック作成日時 |
---
## 新しいウェブフックの作成
### 1. ウェブフック登録開始
右上の**Register Webhook**ボタンをクリックすると、ウェブフック登録モーダルが開きます。
### 2. 基本情報入力
#### 必須入力項目
| 項目 | 説明 |
| -------- | ------------------------------------------- |
| **Name** | ウェブフック識別のための名前 |
| **URL** | HTTP POSTリクエストを受信するエンドポイント |
### 3. トークン設定（オプション）
**Token**フィールドで認証用のトークンを設定できます：
- **Generate**ボタンをクリックして自動生成
- または直接トークン値を入力
### 4. Event Trigger選択
購読するイベントをチャネル別に選択できます：
#### サポートされるイベントタイプ
各チャネル（VOC、Review、Survey、VOC Test）について、次のイベントを選択できます：
| イベントタイプ | 説明 |
| ----------------------- | ------------------------------------------ |
| **Feedback Creation** | 新しいフィードバックが登録されたとき |
| **Issue Registration** | 新しいイシューが作成されたとき |
| **Issue Status Change** | イシューステータスが変更されたとき |
| **Issue Creation** | イシューがフィードバックにリンクされたとき |
### 5. ウェブフック保存
すべての情報を入力した後：
1. **OK**ボタンをクリックしてウェブフックを作成
2. **Cancel**ボタンでキャンセル可能
---
## ウェブフックステータス管理
### 有効化/無効化の切り替え
ウェブフックリストで各ウェブフックの**On/Off**列にあるトグルスイッチをクリックしてステータスを変更できます：
- **On（有効化）**: イベント発生時にリアルタイム送信
- **Off（無効化）**: ウェブフックは維持されますが送信は停止
### 一時無効化シナリオ
- 外部サーバーがメンテナンス中の場合
- ウェブフックURL変更作業中の場合
- スパム通知を防ぐ必要がある場合
---
## ウェブフック編集と削除
### ウェブフック編集
ウェブフックリストで編集したいウェブフックをクリックすると編集モーダルが開きます：
#### 編集可能な項目
- ウェブフック名
- Target URL変更
- トークン値修正
- イベントタイプ追加/削除
### ウェブフック削除
ウェブフックを完全に削除するには：
1. 編集モーダルで削除オプションを選択
2. またはリストから直接削除ボタンをクリック（UIに削除ボタンがある場合）
---
## ウェブフックテストと検証
### 手動検証方法
1. **フィードバック作成テスト**：
- テストフィードバックを登録して`Feedback Creation`イベントを確認
2. **イシュー管理テスト**：
- イシューを作成またはステータスを変更して関連イベントを確認
3. **外部サービス確認**：
- Slack、Discordなどでメッセージ受信を確認
---
## 一般的な統合例
### Slackウェブフック設定
```
Name: Slack通知
URL: https://hooks.slack.com/services/T00000000/B00000000/XXXXXXXX
Events: Feedback Creation, Issue Registration（すべてのチャネル）
```
### Discordウェブフック設定
```
Name: Discord開発チーム通知
URL: https://discord.com/api/webhooks/123456789/abcdefghijk
Events: Issue Status Change（VOCチャネルのみ）
```
### カスタムサーバー統合
```
Name: 内部分析システム
URL: https://api.yourcompany.com/webhooks/feedback
Token: your-generated-token
Events: すべてのイベント（すべてのチャネル）
```
---
## 関連ドキュメント
- [Webhook開発者ガイド](/ja/developer-guide/webhook-integration) - ウェブフック受信サーバーの実装方法
- [APIキー管理](./02-api-key-management.md) - APIキーベース認証設定
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/01-user-guide/07-settings/05-ai-setting.md
+272
View File
@@ -0,0 +1,272 @@
---
sidebar_position: 5
title: 'AI設定'
description: '生成AI機能を使用するための基本設定と統合方法を説明します。'
---
# AI設定
ABC User Feedbackで**生成AI機能**を使用するには、まずAIプロバイダーとの統合を設定する必要があります。
AI設定を完了すると、**AIフィールドテンプレート**、**AIイシュー推奨**、**AI使用量モニタリング**などのすべての機能を活用できます。
---
## アクセス方法
1. 上部メニューで**Settings**をクリック
2. 左メニューから**Generative AI Integration**を選択
3. 上部タブで**AI Setting**をクリック
---
## AIプロバイダー選択と設定
![ai-setting.png](/img/ai/ai-setting.png)
### 1. プロバイダー選択
現在サポートされているAIプロバイダーOpenAI、Google Geminiのいずれかを選択します：
### 2. APIキー入力
選択したAIプロバイダーから発行されたAPIキーを入力します。
### 3. Base URL設定（オプション）
ほとんどの場合、**空欄にしておくとデフォルト値**が自動的に使用されます。
特別なエンドポイントやプロキシサーバーを使用する場合のみ入力してください。
### 4. System Prompt設定（オプション）
AIがすべてのリクエストを処理する際に参照する**基本指示**を設定できます。
組織のトーンアンドマナーや特別な要件がある場合に活用してください。
### 5. 設定保存
すべての情報を入力した後、右上の**Save**ボタンをクリックします。
---
## AI使用量モニタリング
![ai-usage.png](/img/ai/ai-usage.png)
**AI Usage**タブでAI機能の使用量とコストをモニタリングできます。
### 使用量ダッシュボード
確認できる情報：
- **日次/月次API呼び出し数**
- **トークン使用量**（入力/出力別）
- **機能別使用分布**（AIフィールド vs イシュー推奨）
---
## AIフィールドテンプレート管理
![ai-field-template.png](/img/ai/ai-field-template.png)
AI設定を完了した後、**AI Field Template**タブでフィードバック自動分析テンプレートを管理できます。
### デフォルトテンプレート
システムで提供されるデフォルトテンプレート：
| テンプレート | 説明 | 活用例 |
| ---------------------- | ---------------------------------------------- | ------------------------------ |
| **Feedback Summary** | フィードバックを1文で要約 | 長いフィードバックの核心を把握 |
| **Sentiment Analysis** | 感情分析（ポジティブ/ネガティブ/ニュートラル） | 顧客満足度トレンド分析 |
| **Translation** | フィードバックを英語に翻訳 | 多言語フィードバック統合分析 |
| **Keyword Extraction** | 核心キーワード2-3個抽出 | イシューカテゴリ自動タグ付け |
### カスタムテンプレート作成
![ai-field-template-create.png](/img/ai/ai-field-template-create.png)
1. **Create New**カードをクリック
2. テンプレート情報を入力
| 項目 | 説明 |
| --------------- | --------------------- |
| **Title** | テンプレート名 |
| **Prompt** | AIに与える指示文 |
| **Model** | 使用するAIモデル選択 |
| **Temperature** | 創造性調整（0.0~1.0） |
3. Playgroundでテスト
- "Add Data"ボタンでテストフィードバック入力
- "AI test execution"クリックで結果確認
### テンプレート編集と削除
- テンプレートカードクリック → 編集
- **Delete Template**ボタンで削除
- 削除時、そのテンプレートを使用するAIフィールドに影響を与える可能性があります
---
## AIフィールドをチャネルに適用
AIフィールドテンプレートを作成した後、実際のチャネルのフィールドとして適用する必要があります。フィードバックでAI分析結果を確認できます。
### 1. Field ManagementでAIフィールド追加
**Settings > Channel List > [チャネル選択] > Field Management**でAIフィールドを追加します。
#### AIフィールド設定項目
| 項目 | 説明 | 必須 |
| ----------------------- | ------------------------------------ | ---------- |
| **Key** | フィールド固有識別子 | 必須 |
| **Display Name** | UIに表示される名前 | 必須 |
| **Format** | `aiField`選択 | 必須 |
| **Template** | 作成したAIフィールドテンプレート選択 | 必須 |
| **Target Field** | 分析対象となるテキストフィールド | 必須 |
| **Property** | EditableまたはRead Only | 必須 |
| **AI Field Automation** | 自動実行有無 | オプション |
#### 設定例
```
Key: sentiment_analysis
Display Name: 感情分析
Format: aiField
Template: Feedback Sentiment Analysis
Target Field: message
Property: Read Only
AI Field Automation: ON（自動実行）
```
### 2. Template接続とTarget Field設定
**Template**ドロップダウンから以前に作成したAIフィールドテンプレートを選択します。
**Target Field**はAI分析の対象となるフィールドを指定します
### 3. AI Field Automation設定
**AI Field Automation**トグルを通じて実行方式を選択します：
- **ON（自動実行）**: 新しいフィードバック登録時に自動的にAI分析実行
- **OFF（手動実行）**: ユーザーが手動で実行ボタンをクリックする必要があります
## フィードバックでAI分析結果確認
AIフィールド設定が完了すると、フィードバックリストと詳細画面でAI分析結果を確認できます。
### フィードバックリストで確認
フィードバックテーブルにAIフィールドが新しい列として追加されます：
- **Summary**: AIが生成した要約
- **Classification**: AI分類結果
- **Korean**: 翻訳結果など
### フィードバック詳細画面で確認
フィードバック詳細表示パネルでより詳細なAI分析結果を確認できます：
1. フィードバック行をクリック → 右側詳細パネルが開きます
2. AIフィールド別の分析結果を確認
3. 各AIフィールドごとに分析結果とともに表示
## AI分析手動実行
フィードバック詳細画面で手動でAI分析を実行できます。
### Run AIボタン使用
1. フィードバック詳細画面で**Run AI**ボタンをクリック
2. AI分析が実行され、結果がそのフィールドに自動入力されます
3. 分析完了後、結果をすぐに確認可能
### 手動実行活用シナリオ
- **コスト節約**: 必要なフィードバックのみを選択してAI分析
- **パフォーマンス確認**: 新しいテンプレートの結果を事前にテスト
- **再分析**: テンプレート修正後、既存フィードバックを再分析
---
## AIイシュー推奨設定
**AI Issue Recommendation**タブでフィードバックベースの自動イシュー推奨機能を設定できます。
![ai-issue-recommendation.png](/img/ai/ai-issue-recommendation.png)
### 推奨設定作成
![ai-issue-recommendation-create.png](/img/ai/ai-issue-recommendation-create.png)
1. **Create New**ボタンをクリック
2. 設定項目を入力
| 項目 | 説明 | 必須 |
| ---------------- | --------------------------------- | ---------- |
| **Channel** | 適用するチャネル選択 | 必須 |
| **Target Field** | 分析対象フィールド（例：message） | 必須 |
| **Prompt** | 推奨基準プロンプト | オプション |
| **Enable** | 機能有効化トグル | 必須 |
3. 高度な設定
| 設定 | 説明 |
| ------------------------- | -------------------------------------------------- |
| **Model** | 使用モデル |
| **Temperature** | 創造性調整 |
| **Data Reference Amount** | 参照するイシュー量（イシューと関連フィードバック） |
### 推奨機能テスト
入力された設定についてPlaygroundでテスト：
1. 例示フィードバック入力
2. "AI test execution"クリック
3. 推奨イシューリスト確認
### 実際のフィードバックで推奨活用
フィードバック詳細表示で：
- AI推奨イシューリスト確認
- チェックボックスで適切なイシュー選択
- **Retry**ボタンで別の推奨リクエスト
### フィードバックリストでイシュー推奨使用
AIイシュー推奨を設定したチャネルでは、フィードバックリスト画面でも直接イシュー推奨機能を使用できます。
#### 使用方法
1. フィードバックリストでイシューを接続したいフィードバックの**Issue列**にある**+ボタン**をクリック
2. ドロップダウンメニューが表示されたら**"Run AI"**を選択
3. AIが関連イシューを分析して推奨リストを表示
#### 推奨結果確認と適用
AI分析完了後、推奨イシューリストから：
- **推奨されたイシュー**確認
- 推奨された適切なイシュー選択
- 新しいイシュー作成オプションも提供
- 選択完了後、該当イシューがフィードバックに自動接続
#### 一括処理活用
複数のフィードバックを選択した状態でもAIイシュー推奨を使用でき、効率的なフィードバック分類が可能です：
1. フィードバックリストで複数行選択（チェックボックス活用）
2. 上部一括作業メニューでAIイシュー推奨実行
3. 各フィードバックごとに推奨イシュー確認と適用
---
## 関連ドキュメント
- [フィールド設定](/ja/user-guide/feedback-management) - AIフィールドをチャネルに適用する方法
- [イシュー作成とステータス管理](/ja/user-guide/issue-management) - AI推奨イシューの活用方法
- [フィードバック確認とフィルタリング](/ja/user-guide/feedback-management) - AI分析結果確認方法
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/01-user-guide/07-settings/06-image-setting.md
+102
View File
@@ -0,0 +1,102 @@
---
sidebar_position: 6
title: '画像設定'
description: 'フィードバックに添付された画像の保存方式とセキュリティポリシーを設定する方法を案内します。'
---
# 画像設定
ABC User Feedbackでは、ユーザーがフィードバックを提出する際に**画像と一緒にアップロード**できるようにサポートしています。画像の保存方式とセキュリティポリシーを適切に設定することで、安全で効率的なフィードバック収集環境を構築できます。
![image-setting.png](/img/image/image-setting.png)
---
## アクセス方法
1. 上部メニューで**Settings**をクリック
2. 左メニューから**Channel List > [チャネル選択]**
3. 下部タブから**Image Management**を選択
---
## Image Storage Integration設定
**Multipart Upload API**方式で画像をサーバーに直接アップロードするか、**Presigned URL Download**機能を活用するには、S3またはS3互換ストレージ統合が必要です。
### 必須設定項目
| 項目 | 説明 | 例 |
| --------------------- | ---------------------------- | ----------------------------------------- |
| **Access Key ID** | S3アクセスのためのキーID | `AKIAIOSFODNN7EXAMPLE` |
| **Secret Access Key** | キーに対するシークレット | `wJalrXUtnFEMI/K7MDENG/...` |
| **End Point** | S3 APIエンドポイントURL | `https://s3.ap-northeast-1.amazonaws.com` |
| **Region** | バケットが位置する地域 | `ap-northeast-1` |
| **Bucket Name** | 画像が保存される対象バケット | `consumer-ufb-images` |
### Presigned URL Download設定
**Presigned URL Download**オプションを通じて画像ダウンロードセキュリティを強化できます。
#### 設定オプション
- **Enable**: 認証されたワンタイムURLを通じて画像にアクセス（セキュリティ強化）
- **Disable**: 画像URLが直接公開され、公開アクセス可能
### 接続テスト
すべての設定を入力した後、**Test Connection**ボタンをクリックしてストレージ接続を確認します。
接続結果：
- ✅ **成功**: "Connection test succeeded"メッセージ
- ❌ **失敗**: 入力値、バケット権限、ネットワーク設定を再確認する必要があります
---
## Image URL Domain Whitelist設定
**Image URL方式**を使用するか、セキュリティを強化したい場合、信頼できるドメインのみを許可するようにホワイトリストを設定できます。
### 現在の状態確認
デフォルト設定は**"All image URLs are allowed"**状態で、すべてのドメインの画像URLを許可します。
### ホワイトリスト追加
セキュリティ強化のために特定のドメインのみを許可するには：
1. **Whitelist**エリアに信頼できるドメインを追加
2. 例示ドメイン：
- `cdn.yourcompany.com`
- `images.trusted-partner.io`
- `storage.googleapis.com`
---
## サポートされるストレージサービス
### AWS S3
- 最も一般的に使用されるクラウドストレージ
- 安定性が高く、拡張性に優れています
---
## 設定保存
すべての設定を完了した後、右上の**Save**ボタンをクリックして変更を保存します。
保存後：
- 新しい画像アップロードが設定した方式で動作
- 既存の画像は既存設定のまま維持
- Test Connectionで設定の正常動作を再確認することを推奨
---
## 関連ドキュメント
- [フィールド設定](/ja/user-guide/feedback-management) - 画像フィールドをフィードバックフォームに追加する方法
- [フィードバック確認とフィルタリング](/ja/user-guide/feedback-management) - アップロードされた画像をフィードバックで確認する方法
- [APIキー管理](./02-api-key-management.md) - APIキーセキュリティ管理方法
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/01-user-guide/07-settings/_category_.json
+5
View File
@@ -0,0 +1,5 @@
{
"position": 7,
"label": "設定",
"description": "設定に関するガイドです。"
}
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/01-user-guide/07-settings/index.md
+7
View File
@@ -0,0 +1,7 @@
---
title: 設定
---
import DocCardList from '@theme/DocCardList';
<DocCardList />
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/01-user-guide/_category_.json
+5
View File
@@ -0,0 +1,5 @@
{
"position": 2,
"label": "ユーザーガイド"
}
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/01-user-guide/index.md
+7
View File
@@ -0,0 +1,7 @@
---
title: ユーザーガイド
---
import DocCardList from '@theme/DocCardList';
<DocCardList />
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/02-developer-guide/01-installation/01-docker-hub-images.md
+374
View File
@@ -0,0 +1,374 @@
---
id: docker-hub-images
title: Docker Hubイメージインストール
description: Docker Hubに登録されたABC User Feedback公式イメージを使用してシステムを迅速にインストールする方法を説明します。
sidebar_position: 1
---
# Docker Hubイメージインストール
ABC User Feedbackは公式Dockerイメージを提供しています。
このドキュメントは、Docker Composeを使用して**Web UI、APIサーバー、データベース、SMTPサーバー**などのシステムをローカルで迅速に構成する方法を説明します。
---
## 1. 前提条件
| 項目 | 説明 |
| -------------- | ----------------------------------------------------------------------- |
| Docker | 20.10以上 |
| Docker Compose | v2以上推奨 |
| 使用ポート | `3000`、`4000`、`13306`、`5080`、`25`（ローカルで空いている必要がある） |
---
## 2. Dockerイメージ構成
| サービス名 | 説明 | Dockerイメージ名 |
| ------------------------ | ------------------------------- | ------------------------------------- |
| Web (Admin UI) | フロントエンドWeb UI（Next.js） | `line/abc-user-feedback-web` |
| API (Backend) | バックエンドサーバー（NestJS） | `line/abc-user-feedback-api` |
| MySQL | データベース | `mysql:8.0` |
| SMTP4Dev | ローカルテスト用メールサーバー | `rnwood/smtp4dev:v3` |
| （オプション）OpenSearch | 検索機能とAI分析精度向上用 | `opensearchproject/opensearch:2.16.0` |
---
## 3. `docker-compose.yml`の例
```yaml
name: abc-user-feedback
services:
web:
image: line/abc-user-feedback-web:latest
environment:
- NEXT_PUBLIC_API_BASE_URL=http://localhost:4000
ports:
- 3000:3000
depends_on:
- api
restart: unless-stopped
api:
image: line/abc-user-feedback-api:latest
environment:
- JWT_SECRET=jwtsecretjwtsecretjwtsecret
- MYSQL_PRIMARY_URL=mysql://userfeedback:userfeedback@mysql:3306/userfeedback
- SMTP_HOST=smtp4dev
- SMTP_PORT=25
- SMTP_SENDER=user@feedback.com
# OpenSearchを使用する場合は以下のコメントを解除してください
# - OPENSEARCH_USE=true
# - OPENSEARCH_NODE=http://opensearch-node:9200
ports:
- 4000:4000
depends_on:
- mysql
restart: unless-stopped
mysql:
image: mysql:8.0
command:
[
'--default-authentication-plugin=mysql_native_password',
'--collation-server=utf8mb4_bin',
]
environment:
MYSQL_ROOT_PASSWORD: userfeedback
MYSQL_DATABASE: userfeedback
MYSQL_USER: userfeedback
MYSQL_PASSWORD: userfeedback
TZ: UTC
ports:
- 13306:3306
volumes:
- mysql:/var/lib/mysql
restart: unless-stopped
smtp4dev:
image: rnwood/smtp4dev:v3
ports:
- 5080:80
- 25:25
- 143:143
volumes:
- smtp4dev:/smtp4dev
restart: unless-stopped
# OpenSearchを使用する場合は以下のコメントを解除してください
# opensearch-node:
# image: opensearchproject/opensearch:2.16.0
# restart: unless-stopped
# environment:
# - cluster.name=opensearch-cluster
# - node.name=opensearch-node
# - discovery.type=single-node
# - bootstrap.memory_lock=true
# - 'OPENSEARCH_JAVA_OPTS=-Xms512m -Xmx512m'
# - plugins.security.disabled=true
# - OPENSEARCH_INITIAL_ADMIN_PASSWORD=UserFeedback123!@#
# ulimits:
# memlock:
# soft: -1
# hard: -1
# nofile:
# soft: 65536
# hard: 65536
# volumes:
# - opensearch:/usr/share/opensearch/data
# ports:
# - 9200:9200
# - 9600:9600
volumes:
mysql:
smtp4dev:
# opensearch:
```
---
## 4. 実行手順
### 4.1 Dockerイメージのダウンロードと実行
```bash
# Docker Composeですべてのサービスをバックグラウンドで実行
docker compose up -d
```
### 4.2 実行状態の確認
```bash
# すべてのコンテナが正常に実行中か確認
docker compose ps
```
### 4.3 サービスアクセスの確認
- **Webアプリケーション**: [http://localhost:3000](http://localhost:3000)
- **APIサーバー**: [http://localhost:4000](http://localhost:4000)
- **SMTPテストページ**: [http://localhost:5080](http://localhost:5080)
- **MySQLデータベース**: `localhost:13306`（ユーザー：`userfeedback`、パスワード：`userfeedback`）
---
## 5. SMTP設定
デフォルトでは、この構成では`smtp4dev`を通じてメールをテストできます。
- **Webインターフェース**: [http://localhost:5080](http://localhost:5080)
- **SMTPポート**: `25`
- **IMAPポート**: `143`
### SMTPテスト方法
1. Webアプリケーションでユーザー登録またはユーザー招待機能を使用
2. [http://localhost:5080](http://localhost:5080)で送信されたメールを確認
3. メール内容と添付ファイルなどをテスト
> **重要**: 実際の本番環境では、必ず外部SMTPサーバー（例：Gmail、SendGrid、社内SMTPなど）と連携する必要があります。
## 6. インストール確認
### 6.1 Webアプリケーションアクセス確認
ブラウザで`http://localhost:3000`にアクセスし、以下を確認してください：
- テナント作成画面が正常に表示されるか
- ページの読み込みが完了するか
- JavaScriptエラーがないか（ブラウザの開発者ツールで確認）
### 6.2 APIサーバーステータス確認
```bash
# APIサーバーヘルスチェック
curl http://localhost:4000/api/health
```
予想される応答：
```json
{
"status": "ok",
"info": {
"database": {
"status": "up"
}
}
}
```
### 6.3 データベース接続確認
```bash
# MySQLコンテナに直接アクセスしてデータベースを確認
docker compose exec mysql mysql -u userfeedback -puserfeedback -e "SHOW DATABASES;"
# テーブル作成確認
docker compose exec mysql mysql -u userfeedback -puserfeedback -e "USE userfeedback; SHOW TABLES;"
```
### 6.4 ログ確認
```bash
# すべてのサービスのログを確認
docker compose logs
# 特定のサービスのログのみ確認
docker compose logs api
docker compose logs web
docker compose logs mysql
```
---
## 7. OpenSearch使用時の注意事項
OpenSearchは、検索機能とAI分析の精度を向上させるオプションコンポーネントです。
### 7.1 OpenSearch有効化方法
1. `docker-compose.yml`ファイルで`api`サービスの環境変数のコメントを解除：
```yaml
- OPENSEARCH_USE=true
- OPENSEARCH_NODE=http://opensearch-node:9200
```
2. `opensearch-node`サービスのコメントを解除
3. `volumes:`セクションで`opensearch:`のコメントを解除
4. ポート`9200`、`9600`がローカルで使用されていないことを確認
### 7.2 メモリ要件
> **注意**: OpenSearchは最低2GB以上のメモリを必要とします。メモリ不足の場合、コンテナが自動的に終了する可能性があります。
### 7.3 OpenSearchステータス確認
```bash
# OpenSearchクラスターステータス確認
curl http://localhost:9200/_cluster/health
# OpenSearchノード情報確認
curl http://localhost:9200/_nodes
# インデックス確認
curl http://localhost:9200/_cat/indices
```
### 7.4 OpenSearch無効化
OpenSearchを使用しない場合は、`docker-compose.yml`で該当サービスと環境変数をコメントアウトします。
---
## 8. トラブルシューティング
### 8.1 ポート競合の問題
**症状**: `docker compose up`実行時にポートバインディングエラーが発生
**解決方法**:
```bash
# 使用中のポートを確認
lsof -i :3000 # Webポート
lsof -i :4000 # APIポート
lsof -i :13306 # MySQLポート
lsof -i :5080 # SMTPポート
# 該当ポートを使用しているプロセスを停止して再起動
docker compose down
docker compose up -d
```
### 8.2 コンテナ起動失敗
**症状**: 一部のコンテナが起動しない、または継続的に再起動される
**解決方法**:
```bash
# コンテナステータス確認
docker compose ps
# 失敗したコンテナのログを確認
docker compose logs [サービス名]
# すべてのコンテナを停止して削除
docker compose down
# ボリュームも削除（データ損失に注意）
docker compose down -v
# 再度起動
docker compose up -d
```
### 8.3 データベース接続エラー
**症状**: APIサーバーからMySQL接続失敗
**解決方法**:
```bash
# MySQLコンテナが完全に起動するまで待機
docker compose logs mysql
# MySQLコンテナに直接接続テスト
docker compose exec mysql mysql -u userfeedback -puserfeedback -e "SELECT 1;"
# APIサービスを再起動
docker compose restart api
```
### 8.4 イメージダウンロード失敗
**症状**: Dockerイメージをダウンロードできない
**解決方法**:
```bash
# Docker Hubログイン確認
docker login
# イメージを手動でダウンロード
docker pull line/abc-user-feedback-web:latest
docker pull line/abc-user-feedback-api:latest
# ネットワーク接続確認
ping hub.docker.com
```
### 8.5 メモリ不足の問題
**症状**: OpenSearchコンテナが自動的に終了する
**解決方法**:
```bash
# システムメモリ確認
free -h
# Dockerメモリ使用量確認
docker stats
# OpenSearchを無効化（docker-compose.ymlでコメントアウト）
# またはメモリ割り当てを増やす
```
---
## 9. 参考リンク
- [ABC User Feedback Web - Docker Hub](https://hub.docker.com/r/line/abc-user-feedback-web)
- [ABC User Feedback API - Docker Hub](https://hub.docker.com/r/line/abc-user-feedback-api)
- [smtp4dev - Docker Hub](https://hub.docker.com/r/rnwood/smtp4dev)
- [OpenSearch - Docker Hub](https://hub.docker.com/r/opensearchproject/opensearch)
---
## 関連ドキュメント
- [初期設定ガイド](/ja/user-guide/getting-started)
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/02-developer-guide/01-installation/02-cli-tool.md
+273
View File
@@ -0,0 +1,273 @@
---
sidebar_position: 2
title: "CLIツール使用方法"
description: "ABC User Feedback CLIツールでシステムを迅速かつ簡単にインストール・管理する方法を説明します。"
---
# CLIツール使用方法
ABC User Feedback CLI（`auf-cli`）は、システムのインストール、実行、管理を簡素化するコマンドラインツールです。Node.jsとDockerがインストールされていれば、追加の依存関係をインストールしたりリポジトリをクローンしたりすることなく、`npx`を通じてすぐに実行できます。
## 主要機能
- 必要なインフラの自動設定（MySQL、SMTP、OpenSearch）
- 環境変数設定の簡素化
- APIおよびウェブサーバーの自動起動/停止
- ボリュームデータのクリーンアップ
- 動的Docker Composeファイル生成
## 使用されるDockerイメージ
- `line/abc-user-feedback-web:latest` - ウェブフロントエンド
- `line/abc-user-feedback-api:latest` - APIバックエンド
- `mysql:8.0` - データベース
- `rnwood/smtp4dev:v3` - SMTPテストサーバー
- `opensearchproject/opensearch:2.16.0` - 検索エンジン（オプション）
## 前提条件
CLIツールを使用する前に、次の要件を満たす必要があります：
- [Node.js v22以上](https://nodejs.org/en/download/)
- [Docker](https://docs.docker.com/desktop/)
## 基本コマンド
### 初期化
ABC User Feedbackに必要なインフラを設定するには、次のコマンドを実行します：
```bash
npx auf-cli init
```
このコマンドは次の作業を実行します：
1. 環境変数設定用の`config.toml`ファイルを作成
2. アーキテクチャ（ARM/AMD）に応じて必要なインフラを設定
初期化が完了すると、現在のディレクトリに`config.toml`ファイルが作成されます。必要に応じてこのファイルを編集して環境変数を調整できます。
### サーバー起動
APIおよびウェブサーバーを起動するには、次のコマンドを実行します：
```bash
npx auf-cli start
```
このコマンドは次の作業を実行します：
1. `config.toml`ファイルから環境変数を読み取り
2. Docker Composeファイルを生成してサービスを開始
3. APIおよびウェブサーバーコンテナと必要なインフラ（MySQL、SMTP、OpenSearch）を起動
サーバーが正常に起動すると、ウェブブラウザで`http://localhost:3000`（または設定されたURL）からABC User Feedbackウェブインターフェースにアクセスできます。CLIは次のURLを表示します：
- ウェブインターフェースURL
- API URL
- MySQL接続文字列
- OpenSearch URL（有効な場合）
- SMTPウェブインターフェース（smtp4dev使用時）
### サーバー停止
APIおよびウェブサーバーを停止するには、次のコマンドを実行します：
```bash
npx auf-cli stop
```
このコマンドは実行中のAPIおよびウェブサーバーコンテナとインフラコンテナを停止します。ボリュームに保存されたすべてのデータは保持されます。
### ボリュームクリーンアップ
起動中に作成されたDockerボリュームをクリーンアップするには、次のコマンドを実行します：
```bash
npx auf-cli clean
```
このコマンドはすべてのコンテナを停止し、MySQL、SMTP、OpenSearchなどのDockerボリュームを削除します。
**警告**: この操作はすべてのデータを削除するため、必要な場合は事前にバックアップしてください。
`--images`オプションを使用して未使用のDockerイメージもクリーンアップできます：
```bash
npx auf-cli clean --images
```
## 設定ファイル（config.toml）
`init`コマンドを実行すると、現在のディレクトリに`config.toml`ファイルが作成されます。このファイルはABC User Feedbackの環境変数を設定するために使用されます。
以下は`config.toml`ファイルの例です：
```toml
[web]
port = 3000
# api_base_url = "http://localhost:4000"
[api]
port = 4000
jwt_secret = "jwtsecretjwtsecretjwtsecretjwtsecretjwtsecretjwtsecret"
# master_api_key = "MASTER_KEY"
# access_token_expired_time = "10m"
# refresh_token_expired_time = "1h"
# [api.auto_feedback_deletion]
# enabled = true
# period_days = 365
# [api.smtp]
# host = "smtp4dev" # SMTP_HOST
# port = 25 # SMTP_PORT
# sender = "user@feedback.com"
# username=
# password=
# tls=
# cipher_spec=
# opportunitic_tls=
# [api.opensearch]
# enabled = true
[mysql]
port = 13306
```
必要に応じてこのファイルを編集して環境変数を調整できます。環境変数の詳細については、[環境変数設定](./05-configuration.md)ドキュメントを参照してください。
## 高度な使用方法
### ポート変更
デフォルトでは、ウェブサーバーはポート3000を、APIサーバーはポート4000を使用します。これらを変更するには、`config.toml`ファイルで次の設定を変更します：
```toml
[web]
port = 8000 # ウェブサーバーポート変更
api_base_url = "http://localhost:8080" # API URLも一緒に変更する必要があります
[api]
port = 8080 # APIサーバーポート変更
[mysql]
port = 13307 # 必要に応じてMySQLポート変更
```
### OpenSearch有効化
高度な検索機能のためにOpenSearchを有効にするには：
```toml
[api.opensearch]
enabled = true
```
**注意事項**：
- OpenSearchには最低2GBの使用可能メモリが必要です
- OpenSearchコンテナは`http://localhost:9200`で利用可能です
- OpenSearchステータス確認: `http://localhost:9200/_cluster/health`
### SMTP設定
開発環境では、デフォルトの`smtp4dev`設定を推奨します：
```toml
[api.smtp]
host = "smtp4dev"
port = 25
sender = "dev@feedback.local"
```
smtp4devウェブインターフェースは`http://localhost:5080`で送信されたメールを確認できます。
## トラブルシューティング
### 一般的な問題
1. **Docker関連エラー**：
- Dockerが実行中か確認: `docker --version`
- Docker権限確認: `docker ps`
- Docker Desktopが正しくインストールされ実行中か確認
2. **ポート競合**：
- ポート使用確認: `lsof -i :PORT`（macOS/Linux）または`netstat -ano | findstr :PORT`（Windows）
- `config.toml`でポート設定変更
- 一般的な競合ポート: 3000、4000、13306、9200、5080
3. **サービス起動失敗**：
- コンテナログ確認: `docker compose logs SERVICE_NAME`
- Dockerイメージが利用可能か確認: `docker images`
- 十分なシステムリソース（メモリ、ディスク容量）を確認
4. **データベース接続問題**：
- MySQLコンテナステータス確認: `docker compose ps mysql`
- MySQLログ確認: `docker compose logs mysql`
- 接続テスト: `docker compose exec mysql mysql -u userfeedback -p`
### デバッグのヒント
1. **コンテナログ確認**：
```bash
# すべてのコンテナログ
docker compose logs
# 特定のサービスログ
docker compose logs api
docker compose logs web
docker compose logs mysql
```
2. **サービスステータス確認**：
```bash
# APIステータス確認
curl http://localhost:4000/api/health
# OpenSearchステータス確認（有効な場合）
curl http://localhost:9200/_cluster/health
```
3. **データベース直接アクセス**：
```bash
# MySQL接続
docker compose exec mysql mysql -u userfeedback -p userfeedback
```
## 制限事項
CLIツールは開発およびテスト環境用に設計されています。本番環境へのデプロイには、次を考慮してください：
1. **セキュリティ考慮事項**：
- 機密データには設定ファイルではなく環境変数を使用
- 適切なシークレット管理を実装
- 本番レベルのJWTシークレットを使用
- HTTPS/TLS暗号化を有効化
2. **スケーラビリティと可用性**：
- KubernetesやDocker Swarmなどのオーケストレーションツールを使用
- ロードバランシングと自動スケーリングを実装
- 適切なモニタリングとアラートを設定
- 管理データベースサービス（RDS、Cloud SQLなど）を使用
3. **データ管理**：
- 自動化されたバックアップ戦略を実装
- 適切なバックアップがある永続ボリュームを使用
- データ保持ポリシーを考慮
- ディスク使用量とパフォーマンスをモニタリング
## 次のステップ
詳細なAPIおよびウェブサーバー設定オプションについては、[環境変数設定](./05-configuration.md)ドキュメントを参照してください。
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/02-developer-guide/01-installation/03-manual-setup.md
+276
View File
@@ -0,0 +1,276 @@
---
sidebar_position: 3
title: '手動インストール'
description: 'ソースコードから直接ABC User Feedbackをビルドして実行する手動インストールガイド'
---
# 手動インストール
このドキュメントは、ABC User Feedbackを手動でインストール・構成する方法を説明します。ソースコードから直接アプリケーションをビルドして実行したい場合に便利です。
## 前提条件
手動インストールを進める前に、次の要件を満たす必要があります：
- [Node.js v22.19.0以上](https://nodejs.org/en/download/)
- [pnpm v10.15.0以上](https://pnpm.io/installation)（パッケージマネージャー）
- [Git](https://git-scm.com/downloads)
- [MySQL 8.0](https://www.mysql.com/downloads/)
- SMTPサーバー
- （オプション）[OpenSearch 2.16](https://opensearch.org/)
## ソースコードのダウンロード
まず、GitHubリポジトリからABC User Feedbackのソースコードをクローンします：
```bash
git clone https://github.com/line/abc-user-feedback.git
cd abc-user-feedback
```
## インフラ設定
ABC User FeedbackにはMySQLデータベース、SMTPサーバー、そしてオプションでOpenSearchが必要です。これらのインフラコンポーネントを設定する方法はいくつかあります。
### Dockerを使用したインフラ設定
最も簡単な方法は、Docker Composeで必要なインフラを設定することです：
```bash
docker-compose -f docker/docker-compose.infra.yml up -d
```
### 既存インフラの使用
既にMySQL、OpenSearch、またはSMTPサーバーがある場合は、後で環境変数として接続情報を構成できます。
## 依存関係のインストール
ABC User FeedbackはTurboRepoを通じて管理されるモノレポ構造を使用します。すべてのパッケージの依存関係をインストールするには：
```bash
pnpm install
```
依存関係のインストール後、すべてのパッケージをビルドします：
```bash
pnpm build
```
## 環境変数設定
### APIサーバー環境変数
`apps/api`ディレクトリに`.env`ファイルを作成し、`.env.example`を参照して構成します：
```env
# Required environment variables
JWT_SECRET=DEV
MYSQL_PRIMARY_URL=mysql://userfeedback:userfeedback@localhost:13306/userfeedback # required
ACCESS_TOKEN_EXPIRED_TIME=10m # default: 10m
REFRESH_TOKEN_EXPIRED_TIME=1h # default: 1h
# Optional environment variables
# APP_PORT=4000 # default: 4000
# APP_ADDRESS=0.0.0.0 # default: 0.0.0.0
# MYSQL_SECONDARY_URLS= ["mysql://userfeedback:userfeedback@localhost:13306/userfeedback"] # optional
SMTP_HOST=localhost # required
SMTP_PORT=25 # required
SMTP_SENDER=user@feedback.com # required
# SMTP_USERNAME= # optional
# SMTP_PASSWORD= # optional
# SMTP_TLS= # default: false
# SMTP_CIPHER_SPEC= # default: TLSv1.2 if SMTP_TLS=true
# SMTP_OPPORTUNISTIC_TLS= # default: true if SMTP_TLS=true
# OPENSEARCH_USE=false # default: false
# OPENSEARCH_NODE= # required if OPENSEARCH_USE=true
# OPENSEARCH_USERNAME= # optional
# OPENSEARCH_PASSWORD= # optional
# AUTO_MIGRATION=true # default: true
# MASTER_API_KEY= # default: none
# BASE_URL=https://api.example.com # Swaggerドキュメントで使用するAPIサーバーの公開URL（オプション）
# AUTO_FEEDBACK_DELETION_ENABLED=false # default: false
# AUTO_FEEDBACK_DELETION_PERIOD_DAYS=365*5
```
### ウェブサーバー環境変数
`apps/web`ディレクトリに`.env`ファイルを作成し、`.env.example`を参照して構成します：
```env
NEXT_PUBLIC_API_BASE_URL=http://localhost:4000
```
環境変数の詳細については、[環境変数設定](./05-configuration.md)ドキュメントを参照してください。
## データベースマイグレーション
APIサーバーを初めて実行する前に、データベーススキーマを作成する必要があります。`AUTO_MIGRATION=true`環境変数を設定すると、サーバー起動時にマイグレーションが自動的に実行されます。
手動でマイグレーションを実行するには：
```bash
cd apps/api
npm run migration:run
```
## 開発モードでの実行
### 単一コマンドで実行
APIサーバーとウェブサーバーを開発モードで実行するには：
```bash
# プロジェクトルートディレクトリから
pnpm dev
```
このコマンドはAPIサーバーとウェブサーバーを同時に起動します。APIサーバーはデフォルトでポート4000で、ウェブサーバーはポート3000で実行されます。
### 個別パッケージの実行
#### 共通パッケージのビルド
ウェブアプリケーションを実行する前に、共有パッケージをビルドする必要があります：
```bash
# プロジェクトルートディレクトリから
cd packages/ufb-shared
pnpm build
```
#### UIパッケージのビルド
ウェブアプリケーションを実行する前に、UIパッケージをビルドする必要があります：
```bash
# プロジェクトルートディレクトリから
cd packages/ufb-tailwindcss
pnpm build
```
#### 各サーバーの個別実行
各サーバーを個別に実行するには：
```bash
# APIサーバーのみ実行
cd apps/api
pnpm dev
# ウェブサーバーのみ実行
cd apps/web
pnpm dev
```
## 本番ビルド
本番環境用のアプリケーションをビルドするには：
```bash
# プロジェクトルートディレクトリから
pnpm build
```
このコマンドはAPIサーバーとウェブサーバーの両方をビルドします。
## 本番モードでの実行
本番ビルドを実行するには：
```bash
# APIサーバー実行
cd apps/api
pnpm start
# ウェブサーバー実行
cd apps/web
pnpm start
```
## APIタイプ生成
バックエンドAPIが実行中の場合、フロントエンド用のAPIタイプを生成できます：
```bash
cd apps/web
pnpm generate-api-type
```
このコマンドはOpenAPI仕様からTypeScriptタイプを生成し、`src/shared/types/api.type.ts`ファイルに保存します。
**注意**: このコマンドが正しく動作するには、APIサーバーが`http://localhost:4000`で実行中である必要があります。
## コード品質管理
### リンティング
コードリンティングを実行するには：
```bash
pnpm lint
```
### フォーマット
コードフォーマットを実行するには：
```bash
pnpm format
```
### テスト
テストを実行するには：
```bash
pnpm test
```
## Swaggerドキュメント
APIサーバーが実行中の場合、次のエンドポイントでSwaggerドキュメントを確認できます：
- **APIドキュメント**: http://localhost:4000/docs
- **管理者APIドキュメント**: http://localhost:4000/admin-docs
- **OpenAPI JSON**: http://localhost:4000/docs-json
- **管理者OpenAPI JSON**: http://localhost:4000/admin-docs-json
> **注意**: APIサーバーをリバースプロキシの後ろで異なるURLで提供する場合、`BASE_URL`環境変数を設定すると、Swaggerドキュメントで正しいAPIエンドポイントURLが生成されます。例: `BASE_URL=https://api.example.com`
## トラブルシューティング
### 一般的な問題
1. **依存関係インストールエラー**：
- Node.jsバージョンがv22.19.0以上であることを確認してください。
- pnpmバージョンがv10.15.0以上であることを確認してください。
- pnpmを最新バージョンに更新してください。
- `pnpm install --force`を試してください。
2. **データベース接続エラー**：
- MySQLサーバーが実行中であることを確認してください。
- データベース認証情報が正しいことを確認してください。
- `MYSQL_PRIMARY_URL`環境変数の形式が正しいことを確認してください。
- Dockerインフラを使用する場合、MySQLがポート13306（3306ではない）で実行されていることを確認してください。
3. **ビルドエラー**：
- UIパッケージがビルドされていることを確認してください（`pnpm build:ui`）。
- すべての依存関係がインストールされていることを確認してください。
- TypeScriptエラーを確認してください。
4. **ランタイムエラー**：
- 環境変数が正しく設定されていることを確認してください。
- 必要なポートが利用可能であることを確認してください。
- ログのエラーメッセージを確認してください。
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/02-developer-guide/01-installation/04-smtp-configuration.md
+165
View File
@@ -0,0 +1,165 @@
---
id: smtp-configuration
title: SMTPサーバー統合ガイド
description: 本番環境で認証メール送信のための外部SMTPサーバー統合方法を案内します。
sidebar_position: 4
---
# SMTPサーバー統合ガイド
本番環境では、`smtp4dev`のようなローカルテストサーバーではなく、
**外部SMTPサーバー（Gmail、SendGrid、会社SMTPなど）**と接続して
認証メール（登録、パスワードリセットなど）を正常に送信できる必要があります。
このドキュメントでは、SMTPサーバー統合のための環境変数設定と主要な統合事例を案内します。
---
## 1. SMTP関連環境変数
`api`サービスまたは`.env`ファイルに次の環境変数を設定してください：
> **参考**: 認証が不要なSMTPサーバーの場合、`SMTP_USERNAME`と`SMTP_PASSWORD`は省略できます。
| 環境変数 | 説明 | 必須 |
| ------------------------ | ----------------------------------------------- | --------- |
| `SMTP_HOST` | SMTPサーバーアドレス（例：smtp.gmail.com） | 必須 |
| `SMTP_PORT` | ポート番号（通常587、465など） | 必須 |
| `SMTP_SENDER` | 送信者メールアドレス（例：`noreply@yourdomain.com`） | 必須 |
| `SMTP_USERNAME` | SMTP認証ユーザー名（アカウントID） | オプション |
| `SMTP_PASSWORD` | SMTP認証パスワードまたはAPIキー | オプション |
| `SMTP_TLS` | TLS使用有無（`true`または`false`） | オプション |
| `SMTP_CIPHER_SPEC` | TLS暗号化アルゴリズム（デフォルト：`TLSv1.2`） | オプション |
| `SMTP_OPPORTUNISTIC_TLS` | STARTTLS使用有無（`true`または`false`） | オプション |
> **重要**: 実際のコードでは`SMTP_USERNAME`と`SMTP_PASSWORD`が使用され、`SMTP_TLS=true`はポート465に、`false`はポート587に主に使用されます。
---
## 2. Docker環境例
```yaml
api:
image: line/abc-user-feedback-api
environment:
- SMTP_HOST=smtp.gmail.com
- SMTP_PORT=587
- SMTP_USERNAME=your-email@gmail.com
- SMTP_PASSWORD=your-email-app-password
- SMTP_SENDER=noreply@yourdomain.com
- SMTP_TLS=false
- SMTP_OPPORTUNISTIC_TLS=true
```
または`.env`ファイルで分離管理できます：
```env
SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_USERNAME=your-email@gmail.com
SMTP_PASSWORD=your-email-app-password
SMTP_SENDER=noreply@yourdomain.com
SMTP_TLS=false
SMTP_OPPORTUNISTIC_TLS=true
```
---
## 3. SMTP統合例
### ✅ Gmail SMTP統合（個人テスト用）
- `SMTP_HOST`: `smtp.gmail.com`
- `SMTP_PORT`: `587`
- `SMTP_USERNAME`: Gmailアドレス（例：`abc@gmail.com`）
- `SMTP_PASSWORD`: **アプリパスワード**（安全性の低いアプリを許可 → 非推奨）
- `SMTP_TLS`: `false`
- `SMTP_OPPORTUNISTIC_TLS`: `true`
> Gmailアカウントに**2段階認証**が有効になっている場合、[アプリパスワード](https://myaccount.google.com/apppasswords)を作成する必要があります。
---
### ✅ SendGrid統合（推奨）
- `SMTP_HOST`: `smtp.sendgrid.net`
- `SMTP_PORT`: `587`
- `SMTP_USERNAME`: `apikey`
- `SMTP_PASSWORD`: 実際のSendGrid APIキー
- `SMTP_SENDER`: 確認済み送信者アドレス
- `SMTP_TLS`: `false`
- `SMTP_OPPORTUNISTIC_TLS`: `true`
---
## 4. テスト方法
### 4.1 メール送信テスト
1. **メール認証テスト**：
- 管理者またはユーザーアカウント作成
- メール認証コード送信確認
2. **パスワードリセットテスト**：
- パスワードリセットリクエスト
- リセットリンクが含まれたメール受信確認
3. **ユーザー招待テスト**：
- 管理者が新しいユーザーを招待
- 招待メール送信確認
### 4.2 ログ確認
メール送信失敗時、次のコマンドで詳細ログを確認してください：
```bash
# Docker Compose環境
docker compose logs api
# 特定時間帯のログ確認
docker compose logs --since=10m api
# リアルタイムログモニタリング
docker compose logs -f api
```
SMTPエラーが発生すると、ログに詳細メッセージが表示されます。
---
## 5. トラブルシューティング
| 問題タイプ | 原因または解決方法 |
| -------------------------- | ---------------------------------------- |
| 認証エラー（`535`） | `SMTP_USERNAME` / `SMTP_PASSWORD`再確認 |
| 接続拒否（`ECONNREFUSED`） | ファイアウォールまたは誤ったポート設定 |
| メールが届かない | `SMTP_SENDER`が認証されていない |
| TLSエラー（`ETLS`） | `SMTP_TLS`設定が誤っている |
| STARTTLS失敗 | `SMTP_OPPORTUNISTIC_TLS`設定確認 |
---
## 6. SMTPに関連するメールテンプレート
現在、システムでメールは次の状況で送信されます：
- **メール認証**: 管理者/ユーザー登録時に認証コード送信
- **パスワードリセット**: パスワードリセットリクエスト時にリンク送信
- **ユーザー招待**: 管理者がユーザーを招待するときに招待メール送信
メール内容は**Handlebarsテンプレート**ベースで構成されており、次の情報が含まれます：
- 送信者: `"User feedback" <SMTP_SENDER>`
- 基本URL: `ADMIN_WEB_URL`環境変数値を使用
- テンプレート位置: `src/configs/modules/mailer-config/templates/`
---
## 関連ドキュメント
- [Docker Hubインストールガイド](./docker-hub-images)
- [環境変数設定](./configuration)
- [初期設定ガイド](/ja/user-guide/getting-started)
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/02-developer-guide/01-installation/05-configuration.md
+213
View File
@@ -0,0 +1,213 @@
---
id: configuration
title: 環境変数構成
description: ABC User FeedbackのAPIおよびウェブサーバーの環境変数構成方法を説明します。
sidebar_position: 5
---
# 環境変数構成
このドキュメントでは、ABC User Feedbackの**APIサーバー**および**ウェブサーバー**で使用する主要な環境変数と設定方法を説明します。
---
## 1. APIサーバー環境変数
### 必須環境変数
| 環境変数 | 説明 | デフォルト | 例 |
| ---------------------------- | ------------------------- | ---------- | -------------------------------- |
| `JWT_SECRET` | JWT署名用シークレットキー | なし | `jwtsecretjwtsecretjwtsecret` |
| `MYSQL_PRIMARY_URL` | MySQL接続URL | なし | `mysql://user:pass@host:3306/db` |
| `ACCESS_TOKEN_EXPIRED_TIME` | Access Token有効期間 | `10m` | `10m`、`30s`、`1h` |
| `REFRESH_TOKEN_EXPIRED_TIME` | Refresh Token有効期間 | `1h` | `1h`、`7d` |
> JWTシークレットは十分に複雑で安全な文字列を使用する必要があります。
⚠️ **セキュリティ注意事項**：
- `JWT_SECRET`は最低32文字以上の複雑な文字列を使用してください
- 本番環境では絶対にデフォルト値を使用しないでください
- 環境変数ファイル（`.env`）はバージョン管理に含めないでください
- 機密情報は環境変数やシークレット管理システムを通じて管理してください
---
### オプション環境変数
| 環境変数 | 説明 | デフォルト | 例 |
| ---------------------- | ------------------------------------------------- | ----------------------- | --------------------------- |
| `APP_PORT` | APIサーバーポート | `4000` | `4000` |
| `APP_ADDRESS` | バインドアドレス | `0.0.0.0` | `127.0.0.1` |
| `ADMIN_WEB_URL` | 管理者ウェブURL | `http://localhost:3000` | `https://admin.company.com` |
| `BASE_URL` | Swaggerドキュメントで使用するAPIサーバーの公開URL | なし | `https://api.example.com` |
| `MYSQL_SECONDARY_URLS` | セカンダリDB URL（JSON配列） | なし | `["mysql://..."]` |
| `AUTO_MIGRATION` | アプリ起動時のDB自動マイグレーション | `true` | `false` |
| `MASTER_API_KEY` | マスター権限APIキー（オプション） | なし | `abc123xyz` |
| `NODE_OPTIONS` | Node実行オプション | なし | `--max_old_space_size=4096` |
---
### SMTP設定（メール認証）
| 環境変数 | 説明 | 例 |
| ------------------------ | -------------------------------- | ------------------------------ |
| `SMTP_HOST` | SMTPサーバーアドレス | `smtp.gmail.com` |
| `SMTP_PORT` | ポート（通常587または465） | `587` |
| `SMTP_USERNAME` | ログインユーザー | `user@example.com` |
| `SMTP_PASSWORD` | ログインパスワードまたはトークン | `app-password` |
| `SMTP_SENDER` | 送信者アドレス | `noreply@company.com` |
| `SMTP_BASE_URL` | メール内リンク用基本URL | `https://feedback.company.com` |
| `SMTP_TLS` | TLS使用有無 | `true` |
| `SMTP_CIPHER_SPEC` | 暗号化仕様 | `TLSv1.2` |
| `SMTP_OPPORTUNISTIC_TLS` | STARTTLSサポート有無 | `true` |
📎 詳細設定については、[SMTP統合ガイド](./04-smtp-configuration.md)を参照してください。
---
## 2. OpenSearch設定（オプション）
| 環境変数 | 説明 | 例 |
| --------------------- | -------------------- | ----------------------- |
| `OPENSEARCH_USE` | OpenSearch有効化有無 | `true` |
| `OPENSEARCH_NODE` | OpenSearchノードURL | `http://localhost:9200` |
| `OPENSEARCH_USERNAME` | 認証ID | `admin` |
| `OPENSEARCH_PASSWORD` | 認証パスワード | `admin123` |
> OpenSearchは検索速度向上およびAI機能改善に使用されます。
---
## 3. 自動フィードバック削除設定
| 環境変数 | 説明 | デフォルト / 条件 |
| ------------------------------------ | -------------------------------- | ----------------------- |
| `AUTO_FEEDBACK_DELETION_ENABLED` | 古いフィードバック削除機能有効化 | `false` |
| `AUTO_FEEDBACK_DELETION_PERIOD_DAYS` | 削除基準日数 | `365`（有効な場合必須） |
---
## 4. APIログExport設定（オプション）
APIは標準のコンソールログに加えて、OpenTelemetry経由でアプリケーションログをexportできます。
<!-- markdownlint-disable MD060 -->
| 環境変数 | 説明 | デフォルト | 例 |
| ---------------------------------- | ----------------------------------------------------------------- | ---------- | ---------------------------------------------------------- |
| `OTEL_EXPORTER_OTLP_LOGS_ENDPOINT` | pino OpenTelemetry transportが使用するOTLP HTTPログエンドポイント | なし | `http://localhost:4319/v1/logs` |
| `OTEL_RESOURCE_ATTRIBUTES` | exportされたログに付与するOpenTelemetry resource attributes | なし | `service.name=abc-user-feedback-api,service.version=1.1.1` |
<!-- markdownlint-enable MD060 -->
> `OTEL_EXPORTER_OTLP_LOGS_ENDPOINT` が設定されている場合、APIはpretty consoleログを継続して出力しつつ、同じログを設定されたOTLP HTTPエンドポイントにも送信します。
> `OTEL_RESOURCE_ATTRIBUTES` も設定すると、`service.name` や `service.version` などの標準OpenTelemetryリソースメタデータを、カンマ区切りの `key=value` 形式でログに付与できます。
> ローカル開発環境では `apps/api/.env.example` の例を基準に設定してください。
### ローカル検証手順
- リポジトリルートでローカルOTELテストスタックを起動します。
```bash
docker compose -f docker/docker-compose.otel-test.yml up -d
```
- `apps/api/.env.example` を参考にして、`apps/api/.env` に次の値を設定します。
```env
OTEL_EXPORTER_OTLP_LOGS_ENDPOINT=http://localhost:4319/v1/logs
OTEL_RESOURCE_ATTRIBUTES=service.name=abc-user-feedback-api,service.version=1.1.1
```
> APIアプリケーション自体がこの値を個別にパースするわけではなく、`pino-opentelemetry-transport` と OpenTelemetry SDK が標準環境変数として処理します。
- APIサーバーを起動し、ログが発生するリクエストを送信します。
```bash
pnpm --dir apps/api dev
```
- OpenTelemetryパイプラインがログを受信していることを確認します。
- Vectorはポート `4319` でOTLPログを受信し、変換済みログレコードをコンソールへ出力します。
- OpenSearchにはホストポート `9201` でアクセスできる必要があります。
- OpenSearch Dashboardsには [http://localhost:5602](http://localhost:5602) でアクセスでき、ローカルスタックが作成した `logs-*` インデックスを確認できます。
> ローカルテストスタックは `docker/docker-compose.otel-test.yml` の定義に従い、OTLP HTTP `4319`、OpenSearch `9201`、OpenSearch Dashboards `5602` を使用します。
---
## 5. ウェブサーバー環境変数
### 必須環境変数
| 環境変数 | 説明 | 例 |
| -------------------------- | ----------------------------------------- | ----------------------- |
| `NEXT_PUBLIC_API_BASE_URL` | クライアントで使用するAPIサーバーアドレス | `http://localhost:4000` |
### オプション環境変数
| 環境変数 | 説明 | デフォルト | 例 |
| -------- | -------------------- | ---------- | ------ |
| `PORT` | フロントエンドポート | `3000` | `3000` |
---
## 6. 設定方法
### Docker Compose例
```yaml
services:
api:
image: line/abc-user-feedback-api
environment:
- JWT_SECRET=changeme
- MYSQL_PRIMARY_URL=mysql://user:pass@mysql:3306/userfeedback
- SMTP_HOST=smtp.sendgrid.net
- SMTP_USERNAME=apikey
- SMTP_PASSWORD=your-sendgrid-key
```
### .envファイル例
```env
# apps/api/.env
JWT_SECRET=changemechangemechangeme
MYSQL_PRIMARY_URL=mysql://root:pass@localhost:3306/db
ACCESS_TOKEN_EXPIRED_TIME=10m
REFRESH_TOKEN_EXPIRED_TIME=1h
SMTP_HOST=smtp.example.com
SMTP_SENDER=noreply@example.com
# BASE_URL=https://api.example.com # リバースプロキシの後ろで提供する場合に設定
# apps/web/.env
NEXT_PUBLIC_API_BASE_URL=http://localhost:4000
```
---
## 7. トラブルシューティングガイド
<!-- markdownlint-disable MD060 -->
| 問題 | 原因と解決策 |
| ---------------------- | --------------------------------------------------------------------------------------------------- |
| 環境変数が認識されない | `.env`位置確認またはコンテナ再起動 |
| DB接続失敗 | `MYSQL_PRIMARY_URL`形式または接続情報確認 |
| SMTPエラー | ポート/TLS設定または認証情報再確認 |
| OpenSearchエラー | ノードURLまたはユーザー認証確認 |
| OTELログexport失敗 | `OTEL_EXPORTER_OTLP_LOGS_ENDPOINT` の設定有無、endpoint URL、OTELスタック起動有無を確認してください |
| JWTトークンエラー | `JWT_SECRET`長さおよび複雑性確認 |
| 環境変数検証失敗 | 必須環境変数欠落またはタイプエラー確認 |
| ポート競合 | `APP_PORT`、`PORT`設定確認 |
<!-- markdownlint-enable MD060 -->
---
## 関連ドキュメント
- [Dockerインストールガイド](./docker-hub-images)
- [SMTP統合ガイド](./smtp-configuration)
- [初期設定ガイド](/ja/user-guide/getting-started)
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/02-developer-guide/01-installation/_category_.json
+5
View File
@@ -0,0 +1,5 @@
{
"position": 1,
"label": "インストール",
"description": "開発環境の設定とインストールガイドです。"
}
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/02-developer-guide/01-installation/index.md
+7
View File
@@ -0,0 +1,7 @@
---
title: インストール
---
import DocCardList from '@theme/DocCardList';
<DocCardList />
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/02-developer-guide/02-api-integration.md
+533
View File
@@ -0,0 +1,533 @@
---
sidebar_position: 2
title: "API統合"
description: "ABC User Feedback APIを活用した外部システム統合方法と実際の実装例を案内します。"
---
# API統合
ABC User Feedbackは**RESTful API**を通じて外部システムと統合できます。プログラムでフィードバックを収集し、イシューを管理し、データを照会できるため、既存のサービスやワークフローに簡単に統合できます。
---
## API基本情報
### 公式APIドキュメント
ABC User Feedbackの**完全なAPIドキュメント**は次のリンクで確認できます：
🔗 **[公式APIドキュメント（Redocly）](https://line.github.io/abc-user-feedback/)**
このドキュメントでは、すべてのエンドポイントの詳細な仕様、リクエスト/レスポンス例、実際にテスト可能なインターフェースを提供します。
### Base URL
```
https://your-domain.com/api
```
### 認証方式
すべてのAPIリクエストは**APIキーベースの認証**を使用します。
```http
X-API-KEY: your-api-key-here
Content-Type: application/json
```
:::warning セキュリティ注意事項
APIキーはサーバーサイドでのみ使用し、クライアント（ブラウザ、モバイルアプリ）に公開しないでください。
:::
### APIキー発行方法
1. **管理者ページアクセス**: ABC User Feedback管理者ページにログイン
2. **プロジェクト設定**: 該当プロジェクトの設定ページに移動
3. **APIキー管理**: 「APIキー管理」メニューから新しいAPIキーを生成
4. **キーコピー**: 生成されたAPIキーを安全な場所に保存
:::info APIキー権限
APIキーはプロジェクトごとに発行され、該当プロジェクトのデータにのみアクセスできます。
:::
---
## 主要APIエンドポイント例
### 1. フィードバック作成
#### 基本フィードバック作成
```javascript
const createFeedback = async (
projectId,
channelId,
message,
issueNames = []
) => {
const response = await fetch(
`/api/projects/${projectId}/channels/${channelId}/feedbacks`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
"X-API-KEY": "your-api-key-here",
},
body: JSON.stringify({
message: message,
issueNames: issueNames,
}),
}
);
return await response.json();
};
// 使用例
const feedback = await createFeedback(1, 1, "決済エラーが発生しました", [
"決済",
"エラー",
]);
```
### 2. フィードバック照会
#### チャネル別フィードバック検索
```javascript
const searchFeedbacks = async (
projectId,
channelId,
searchText,
limit = 10,
page = 1
) => {
const response = await fetch(
`/api/projects/${projectId}/channels/${channelId}/feedbacks/search`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
"X-API-KEY": "your-api-key-here",
},
body: JSON.stringify({
limit: limit,
page: page,
query: {
searchText: searchText,
createdAt: {
gte: "2024-01-01",
lt: "2024-12-31",
},
},
sort: {
createdAt: "DESC",
},
}),
}
);
return await response.json();
};
// 使用例
const feedbacks = await searchFeedbacks(1, 1, "決済", 20, 1);
console.log(
`合計${feedbacks.meta.totalItems}件のフィードバック中${feedbacks.items.length}件を照会`
);
```
#### 単一フィードバック照会
```javascript
const getFeedbackById = async (projectId, channelId, feedbackId) => {
const response = await fetch(
`/api/projects/${projectId}/channels/${channelId}/feedbacks/${feedbackId}`,
{
method: "GET",
headers: {
"X-API-KEY": "your-api-key-here",
},
}
);
return await response.json();
};
// 使用例
const feedback = await getFeedbackById(1, 1, 123);
console.log("フィードバック詳細:", feedback);
```
#### フィードバック更新
```javascript
const updateFeedback = async (projectId, channelId, feedbackId, updateData) => {
const response = await fetch(
`/api/projects/${projectId}/channels/${channelId}/feedbacks/${feedbackId}`,
{
method: "PUT",
headers: {
"Content-Type": "application/json",
"X-API-KEY": "your-api-key-here",
},
body: JSON.stringify(updateData),
}
);
return await response.json();
};
// 使用例
const updatedFeedback = await updateFeedback(1, 1, 123, {
message: "更新されたフィードバック内容",
issueNames: ["更新されたイシュー"],
});
```
#### フィードバック削除
```javascript
const deleteFeedbacks = async (projectId, channelId, feedbackIds) => {
const response = await fetch(
`/api/projects/${projectId}/channels/${channelId}/feedbacks`,
{
method: "DELETE",
headers: {
"Content-Type": "application/json",
"X-API-KEY": "your-api-key-here",
},
body: JSON.stringify({
feedbackIds: feedbackIds,
}),
}
);
return await response.json();
};
// 使用例
const result = await deleteFeedbacks(1, 1, [123, 124, 125]);
console.log("削除完了:", result);
```
### 3. イシュー管理
#### イシュー作成
```javascript
const createIssue = async (projectId, name, description) => {
const response = await fetch(`/api/projects/${projectId}/issues`, {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-API-KEY": "your-api-key-here",
},
body: JSON.stringify({
name: name,
description: description,
}),
});
return await response.json();
};
// 使用例
const issue = await createIssue(
1,
"決済エラー",
"ユーザーが決済過程でエラーを経験"
);
```
#### イシュー検索
```javascript
const searchIssues = async (projectId, query = {}) => {
const response = await fetch(`/api/projects/${projectId}/issues/search`, {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-API-KEY": "your-api-key-here",
},
body: JSON.stringify({
limit: 10,
page: 1,
query: query,
sort: {
createdAt: "DESC",
},
}),
});
return await response.json();
};
// 使用例
const issues = await searchIssues(1, { name: "決済" });
```
#### イシュー照会
```javascript
const getIssueById = async (projectId, issueId) => {
const response = await fetch(`/api/projects/${projectId}/issues/${issueId}`, {
method: "GET",
headers: {
"X-API-KEY": "your-api-key-here",
},
});
return await response.json();
};
// 使用例
const issue = await getIssueById(1, 123);
console.log("イシュー詳細:", issue);
```
#### イシュー更新
```javascript
const updateIssue = async (projectId, issueId, updateData) => {
const response = await fetch(`/api/projects/${projectId}/issues/${issueId}`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
"X-API-KEY": "your-api-key-here",
},
body: JSON.stringify(updateData),
});
return await response.json();
};
// 使用例
const updatedIssue = await updateIssue(1, 123, {
name: "更新されたイシュー名",
description: "更新されたイシュー説明",
});
```
#### イシュー削除
```javascript
const deleteIssues = async (projectId, issueIds) => {
const response = await fetch(`/api/projects/${projectId}/issues`, {
method: "DELETE",
headers: {
"Content-Type": "application/json",
"X-API-KEY": "your-api-key-here",
},
body: JSON.stringify({
issueIds: issueIds,
}),
});
return await response.json();
};
// 使用例
const result = await deleteIssues(1, [123, 124, 125]);
console.log("イシュー削除完了:", result);
```
#### フィードバックにイシュー追加
```javascript
const addIssueToFeedback = async (
projectId,
channelId,
feedbackId,
issueId
) => {
const response = await fetch(
`/api/projects/${projectId}/channels/${channelId}/feedbacks/${feedbackId}/issues/${issueId}`,
{
method: "POST",
headers: {
"X-API-KEY": "your-api-key-here",
},
}
);
return await response.json();
};
// 使用例
const result = await addIssueToFeedback(1, 1, 123, 456);
console.log("イシュー追加完了:", result);
```
#### フィードバックからイシュー削除
```javascript
const removeIssueFromFeedback = async (
projectId,
channelId,
feedbackId,
issueId
) => {
const response = await fetch(
`/api/projects/${projectId}/channels/${channelId}/feedbacks/${feedbackId}/issues/${issueId}`,
{
method: "DELETE",
headers: {
"X-API-KEY": "your-api-key-here",
},
}
);
return await response.json();
};
// 使用例
const result = await removeIssueFromFeedback(1, 1, 123, 456);
console.log("イシュー削除完了:", result);
```
### 4. プロジェクトとチャネル情報
#### プロジェクト情報照会
```javascript
const getProjectInfo = async (projectId) => {
const response = await fetch(`/api/projects/${projectId}`, {
method: "GET",
headers: {
"X-API-KEY": "your-api-key-here",
},
});
return await response.json();
};
// 使用例
const project = await getProjectInfo(1);
console.log("プロジェクト情報:", project);
```
#### チャネルフィールド照会
```javascript
const getChannelFields = async (projectId, channelId) => {
const response = await fetch(
`/api/projects/${projectId}/channels/${channelId}/fields`,
{
method: "GET",
headers: {
"X-API-KEY": "your-api-key-here",
},
}
);
return await response.json();
};
// 使用例
const fields = await getChannelFields(1, 1);
console.log("チャネルフィールド:", fields);
```
---
## SwaggerによるAPIテスト
ABC User Feedbackは**Swagger UI**を提供して、APIを簡単にテストし理解できます。
### Swaggerアクセス方法
**APIサーバーアドレス + `/docs`**でアクセスします：
```
https://your-domain.com/api/docs
```
または**ReDoc形式**で：
```
https://your-domain.com/api/docs/redoc
```
### SwaggerでのAPIキー設定
1. Swagger UI上部の**"Authorize"**ボタンをクリック
2. **X-API-KEY**フィールドに発行されたAPIキーを入力
3. **"Authorize"**をクリックして認証完了
これ以降、すべてのAPIリクエストで自動的にAPIキーが含まれ、テストできます。
### Swagger活用のヒント
- **"Try it out"**ボタンで実際のAPI呼び出しテスト
- **Response body**セクションで実際のレスポンスデータ構造を確認
- **Schema**タブでリクエスト/レスポンスデータ形式の詳細を確認
- **cURL**コマンドを自動生成してCLIテスト可能
---
## エラー処理と再試行ロジック
### HTTPステータスコード
| ステータスコード | 意味 | 処理方法 |
| --------- | -------------- | ----------------------- |
| **200** | 成功 | 正常処理 |
| **400** | 不正なリクエスト | リクエストデータ検証 |
| **401** | 認証失敗 | APIキー確認 |
| **403** | 権限なし | プロジェクトアクセス権限確認 |
| **404** | リソースなし | ID値確認 |
| **429** | リクエスト制限超過 | しばらくしてから再試行 |
| **500** | サーバーエラー | 再試行またはサポートチームに問い合わせ |
## レスポンスデータ解析方法
### ページネーションレスポンス構造
```json
{
"meta": {
"itemCount": 10,
"totalItems": 100,
"itemsPerPage": 10,
"totalPages": 10,
"currentPage": 1
},
"items": [
{
"id": 1,
"message": "フィードバック内容",
"createdAt": "2024-01-01T00:00:00.000Z",
"issues": [
{
"id": 1,
"name": "イシュー名"
}
]
}
]
}
```
## セキュリティとパフォーマンス最適化
### APIキーセキュリティ
- **環境変数使用**: APIキーを環境変数で管理
- **サーバーサイドのみ**: クライアントにAPIキーを公開しない
- **キーローテーション**: 定期的なAPIキー交換
- **IPホワイトリスト**: 可能な場合は特定IPからのみアクセス許可
### パフォーマンス最適化
- **ページネーション活用**: 大量データ照会時に適切なlimit設定
- **必要なフィールドのみリクエスト**: クエリ最適化でレスポンス速度改善
- **キャッシング戦略**: 頻繁に照会するデータはクライアントサイドキャッシング
- **バッチ処理**: 複数のリクエストをまとめて処理
## 関連ドキュメント
- [APIキー管理](/ja/user-guide/settings/api-key-management) - UIからAPIキーを発行する方法
- [画像設定](/ja/user-guide/settings/image-setting) - 画像アップロードAPI使用のための設定
- [Webhook統合](/ja/user-guide/settings/webhook-management) - APIと一緒に活用できるリアルタイム通知設定
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/02-developer-guide/03-oauth-integration.md
+172
View File
@@ -0,0 +1,172 @@
---
sidebar_position: 3
title: "OAuth統合"
description: "Google OAuthおよびカスタムOAuthプロバイダーによるシングルサインオン（SSO）統合方法を案内します。"
---
# OAuth統合
ABC User FeedbackでOAuth 2.0ベースのシングルサインオン（SSO）を設定すると、ユーザーは別のアカウント作成なしで既存のアカウント（Google、Microsoft、GitHubなど）でログインできます。これはユーザーの利便性を向上させ、企業環境で統合認証を実装するために不可欠です。
---
## OAuth統合の概要
ABC User FeedbackでサポートされるOAuth方式：
### 1. Google OAuth
- 追加設定なしでデフォルト提供
- Googleアカウントによる簡単なログイン
### 2. カスタムOAuthプロバイダー
- 社内認証システム
- その他のOAuth 2.0/OpenID Connect互換サービス
OAuthを設定すると、既存のメールログインと並行して使用でき、組織ポリシーに応じてOAuthのみを許可するように制限することもできます。
---
## Google OAuth統合設定
### Google Cloud Consoleでの設定
#### 1. Google Cloud Consoleにアクセス
[Google Cloud Console](https://console.cloud.google.com)にアクセスしてプロジェクトを作成するか、既存のプロジェクトを選択します。
#### 2. OAuth 2.0クライアントID作成
1. **APIとサービス > 認証情報**メニューに移動
2. **+ 認証情報を作成 > OAuthクライアントID**を選択
3. アプリケーションタイプを**ウェブアプリケーション**として選択
#### 3. 承認済みリダイレクトURI設定
**承認済みリダイレクトURI**に次のURLを追加します：
```
https://your-domain.com/auth/oauth-callback
```
例：
- `https://feedback.company.com/auth/oauth-callback`
- `http://localhost:3000/auth/oauth-callback`（開発環境）
#### 4. クライアント情報確認
作成完了後、次の情報を確認してコピーしておきます：
- **クライアントID**: `1234567890-abc123def456.apps.googleusercontent.com`
- **クライアントシークレット**: `GOCSPX-abcdef123456`
### ABC User FeedbackでのGoogle OAuth設定
Google OAuthを使用するには、次の手順に従って設定する必要があります：
#### 1. Google OAuth設定有効化
**Settings > Login Management**で：
1. **OAuth2.0 Login**トグルを有効化
2. **Login Button Type**を"Google Login"として選択
3. Google Cloud Consoleで取得した情報を入力：
- **Client ID**: Google Cloud Consoleで作成したクライアントID
- **Client Secret**: Google Cloud Consoleで作成したクライアントシークレット
- **Authorization Code Request URL**: `https://accounts.google.com/o/oauth2/v2/auth`
- **Scope**: `openid email profile`
- **Access Token URL**: `https://oauth2.googleapis.com/token`
- **User Profile Request URL**: `https://www.googleapis.com/oauth2/v2/userinfo`
- **Email Key**: `email`
#### 2. リダイレクトURI登録
Google Cloud Consoleで次のURLを**承認済みリダイレクトURI**に追加：
```
https://your-domain.com/auth/oauth-callback
```
開発環境の場合：
```
http://localhost:3000/auth/oauth-callback
```
---
## カスタムOAuthプロバイダー統合
### 社内認証システム統合
ABC User Feedbackは、企業環境で使用される社内認証システムと統合できます。ほとんどの社内認証システムはOAuth 2.0またはOpenID Connect標準をサポートしているため、標準OAuthフローを通じて統合が可能です。
#### 社内認証システム設定要件
社内認証システムと統合するには、次の情報が必要です：
1. **OAuthクライアント登録**
- クライアントID
- クライアントシークレット
- リダイレクトURI: `https://your-domain.com/auth/oauth-callback`
2. **OAuthエンドポイント情報**
- Authorization URL（認証リクエストURL）
- Token URL（トークン交換URL）
- User Info URL（ユーザー情報照会URL）
3. **権限範囲（Scope）**
- ユーザープロフィール情報アクセス権限
- メールアドレスアクセス権限
#### 一般的な社内認証システム例
| 項目 | 説明 | 社内システム例 |
| ---------------------------------- | ---------------------------------- | ------------------------------------------ |
| **Login Button Type** | ログインボタンタイプ | `CUSTOM` |
| **Login Button Name** | ログインボタンに表示される名前 | `社内アカウントでログイン` |
| **Client ID** | OAuthクライアントID | `company-auth-client-123` |
| **Client Secret** | クライアントシークレット | `company-secret-abc123` |
| **Authorization Code Request URL** | ユーザー認証リクエストURL | `https://auth.company.com/oauth/authorize` |
| **Scope** | リクエストする権限範囲 | `openid email profile` |
| **Access Token URL** | トークンリクエストURL | `https://auth.company.com/oauth/token` |
| **User Profile Request URL** | ユーザー情報照会API | `https://auth.company.com/api/user` |
| **Email Key** | ユーザー情報JSONのメールフィールド名 | `email`または`mail` |
### その他のOAuth 2.0/OpenID Connect互換サービス
ABC User Feedbackは、OAuth 2.0またはOpenID Connect標準に準拠するすべての認証サービスと統合できます。
#### サポート可能なサービスタイプ
- **OpenID Connectプロバイダー**: 標準OpenID Connectプロトコルをサポートするサービス
- **OAuth 2.0プロバイダー**: OAuth 2.0 Authorization Codeフローをサポートするサービス
- **カスタム認証サーバー**: 標準OAuthエンドポイントを提供する自己構築サービス
#### 統合設定方法
**Settings > Login Management**でカスタムOAuthを設定します：
1. **管理者アカウントでログイン**後、**Settings > Login Management**メニューに移動
2. **OAuth2.0 Login**トグルを有効化
3. **Login Button Type**を`CUSTOM`として選択
4. 認証サービスプロバイダーから受け取った情報を入力：
- **Login Button Name**: ログインボタンに表示されるテキスト（例：「社内アカウントでログイン」）
- **Client ID**: OAuthクライアント識別子
- **Client Secret**: クライアント認証シークレット
- **Authorization Code Request URL**: ユーザー認証リクエストURL
- **Scope**: リクエストする権限範囲（スペース区切り、例：「openid email profile」）
- **Access Token URL**: アクセストークンリクエストURL
- **User Profile Request URL**: ユーザープロフィール情報照会URL
- **Email Key**: ユーザー情報JSONのメールフィールド名（例：「email」または「mail」）
---
## 関連ドキュメント
- [ログイン管理](/ja/user-guide/settings/tenant-settings) - UIでOAuthを設定する方法
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/02-developer-guide/04-webhook-integration.md
+303
View File
@@ -0,0 +1,303 @@
---
sidebar_position: 4
title: 'ウェブフック統合'
description: 'ウェブフックを活用して外部システムとリアルタイム統合する方法と実装例を案内します。'
---
# ウェブフック統合
ウェブフックにより、ABC User Feedbackで発生する主要イベントをリアルタイムで外部システムに配信できます。Slack通知、自動化ワークフロー、カスタム分析システムなどと統合できます。
---
## サポートされるイベントタイプ
ABC User Feedbackでサポートされるイベントは次のとおりです：
### 1. FEEDBACK_CREATION
新しいフィードバックが作成されたときに発生します。
**リクエストヘッダー：**
```
Content-Type: application/json
x-webhook-token: your-secret-token
```
**ペイロード例：**
```json
{
"event": "FEEDBACK_CREATION",
"data": {
"feedback": {
"id": 123,
"createdAt": "2024-01-15T10:30:00.000Z",
"updatedAt": "2024-01-15T10:30:00.000Z",
"message": "ユーザーフィードバック内容",
"userEmail": "user@example.com",
"issues": [
{
"id": 456,
"createdAt": "2024-01-15T10:30:00.000Z",
"updatedAt": "2024-01-15T10:30:00.000Z",
"name": "バグレポート",
"description": "イシュー説明",
"status": "OPEN",
"externalIssueId": "EXT-123",
"feedbackCount": 5
}
]
},
"channel": {
"id": 1,
"name": "ウェブサイトフィードバック"
},
"project": {
"id": 1,
"name": "My Project"
}
}
}
```
### 2. ISSUE_CREATION
新しいイシューが作成されたときに発生します。
**ペイロード例：**
```json
{
"event": "ISSUE_CREATION",
"data": {
"issue": {
"id": 789,
"createdAt": "2024-01-15T11:00:00.000Z",
"updatedAt": "2024-01-15T11:00:00.000Z",
"name": "新しいイシュー",
"description": "イシュー説明",
"status": "OPEN",
"externalIssueId": "EXT-789",
"feedbackCount": 0
},
"project": {
"id": 1,
"name": "My Project"
}
}
}
```
### 3. ISSUE_STATUS_CHANGE
イシューステータスが変更されたときに発生します。
**ペイロード例：**
```json
{
"event": "ISSUE_STATUS_CHANGE",
"data": {
"issue": {
"id": 789,
"createdAt": "2024-01-15T11:00:00.000Z",
"updatedAt": "2024-01-15T12:00:00.000Z",
"name": "イシュー名",
"description": "イシュー説明",
"status": "IN_PROGRESS",
"externalIssueId": "EXT-789",
"feedbackCount": 3
},
"project": {
"id": 1,
"name": "My Project"
},
"previousStatus": "OPEN"
}
}
```
### 4. ISSUE_ADDITION
フィードバックにイシューが追加されたときに発生します。
**ペイロード例：**
```json
{
"event": "ISSUE_ADDITION",
"data": {
"feedback": {
"id": 123,
"createdAt": "2024-01-15T10:30:00.000Z",
"updatedAt": "2024-01-15T10:30:00.000Z",
"message": "ユーザーフィードバック内容",
"issues": [
{
"id": 456,
"name": "既存イシュー",
"status": "OPEN"
},
{
"id": 789,
"name": "新しく追加されたイシュー",
"status": "OPEN"
}
]
},
"channel": {
"id": 1,
"name": "ウェブサイトフィードバック"
},
"project": {
"id": 1,
"name": "My Project"
},
"addedIssue": {
"id": 789,
"createdAt": "2024-01-15T11:00:00.000Z",
"updatedAt": "2024-01-15T11:00:00.000Z",
"name": "新しく追加されたイシュー",
"description": "イシュー説明",
"status": "OPEN",
"externalIssueId": "EXT-456",
"feedbackCount": 1
}
}
}
```
---
## ウェブフック受信サーバー実装
ウェブフックを受信するためのHTTPサーバーを実装する必要があります。サーバーは次の要件を満たす必要があります：
### 基本要件
1. **HTTP POSTリクエスト処理**: ウェブフックはHTTP POSTで送信されます
2. **JSONペイロード解析**: リクエスト本文はJSON形式です
3. **200レスポンスコード返却**: 処理成功時は必ず200ステータスコードで応答
### 実装例（Node.js/Express）
```javascript
const express = require('express');
const app = express();
app.use(express.json());
app.post('/webhook', (req, res) => {
const { event, data } = req.body;
const token = req.headers['x-webhook-token'];
// トークン検証
if (token !== 'your-secret-token') {
return res.status(401).json({ error: 'Unauthorized' });
}
// イベント処理
switch (event) {
case 'FEEDBACK_CREATION':
console.log('新しいフィードバック作成:', data.feedback);
// フィードバック処理ロジック
break;
case 'ISSUE_CREATION':
console.log('新しいイシュー作成:', data.issue);
// イシュー処理ロジック
break;
case 'ISSUE_STATUS_CHANGE':
console.log(
'イシューステータス変更:',
data.issue,
'以前のステータス:',
data.previousStatus,
);
// ステータス変更処理ロジック
break;
case 'ISSUE_ADDITION':
console.log('イシュー追加:', data.addedIssue);
// イシュー追加処理ロジック
break;
}
res.status(200).json({ success: true });
});
app.listen(3000, () => {
console.log('ウェブフックリスナーサーバーがポート3000で実行中です。');
});
```
---
## セキュリティと再試行ポリシー
### セキュリティ考慮事項
- **トークン検証**: `x-webhook-token`ヘッダーを通じてリクエストを検証します
- **HTTPS使用**: 本番環境では必ずHTTPSを使用してください
### 再試行ポリシー
- **自動再試行**: ABC User Feedbackはウェブフック送信失敗時に最大3回まで自動再試行します
- **再試行間隔**: 各再試行は3秒後に実行されます
### エラー処理
- **4xxエラー**: クライアントエラーと見なされ、再試行しません
- **5xxエラー**: サーバーエラーと見なされ、再試行します
- **ネットワークエラー**: 接続失敗時に再試行します
---
## 活用事例
### 1. 自動翻訳
```javascript
// FEEDBACK_CREATIONイベントを受信して自動翻訳
if (event === 'FEEDBACK_CREATION') {
const translatedMessage = await translateText(data.feedback.message);
// 翻訳された内容をフィードバックに更新
await updateFeedback(data.feedback.id, { translatedMessage });
}
```
### 2. 外部チケットシステム統合
```javascript
// ISSUE_CREATIONイベントを受信して外部システムにチケット作成
if (event === 'ISSUE_CREATION') {
const ticketId = await createExternalTicket({
title: data.issue.name,
description: data.issue.description,
priority: 'medium',
});
// 外部チケットIDをイシューに保存
await updateIssue(data.issue.id, { externalIssueId: ticketId });
}
```
### 3. 通知システム統合
```javascript
// ISSUE_STATUS_CHANGEイベントを受信してチームに通知
if (event === 'ISSUE_STATUS_CHANGE') {
await sendSlackNotification({
channel: '#feedback-alerts',
message: `イシュー"${data.issue.name}"のステータスが${data.previousStatus}から${data.issue.status}に変更されました。`,
});
}
```
---
## 関連ドキュメント
- [ウェブフック管理](/ja/user-guide/settings/webhook-management) - UIでウェブフックを設定する方法
- [API統合](./02-api-integration.md) - ウェブフックと一緒に使用できるAPI活用
- [イシュー管理](/ja/user-guide/issue-management) - イシューステータス変更イベントの理解
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/02-developer-guide/_category_.json
+5
View File
@@ -0,0 +1,5 @@
{
"position": 3,
"label": "開発者ガイド"
}
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/02-developer-guide/index.md
+7
View File
@@ -0,0 +1,7 @@
---
title: 開発者ガイド
---
import DocCardList from '@theme/DocCardList';
<DocCardList />
apps/docs/i18n/ja/docusaurus-theme-classic/footer.json
+14
View File
@@ -0,0 +1,14 @@
{
"copyright": {
"message": "Copyright © {year} ABC User Feedback.",
"description": "The footer copyright"
},
"link.title.Docs": {
"message": "ドキュメント",
"description": "The title of the footer links column with title=Docs in the footer"
},
"link.title.More": {
"message": "その他",
"description": "The title of the footer links column with title=More in the footer"
}
}
apps/docs/i18n/ja/docusaurus-theme-classic/navbar.json
+18
View File
@@ -0,0 +1,18 @@
{
"title": {
"message": "ABC User Feedback",
"description": "The title in the navbar"
},
"item.label.Docs": {
"message": "ドキュメント",
"description": "Navbar item with label Docs"
},
"item.label.GitHub": {
"message": "GitHub",
"description": "Navbar item with label GitHub"
},
"logo.alt": {
"message": "ロゴ",
"description": "The alt text of navbar logo"
}
}