LINE公式アカウントに届いたメッセージをGoogle Chatに送信

チャット基盤はGoogle Chatを使っている関係で、いくつもChatアプリを起動しておきたくない。
LINE公式アカウントはメッセージが届いたときに開けばいいよねって考え方。

フロー
LINE公式アカウントの作成
Google Chatの設定
GAS（Google Apps Script）の設定
LINE公式アカウントからGoogle Chatへメッセージ転送
1. 設定をいくつか変更
2. 動作確認

フロー

LINE公式アカウント→(Webhook)→GAS(Google Apps Script)→(Webhook)→Google Chat

LINE公式アカウントの作成

LINE公式アカウントにログインして、アカウントリストの下側、「作成」をクリック

新しいタブでLINE公式アカウントの作成画面が表示されるので、必須項目を入力して「確認」ボタンをクリック

確認画面が表示されるので、「完了」ボタンをクリック

申込み完了画面が表示される。
テスト用のアカウントはアカウント認証は必要ないので、「あとで認証を行う（管理画面に移動）」をクリック

「情報利用に関する同意について」が表示されるので、「同意」をクリック

「LINEヤフーグループへの情報提供に関する個別規約への同意について」画面が表示されるので「同意」をクリック

管理画面が表示されるといろいろとチュートリアルが表示されるので、確認していく。

ここでは説明を省略する。

これでLINE公式アカウントが出来上がる。

Google Chatの設定

LINE公式アカウントが受信したメッセージを受信するGoogleChatのスペースを作成する。
スペースの右側にある「＋」ボタンをクリックして「スペースを作成」をクリック

スペースを作成画面で、スペース名を入力して「作成」ボタンをクリック

チャット画面が表示されるので、チャット名の右側の「ｖ」をクリックして「アプリと統合」をクリック

「Webhookを追加」をクリック

名前を入力して「保存」ボタンをクリック

これでGoogleChatに表示するWebhookのURLが払い出される。
これは後で使うので、一旦置き。

GAS（Google Apps Script）の設定

GAS単体とするか、Spreadsheetにつけるか悩みどころだけど、ログの出力がないと動いているかわかりにくかったり検証しにくかったりするので、Spreadsheetに付ける形で進める。GAS単体でもログは確認できるが、ここではわかりやすくSpreadsheetで進める。

スプレッドシートの新規作成

Googleドライブでスプレッドシートを新規作成する。
どこかのフォルダで右クリックして「Google スプレッドシート」をクリック

拡張機能をクリックして「Apps Script」をクリックする。

新しいタブでApps Scriptが表示される。

GASの準備

LINE公式アカウントからのWebhookはPOSTで送られるので、Apps Scriptで受け取るメソッドは「doPost」となる。
受け取ったデータをスプレッドシートに出力してみる。
上記の「コード.gs」のコードを削除して、以下のコードを記載する。

function doPost(e) {
  // アクティブなスプレッドシート、シートを取得
  let sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  // 最終行に現在日時と受け取ったJSONデータを出力
  sheet.appendRow([(new Date()).toLocaleString(), e.postData.contents]);
}

右上のデプロイをクリックして、「新しいデプロイ」をクリック

新しいデプロイ画面が表示されるので、歯車アイコンをクリックして「ウェブアプリ」をクリック

説明を記入して、アクセスできるユーザーを「全員」に変更して「デプロイ」ボタンをクリック

10秒ぐらい待つと、新しいデプロイ画面が表示されるので、「アクセスを承認」をクリック

いくつか承認が必要な画面が出てくるので、許可していく。

デプロイ画面に戻ってくるとウェブアプリのURLが払い出されるので、「完了」ボタンをクリック

LINE公式アカウントの設定

LINE公式アカウントにログインして、対象のアカウント画面を表示する。
画面右上にある「設定」をクリック

まずは、「Messaging API」をクリックして、「Messaging APIを利用する」をクリック
これをやっておかないと、後述の応答設定でWebhookをONにできない。

プロバイダを選択画面が表示されるので、プロバイダーを作るか、既存分のプロバイダーを選択し、「同意する」をクリック（私の場合はすでに作ってあったので、それを選んだ。）

プライバシーポリシーと利用規約の登録画面が表示されるので、URLを設定して「OK」をクリック

最終確認画面が出てくるので、「OK」をクリック

Messaging API画面にWebhook URLにGASで作ったウェブアプリURLを貼り付けて「保存」をクリック

左メニューの「応答設定」をクリック

チャットは使える必要があるのでONにして、WebhookもONにする。ONにしたら勝手に保存される。Webhookの下にある「Messaging APIの設定画面を開く」

先程保存したURLが設定されていることを確認して、画面下部にある「LINE Developers」をクリック

新しいタブが開くので、右上にある「コンソール」をクリック

先程設定したプロバイダーをクリック

先程作ったLINE公式アカウントをクリック

Webhook URLの下に、「検証」ボタンがあるのでクリック

数秒後、成功画面が表示される。もしかしたらGAS側が間に合っていない

先程作ったスプレッドシートに1行追加されているので、入り口としては問題なさそうだ。

これで準備はできた。

LINE公式アカウントからGoogle Chatへメッセージ転送

設定をいくつか変更

先程作ったGASのコードを以下に変更する。

function doPost(e) {

  // アクティブなスプレッドシート、シートを取得
  let sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  // 最終行に現在日時と受け取ったJSONデータを出力
  sheet.appendRow([(new Date()).toLocaleString(), e.postData.contents]);

  // Webhookで取得したJSONデータをオブジェクト化
  let eventData = JSON.parse(e.postData.contents).events[0];
  // Google Chatに送るメッセージを生成
  let replyMessage = "type：" + eventData.message.type + "\nmessage：" + eventData.message.text;
  // Google Chatへ送信
  sendGoogleChat(replyMessage);
}

function sendGoogleChat(msg) {
  const url = "<< Google ChatスペースのWebhook URL >>";
  const message = {
    'text': msg,
  }
  const options = {
    'method': 'POST',
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8'
    },
    'payload': JSON.stringify(message)
  };

  UrlFetchApp.fetch(url, options);
}

<< Google ChatスペースのWebhook URL >>は、Google ChatのWebhookにある右側の「︙」をクリックして「リンクをコピー」した内容を設定する。