LINEトーク画面上で回答できる問診票を作成する方法〜Messaging APIとGAS〜

こんにちは、せこしょーです。
前回はLINE自動返信ツールを作成しましたが、今回はLINE Messaging APIの第２弾として「LINEトーク画面上で回答できる問診票」を作成します。この記事のプログラムをコピーするだけで以下のような感じで誰でも簡単に作成できます！

〜回答結果〜

Googleスプレッドシート

Googleフォーム

今回の動画はこちらです。

事前に必要なもの
・LINEアカウント
・Googleアカウント

今回のLINE問診票も「LINE公式アカウントの開設」と「Messaging APIの利用設定」が必要です。これらの設定方法については↓の前回記事と同じなので参考ください。

作業に取り掛かる前に、今回のLINE問診票の仕組みをイメージした上で作業を行うといいです。

【LINE問診票の仕組み】

ユーザー（患者さんなど）が「問診」とメッセージを送信する → LINE公式アカウントに紐付いているプログラムが作動する → プログラムが「Web問診を行いますか？」というテンプレートを返信する、という仕組みです。

実際の問診票（Googleフォーム）については、「はい」ボタンにリンクが埋め込まれています。

問診票を作成する（Googleスプレッドシート × Googleフォーム）
問診票のプログラム（Google Apps Script）を作成する

ウェブアプリを公式LINEを紐付ける（Webhook設定）

実際に問診票に回答してみる

まとめ

問診票を作成する（Googleスプレッドシート × Googleフォーム）

前回同様、LINE公式アカウント開設とMessaging APIの利用設定が完了したら、
問診票を作成していきます。

問診票はGoogleフォームで作成しますが、問診票の回答内容はGoogleスプレッドシートに書き込まれるようにしたいので、まずはGoogleスプレッドシートを開きます。

Google検索画面から下記のようにGoogleドライブに移動します。
※Googleアカウントへのログインが必要です

左メニューの「新規」ボタンからGoogleスプレッドシートを選択します。

スプレッドシートのタイトルは問診票としていますが、お好きな名前のタイトルでも大丈夫です。

続いて問診票の質問事項をGoogleフォームで作成します。ツール →「新しいフォームを作成」をクリックしてスプレッドシートとGoogleフォーム（問診票）を紐付けます。

Googleフォームで問診票の質問と回答形式（記述式、ラジオボタン、チェックボックスなど）を作成していきます。

一つの例として、以下のような感じで作成します。

編集はあとから変更可能なので、とりあえずの編集が完了したら「回答者向けURL」を取得しましょう。※編集画面のURLとは別

回答者向けのURLは「送信」ボタンを押下して取得します。このURLはLINEのチャネルアクセストークン同様、後でプログラムに貼り付けるので一旦どこかにコピーしておいてください（もちろんあとからコピーしてもいいです）。

問診票はこれで完成です。ユーザー（患者さんなど）が回答した内容が作成したGoogleフォームに紐付いているスプレッドシートに書き込まれます。※シートはフォーム作成後に自動生成される

続いてLINEと問診票を繋げるプログラムを作成していきます。作成と言ってもこの記事にあるプログラムを貼り付けるだけです＾＾

ちなみに、GoogleスプレッドシートもGoogleフォームも編集後は勝手に自動保存されるので保存は気にしなくても大丈夫です！

問診票のプログラム（Google Apps Script）を作成する

Google Apps Scriptの開き方ですが、今回は作成した問診票と紐付けるために、スプレッドシート上から拡張機能 → Apps Scriptを開きます。

Google Apps Scriptが開いたら元のコードを削除して以下コードに置き換えてください。その後プログラム内にこれまでに取得した「LINEチャネルのアクセストークン」と「Googleフォームの回答者向けURL」を貼り付けます。


// LINEチャネルのアクセストークン
const LINE_TOKEN = 'LINEチャネルのアクセストークン'; // ここに「チャネルアクセストークン」を貼りつけます

// GoogleフォームのURL
const FORM_URL = 'Googleフォームの回答者向けURL' // ここに「Googleフォームの回答者向けURL」を貼りつけます

const LINE_URL = 'https://api.line.me/v2/bot/message/reply';

//postリクエストを受取ったときに発火する関数
function doPost(e) {
  const event = JSON.parse(e.postData.contents).events[0];
  // LINE返信用のトークン
  const replyToken = event.replyToken;
  // ユーザーのメッセージを取得
  const userMessage = event.message.text;

  // 応答メッセージの内容
  let messages = [];
  if (userMessage === "問診") {
    //問診テンプレート
    messages = [
      {
        "type": "template",
        "altText": "WEB問診",
        "template": {
          "type": "confirm",
          "text": "WEB問診を行いますか？",
          "actions": [
            {
              "type": "uri",
              "label": "はい",
              "uri": FORM_URL
            },
            {
              "type": "message",
              "label": "いいえ",
              "text": "いいえ"
            }
          ]
        }
      }
    ];
  } else if (userMessage === "いいえ") {
    messages = [
      {
        type: "text",
        text: "終了しました。何かあればいつでもご利用くださいませ。",
      },
    ];
  } else {
    return;
  }
  //lineで返答する
  UrlFetchApp.fetch(LINE_URL, {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': `Bearer ${LINE_TOKEN}`,
    },
    'method': 'post',
    'payload': JSON.stringify({
      'replyToken': replyToken,
      'messages': messages,
    }),
  });
  ContentService.createTextOutput(JSON.stringify({ 'content': 'post ok' })).setMimeType(ContentService.MimeType.JSON);
}

下記のように「LINEチャネルのアクセストークン」と「GoogleフォームのURL」を置き換えたら、Ctrl + Sで保存して完了です。