このページは Cloud Translation API によって翻訳されました。

Google Chat、Vertex AI、Apps Script を使用してインシデントに対応する

このチュートリアルでは、リアルタイムでインシデントに応答する Google Chat アプリを作成する方法について説明します。インシデントに対応する際、アプリは Chat スペースを作成して入力し、メッセージ、スラッシュコマンド、ダイアログを使用してインシデントの解決を促進します。また、AI を使用してインシデント対応を Google ドキュメントドキュメントにまとめます。

インシデントとは、解決のためにチームの早急な対応を必要とするイベントです。インシデントの例:

顧客関係管理（CRM）プラットフォームで緊急のケースが作成され、サービスチームが解決に向けて連携する必要があります。
システムがオフラインになると、サイト信頼性エンジニア（SRE）のグループに通知され、SRE が協力してシステムをオンラインに戻すことができます。
大規模な地震が発生し、緊急対応要員が対応を調整する必要がある。

このチュートリアルでは、ユーザーがウェブページのボタンをクリックしてインシデントを報告すると、インシデントアラートが開始されます。このウェブページでは、基本的なインシデント情報（回答者のタイトル、説明、メールアドレス）の入力をユーザーに求めることで、インシデントをシミュレートします。

インシデント管理 Chat アプリの使用例を以下に示します。

図 1: インシデントを報告できるウェブサイト。
図 2. インシデント Chat スペースが作成されたことを知らせる通知。
図 3. インシデント対応の Chat スペース。
図 4.スラッシュコマンドを使用してインシデントを解決する。
図 5.インシデント解決ダイアログ
図 6.スペースで共有されているインシデント解決の Google ドキュメント。
図 7. AI によるインシデント解決の要約に関する Google ドキュメント

前提条件

組織で次の前提条件を有効にする必要がある場合は、Google Workspace 管理者に有効にするよう依頼してください。

Google Chat へのアクセス権を持つビジネスまたはエンタープライズ Google Workspace アカウント。
Google Workspace でディレクトリ（連絡先の共有）が有効になっている。インシデントアプリは、ディレクトリを使用して、インシデント対応者の連絡先情報（名前やメールアドレスなど）を検索します。インシデントレスポンダーは、Google Workspace 組織の Google Chat アカウントを持つユーザーである必要があります。

目標

インシデントに対応する Chat アプリを構築する。
次のようにして、お客様がインシデントに対応できるようにします。
- インシデント対応のためのスペースを作成する。
- インシデントや対応をまとめたメッセージを投稿する。
- インタラクティブな Chat アプリ機能によるコラボレーションをサポート。
Vertex AI を使用して会話と解決策を要約します。

アーキテクチャ

次の図は、インシデント対応の Google Chat アプリで使用される Google Workspace リソースと Google Cloud リソースのアーキテクチャを示しています。

インシデント対応 Google Chat アプリのアーキテクチャ

このアーキテクチャは、インシデント対応の Google Chat アプリがインシデントや解決策を処理する方法を示しています。

ユーザーが Apps Script でホストされている外部ウェブサイトからインシデントを開始します。
ウェブサイトから、同じく Apps Script でホストされている Google Chat アプリに非同期の HTTP リクエストが送信されます。
インシデント対応の Google Chat アプリがリクエストを処理します。
1. Apps Script Admin SDK サービスは、ユーザー ID やメールアドレスなどのチームメンバー情報を取得します。
2. Apps Script の高度なチャットサービスを使用して Chat API への一連の HTTP リクエストを実行すると、インシデントレスポンス Google Chat アプリがインシデントチャットスペースを作成し、チームメンバーを追加して、スペースにメッセージを送信します。
チームメンバーが Chat スペースでインシデントについて話し合っています。
チームメンバーがスラッシュコマンドを呼び出して、インシデントの解決を通知します。
1. Apps Script の高度なチャットサービスを使用して Chat API に HTTP 呼び出しを行うと、Chat スペースのすべてのメッセージが一覧表示されます。
2. Vertex AI は、リストされたメッセージを受信して要約を生成します。
3. Apps Script の DocumentApp サービスは、ドキュメントドキュメントを作成し、Vertex AI のサマリーをドキュメントに追加します。
4. インシデントレスポンス用の Google Chat アプリが Chat API を呼び出して、概要の Docs ドキュメントへのリンクを共有するメッセージを送信します。

環境を準備する

このセクションでは、Chat アプリ用の Google Cloud プロジェクトを作成して構成する方法について説明します。

Google Cloud プロジェクトを作成する

Google Cloud コンソール

Google Cloud コンソールで、メニュー > [IAM と管理] > [プロジェクトを作成] に移動します。
[プロジェクトの作成] に移動
[プロジェクト名] フィールドに、プロジェクトのわかりやすい名前を入力します。
省略可: プロジェクト ID を編集するには、[編集] をクリックします。プロジェクトの作成後にプロジェクト ID を変更することはできないため、プロジェクトのライフタイムを考慮してニーズに合った ID を選択してください。
[ロケーション] フィールドで [参照] をクリックして、プロジェクトの可能性のあるロケーションを表示します。[選択] をクリックします。
注意: Google Workspace の組織が見つからない場合は、
Google Workspace アカウントにログインしていません。Google Workspace デベロッパードキュメントに記載されている機能の一部は、組織に関連付けられたプロジェクトでのみ使用できます。
[作成] をクリックします。Google Cloud コンソールがダッシュボードページに移動し、数分以内にプロジェクトが作成されます。

gcloud CLI

次のいずれかの開発環境で、Google Cloud CLI（gcloud）にアクセスします。

Cloud Shell: gcloud CLI がすでに設定されているオンラインターミナルを使用するには、Cloud Shell をアクティブにします。
Cloud Shell を有効にする
ローカルシェル: ローカル開発環境を使用するには、gcloud CLI をインストールして初期化します。
Cloud プロジェクトを作成するには、gcloud projects create コマンドを使用します。
```
gcloud projects create PROJECT_ID
```
作成するプロジェクトの ID を設定して、PROJECT_ID を置き換えます。

Cloud プロジェクトの課金を有効にする

Google Cloud コンソール

Google Cloud コンソールで [お支払い] に移動します。メニュー アイコン > [お支払い] > [マイプロジェクト] をクリックします。
[マイプロジェクトの課金] に移動
[組織を選択] で、Google Cloud プロジェクトに関連付けられている組織を選択します。
プロジェクトの行で [アクション] メニュー（）を開き、[お支払い情報を変更] をクリックして、Cloud 請求先アカウントを選択します。
[アカウントを設定] をクリックします。

gcloud CLI

使用可能な請求先アカウントを一覧表示するには、次のコマンドを実行します。
```
gcloud billing accounts list
```
請求先アカウントを Google Cloud プロジェクトにリンクします。
```
gcloud billing projects link PROJECT_ID --billing-account=BILLING_ACCOUNT_ID
```
次のように置き換えます。
- PROJECT_ID は、課金を有効にする Cloud プロジェクトのプロジェクト ID です。
- BILLING_ACCOUNT_ID は、Google Cloud プロジェクトにリンクする請求先アカウント ID です。

API を有効にする

Google Cloud コンソール

Google Cloud コンソールで、Google Chat API、Google Docs API、Admin SDK API、Vertex AI API を有効にします。

API を有効にする
正しい Cloud プロジェクトで API を有効にしていることを確認し、[次へ] をクリックします。
正しい API を有効にしていることを確認し、[有効にする] をクリックします。

gcloud CLI

必要に応じて、現在の Cloud プロジェクトを gcloud config set project コマンドで作成したプロジェクトに設定します。
```
gcloud config set project PROJECT_ID
```
PROJECT_ID は、作成した Cloud プロジェクトのプロジェクト ID に置き換えます。
gcloud services enable コマンドを使用して、Google Chat API、Google Docs API、Admin SDK API、Vertex AI API を有効にします。
```
gcloud services enable chat.googleapis.com docs.googleapis.com admin.googleapis.com aiplatform.googleapis.com
```

認証と権限付与の設定

認証と認可により、Chat アプリは Google Workspace と Google Cloud のリソースにアクセスしてインシデントレスポンスを処理できます。

このチュートリアルでは、アプリを内部で公開するため、プレースホルダ情報を使用しても問題はありません。アプリを外部に公開する前に、同意画面のプレースホルダ情報を実際の情報に置き換えます。

Google Cloud コンソールで、メニュー > [API とサービス] > [OAuth 同意画面] に移動します。

[OAuth 同意画面] に移動
[ユーザーの種類] で [内部] を選択し、[作成] をクリックします。
[アプリ名] に「Incident Management」と入力します。
[ユーザーサポートメール] で、メールアドレスまたは適切な Google グループを選択します。
[デベロッパーの連絡先情報] にメールアドレスを入力します。
[保存して次へ] をクリックします。
[スコープを追加または削除] をクリックします。Cloud プロジェクトで有効にした各 API のスコープのリストが表示されます。
[スコープを手動で追加] に、次のスコープを貼り付けます。
- https://www.googleapis.com/auth/chat.spaces.create
- https://www.googleapis.com/auth/chat.memberships
- https://www.googleapis.com/auth/chat.memberships.app
- https://www.googleapis.com/auth/chat.messages
- https://www.googleapis.com/auth/documents
- https://www.googleapis.com/auth/admin.directory.user.readonly
- https://www.googleapis.com/auth/script.external_request
- https://www.googleapis.com/auth/userinfo.email
- https://www.googleapis.com/auth/cloud-platform
[表に追加] をクリックします。
[更新] をクリックします。
[保存して次へ] をクリックします。
アプリ登録の概要を確認し、[ダッシュボードに戻る] をクリックします。

Chat アプリを作成してデプロイする

次のセクションでは、Chat アプリに必要なすべてのアプリケーションコードを含む Apps Script プロジェクト全体をコピーして更新します。そのため、各ファイルをコピーして貼り付ける必要はありません。

一部の関数には、ChatApp.gs の processSlashCommand_() のように、名前の末尾にアンダースコアが含まれています。アンダースコアを使用すると、ブラウザで開いたインシデント初期化ウェブページから関数が非表示になります。詳細については、非公開関数をご覧ください。

Apps Script は、.gs スクリプトと .html ファイルの 2 種類のファイル形式をサポートしています。このサポートに準拠するため、アプリのクライアントサイド JavaScript は <script /> タグ内に、CSS は HTML ファイル内の <style /> タグ内に含めます。

必要に応じて、GitHub でプロジェクト全体を確認できます。

GitHub で表示

各ファイルの概要は次のとおりです。

Consts.gs

Cloud プロジェクト ID、Vertex AI ロケーション ID、インシデントを閉じるためのスラッシュコマンド ID など、他のコードファイルから参照される定数を定義します。

`Consts.gs` コードを表示

apps-script/incident-response/Consts.gs

GitHub で表示

const PROJECT_ID = 'replace-with-your-project-id';
const VERTEX_AI_LOCATION_ID = 'us-central1';
const CLOSE_INCIDENT_COMMAND_ID = 1;

ChatApp.gs

メッセージ、カードのクリック数、スラッシュコマンド、ダイアログなどの Chat 操作イベントを処理します。インシデント解決の詳細を収集するダイアログを開いて、/closeIncident スラッシュコマンドに応答します。Chat API の spaces.messages.list メソッドを呼び出して、スペース内のメッセージを読み取ります。Apps Script で Admin SDK Directory サービスを使用してユーザー ID を取得します。

`ChatApp.gs` コードを表示

apps-script/incident-response/ChatApp.gs

GitHub で表示

/**
 * Responds to a MESSAGE event in Google Chat.
 *
 * This app only responds to a slash command with the ID 1 ("/closeIncident").
 * It will respond to any other message with a simple "Hello" text message.
 *
 * @param {Object} event the event object from Google Chat
 */
function onMessage(event) {
  if (event.message.slashCommand) {
    return processSlashCommand_(event);
  }
  return { "text": "Hello from Incident Response app!" };
}

/**
 * Responds to a CARD_CLICKED event in Google Chat.
 *
 * This app only responds to one kind of dialog (Close Incident).
 *
 * @param {Object} event the event object from Google Chat
 */
function onCardClick(event) {
  if (event.isDialogEvent) {
    if (event.dialogEventType == 'SUBMIT_DIALOG') {
      return processSubmitDialog_(event);
    }
    return {
      actionResponse: {
        type: "DIALOG",
        dialogAction: {
          actionStatus: "OK"
        }
      }
    };
  }
}

/**
 * Responds to a MESSAGE event with a Slash command in Google Chat.
 *
 * This app only responds to a slash command with the ID 1 ("/closeIncident")
 * by returning a Dialog.
 *
 * @param {Object} event the event object from Google Chat
 */
function processSlashCommand_(event) {
  if (event.message.slashCommand.commandId != CLOSE_INCIDENT_COMMAND_ID) {
    return {
      "text": "Command not recognized. Use the command `/closeIncident` to close the incident managed by this space."
    };
  }
  const sections = [
    {
      header: "Close Incident",
      widgets: [
        {
          textInput: {
            label: "Please describe the incident resolution",
            type: "MULTIPLE_LINE",
            name: "description"
          }
        },
        {
          buttonList: {
            buttons: [
              {
                text: "Close Incident",
                onClick: {
                  action: {
                    function: "closeIncident"
                  }
                }
              }
            ]
          }
        }
      ]
    }
  ];
  return {
    actionResponse: {
      type: "DIALOG",
      dialogAction: {
        dialog: {
          body: {
            sections,
          }
        }
      }
    }
  };
}

/**
 * Responds to a CARD_CLICKED event with a Dialog submission in Google Chat.
 *
 * This app only responds to one kind of dialog (Close Incident).
 * It creates a Doc with a summary of the incident information and posts a message
 * to the space with a link to the Doc.
 *
 * @param {Object} event the event object from Google Chat
 */
function processSubmitDialog_(event) {
  const resolution = event.common.formInputs.description[""].stringInputs.value[0];
  const chatHistory = concatenateAllSpaceMessages_(event.space.name);
  const chatSummary = summarizeChatHistory_(chatHistory);
  const docUrl = createDoc_(event.space.displayName, resolution, chatHistory, chatSummary);
  return {
    actionResponse: {
      type: "NEW_MESSAGE",
    },
    text: `Incident closed with the following resolution: ${resolution}\n\nHere is the automatically generated post-mortem:\n${docUrl}`
  };
}

/**
 * Lists all the messages in the Chat space, then concatenate all of them into
 * a single text containing the full Chat history.
 *
 * For simplicity for this demo, it only fetches the first 100 messages.
 *
 * Messages with slash commands are filtered out, so the returned history will
 * contain only the conversations between users and not app command invocations.
 *
 * @return {string} a text containing all the messages in the space in the format:
 *          Sender's name: Message
 */
function concatenateAllSpaceMessages_(spaceName) {
  // Call Chat API method spaces.messages.list
  const response = Chat.Spaces.Messages.list(spaceName, { 'pageSize': 100 });
  const messages = response.messages;
  // Fetch the display names of the message senders and returns a text
  // concatenating all the messages.
  let userMap = new Map();
  return messages
    .filter(message => message.slashCommand === undefined)
    .map(message => `${getUserDisplayName_(userMap, message.sender.name)}: ${message.text}`)
    .join('\n');
}

/**
 * Obtains the display name of a user by using the Admin Directory API.
 *
 * The fetched display name is cached in the provided map, so we only call the API
 * once per user.
 *
 * If the user does not have a display name, then the full name is used.
 *
 * @param {Map} userMap a map containing the display names previously fetched
 * @param {string} userName the resource name of the user
 * @return {string} the user's display name
 */
function getUserDisplayName_(userMap, userName) {
  if (userMap.has(userName)) {
    return userMap.get(userName);
  }
  let displayName = 'Unknown User';
  try {
    const user = AdminDirectory.Users.get(
      userName.replace("users/", ""),
      { projection: 'BASIC', viewType: 'domain_public' });
    displayName = user.name.displayName ? user.name.displayName : user.name.fullName;
  } catch (e) {
    // Ignore error if the API call fails (for example, because it's an
    // out-of-domain user or Chat app)) and just use 'Unknown User'.
  }
  userMap.set(userName, displayName);
  return displayName;
}

ChatSpaceCreator.gs

ユーザーがインシデント初期化ウェブページで入力したフォームデータを受け取り、それを使用して作成と入力を行って Chat スペースを設定し、インシデントに関するメッセージを投稿します。

`ChatSpaceCreator.gs` コードを表示

apps-script/incident-response/ChatSpaceCreator.gs

GitHub で表示

/**
 * Creates a space in Google Chat with the provided title and members, and posts an
 * initial message to it.
 *
 * @param {Object} formData the data submitted by the user. It should contain the fields
 *                          title, description, and users.
 * @return {string} the resource name of the new space.
 */
function createChatSpace(formData) {
  const users = formData.users.trim().length > 0 ? formData.users.split(',') : [];
  const spaceName = setUpSpace_(formData.title, users);
  addAppToSpace_(spaceName);
  createMessage_(spaceName, formData.description);
  return spaceName;
}

/**
 * Creates a space in Google Chat with the provided display name and members.
 *
 * @return {string} the resource name of the new space.
 */
function setUpSpace_(displayName, users) {
  const memberships = users.map(email => ({
    member: {
      name: `users/${email}`,
      type: "HUMAN"
    }
  }));
  const request = {
    space: {
      displayName: displayName,
      spaceType: "SPACE",
      externalUserAllowed: true
    },
    memberships: memberships
  };
  // Call Chat API method spaces.setup
  const space = Chat.Spaces.setup(request);
  return space.name;
}

/**
 * Adds this Chat app to the space.
 *
 * @return {string} the resource name of the new membership.
 */
function addAppToSpace_(spaceName) {
  const request = {
    member: {
      name: "users/app",
      type: "BOT"
    }
  };
  // Call Chat API method spaces.members.create
  const membership = Chat.Spaces.Members.create(request, spaceName);
  return membership.name;
}

/**
 * Posts a text message to the space on behalf of the user.
 *
 * @return {string} the resource name of the new message.
 */
function createMessage_(spaceName, text) {
  const request = {
    text: text
  };
  // Call Chat API method spaces.messages.create
  const message = Chat.Spaces.Messages.create(request, spaceName);
  return message.name;
}

DocsApi.gs

Google Docs API を呼び出して、ユーザーの Google ドライブに Google ドキュメントを作成します。また、VertexAiApi.gs で作成したインシデント情報の概要をドキュメントに書き込みます。

`DocsApi.gs` コードを表示

apps-script/incident-response/DocsApi.gs

GitHub で表示

/**
 * Creates a Doc in the user's Google Drive and writes a summary of the incident information to it.
 *
 * @param {string} title The title of the incident
 * @param {string} resolution Incident resolution described by the user
 * @param {string} chatHistory The whole Chat history be included in the document
 * @param {string} chatSummary A summary of the Chat conversation to be included in the document
 * @return {string} the URL of the created Doc
 */
function createDoc_(title, resolution, chatHistory, chatSummary) {
  let doc = DocumentApp.create(title);
  let body = doc.getBody();
  body.appendParagraph(`Post-Mortem: ${title}`).setHeading(DocumentApp.ParagraphHeading.TITLE);
  body.appendParagraph("Resolution").setHeading(DocumentApp.ParagraphHeading.HEADING1);
  body.appendParagraph(resolution);
  body.appendParagraph("Summary of the conversation").setHeading(DocumentApp.ParagraphHeading.HEADING1);
  body.appendParagraph(chatSummary);
  body.appendParagraph("Full Chat history").setHeading(DocumentApp.ParagraphHeading.HEADING1);
  body.appendParagraph(chatHistory);
  return doc.getUrl();
}

VertexAiApi.gs

Vertex AI を使用して、Chat スペース内の会話を要約します。この概要は、DocsAPI.gs の特別に作成されたドキュメントに投稿されます。

`VertexAiApi.gs` コードを表示

apps-script/incident-response/VertexAiApi.gs

GitHub で表示

/**
 * Summarizes a Chat conversation using the Vertex AI text prediction API.
 *
 * @param {string} chatHistory The Chat history that will be summarized.
 * @return {string} The content from the text prediction response.
 */
function summarizeChatHistory_(chatHistory) {
  const prompt =
    "Summarize the following conversation between Engineers resolving an incident"
      + " in a few sentences. Use only the information from the conversation.\n\n"
      + chatHistory;
  const request = {
    instances: [
      { prompt: prompt }
    ],
    parameters: {
      temperature: 0.2,
      maxOutputTokens: 256,
      topK: 40,
      topP: 0.95
    }
  }
  const fetchOptions = {
    method: 'POST',
    headers: { Authorization: 'Bearer ' + ScriptApp.getOAuthToken() },
    contentType: 'application/json',
    payload: JSON.stringify(request)
  }
  const response = UrlFetchApp.fetch(
    `https://${VERTEX_AI_LOCATION_ID}-aiplatform.googleapis.com/v1`
      + `/projects/${PROJECT_ID}/locations/${VERTEX_AI_LOCATION_ID}`
      + "/publishers/google/models/text-bison:predict",
    fetchOptions);
  const payload = JSON.parse(response.getContentText());
  return payload.predictions[0].content;
}

WebController.gs

インシデントの初期化ウェブサイトを提供します。

`WebController.gs` コードを表示

apps-script/incident-response/WebController.gs

GitHub で表示

/**
 * Serves the web page from Index.html.
 */
function doGet() {
  return HtmlService
    .createTemplateFromFile('Index')
    .evaluate();
}

/**
 * Serves the web content from the specified filename.
 */
function include(filename) {
  return HtmlService
    .createHtmlOutputFromFile(filename)
    .getContent();
}

/**
 * Returns the email address of the user running the script.
 */
function getUserEmail() {
  return Session.getActiveUser().getEmail();
}

Index.html

インシデント初期化ウェブサイトを構成する HTML。

`Index.html` コードを表示

apps-script/incident-response/Index.html

GitHub で表示

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
    <?!= include('Stylesheet'); ?>
  </head>
  <body>
    <div class="container">
      <div class="content">
        <h1>Incident Manager</h1>
        <form id="incident-form" onsubmit="handleFormSubmit(this)">
          <div id="form">
            <p>
              <label for="title">Incident title</label><br/>
              <input type="text" name="title" id="title" />
            </p>
            <p>
              <label for="users">Incident responders</label><br/>
              <small>
                Please enter a comma-separated list of email addresses of the users
                that should be added to the space.
                Do not include <?= getUserEmail() ?> as it will be added automatically.
              </small><br/>
              <input type="text" name="users" id="users" />
            </p>
            <p>
              <label for="description">Initial message</label></br>
              <small>This message will be posted after the space is created.</small><br/>
              <textarea name="description" id="description"></textarea>
            </p>
            <p class="text-center">
              <input type="submit" value="CREATE CHAT SPACE" />
            </p>
          </div>
          <div id="output" class="hidden"></div>
          <div id="clear" class="hidden">
            <input type="reset" value="CREATE ANOTHER INCIDENT" onclick="onReset()" />
          </div>
        </form>
      </div>
    </div>
    <?!= include('JavaScript'); ?>
  </body>
</html>

JavaScript.html

インシデント初期化ウェブサイトの送信、エラー、消去などのフォームの動作を処理します。これは、WebController.gs のカスタム include 関数によって Index.html に含まれます。

`JavaScript.html` コードを表示

apps-script/incident-response/JavaScript.html

GitHub で表示

<script>
  var formDiv = document.getElementById('form');
  var outputDiv = document.getElementById('output');
  var clearDiv = document.getElementById('clear');

  function handleFormSubmit(formObject) {
    event.preventDefault();
    outputDiv.innerHTML = 'Please wait while we create the space...';
    hide(formDiv);
    show(outputDiv);
    google.script.run
      .withSuccessHandler(updateOutput)
      .withFailureHandler(onFailure)
      .createChatSpace(formObject);
  }

  function updateOutput(response) {
    var spaceId = response.replace('spaces/', '');
    outputDiv.innerHTML =
      '<p>Space created!</p><p><a href="https://mail.google.com/chat/#chat/space/'
        + spaceId
        + '" target="_blank">Open space</a></p>';
    show(outputDiv);
    show(clearDiv);
  }

  function onFailure(error) {
    outputDiv.innerHTML = 'ERROR: ' + error.message;
    outputDiv.classList.add('error');
    show(outputDiv);
    show(clearDiv);
  }

  function onReset() {
    outputDiv.innerHTML = '';
    outputDiv.classList.remove('error');
    show(formDiv);
    hide(outputDiv);
    hide(clearDiv);
  }

  function hide(element) {
    element.classList.add('hidden');
  }

  function show(element) {
    element.classList.remove('hidden');
  }
</script>

Stylesheet.html

インシデント初期化ウェブサイトの CSS。これは、WebController.gs のカスタム include 関数によって Index.html に含まれています。

`Stylesheet.html` コードを表示

apps-script/incident-response/Stylesheet.html

GitHub で表示

<style>
  * {
    box-sizing: border-box;
  }
  body {
    font-family: Roboto, Arial, Helvetica, sans-serif;
  }
  div.container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
  }
  div.content {
    width: 80%;
    max-width: 1000px;
    padding: 1rem;
    border: 1px solid #999;
    border-radius: 0.25rem;
    box-shadow: 0 2px 2px 0 rgba(66, 66, 66, 0.08), 0 2px 4px 2px rgba(66, 66, 66, 0.16);
  }
  h1 {
    text-align: center;
    padding-bottom: 1rem;
    margin: 0 -1rem 1rem -1rem;
    border-bottom: 1px solid #999;
  }
 #output {
    text-align: center;
    min-height: 250px;
  }
  div#clear {
    text-align: center;
    padding-top: 1rem;
    margin: 1rem -1rem 0 -1rem;
    border-top: 1px solid #999;
  }
  input[type=text], textarea {
    width: 100%;
    padding: 1rem 0.5rem;
    margin: 0.5rem 0;
    border: 0;
    border-bottom: 1px solid #999;
    background-color: #f0f0f0;
  }
  textarea {
    height: 5rem;
  }
  small {
    color: #999;
  }
  input[type=submit], input[type=reset] {
    padding: 1rem;
    border: none;
    background-color: #6200ee;
    color: #fff;
    border-radius: 0.25rem;
    width: 25%;
  }
  .hidden {
    display: none;
  }
  .text-center {
    text-align: center;
  }
  .error {
    color: red;
  }
</style>

Cloud プロジェクトの番号と ID を確認する

Google Cloud コンソールで、Cloud プロジェクトに移動します。

Google Cloud コンソールに移動
設定とユーティリティ > [プロジェクトの設定] をクリックします。
[プロジェクト番号] フィールドと [プロジェクト ID] フィールドの値をメモします。これらは、次のセクションで使用します。

Apps Script プロジェクトを作成する

Apps Script プロジェクトを作成して Cloud プロジェクトに接続するには:

次のボタンをクリックして、Google Chat でインシデントに対応する Apps Script プロジェクトを開きます。
プロジェクトを開く
[概要] をクリックします。
概要ページで [ コピーを作成] をクリックします。
Apps Script プロジェクトのコピーに名前を付けます。
1. [Google Chat でインシデントに対応する] をクリックします。
2. [プロジェクトのタイトル] に「Incident Management Chat app」と入力します。
3. [名前を変更] をクリックします。
Apps Script プロジェクトのコピーで、Consts.gs ファイルに移動し、YOUR_PROJECT_ID を Cloud プロジェクトの ID に置き換えます。

Apps Script プロジェクトの Cloud プロジェクトを設定する

Apps Script プロジェクトで、 [プロジェクトの設定] をクリックします。
[Google Cloud Platform（GCP）プロジェクト] で、[プロジェクトを変更] をクリックします。
[GCP のプロジェクト番号] に、Cloud プロジェクトのプロジェクト番号を貼り付けます。
[プロジェクトを設定] をクリックします。Cloud プロジェクトと Apps Script プロジェクトが接続されました。

Apps Script のデプロイを作成する

すべてのコードが配置されたので、Apps Script プロジェクトをデプロイします。デプロイ ID は、Google Cloud で Chat アプリを構成するときに使用します。

Apps Script で、インシデントレスポンスアプリのプロジェクトを開きます。

[Apps Script] に移動
[Deploy] > [New deployment] をクリックします。
[アドオン] と [ウェブアプリ] がまだ選択されていない場合は、[種類の選択] の横にあるデプロイタイプをクリックし、[アドオン] と [ウェブアプリ] を選択します。
[説明] に、このバージョンの説明（Complete version of incident management app など）を入力します。
[Execute as] で、[User accessing the web app] を選択します。
[アクセスできるユーザー] で、[Workspace 組織内のすべてのユーザー] を選択します。ここで、「Workspace 組織」は Google Workspace 組織の名前です。
[デプロイ] をクリックします。Apps Script は、デプロイが正常に完了したことを報告し、デプロイ ID とインシデント初期化ウェブページの URL を提供します。
後でインシデントを開始するときにアクセスできるように、ウェブアプリの URL をメモしておきます。デプロイ ID をコピーします。この ID は、Google Cloud コンソールで Chat アプリを構成するときに使用します。
[完了] をクリックします。

Google Cloud コンソールで Chat アプリを構成する

このセクションでは、Google Cloud コンソールで Google Chat API を構成し、Chat アプリに関する情報（Apps Script プロジェクトから作成したデプロイメントの ID など）を設定します。

Google Cloud コンソールで、メニュー > [その他のプロダクト] > [Google Workspace] > [プロダクトライブラリ] > [Google Chat API] > [管理] > [構成] をクリックします。

Chat API の構成に移動
[アプリ名] に「Incident Management」と入力します。
[アバターの URL] に「https://developers.google.com/chat/images/quickstart-app-avatar.png」と入力します。
[説明] に「Responds to incidents.」と入力します。
[インタラクティブ機能を有効にする] をクリックしてオンにします。
[機能] で、[1:1 のメッセージを受信する] と [スペースとグループの会話に参加する] を選択します。
[接続設定] で [Apps Script] を選択します。
[Deployment ID] に、Apps Script プロジェクトのデプロイからコピーした Apps Script デプロイ ID を貼り付けます。
完全に実装された Chat アプリで使用するスラッシュコマンドを登録します。
1. [スラッシュコマンド] で [スラッシュコマンドを追加] をクリックします。
2. [名前] に「/closeIncident」と入力します。
3. [コマンド ID] に「1」と入力します。
4. [説明] に「Closes the incident being discussed in the space.」と入力します。
5. [ダイアログを開く] を選択します。
6. [完了] をクリックします。スラッシュコマンドが登録され、一覧表示されます。
[公開設定] で [Workspace ドメイン内の特定のユーザーとグループにこの Chat アプリの利用を許可する] を選択し、メールアドレスを入力します。
[ログ] で、[エラーを Logging にロギング] を選択します。
[保存] をクリックします。構成が保存されたというメッセージが表示されたら、アプリをテストする準備が整っています。

Chat アプリをテストする

インシデント管理 Chat アプリをテストするには、ウェブページからインシデントを開始し、Chat アプリが想定どおりに動作することを確認します。

Apps Script デプロイのウェブアプリの URL に移動します。
Apps Script からデータへのアクセス権を求められたら、[権限を確認] をクリックし、Google Workspace ドメインの適切な Google アカウントでログインして、[許可] をクリックします。
インシデントの初期化ウェブページが開きます。テスト情報を入力します。
1. [Incident title] に「The First Incident」と入力します。
2. 必要に応じて、[インシデント対応担当者] に、他のインシデント対応担当者のメールアドレスを入力します。ユーザーは、Google Workspace 組織の Google Chat アカウントを持つユーザーである必要があります。そうしないと、スペースの作成に失敗します。ご自身のメールアドレスは自動的に入力されるため、入力しないでください。
3. [初期メッセージ] に「Testing the incident management Chat app.」と入力します。
[Create Chat Space] をクリックします。creating space メッセージが表示されます。
スペースが作成されると、Space created! メッセージが表示されます。[スペースを開く] をクリックすると、Chat でスペースが新しいタブで開きます。
必要に応じて、自分と他のインシデントレスポンダーがスペース内でメッセージを送信できます。アプリは Vertex AI を使用してこれらのメッセージを要約し、事後分析ドキュメントを共有します。
インシデント対応を終了して解決プロセスを開始するには、Chat スペースに「/closeIncident」と入力します。インシデント管理ダイアログが開きます。
[インシデントをクローズ] に、インシデントの解決の説明（Test complete など）を入力します。
[Close Incident]（インシデントを閉じる）をクリックします。

インシデント管理アプリは、スペース内のメッセージを一覧表示し、Vertex AI で要約し、要約を Google ドキュメントドキュメントに貼り付け、ドキュメントをスペースで共有します。

クリーンアップ

このチュートリアルで使用したリソースに対して Google Cloud アカウントで課金されないようにするには、Cloud プロジェクトを削除することをおすすめします。

注意: プロジェクトを削除すると、次のような影響があります。

プロジェクト内のすべてのものが削除されます。このチュートリアルで既存のプロジェクトを使用した場合、それを削除すると、そのプロジェクトで行った他の作業もすべて削除されます。
カスタムプロジェクト ID が失われます。このプロジェクトを作成したときに、将来使用するカスタムプロジェクト ID を作成した可能性があります。appspot.com の URL など、プロジェクト ID を使用する URL を保持するには、プロジェクト全体を削除するのではなく、プロジェクト内の選択したリソースを削除します。

複数のチュートリアルとクイックスタートを実施する予定がある場合は、プロジェクトを再利用すると、プロジェクトの割り当て上限を超えないようにすることができます。

Google Cloud コンソールで、[リソースの管理] ページに移動します。メニュー > [IAM と管理] > [リソースを管理] をクリックします。
Resource Manager に移動
プロジェクトリストで、削除するプロジェクトを選択し、[削除] をクリックします。
ダイアログでプロジェクト ID を入力し、[シャットダウン] をクリックしてプロジェクトを削除します。

Gemini AI Chat アプリで Chat の会話に基づいて質問に回答する
Google Chat、Vertex AI、Firestore を使用してプロジェクトを管理する
インシデントレスポンスアプリは、ユーザー認証情報で認証を行い、API を呼び出して Chat API や Vertex AI API などの Google Cloud サービスを呼び出します。つまり、インシデントを初期化するユーザーには、これらのサービスへのアクセス権が必要です。アプリをより堅牢にするには、/closeIncident スラッシュコマンドを呼び出すユーザーのユーザー認証情報ではなく、サービスアカウントとして Vertex AI API を呼び出すことを検討してください。Vertex AI API のサービスアカウントの構成については、カスタムサービスアカウントを使用するをご覧ください。

Google Chat、Vertex AI、Apps Script を使用してインシデントに対応する

前提条件

目標

アーキテクチャ

環境を準備する

Google Cloud プロジェクトを作成する

Google Cloud コンソール

gcloud CLI

Cloud プロジェクトの課金を有効にする

Google Cloud コンソール

gcloud CLI

API を有効にする

Google Cloud コンソール

gcloud CLI

認証と権限付与の設定

Chat アプリを作成してデプロイする

Consts.gs コードを表示

ChatApp.gs コードを表示

ChatSpaceCreator.gs コードを表示

DocsApi.gs コードを表示

VertexAiApi.gs コードを表示

WebController.gs コードを表示

Index.html コードを表示

JavaScript.html コードを表示

Stylesheet.html コードを表示

Cloud プロジェクトの番号と ID を確認する

Apps Script プロジェクトを作成する

Apps Script プロジェクトの Cloud プロジェクトを設定する

Apps Script のデプロイを作成する

Google Cloud コンソールで Chat アプリを構成する

Chat アプリをテストする

クリーンアップ

関連トピック

`Consts.gs` コードを表示

`ChatApp.gs` コードを表示

`ChatSpaceCreator.gs` コードを表示

`DocsApi.gs` コードを表示

`VertexAiApi.gs` コードを表示

`WebController.gs` コードを表示

`Index.html` コードを表示

`JavaScript.html` コードを表示

`Stylesheet.html` コードを表示