【ServiceNow】Virtual Agentの初期設定、および基本的な使い方について

# はじめに
みなさんこんにちは、三井情報株式会社です。

今回は[Virtual Agent](https://docs.servicenow.com/ja-JP/bundle/quebec-now-intelligence/page/administer/virtual-agent/concept/virtual-agent-landing-page.html)の初期設定、および基本的な使い方についてご紹介致します。

# 設定方法
①	プラグインのアクティブ化
プラグインよりGlide Virtual Agentをインストールすることで利用可能です。
※Virtual Agentの利用にはITSM ProfessionalまたはEnterpriseライセンスが必要です。

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599899/0f9d4e03-c36d-35f6-6985-928111c7f606.png)


②	挨拶の設定
始めにサービスポータル上でVirtual Agentを開いた時の挨拶の文章を編集します。
フィルタナビゲータに「sys_properties.list」と記入しEnterキーを押下します。
システムプロパティが開くので「新規」を押下します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599899/99ed0507-f6d9-fce4-cbe3-e7246a82ee22.png)
 

新規レコードを以下のように設定し、「送信」を押下します。
名前：com.glide.cs.general.welcome_message
説明：Welcome Message
タイプ：文字列（自動入力）
値：こんにちは！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599899/86864daf-16a2-0672-3641-4abc232f430b.png)
 

もう一つ新規レコードを以下のように設定して、「送信」を押下します。
名前：com.glide.cs.general.top_selection_message
説明：Top selection message
タイプ：文字列（自動入力）
値：何かお困りでしょうか？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599899/053ac74b-dead-2172-fff9-9b8891c76160.png)
 

ここで設定した値がサービスポータルでチャットボットを開いた時に最初に表示されるメッセージになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599899/f0fb3fd3-018f-185b-330c-14ef8989df67.png)


③	自社カスタムおよびチャットメニュー

フィルタナビゲータにて「Conversational Interfaces」で検索し、「自社カスタム設定およびチャットメニュー」を選択し、リストから「Default Branding」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599899/ad98dc82-826a-b40a-58a7-86512f1a094c.png)
 

ここではチャットボットの画面のヘッダーやロゴ、背景色などが変更できます。
試しに以下のヘッダーの文章とその背景色を変更します。
チャットヘッダー：Now Support　→　チャットボット
チャットヘッダーバックグラウンド：＃4E7D88　→　＃FF7315

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599899/4d4bb763-6193-fad0-31ed-3a1e869c30ee.png)
 

サービスポータル側で変更が確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599899/58c62a91-5c51-e7d6-6221-e8e65e9bcca2.png)
 

④	仮想エージェントデザイナー（Virtual Agent Designer）
ここからVirtual Agentでの会話のやりとり（以下、フロー）を作成していきます。
フィルタナビゲータから「仮想エージェント」で検索し、Conversational Interfaces配下にある「仮想エージェント＞デザイナー」を選択してデザイナーのページを開きます。「＋作成」を押下して新規作成します。

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599899/ac0362b9-570b-775a-f2ab-c56bc75d44d0.png)


「＋作成」を押下すると「トピックのプロパティ」のページが表示されるため、名前、説明、タイプ：「トピック」、キーワードを設定し、「作成」を押下します。
※プロパティは後からでも編集可能です。
「i記号」を押下するとそれぞれの機能の使い方のヒントが確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599899/90e21f3b-ca06-fe06-ab9e-4cf78cac15a4.png)


左側のコンポーネントをドラッグアンドドロップで開始と終了の間に持ってくることでフローの中に追加することが可能です。コンポーネントには以下の３種類があります。
・ユーザー入力：Virtual Agent上でユーザーが入力する。青色アイコン。
・ボット応答：Virtual Agentが自動で回答する。橙色アイコン。
・ユーティリティ：フローの分岐やスクリプトアクションなどの設定が可能。黒色アイコン。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599899/00d13466-660a-37b0-f4cf-f5d92d9ae1c7.png)


テキストコンポーネントをドラッグアンドドロップで追加し、このコンポーネントの基本情報を設定します。アスタリスクが付いている項目は必ず設定する必要があります。
・名前：設定すると自動で下の変数名が設定されます。名前に入力された文字が英語でない場合、変数名は「__」となります。
・テキスト入力形式：デフォルトの「テキスト」以外にメールやURLなども設定可能です。
・プロンプト：チャットボット上でユーザーから見える文章になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599899/c3109c52-561d-379f-8757-9347aa2f944f.png)


入力が完了したら右上の「保存」を押下して「テスト」を押下し、動作確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599899/c3650aa9-354b-aae5-1b2d-5435cc332f44.png)


「ここに回答を入力してください」にカーソルを当てて回答を入力し、Enterキーまたは右向きの三角ボタンを押下して送信します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599899/4a8eb28f-de99-f3d3-f4cf-5d021e5db5c3.png)


「-------」のような点線が表示されたら、フローが終了した合図です。

橙色は自動応答です。以下のように設定してテストしてみます。
名前：wait a moment
応答メッセージ：少々お待ちください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599899/b2feaea7-f91e-aced-7142-09f5a1783cdb.png)


「保存」して「テスト」を押下して確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599899/61752936-8601-923e-668a-51498712eddb.png)


ユーザー入力の「静的選択」とユーティリティの「決定」を用いて分岐を設定します。
静的選択では「はい」「いいえ」を設定し、決定では「＋」を押下して矢印を増やし、矢印をクリックして分岐条件を設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599899/f41280b7-6871-9db5-7c62-d16320ae5824.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599899/a5290550-c5e6-6e82-4d2f-4eb3263f64fa.png)


「保存」して「テスト」して分岐していることを確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599899/d6ce96d8-f059-e9ae-0c49-62a2f8f03e1a.png)


全てのコンポーネントを紹介しきれないため、ここでは割愛させていただきます。


# おわりに
今回はVirtual Agentの基本的な使い方をご紹介させていただきました。
最後まで読んでいただき、ありがとうございました。