> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dify.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# チャット Web アプリ

> 永続的な履歴とインタラクティブ機能を備えたフル機能の会話インターフェースにチャットフローを変換

> このドキュメントは AI によって自動翻訳されています。不正確な部分がある場合は、[英語版](/en/cloud/use-dify/publish/webapp/chatflow-webapp) を参照してください。

チャット Web アプリは、あなたのチャットフローを完全な対話体験に変換します。ユーザーは永続的なチャットセッション、スマートなインタラクション、そしてあなたが設定したすべての機能を、何もインストールすることなく利用できます。

## チャットアプリの仕組み

チャットフローを公開すると、自動的に Web アプリになります。システムは以下のようなレスポンシブインターフェースを作成します：

* **対話コンテキストを維持** し、ユーザーセッション間で継続
* **すべてのオーケストレーション設定を継承** し、チャットフロー設定から引き継ぎ
* **あらゆる画面サイズに対応** し、モバイルからデスクトップまでカバー
* **ユーザー認証を処理** し、アクセス制御を有効にしている場合

<Tip>
  単発使用のテキストジェネレーターとは異なり、チャットアプリは会話のメモリを維持し、ユーザーが以前のやり取りを基に構築できるようにします。
</Tip>

## インタラクティブ機能

Web アプリには、チャットフロー設定に基づいて以下の機能が自動的に含まれます：

<CardGroup cols={2}>
  <Card title="対話前フォーム" icon="clipboard-list">
    チャット開始前にコンテキストを収集。会話中に質問するよりも効果的
  </Card>

  <Card title="AI 会話スターター" icon="message">
    役立つ開始メッセージで空白ページ問題を解決
  </Card>

  <Card title="スマートフォローアップ" icon="arrow-right">
    システムが各応答後に 3 つの文脈に沿った次の質問を生成
  </Card>

  <Card title="音声入力" icon="microphone">
    音声からテキスト変換により、ユーザーはタイピングの代わりに話すことが可能
  </Card>

  <Card title="ソース引用" icon="quote">
    参考文献により情報の出所を正確に表示
  </Card>

  <Card title="応答フィードバック" icon="thumbs-up">
    ユーザーが応答を評価してアプリの改善に貢献
  </Card>
</CardGroup>

## 対話前セットアップ

チャットフローが変数を使用する場合、ユーザーはチャット開始前にフォームに入力します。これにより、会話の流れを中断することなく、事前にコンテキスト収集が行われます。

<Frame>
  ![対話前変数フォーム](https://assets-docs.dify.ai/dify-enterprise-mintlify/en/guides/application-publishing/launch-your-webapp-quickly/8decae00eeea24622e1f2ef73d4c447e.png)
</Frame>

ユーザーエクスペリエンスの流れ：

<Steps>
  <Step title="ユーザーがアプリにアクセス">
    必要なコンテキスト情報を求めるクリーンなフォームが表示されます。
  </Step>

  <Step title="フォーム完了でチャットが解除">
    「会話を開始」ボタンは、必須フィールドが入力された後にのみアクティブになります。
  </Step>

  <Step title="AI が完全なコンテキストを取得">
    必要なすべての背景情報を持って会話が開始されます。
  </Step>
</Steps>

<Warning>
  フォームフィールドはすべて摩擦を追加します。応答を意味のある形で改善する情報のみを求めてください。
</Warning>

## 対話体験

チャットが開始されると、ユーザーは自然なインタラクション向けに設計されたインターフェースを利用できます：

<Frame>
  ![応答オプション付きチャットインターフェース](https://assets-docs.dify.ai/dify-enterprise-mintlify/en/guides/application-publishing/launch-your-webapp-quickly/5b7a6f950ed8a2ce3a705f362b4813fe.png)
</Frame>

すべての AI 応答には以下のアクションが含まれます：

* **コピーボタン** - 簡単な共有やメモ取りのためのワンクリックコピー
* **フィードバックボタン** - 時間をかけてアプリを改善するためのいいね/だめ評価
* **フォローアップ提案** - AI が 3 つの文脈に関連する次の質問を生成

## セッション管理

ユーザーは、現代のメッセージングアプリのように複数の会話スレッドを管理できます：

<Frame>
  ![会話管理サイドバー](https://assets-docs.dify.ai/dify-enterprise-mintlify/en/guides/application-publishing/launch-your-webapp-quickly/46372ad4d79a3ea943d43f9434974956.png)
</Frame>

**会話コントロール**：

* **新規開始** - 以前の会話のコンテキストを失うことなく新しい会話を開始
* **重要なものをピン留め** - 重要な会話をリストの上部でアクセス可能に保持
* **完了したものを削除** - もはや関連性のない会話をクリーンアップ

<Info>
  各会話スレッドは独自のメモリとコンテキストを維持します。ユーザーは異なるトピックやプロジェクト間でシームレスに切り替えることができます。
</Info>

## 対話オープナー

対話オープナーを有効にして、威圧的な空白チャット画面を解決します：

<Frame>
  ![AI 対話オープナーメッセージ](https://assets-docs.dify.ai/dify-enterprise-mintlify/en/guides/application-publishing/launch-your-webapp-quickly/22e59e509296d25eb85cbd541e161c6d.png)
</Frame>

ユーザーが新しい会話を開始すると、AI は積極的に自己紹介し、その機能を説明します。これにより、ユーザーは何ができるかをすぐに理解し、エンゲージメントが向上します。

<Tip>
  対話オープナーは、ユーザーが利用可能なすべての機能を知らない可能性がある特化したアプリで特に効果的です。
</Tip>

## フォローアップ質問

システムは各 AI 応答の後に、文脈に沿ったフォローアップ質問を自動生成します：

<Frame>
  ![フォローアップ質問提案](https://assets-docs.dify.ai/dify-enterprise-mintlify/en/guides/application-publishing/launch-your-webapp-quickly/f88a7ffd777d51299f8b604249c044b3.png)
</Frame>

これらの提案は：

* **文脈に関連** し、現在の会話トピックに適している
* \*\*動的に生成基づいている
* **クリック可能なショートカット** で、ユーザーがより深く探求したり関連トピックに移行したりするのを支援

## 音声入力

音声からテキスト変換により、チャットアプリを音声ファーストの体験に変換します：

<Frame>
  ![音声からテキスト変換マイクボタン](https://assets-docs.dify.ai/dify-enterprise-mintlify/en/guides/application-publishing/launch-your-webapp-quickly/3a64c79792f1166301403f6c44cf4c85.png)
</Frame>

**仕組み**：

1. チャットフローで音声からテキスト変換を有効にすると、マイクボタンが表示されます
2. ユーザーはクリックして質問の録音を開始します
3. 話している間に、音声がリアルタイムでテキストに変換されます
4. 送信前にテキストを編集するか、すぐに送信することができます

<Warning>
  ユーザーはブラウザでマイク許可を付与する必要があります。アプリは初回音声入力使用時にこの許可を求めます。
</Warning>

## 引用と帰属

この機能を有効にすると、AI がユーザーの質問に回答する際にナレッジベースの内容を参照した場合、その参照元の具体的な情報源が回答の下に表示されます。

引用と帰属は情報源の透明性を提供することで、ユーザーの信頼を築きます。ユーザーはクリックして詳細を確認したり、ソース資料をさらに探求したりできます。
