syncfusion-angular-ai-assistview

Syncfusion Angular AI AssistView コンポーネント

コンポーネントの概要

Syncfusion AI AssistView は、会話型 AI アプリケーションを構築するための、すぐに使えるインターフェースを提供する強力な Angular コンポーネントです。

主な機能：

• 会話管理 - 履歴、永続化、Markdown のレンダリングに対応したプロンプトと応答のペアを管理します
• AI サービスとの統合 - ストリーミングに対応し、OpenAI、Gemini、Ollama、Lite-LLM、MCP プロバイダーに接続します
• 思考の連鎖 - 注入可能な AssistThinking モジュールを通じて、複数の段階と動的なステータス更新に対応した折りたたみ可能な思考ブロックとして、AI の推論を可視化します
• 生成 UI - blocks と registerToolUI を使用して、AI の応答内にインタラクティブなツール、チャート、カスタムコンポーネントを表示します
• 音声機能 - 11 個の設定可能なプロパティと 4 個のイベントを備えた、組み込みの音声テキスト変換機能です
• ツールバーシステム - カスタムアクションとタグディレクティブに対応した 4 種類のツールバー（ヘッダー、プロンプト、応答、フッター）を備えています
• テレメトリ - メトリクス（ステータス、所要時間、ツール呼び出し、トークン、モデル）を含む、組み込みの応答ごとのテレメトリボタン、カスタマイズ用の beforeReport イベント、および使用状況データを表示するための addPromptResponse の TelemetryData 引数を備えています
• メンション - プロンプトエディターでトリガー文字を使ってメンションピッカーを表示します。ローカルまたは DataManager のデータソース、フィルタリング、ハイライト表示、ポップアップサイズの設定、表示・項目・レコードなしの各テンプレートに対応しています
• ビュー管理 - プログラムによる activeView の制御と動的な切り替えに対応した、複数のビューを備えています
• イベントとインタラクション - 型付きイベント引数（PromptRequestEventArgs、PromptChangedEventArgs、StopRespondingEventArgs）を備えています
• ファイル添付 - ファイルのアップロードと種類・サイズの制限に対応し、添付ファイルのライフサイクル全体を扱うイベント（beforeAttachmentUpload、attachmentUploadSuccess、attachmentUploadFailure、attachmentRemoved、attachmentRemoving、attachmentClick）を備えています
• テンプレート - 柔軟なテンプレートを使用して、プロンプト、応答、候補、バナー、フッター、応答アニメーションをカスタマイズできます。ブランドに合わせた読み込み状態を表示する、応答ごとの responseAnimationTemplate にも対応しています
• メソッド - プログラムによる応答の追加・更新、プロンプトの実行、コンポーネント動作の制御が可能です
• グローバリゼーション - 完全な RTL サポートと、ロケールに基づく書式設定を備えた 12 以上の言語のローカライズに対応しています
• カスタマイズ可能な UI - 高さ、幅、CSS クラス、HTML 属性、テーマをカスタマイズできます

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• インストールと依存関係の設定
• Angular 環境の設定
• コンポーネントの基本的な初期化
• CSS のインポートとテーマの設定
• 最初の実行可能なサンプル

コア機能と会話管理

📄 参照： references/assist-view-basics.md

• プロンプトテキストとプレースホルダーの設定
• プロンプトと応答のコレクションの管理
• Markdown による応答のレンダリング
• プロンプト候補の設定
• ユーザーとアシスタントのアバターのカスタマイズ
• UI コントロール（クリアボタン、最下部へのスクロール）
• コンポーネントの設定（height、width、showHeader、cssClass、htmlAttributes）
• enablePersistence による状態の永続化
• グローバリゼーションとローカライズ（12 以上の言語に対応した locale プロパティ）
• アラビア語、ヘブライ語、ペルシア語、ウルドゥー語向けの enableRtl による RTL サポート

外観とスタイル設定

📄 参照： references/appearance-customization.md

• コンポーネントの幅と高さの設定
• カスタム CSS クラスの適用
• テーマのカスタマイズ
• レスポンシブデザインのパターン

複数のビューとカスタムコンテンツ

📄 参照： references/custom-views.md

• カスタムビューモデルの追加
• ビューの種類（Assist と Custom）
• ビューの設定と命名
• 1 つのコンポーネント内で複数のビューを管理
• activeView プロパティによるプログラムからのビュー切り替え
• 動的なビュー移動のパターン
• ビュー履歴とパンくずナビゲーション
• ワークフローに基づくビュー切り替え
• ユーザーロールに応じた条件付きビュー表示

プログラムからの制御とメソッド

📄 参照： references/methods-and-actions.md

• プロンプト応答の追加（文字列とオブジェクト）
• イベント引数の完全なリファレンスセクション
• 6 つのプロパティを持つ PromptRequestEventArgs（prompt、attachedFiles、promptSuggestions、cancel など）
• 5 つのプロパティを持つ PromptChangedEventArgs（value、previousValue、element、event）
• 応答をキャンセルするための StopRespondingEventArgs
• FileInfo インターフェイスを持つ AttachmentClickEventArgs
• すべてのイベント形式を含む、本番環境ですぐに使える例）
• プロンプトの動的な実行
• 応答処理のパターン
• プログラムによる操作

思考の連鎖

📄 参照： references/chain-of-thoughts.md

• 注入可能な AssistThinking モジュールで推論の可視化を有効化
• 思考ブロックの設定（blocks プロパティ、blockType: 'thinking'）
• addPromptResponse と isFinalUpdate による複数ステップ推論のストリーミング
• stages 配列と ThinkingStage プロパティによるステージの追加
• ステージのステータス表示（completed、inprogress、failed）
• editableContext と {index} プレースホルダーによるインラインコンテキスト項目
• editableContextClicked イベントの処理
• blockTemplate と itemTemplate によるレンダリングのカスタマイズ

生成 UI

📄 参照： references/generative-ui.md

• registerToolUI（toolName、template、handler）によるカスタムツールの登録
• ツールテンプレートとインタラクティブなハンドラー関数の設定
• addPromptResponse（toolName、props）による応答への tool ブロックの追加
• 構造化された blocks JSON を返すように AI サービスのシステムプロンプトを設定
• ツールとのインタラクション後に executePrompt で後続のプロンプトを連鎖
• 完全な本番環境向けの例：カスタムツールとチャートベースのツールを使ったレシピ作成ツール

テキスト読み上げ

📄 参照： references/text-to-speech.md

• e-assist-audio 応答ツールバー項目で組み込みのテキスト読み上げを有効化
• ブラウザーの SpeechSynthesisUtterance API で AI の応答を読み上げ
• textToSpeechSettings（language、speechPitch、speechRate、volume、voice）で音声動作をカスタマイズ

テレメトリ

📄 参照： references/telemetry.md

• telemetrySettings.enable で応答ごとのテレメトリを有効化
• metrics 配列（status、duration、toolCalls、streamingChunks、model、inputTokens、outputTokens、totalTokens、reasoningTokens、cachedInputTokens）で収集するメトリクスをフィルタリング
• beforeReport イベントでレポートをカスタマイズ（変更、customAttributes による拡張、または null を返して抑制）
• addPromptResponse のオプション引数 TelemetryData でモデルとトークンの使用状況を表示
• TelemetryData.customAttributes でドメイン固有のメトリクスを渡す
• 主な動作：ターンの追跡、テレメトリボタンの状態、所要時間の書式設定、メトリクスフィルターの優先順位、再生成フロー

メンション

📄 参照： references/mentions.md

• mentionChar を使用したメンショントリガー文字の設定（エージェントには @、コマンドには / など）
• 1 つのコンポーネントに複数のメンション設定を登録する方法（mentions 配列）
• dataSource プロパティを使用したローカル配列または DataManager インスタンスの利用
• fields を使用したオブジェクトベースのデータソースのマッピングと、Query を使用した追加フィルターの適用
• filterType（Contains、StartsWith、EndsWith）と highlight による一致動作の制御
• showMentionChar を使用したエディターでのトリガー文字の表示／非表示
• popupWidth / popupHeight を使用したポップアップサイズのカスタマイズ
• displayTemplate、itemTemplate、noRecordsTemplate を使用した表示のカスタマイズ
• mentionSelect イベントと MentionSelectEventArgs による選択への応答

4 種類すべてのツールバーの詳細ドキュメント

• ヘッダーツールバー（toolbarSettings）- グローバルアクションとナビゲーション
• プロンプトツールバー（promptToolbarSettings）- ユーザープロンプトに対するアクション
• レスポンスツールバー（responseToolbarSettings）- AI の応答に対するアクション
• フッターツールバー（footerToolbarSettings）- 入力領域のカスタマイズ
• 10 個のプロパティを持つ ToolbarItemModel インターフェイス
• dataIndex の処理を含む ToolbarItemClickedEventArgs
• タグディレクティブ方式：<e-toolbarsettings>、<e-toolbaritem>
• 動的なツールバー項目のためのプロパティバインディング方式
• 一般的なパターン、ベストプラクティス、トラブルシューティング
• ファイルアップロードイベント（beforeAttachmentUpload、attachmentUploadSuccess、attachmentUploadFailure、attachmentRemoved、attachmentRemoving）
• イベント引数：PromptRequestEventArgs、PromptChangedEventArgs、StopRespondingEventArgs、AttachmentClickEventArgs、RemovingEventArgs（@syncfusion/ej2-inputs から）
• イベント処理のパターンとベストプラクティス

ファイル添付

📄 参照： references/file-attachments.md

• ファイル添付の設定
• アップロードの処理と検証
• ファイルサイズと種類の制限
• 添付ファイルの表示と管理
• カスタム添付ファイルテンプレート（attachmentTemplate）

ツールバーの設定

📄 参照： references/toolbar-items.md

• ツールバーのカスタマイズ
• speechToTextSettings による音声認識機能（推奨方式）
• 11 個の設定可能なプロパティを持つ SpeechToTextSettingsModel
• ButtonSettingsModel と TooltipSettingsModel インターフェイス
• 4 つの音声イベント：onStart、onStop、transcriptChanged、onError
• イベント引数：StartListeningEventArgs、StopListeningEventArgs、TranscriptChangedEventArgs、ErrorEventArgs
• 10 以上の言語コードによる言語サポート（en-US、es-ES、fr-FR、de-DE、ja-JP など）
• allowInterimResults による中間結果の処理
• カスタム Web Speech API の実装（代替方式）
• 音声合成の設定と構成
• ブラウザーの互換性とエラー処理
• e-assist-regenerate アイコン、応答ナビゲーション UI、regeneratedResponses プロパティを使用した応答の再生成
• ツールバー項目の配置：align プロパティ（Left、Center、Right）— すべての ToolbarItemModel と 4 種類すべてのツールバーで利用可能

テンプレートとカスタムレンダリング

📄 参照： references/templates.md

• テンプレートシステムの概要
• プロンプトテンプレート
• レスポンステンプレート
• 応答アニメーションテンプレート（responseAnimationTemplate）：応答の生成中に表示され、addPromptResponse() の呼び出し後に削除される、ブランドに合わせた読み込み状態の表示
• カスタムテンプレートの作成

AI サービスとの連携

📄 参照： references/ai-integrations.md

• Azure OpenAI 連携の設定
• Gemini との連携
• Lite-LLM との連携
• Model Context Protocol（MCP）との連携
• Ollama との連携
• セキュリティのベストプラクティスと API 管理

音声機能

📄 参照： references/speech-features.md

• 音声テキスト変換のセットアップと設定
• テキスト音声変換のセットアップと設定
• 音声の処理
• ブラウザー互換性に関する考慮事項

---

メソッド（Generative UI）

メソッド	説明
registerToolUI({ toolName, template, handler })	ツールのレンダリングテンプレートと、任意のインタラクションハンドラーを登録します。レスポンス内でツールを参照する前に呼び出してください。
executePrompt(prompt)	新しいプロンプト／レスポンスサイクルをプログラムから開始します。ツールとのインタラクション後に AI の応答を続けて生成する場合に便利です。

---

クイックスタートの例

開始するための最小限の動作例を示します。

import { Component } from '@angular/core';
import { AIAssistViewModule } from '@syncfusion/ej2-angular-interactive-chat';

@Component({
  imports: [AIAssistViewModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div ejs-aiassistview 
      id='aiAssistView'
      [promptSuggestions]="suggestions"
      (promptRequest)="onPromptRequest($event)">
    </div>
  `,
  styles: [`
    :host ::ng-deep #aiAssistView {
      height: 100vh;
    }
  `]
})
export class AppComponent {
  suggestions = [
    'What is Angular?',
    'How to create components?',
    'Explain dependency injection'
  ];

  onPromptRequest(args: any) {
    // Handle prompt and provide response
    setTimeout(() => {
      const response = 'This is a sample response from your AI service.';
      // Add response using component method
    }, 1000);
  }
}

---

よくあるパターン

パターン 1：基本的な会話の流れ

1. 提案を設定してコンポーネントを初期化します
2. ユーザーがプロンプトを入力します
3. promptRequest イベントが発生します
4. AI サービスを呼び出します
5. addPromptResponse() を使って結果を表示します
6. 会話履歴は自動的に保持されます

パターン 2：ストリーミングを使った AI サービスの統合

1. [enableStreaming]="true" でストリーミングを有効にします
2. AI プロバイダーの認証情報（OpenAI、Gemini など）を設定します
3. promptRequest イベントで、ストリーミングを使ってプロバイダー API を呼び出します
4. 分割されたレスポンスには ReadableStream を使います
5. キャンセルするには stopRespondingClick イベントを処理します
6. addPromptResponse() で UI を段階的に更新します

パターン 3：activeView を使ったカスタムビューの管理

1. 複数のビュータイプ（Assist、Custom）を定義します
2. [activeView]="currentIndex" を使って表示を制御します
3. ユーザーの操作に応じて、プログラムからビューを切り替えます
4. 戻る／進むナビゲーション用にビュー履歴を追跡します
5. 各ビューには異なる設定を適用できます
6. ビューごとに個別の状態を保持します

パターン 4：ツールバーの完全な設定

1. 全体的な操作（新しいチャット、エクスポート、設定）用にヘッダーツールバーを設定します
2. ユーザープロンプトの操作（編集、コピー、再試行）用にプロンプトツールバーを設定します
3. AI のレスポンス操作（コピー、再生成、いいね／よくないね）用にレスポンスツールバーを追加します
4. 入力操作（書式設定、添付ファイル）用にフッターツールバーを設定します
5. タグディレクティブまたはプロパティバインディング方式を使います
6. dataIndex を使ってコンテキストを取得し、itemClicked イベントを処理します
7. 各 ToolbarItemModel の align プロパティを使って、主要な操作を Left に、二次的な操作（Settings、Export）を Right に配置します

パターン 5：音声対応インターフェイス

1. 言語とオプションを指定して speechToTextSettings を設定します
2. リアルタイム文字起こしを有効にするため、allowInterimResults を有効にします
3. 音声イベント（onStart、onStop、transcriptChanged、onError）を処理します
4. 認識したテキストをプロンプトとして自動的に送信します
5. 音声を聞き取っている間、視覚的なフィードバックを表示します

パターン 6：型付き引数を使ったイベント駆動型の操作

1. PromptRequestEventArgs を使って、プロンプト、attachedFiles、キャンセルフラグにアクセスします
2. PromptChangedEventArgs を使って、入力をリアルタイムで検証します
3. 実行時間の長いリクエストをキャンセルするには、StopRespondingEventArgs を処理します
4. ファイルを検証するには beforeAttachmentUpload を使います
5. インラインコンテキストバッジの操作には editableContextClicked を使います

パターン 7：思考の連鎖（推論の可視化）

1. AIAssistView.Inject(AssistThinking) で AssistThinking モジュールを注入します
2. ストリーミング中は isFinalUpdate: false を指定し、addPromptResponse を使って blockType: 'thinking' の blocks を追加します
3. 推論の進行に応じて、stages[].status を更新します（inprogress → completed／failed）
4. クリック可能なインライン参照には、{index} プレースホルダーを使って editableContext を設定します
5. 最後の isFinalUpdate: true の呼び出しで、最終的な response テキストを渡します
6. 必要に応じて、blockTemplate（ブロック全体）または itemTemplate（ステージごと）でレンダリングをカスタマイズします

パターン 8：生成 UI（応答内のインタラクティブツール）

1. 通常は ngAfterViewInit で registerToolUI({ toolName, template, handler }) を使って、各ツールを一度だけ登録します
2. 応答内で blocks: [{ blockType: 'tool', toolName, props }] を使い、登録済みのツールを参照します
3. 同じ blocks 配列内で text ブロックと tool ブロックを組み合わせ、説明文とインタラクティブなコンテンツを表示します
4. 動的なツール呼び出しのため、構造化された blocks JSON 配列を返すように AI システムプロンプトを設定します
5. ユーザーがレンダリングされたツールを操作した後の AI 応答を取得するには、executePrompt を使います
6. AI が返す JSON を慎重に解析し、形式が不正な場合はプレーンテキストにフォールバックします

パターン 9：AI 応答メトリクスのテレメトリ

1. telemetrySettings = { enable: true } を設定して、テレメトリボタンを有効にします
2. telemetrySettings の metrics 配列で、収集するメトリクスとツールチップ内の行の順序を指定します（例：['duration', 'model', 'inputTokens', 'outputTokens', 'totalTokens']）
3. addPromptResponse(response, isFinalUpdate, telemetryData) に省略可能な TelemetryData 引数を渡して、model、inputTokens、outputTokens、reasoningTokens、cachedInputTokens を表示します。totalTokens は自動的に計算されます
4. beforeReport(report) イベントを使って report.customAttributes にドメイン固有の項目を追加するか、レポートを抑制する場合は null を返します
5. 任意の応答でテレメトリボタンにカーソルを合わせると、レンダリングされたツールチップを確認できます。status と duration は常に表示され、customAttributes は metrics フィルターの設定にかかわらず常に含まれます

パターン 10：プロンプトエディターのメンションピッカー

1. 各メンショングループ（例：エージェント、コマンド、ナレッジアイテム）に対して、ローカル配列（または DataManager インスタンス）を定義します
2. コンポーネントに mentions 配列を作成し、各トリガーに対して { mentionChar: '@', dataSource, fields: { text, value } } を指定します。また、必要に応じて filterType、query、highlight、popupWidth/Height、テンプレートも指定できます
3. [mentions]="mentions" で配列をコンポーネントに渡し、利用できるトリガーを示すわかりやすい promptPlaceholder を設定します
4. スラッシュ形式のコマンドでは showMentionChar: false を使い、挿入されたメンションに / が残らないようにします
5. itemTemplate（ポップアップの行）、displayTemplate（選択済みチップ）、noRecordsTemplate（空の状態）を使って外観をカスタマイズします
6. mentionSelect イベントまたはメンションごとの mentionSelect コールバックで選択に応じて処理し、選択された項目を取得してアクションを実行します

---

主なプロパティ

プロパティ	型	デフォルト	使用する場面
prompt	string	''	プロンプトのテキストを事前入力する
promptPlaceholder	string	'Type prompt for assistance...'	ユーザーの入力を促す
promptSuggestions	string[]	[]	すぐに使えるプロンプトを提示する
prompts	object[]	[]	会話履歴を初期化する
showClearButton	boolean	false	入力をクリアするボタンを表示する
enableScrollToBottom	boolean	true	最下部へのスクロールインジケーターを表示する
blockTemplate	string | object	''	思考ブロックのレンダリングをカスタマイズする
itemTemplate	string | object	''	個々の思考ステージ項目のレンダリングをカスタマイズする
responseAnimationTemplate	string | object	''	応答の生成中にその代わりに表示されるローディングインジケーター／アニメーションをカスタマイズする

レイアウトと外観

プロパティ	型	デフォルト	使用する場面
width	string | number	'100%'	コンテナーの幅を設定する
height	string | number	'100%'	コンテナーの高さを設定する
cssClass	string	''	カスタム CSS スタイルとテーマを適用する
showHeader	boolean	true	ヘッダーの表示を制御する
htmlAttributes	object	{}	カスタム HTML 属性（aria-、data- など）を追加する

ストリーミングと機能

プロパティ	型	デフォルト	使用する場面
enableStreaming	boolean	false	リアルタイムのストリーミング応答を有効にします
speechToTextSettings	SpeechToTextSettingsModel	null	組み込みの音声認識を設定します
textToSpeechSettings	TextToSpeechSettingsModel	null	組み込みのテキスト読み上げ機能を設定します
activeView	number	0	ビューをプログラムから切り替えます
telemetrySettings	TelemetrySettingsModel	null	応答ごとの AI メトリクス（enable、metrics、beforeReport）を追跡し、応答ツールバーにテレメトリボタンを表示します
mentions	MentionSettings[]	null	プロンプトエディターのトリガー文字によるメンションピッカー（データソース、フィールド、クエリ、フィルターの種類、テンプレート）を設定します

グローバル化

プロパティ	型	デフォルト	使用する場面
locale	string	'en-US'	言語／地域を設定します（en-US、es-ES、fr-FR、de-DE、ja-JP、ar-SA など）
enableRtl	boolean	false	右から左へのテキスト方向を有効にします（アラビア語、ヘブライ語、ペルシア語、ウルドゥー語）
enablePersistence	boolean	false	ページの再読み込み後もコンポーネントの状態を保存します

ツールバーの設定

プロパティ	型	デフォルト	使用する場面
toolbarSettings	ToolbarSettingsModel	null	ヘッダーツールバー（グローバル操作）を設定します
promptToolbarSettings	PromptToolbarSettingsModel	null	プロンプトツールバー（編集、コピー、再試行）を設定します
responseToolbarSettings	ResponseToolbarSettingsModel	null	応答ツールバー（コピー、再生成、高評価／低評価）を設定します
footerToolbarSettings	FooterToolbarSettingsModel	null	フッターツールバー（書式設定、添付ファイル）を設定します

---

一般的なユースケース

1. カスタマーサポートチャットボット： ナレッジベースと連携したカスタマーサービスのインターフェースを構築します
2. コードアシスタント： コードをレビューして提案できる AI 搭載のコーディング支援ツールを作成します
3. コンテンツ作成アシスタント： 文法や文体の提案機能を備えた執筆ツールを実装します
4. データ分析ツール： 自然言語を使ってユーザーがデータを検索・分析できるインターフェースを作成します
5. 学習プラットフォーム： 学生の質問に答える教育用アシスタントを構築します
6. 社内ナレッジボット： 社内文書や FAQ に対応する企業向けアシスタントを作成します
7. 多言語サポート： 翻訳とローカライズ機能を実装します
8. アクセシビリティアシスタント： 読み上げ支援や操作案内を提供します
9. 推論の可視化： 折りたたみ可能な Chain of Thoughts ブロックを使って AI の推論を表示するインターフェースを構築します
10. 生成 UI アプリケーション： AI の応答内にインタラクティブなツールやチャート（カード、ゲージ、カスタムウィジェット）をインラインで表示します
11. 応答ごとのテレメトリ： telemetrySettings と addPromptResponse の TelemetryData 引数を使って、各 AI 応答に所要時間、モデル、トークン使用量を表示します
12. 使用状況を考慮した分析： customAttributes（region、tenant、sessionId、feature）でテレメトリレポートを拡張し、応答ツールバーのツールチップでテナント／機能レベルの分析を行います
13. メンションによるエージェントへのルーティング： @ メンションを使ってプロンプトを特定のエージェント（TechSupport、HRAssistant、KnowledgeBase）にルーティングし、mentionSelect イベントで args.itemData を解析して、送信前にエージェントのコンテキストを読み込みます
14. メンションによるスラッシュコマンド： / メンション（showMentionChar: false を指定）を使って、AI サービスの応答方法を変更する /table、/rewrite、/checklist などのクイックアクションを表示します
15. リモートナレッジピッカー： メンションの dataSource を DataManager にバインドし、Query（ページング／フィルタリングを指定）を適用することで、大規模なリモートカタログから項目を検索して挿入できるようにします
16. ブランドに合わせた読み込み状態： responseAnimationTemplate を使って、AI 応答の生成中にカスタムローダー、ブランド仕様のスピナー、または進行状況インジケーターを表示します。addPromptResponse() が呼び出されると、テンプレートは自動的に削除されます
17. 配置を調整したツールバーレイアウト： 各 ToolbarItemModel の align プロパティを使って、主なアクション（Left）、中央のクイックアクション（Center）、設定／エクスポートなどの副次的なアクション（Right）を配置します。4 種類すべてのツールバーで動作します
18. 添付ファイルの削除を確認またはキャンセル： attachmentRemoving イベント（RemovingEventArgs を使用）で、ファイルが削除される前に処理を割り込みます。args.cancel = true を設定してファイルを添付したままにするか、ファイルを切り離す前に後処理（オブジェクト URL の無効化、プレビュー状態の解放）を行います

---