無料運用できる飲食店用モバイルオーダーシステムを作ってみる。（GAS + LINE bot）

時節柄もあり、飲食店ではスマートフォンを使ったモバイルオーダーの需要が増しているそうです。店舗の構造や経営体制によりけりかと思いますが、業務効率化の一助にもなり得ます。

ということで、GAS（Google Apps Script）とLINE botを使って飲食店用のモバイルオーダーシステムを作ってみました。

スマホ、もしくはタブレット等のモバイル端末、Google アカウント、LINE アカウントの3つがあれば無料で運用が可能です。

ちなみに、プライベート用のLINEと分ける場合にはアカウントがもうひとつ必要になります。LINEモバイルであれば電話番号のないSIMでもLINEが使えますのでおそらく最安です。

【機能】

基本機能は、「お客さまがテーブルにあるQRコードを読み込んでフォームから注文をするとお店のLINEにオーダーが届く」というシンプルなものです。

お客さまは自身の端末を使って注文することになります。紙等のメニュー表は用意しておいた方が見ながら注文しやすい気がします。

データの流れとしては、フォームに入力された内容をスプレッドシートに保存してLINE botでプッシュ通知をします。

おまけ追加機能として、「呼び鈴」と「お会計金額の集計」も付けました。

【作り方】

ひとまず最小構成で、ひとつのテーブルについて作っていきたいと思います。

① Google フォームとスプレッドシートの作成

フォームの設計は以下のようになります。

-----

[4 セクション中 1 個目のセクション]

▼パスワード

　記述式テキスト（短文回答）

　必須

　回答の検証（数値／次と等しい／任意の数値／パスワードが違います。）

　→次のセクションに進む

[4 セクション中 2 個目のセクション]

▼プルダウンメニューから選択してください。

　プルダウン

　　ご注文　→次のセクションに進む

　　店員を呼ぶ　→フォームを送信

　　お会計　→フォームを送信

　必須

[4 セクション中 3 個目のセクション]

▼メニュー1　500円

　プルダウン（注文数量）

▼メニュー2　800円

　プルダウン（注文数量）

▼メニュー3　1000円

　プルダウン（注文数量）

[4 セクション中 4 個目のセクション]

▼備考欄

　記述式テキスト（長文回答）

-----

インターネット上にフォームが設置されているため、諸々の誤入力対策として最初にパスワード項目を設けています。不要であれば消してください。

3個目のセクションのメニュー、数量は適宜変更してください。メニュー名の後に価格を書いておくと分かりやすいと思います。

このフォームのURLのQRコードを作成してテーブル（メニュー表等に）に配置します。お客さまにはこのQRコードから注文していただくようになります。

次に、「回答先を選択」で新しいスプレッドシートを作成しましょう。

「お会計金額の集計」機能を実現するために、この新しく作成されたスプレッドシートに少し手を加えます。

各メニューの価格を2行目に追加します。見出しの固定も2行目までに移動しておきます。また、オーダーの合計金額を入力する列を最終列（備考欄の次）に追加するため、1行目最終列に「合計金額」と入力しておきます。

最後に、スプレッドシートの名前がテーブル番号として通知に表示されるので分かりやすいものに変更しておきましょう（例：1番テーブル、2番テーブル...）。

これでフォームとスプレッドシートは準備OKです。

② LINE DevelopersとGASの設定・準備

次にLINE botを利用するために必要な設定と準備です。以前作った予定通知LINE botと同じですね。

こちらのサイトが分かりやすいです。途中手順で出てくるスプレッドシートはフォームから作成したものを利用してください。

~~【LINE BOT】30分からできるLINE BOT開発①【下準備】 | tomowarkar~~（※リンク切れしました）

~~【LINE BOT】30分からできるLINE BOT開発②【GASとLINEボットの紐付け】 | tomowarkar~~（※リンク切れしました）

突っかかったらこちらも。

【LINE Botの作り方】Messaging API × GAS(Google Apps Script)でおうむ返しボットを作成する | TAKEIHO

③ コードの作成

コードは以下の通りです。

var ACCESS_TOKEN = "チャンネルアクセストークン";
var PUSH = "https://api.line.me/v2/bot/message/push";
 
function push() {
    var spreadsheet = SpreadsheetApp.openById("スプレッドシートID");
    var sheet = spreadsheet.getActiveSheet();
    var tableNum = spreadsheet.getName();
  
    var lastRow = sheet.getLastRow();
    var lastCol = sheet.getLastColumn();
  
    var timeStamp = sheet.getRange(lastRow,1).getValue(); 
    var time = Utilities.formatDate(timeStamp, "JST", "HH:mm");
  
    var mobileOdr = sheet.getRange(lastRow,3).getValue();
  
    if(mobileOdr == "ご注文"){
      var value =[];
      var totalAmount = 0;
      for(var i = 4; i <= (lastCol - 2); i++) {
        var menu = sheet.getRange(1,i).getValue();
        var price = sheet.getRange(2,i).getValue();
        var quantity = sheet.getRange(lastRow,i).getValue();
        if(quantity == ""){
          continue;
        }
        value.push(menu + "　" + quantity + "\n\n");
        var totalPrice = price * quantity
        totalAmount = totalAmount + totalPrice
      }
      var remarks = sheet.getRange(lastRow,(lastCol - 1)).getValue();
      if(remarks != ""){
        value.push("【備考】" + "\n" + remarks + "\n\n");
      }
 
      var postData = {
        "to" : "LINEユーザーID",
        "messages" : [
          {
            "type" : "text",
            "text" : tableNum + "\n\n" + "【注文】" + time + "\n\n" + value.join("") + "合計 " + totalAmount + "円です。"
          }
        ]
      };
      
      sheet.getRange(lastRow, lastCol).setValue(totalAmount);
      
    } else if(mobileOdr == "店員を呼ぶ"){
      var postData = {
        "to" : "LINEユーザーID",
        "messages" : [
          {
            "type" : "text",
            "text" : tableNum + "\n\n" + "【呼び鈴】" + time
          }
        ]
      };
      
      sheet.getRange(lastRow, lastCol).setValue(0);
 
    } else if(mobileOdr == "お会計"){  
      var check =  0
      for(i = 1; i <= (lastRow - 2); i++){
        var end = sheet.getRange((lastRow - i),3).getValue();
        if(end == "お会計"){
          break;
        }
        var totalAmount = sheet.getRange((lastRow - i),13).getValue();
        var check =  check + totalAmount
      }
      
      var postData = {
        "to" : "LINEユーザーID",
        "messages" : [
          {
            "type" : "text",
            "text" : tableNum + "\n\n" + "【お会計】" + time + "\n\n合計 " + check + "円です。"
          }
        ]
      };
      
      sheet.getRange(lastRow, lastCol).setValue(check);
      
    }
  
    var headers = {
        "Content-Type" : "application/json; charset=UTF-8",
        "Authorization" : "Bearer " + ACCESS_TOKEN
    };
  
    var options = {
        "method" : "POST",
        "headers" : headers,
        "payload" : JSON.stringify(postData)
    };
    return UrlFetchApp.fetch(PUSH, options);
}

まるっとコピペしてください。

以下の3つの値（全5ヵ所）は固有になりますので書き換えてください。

・1行目の「チャンネルアクセストークン」

LINE Developersの該当するチャンネルのMessaging API設定で発行したものです。

・5行目の「スプレッドシートID」

テーブルに対応するスプレッドシートのIDを入力します。該当するスプレッドシートを開いた状態でアドレスバーURLの下記部分に表示されます。ちょっと長めです。

https://docs.google.com/spreadsheets/d/ここの値をコピペ/edit#gid=0

・38、52、76行目の「LINEユーザーID」

通知が届くお店のLINEアカウントのユーザーIDになります。LINE Developersから確認できます。

ちなみに38行目が注文、52行目が呼び鈴、76行目がお会計の届き先になりますのでそれぞれ別のユーザーID、もしくは複数ということも可能です。予定通知LINE botのユーザーIDの登録・削除機能を流用できます。

複数宛の場合は2行目を以下のように書き換えてください。

var PUSH = "https://api.line.me/v2/bot/message/multicast";

GASの初回実行時に承認が必要となります。無料のGoogleアカウントの場合「このアプリは確認されていません」とちょっとこわい？ページが表示されますが大丈夫です。ここで「安全なページに戻る」をクリックすると実行できませんので、「詳細」→「プロジェクト名（安全ではないページ）に移動」から承認します。

④ トリガーの設定

フォームに送信されたタイミングでpush関数を実行するためにトリガー設定をします。

「トリガーを追加」より、

・「実行する関数を選択」→ push

・「実行するデプロイを選択」→ Head

・「イベントのソースを選択」→ スプレッドシートから

・「イベントの種類を選択」→ フォーム送信時

・「エラー通知設定」→ 今すぐ通知を受け取る

これでフォーム送信時に通知がされます。

⑤ ウェブアプリケーションとして公開

コードが完成しましたら「公開」→「ウェブアプリケーションとして導入…」より、

・「プロジェクトバージョン: 」→ new

・「次のユーザーとしてアプリケーションを実行: 」→ 自分（自分のGmailアドレス）

・「アプリケーションにアクセスできるユーザー: 」→ 全員（匿名ユーザーを含む）

で更新してください。

これでひとまず完成です。

実際にはテーブルの数だけフォームとスプレッドシートのセット、push関数（コード4行目の「function push() {」から最終行の「}」まで）、トリガー設定が必要になります。

関数名はテーブルごとに異なるものにしてください（例：1番テーブル→push_1、2番テーブル2→push_2...）。

また、関数内の「スプレッドシートID」を対応するスプレッドシートものに変更してください。

【通知内容】

早速使ってみましょう。（メニューの内容がフォームの例と異なっています。）

お客さまがフォーム送信すると以下のような通知がされます。

注文ではオーダー数、備考、合計金額を表示してくれます。呼び鈴は通知が来るだけです。笑

お会計では追加注文分も合わせて金額を表示してくれます。

＊＊＊

そんなこんなでモバイルオーダーシステムを作ってみました。

LINE公式アカウントのフリープランは通知件数が月に1000件までですので、それ以上使う場合には有料プランにする必要があります。

このモバイルオーダーの活用法として、QRコードからフォームの間にサイトをはさめて、もしくはフォーム自体をサイト埋め込みにして情報発信やアンケート等をしたりということもできそうです。あとは注文の集計、売上管理なんかも組み合わせていけますね。

根本的な問題としては、うちは飲食店ではないため、実用に耐えうるのか実証ができません。笑

でも、飲食店の方でモバイルオーダーを導入したいけどコストが…という場合は作ってしまうのも手かもしれません。

詳解！ Google Apps Script完全入門 [第3版]
by SimpleImageLink

・関連投稿

GASで簡単な予定通知LINE botを作ってみる。

Twitter（@nkkmd）、Instagram（@nkkmd）も日々更新中です。

ファーマーズハウスさわ

ページ

2020年8月8日土曜日

無料運用できる飲食店用モバイルオーダーシステムを作ってみる。（GAS + LINE bot）