DialogflowとLINE BotでConnpassの受付処理をスムーズにしてみた

クラスメソッドのせーのさんがAlexaを使ってConnpassの受付スキルを作成されていました。
https://dev.classmethod.jp/voice-assistant/try-to-develop-registration-skill/

それを実際に使ってみた所色々課題点が見えたので、
ほぼそのまま参考にして、処理を投げる部分は独自に今度はLINE Botを使って受付処理を作ってみました。

Alexa受付を使ってみた。

実際にこの仕組を使って先日開催した東京がおまる塾で使ってみました。
スタッフが少しサポートするだけでとても画期的に使えました。

受付がとても近未来的な感じになってとても良かったと思います。
ただ、来場者の滑舌が悪かったり、周辺の音がうるさくて音声が聞き取れなくなったので、そこが課題点と感じました。

Connpassの番号をAlexaに言うだけで受付が完了する
せーのさんが作った素晴らしいシステム#東京がおまる塾 pic.twitter.com/1mZ9A77Xhh

— がおまる@スマートスピーカーアプリ開発入門発売中！ (@gaomar) May 20, 2019

完成動画

LINEのチャットボットでConnpassの受付をスムーズにできるようにしてみました。
受付番号スキャンして読み取った番号をLINEに送信するだけで受付が完了します。#linedc pic.twitter.com/RoShmD3BU1

— がおまる@スマートスピーカーアプリ開発入門発売中！ (@gaomar) June 8, 2019

動作確認

こちらからLINEで友だちになって、受付番号を12345か54321で試すことができます。

http://nav.cx/g1QJpdv

1. Dialogflowの設定

1-1. MainIntentの設定

特に難しいことはしていません。必須入力にビジターカードNoを聞いていますが、LINE本社のセキュリティカード番号を記録する際の事務的な番号なので、通常は必要ありません。

項目	値
Intent名	MainIntent
Training phrases	ticketnumber (@sys.number)

1-2. EndIntentの設定

これはConnpassの受付処理が終わったあとにレスポンスを返すためのインテントです。
Webhook先から設定したイベント名が飛んでくるので、インテントに設定します。

項目	値
Events	FINISH
PARAMETER NAME	myMessage
ENTITY	@sys.any
VALUE	#FINISH.message
Text Response	$myMessage

2. スプレッドシートの設定

Googleドライブでスプレッドシートを新規作成します。
ツールのスクリプトエディタからプログラムを記述します。

2-1. GASプログラム

スプレッドシートを処理するプログラムを記述します。

function findParticipant(sheet, ticketNumber, cardNumber) {
  var values = sheet.getDataRange().getValues();

  for (var i = values.length - 1; i > 0; i--) {
    var val = values[i][1];
    if (val == ticketNumber) {
      var rng = sheet.getRange(i + 1, 1);
      rng.activate();
      rng.setValue(true); // チェックボックスをつける
      rng = sheet.getRange(i + 1, 1, 1, 8);
      rng.setBackground("palegreen");

      // 受付日時を書き込む
      var tm = sheet.getRange(i + 1, 4);
      tm.activate();
      tm.setValue(new Date());

      // ビジターカードNoを書き込む
      var cardRng = sheet.getRange(i + 1, 5);
      cardRng.activate();
      cardRng.setValue(cardNumber);

      // 名前を取得して、Connpassの勉強会名を取得
      return values[i][2] + "さんの受付が完了しました。ようこそ" + values[0][3] + "へ！";
    }
  }

  return "missing";
}

function doGet(e) {
   var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('出欠シート');
   var res = ContentService.createTextOutput();
   var ticketNumber = e.parameter.ticketnumber;
   var cardNumber = e.parameter.cardnumber;  
   var retval = findParticipant(sheet, ticketNumber, cardNumber);  

   res.setContent(retval);
   return res;

}

2-2. URLを取得

ウェブアプリケーションとして導入をクリックして、URLを発行します。

発行されるURLをメモします。

3. AWS Lambdaの設定

Dialogflowで設定しているWebhook先URLです。API Gatewayを経由してLambdaを実行しています。

3-1. API Gateway設定

特にこれも難しいことはしていません。API GatewayのサクセスURLを発行してください。

3-2. Lambdaプログラム

5〜6行目でDialogflowから飛んでくる値を取得しています。
11行目でスプレッドシートで処理した結果を取得して、22行目でDialogflowに返すイベントの設定をしています。

index.js

const request = require('request-promise');

exports.handler = async (event) => {
  const body = JSON.parse(event.body);
  const ticketnumber = body.queryResult.parameters.ticketnumber;
  const cardnumber = body.queryResult.parameters.cardnumber;
  var speechText = '';

  await regist(ticketnumber, cardnumber)
      .then(val => {
          speechText = val;
  });

  if (speechText === "missing") {
      speechText = `${ticketnumber}番の受付番号が見つかりません。もう一度Connpassの番号を入力してください。`;
  }

  return new Promise(function(resolve) {
      const responseJson = JSON.stringify({
        "fulfillmentText": "",
        "followupEventInput": {
          "name": "FINISH",
          "languageCode": "ja-JP",
          "parameters": {
            "message": speechText
          }
        }
      });
      var response = {
        statusCode: 200,
        headers: { "Content-type": "application/json; charset=UTF-8" },
        body: responseJson
      };
      resolve(response);
    });
};

const regist = (ticketnumber, cardnumber) => {
    let url = process.env.SPREADSHEET_URL + "?ticketnumber=" + ticketnumber + "&cardnumber=" + cardnumber;
    console.log(url);
    return request(url);
};

3-3. 環境変数の設定

環境変数は2-2で発行されたGASのURLを設定しています。

4. LINEの設定

MessagingAPIで設定します。特に説明はしません。アクセストークンの発行をします。

4-1. リッチメニューの設定

LINE Official Account　Manager画面へ遷移します。
https://manager.line.biz/

リッチメニューから作成ボタンをクリックします。

表示期間を設定して、コンテンツの設定にあるアクションはリンクを選択します。
リンクのURLはline://nv/cameraと入力します。たったこれだけで、画像をクリックするとカメラが起動します。

line://nv/cameraで起動されるカメラアプリは既にOCRで読み取り機能が備わっています。
結果を自動的にLINE Botに返せるのでとても便利です。

まとめ

GASのプログラムの部分はせーのさんのをほぼ流用させていただきました。
LINEのカメラ部分は何もせずにOCRの読み取り機能が使えるのでとても便利でした。
これを使って少しでもConnpassの受付が楽にできると嬉しいです。

システム化のご検討やご相談は弊社までお問い合わせください。
https://i-enter.co.jp/contact/