LINE公式アカウントとスプレッドシートでショップ向け問い合わせフォームを作る【入門勉強会】

LINEからLINE公式アカウントにメッセージを送信するとGASで処理をして、スプレッドシートに保存します。次にメールアドレスの保存を促すメッセージを送信して、そのメッセージを保存するものを作成します。

１．１ LINE Developers（https://developers.line.biz/ja/）からログイン

１．２．アカウントを入力

LINEアカウント・・・・・ 現在、利用しているLINEと連携することができます。
ビジネスアカウント・・・ メールアドレスで登録することができます。

※LINEアカウントだと、スマホでQRコードを読み取ってログインができるなど簡単なのでおすすめです。

アカウントをお持ちでないかたは、これからアカウントを作成します。

１．２．１アカウントの新規作成

①

初めての方は「アカウントの作成」を押下してください。

②

「LINEアカウントで登録」または「メールアドレスで登録」を選択してください。

LINEアカウントで登録は簡単ですので、こちらでは、メールアドレスで登録の説明をします。

③登録するメールアドレスを入力してください。

④入力したメールアドレスに登録確認メールが届きますので「登録画面に進む」を押してください。

⑤名前とパスワードを入力して登録してください。

⑥登録確認画面で「登録」を押下

⑦ユーザー登録が完了しました。LINE DevelopersIDの作成を行います

⑧LINE開発者登録

開発者名とメールアドレスを入力し、LINE開発者契約の内容を確認しチェックをいれ、アカウントを作成します。

３．１新規プロバイダーを作成

３．２チャネル作成

チャネル設定で「Messaging API」を選択

チャネルを作成します。

・チャネルの種類
 MessagingAPI（自動で選択済み）
・プロバイダー
 先ほど作成したプロバイダー（自動で選択済み）
・チャネルアイコン
 今回のチャネルのアイコンを設定できます。
 特にない場合は選択無しでも、後ほど設定できます。
・チャネル名
 20210511ハンズオン
 など、任意のチャネル名を設定してください。
・チャネルの説明
 簡単な説明をいれます。チャネル名と同じでも問題ありません。
・大業種
 個人
・小業種
 個人（その他）
・メールアドレス
 自動入力済み
・プライバリーポリシーURL
 サービス利用規約URL
 今回は空欄。

「LINE公式アカウント利用規約」と「LINE公式アカウントAPI利用規約」にチェックをいれ作成ボタンを押します。

４．１チャネルアクセストークンの発行

このチャネルと後ほど作成するGAS(Google Apps Script)をつなぐ認証キーを発行します。

先ほどの画面で「MessagingAPI設定」タブを押し、下部にある「チャネルアクセストークン(長期)」の発行ボタンを押します。すると長い文字列が表示されます。これが「チャネルアクセストークン」となり、認証に使われる文字列となります。外部に漏れると、このLINEチャネルが悪用される恐れがありますので、ご注意ください。

この発行されたチャネルアクセストークンをメモしてください。

４．２ webhook設定

Webhookとは、http通信でデータを送信すること先を設定することです。

LINEから入力されたデータをどこのURLに送信するかを設定します。

LINE Developersの機能では、高度なMessaging APIの設定などは行えますが、簡単な応答メッセージや、挨拶メッセージの設定は、LINE official Account Managerにて行います。その他、チャネルのアイコンや名称、リッチメニューの設定などもLINE official Account Managerにて行います。

５．１応答メッセージのオフ設定

では設定を行います。

MessagingAPI設定タブから、下部にある応答メッセージの編集ボタンをクリックします。するLINE official Account Managerに飛びます。

LINE official Account Managerの画面から、応答設定にある、応答メッセージをオフにします。

データベースとして使用するスプレッドシートとGASの作成を行います。

今回コード(プログラム)は、事前に作成しておりますのでそちらを利用します。

６．１スプレッドシートのコピー

下記アドレスの開きスプレッドシートを各自のマイドライブにコピーしてください。

https://docs.google.com/spreadsheets/d/1B6Jc3p8tLx3hNk4c28n-OQYLtUIgL-QagwjSCFlrc3M/edit?usp=sharing

６．２ GASコードの編集

GASのコードは記載されております。皆さんのファイルで利用できるように先ほど取得したチャネルアクセストークンとスプレッドシートのURLを記載します。

まずは、スクリプトエディタを開きます。

スプレッドシートから「ツール」→「スクリプトエディタ」を選択してます。

（1回選択するだけだと、開かないことがあるので、その時はもう1度同じように選択してください。）

スクリプトエディタが開き、今回使用するコードがみられると思います。

ここに記載のある

const SHEET_URL = "https://docs.google.com/spreadsheets/d/XXXXXXXXXXXXXXXXXXXXXXXXXX/";
const CHANNEL_ACCESS_TOKEN = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/w1cDnyilFU=';

を編集します。

SHEET_URLには
先ほど、マイドライブにコピーしたスプレッドシートのURLをコピーしてください。

CHANNEL_ACCESS_TOKENには、先ほどLINE DevelopersのMessagingAPIで取得したチャネルアクセストークンを記載します。（非常に長いですがそのままコピーしてください。）

記載が完了しましたら保存ボタンをおしてください。

７．１新しいデプロイの実行

保存が完了しましたら、デプロイをします。

では、実際にやってみましょう。

右上にある、「デプロイ」ボタンから「新しいデプロイ」を選択します。

新しいデプロイ画面でウェブアプリを選択します。

そして各項目を入力します。

・説明
 例）ハンズオンデプロイ初回
 ※この欄は空欄でもかまいません
・ウェブアプリ
 自分
・アクセスできるユーザー
 全員

に設定して、デプロイボタンを押します。

初めてそのコードをデプロイするときは、承認してもよいかの確認がありますので

「アクセスを承認」ボタンを押します。

次にどのアカウントで承認するか選択します。

スプレッドシートおよびGASを作成したアカウントを選択します。

作成したGASがスプレッドシートのデータを編集したり、外部サービス(今回であれば、LINEDevelopers)へ接続してもよいかの確認が来ますので、許可ボタンを押します。

デプロイが完了です。

以下の画面が表示されます。

ウェブアプリに表示されているURLが、作成をしたWEBアプリのURLです。

先ほどGASで作成したWEBアプリのURLをwebhookの送信先として設定します。

LINEDevelopersの画面に戻り、MessagingAPI設定タブを選択し、Webhook設定のWebhook URLのところに、先ほどコピーしたWEBアプリのURLを貼り付けます。

貼り付けて更新ボタンを押し、そしてwebhookの利用にチェックをいれます。

以上で、完了となります。

実際に、動くか皆さんのLINEに友だち登録をして、動作するか試してみましょう。

LINEDevelopersから、MessagingAPI設定タブを選択します。

するとQRコードが表示されておりますので、こちらをスマホで読み込んで友だち登録します。

以下のようにメッセージがかえってくれば成功です！！

それでは先ほど、コピーして保存しましたスプレッドシートをご覧ください。

こちらで話しかけたメッセージが保存されていると思います。

GASに記載されていたコード

const SHEET_URL = "https://docs.google.com/spreadsheets/d/XXXXXXXXXXXXXXXXXXXXXXXXXXXXX/";
const CHANNEL_ACCESS_TOKEN = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/w1cDnyilFU=';
var SS = SpreadsheetApp.openByUrl(SHEET_URL); //SpreadsheetのURL
var sheet = SS.getSheetByName("Inquiry"); //Spreadsheetのシート名（タブ名）
var log = SS.getSheetByName("log"); //Spreadsheetのシート名（タブ名）
var ID_data = sheet.getRange(1, 2, sheet.getLastRow()).getValues();


function doPost(request) {
 //POSTリクエストをJSONデータにパース
 const receiveJSON = JSON.parse(request.postData.contents);
 const event = receiveJSON.events[0];

//送られてきたデータをlogシートに記載
log.appendRow([event]);

//友だち追加されたときに、実施するイベント
 if(event.type=="follow"){
   sheet.appendRow([getCurrentTime(),event.source.userId,,,,"follow"]);
   LINE_send(event.replyToken,"はじめまして、問い合わせありがとうございます。\nお問合せ内容をご入力ください。")
   return // returnで、処理を終了させる。
  }

//テキスト以外が送られてきたときは何もしない。
 if (event.message.type != "text"){
   return  
  }

 //下に記載のfunction useID_check()にuserIdを入力して実行
 //＋１することにより、行番号を同じにしている。
 var data_row =  useID_check(event.source.userId) + 1

//上で得たuseIdの行番号と６列目のデータ(ユーザーのステータス)の値を取得
 var user_status = sheet.getRange(data_row,6).getValue();

 if(user_status==="follow"){
   LINE_send(event.replyToken,"お名前をご入力ください。")
   sheet.getRange(data_row,3).setValue(event.message.text);
   sheet.getRange(data_row,6).setValue("name");
  }else if(user_status==="name" || user_status==="name"){
   LINE_send(event.replyToken,"ご連絡用のメールアドレスをご入力ください。")
   sheet.getRange(data_row,4).setValue(event.message.text);
   sheet.getRange(data_row,6).setValue("address");
  }else if(user_status==="address"){
   LINE_send(event.replyToken,"ありがとうございます。\n確認取れ次第返信いたします。")
   sheet.getRange(data_row,5).setValue(event.message.text);
   sheet.getRange(data_row,6).setValue("finish");
  }else{
   LINE_send(event.replyToken,"いつも、問い合わせありがとうございます。\nお名前をご入力ください。")
   sheet.appendRow([getCurrentTime(),event.source.userId,event.message.text,,,"name"]);
 }

}


function getCurrentTime() {
  //日付の宣言
  return Utilities.formatDate(new Date(), "Asia/Tokyo", "yyyy/MM/dd HH:mm:ss");
}


//送られてきたuserIDがどこにあるかをチェックする。lastIndexOf()で一番最後の行から上の行に向かって検索する。なかった場合は、-1の数字が返される。
function useID_check(userId) { 
  //2次元配列を1次元配列に変換
 var arrData = Array.prototype.concat.apply([], ID_data);
 //1次元配列に変換した ID_data(A列)の中に、userIdが含まれているかチェック -1であれば入っていない
 var check = arrData.lastIndexOf(userId); 
 return check;
}

function LINE_send(replyToken,text) {
  reply_text ={
    "replyToken": replyToken,
   "messages": [{
     "type": "text",
     "text": text,
     }]
  }

 options = {
   "method": "post",
   "headers": 
   {
     "Content-Type": "application/json",
     "Authorization": "Bearer " + CHANNEL_ACCESS_TOKEN,
   },
   "payload": JSON.stringify(reply_text)
  };

  UrlFetchApp.fetch("https://api.line.me/v2/bot/message/reply", options);
}

;

１．１ LINE Developers（https://developers.line.biz/ja/）からログイン

１．２．アカウントを入力

１．２．１ アカウントの新規作成

３．１ 新規プロバイダーを作成

３．２ チャネル作成

４．１ チャネルアクセストークンの発行