ユーザーの方の声を反映しv2に！
以前に以下でお届けしたノーコード注文システムですが、その後も問い合わせを頂くことが多く、少しバージョンアップしたのであらためて記事に起こそうとした次第です。
以下のアドベントカレンダー18日目の記事でもあります。
主な変更点
・商品価格を設定可能に
・スプレッドシートに売上金額などを反映（売上管理にそのまま活用できる）
・メニューの追加方法を少し簡易に
・ビジネスアカウント利用時の対応
・グループトーク内での利用に対応
・LINE通知のボタンを見やすく（FlexMessageに変更）
などなど
ざっくり登場人物
ノーコードと謳ってはいますが、裏ではGASを使っています。
あくまで想定する利用ユーザー（お店の方々）にとってはコードを意識しないで済むという意味です！
流れとしては、以下のような感じです。
- お客様側はLINEを必要とせず、GoogleFormより注文送信
- フォームの送信をトリガーに、注文情報をスプレッドシートに記録
- 同時にお店側にLINE通知、注文を受け付けた旨をお客様側にメール通知
- お店側でLINE操作にて、状態に合わせて「受付完了」などの処理を実行
- 処理に応じてお客様にメール通知
- 注文内容はスプレッドシートに蓄積して管理できる
やってみましょう
では。文章と図だけではやや面倒さもあるので、この記事を元にまた動画でお届けできたらと思います！
1. スプレッドシートとフォームの準備
1. 配布用のスプレッドシートを自身のGoogleドライブにコピー
以下に配布用のスプレッドシートがあるので、自身のGoogleドライブにコピーします
もれなくGAS（Apps Script）も付いてきます
2. 注文フォームのコピー
以下を押して自身のGoogleドライブにコピーします。
実際に活用される際、メニュー項目にある金額表記は、メニュー名の後に ¥記号で金額を入れるようにしてください。¥記号の後ろを金額として扱っています。
3. フォームとスプレッドシートを紐づける
フォームを開き、回答タブにある「スプレッドシートにリンク」を押下
「既存のスプレッドシートを選択」で、コピーしたスプレッドシートを選択します。
スプレッドシートに新しく「フォームの回答」というシートが追加されます。
4. フォームから送信してみる
試しに一度フォームから送信して、スプレッドシート に回答されることを確認します。
回答者が「特定のユーザー」となっていたら「管理」を押し、回答者を「リンクを知っている全員」に設定し公開します。
公開したら「回答者へのリンクをコピー」して、フォームに送信してみます。
回答が記録されればOKです。
5. 注文シートを整える
シートの名前を「order」に変更します。
↓
「_order」シートを参考に「order」シートの1行目と2行目を修正します。
具体的な修正は、列KからQに以下の項目を追加するのと、2行目をまるっと追加します。
このとき「order」シートの2行目には、サンプルで送信した回答がありますが上書きします。
「_orderシート」と同じ状態になっていればOKです。
以上でスプレッドシート（注文管理シート）とフォーム（注文受付フォーム）の準備ができました。
2. GASのデプロイ
1. デプロイ
以下の通りデプロイします。
スプレッドシートの拡張機能メニューから「Apps Script」を選択
以下のScriptのタブが開きます。
右上の「デプロイ」から「デプロイを管理」から以下の通りデプロイを完了してください。
- デプロイメントの作成
- アクセスできるユーザーを「全員」にし「デプロイ」
- アクセスを承認
- アカウント選択画面にて自身のアカウントを選択
- Googleの確認画面で「Advanced」を選択
- Go to 2024_明日から使える飲食店向け注文システムを作るv2 (unsafe) を選択
- アクセス確認画面で「Allow」を選択
- デプロイが完了するので「ウェブアプリURL」をコピー（あとで使用します）
2. トリガーの設定
フォームより注文があったら、LINE側に通知が届くようにトリガーを設定します。
Apps Scriptの左側にあるメニューから「トリガー」を選択
「トリガーを追加」を選択
以下の通り設定して保存します。
| 項目 | 設定 |
|---|---|
| 実行する関数 | receivedOrder |
| イベントの種類 | フォーム送信時 |
先ほど同様にアクセス許可の画面が出たら許可をします。
トリガーが作成されると以下のように1件追加されます。
以上でGASの設定も完了です。
3. LINEの設定
1. LINE Official Account Manager
LINE アカウントにログインします。
公式アカウントをこれから作成の方は、新規に公式アカウントを作成します。
アカウントの右側にある「設定」を押すと、アカウント設定画面になります。
Messaging APIを利用するを選択
プロバイダーがなければ作成。あれば既存のプロバイダーを選択。
プライバシーポリシーのURL等は省略
MessagingAPIが有効になりました。
Webhook URL に、GASデプロイ時に表示されたウェブアプリURLを設定します。
応答設定メニューより、応答設定を以下の通り変更します。
| 項目 | 設定 |
|---|---|
| Webhook | オン |
| 応答メッセージ | オフ |
2. LINE Developer Consoleの設定
「その他の設定はLINE Developersから行えます。」から、または以下のリンクから LINE Developer の設定をします。
右側にある「コンソール」よりログインします。
作成したプロバイダ内にチャネルを見つけることができるので選択
チャネル設定の画面に遷移
MessagingAPIのタブにQRコードがあるので、まずは友達追加しておきましょう。
続いて、チャネルアクセストークンを発行します。
発行されたチャネルアクセストークンを、下図のとおりスプレッドシートに貼り付けます
3. 接続確認
LINE Developer Console 「Messaging API設定」真ん中あたりに、Webhookの設定もオンになっていることが確認できます。検証を押して「成功」と表示されればLINEとGASの連携も完了です。
4. ユーザーID（グループID）を設定
登録したLINEから「ユーザーID設定」と送信します。
自動的にユーザーIDがスプレッドシートに設定され、またLINEの応答も返ってきます。最初の1回のみで特に以降は使用しません。
以下の通りスプレッドシートに反映されればOKです。
グループトークに参加させるには
Official Account Manager から以下の設定をします。
その後、LINEにて「グループID設定」とメッセージを送信することで、スプレッドシートに反映されます。
4. 準備完了！注文してみましょう
これで準備が整ったので実際にお客様になってみて注文してみましょう。
注文送信時のサンプル
実際に今回のフォームで注文を受け付けた際のサンプルです。
フォーム送信時
LINEに注文通知が届きます。上記フォームの内容を解析し、合計金額や購入数なども通知されます。
注文内容はスプレッドシートにも記録されているので、LINE側で何か誤った操作をしても情報が消えてしまうこともありません。
合わせて、以下のメールがお客様に自動送信されます。実際に届いていることを確認してみましょう。
3つのボタン
このサンプルでは以下のボタンを用意しています。
| ボタン | メール送信有無 | スプレッドシートの記録 |
|---|---|---|
| 受付確認(再送) | 受付確認メールを再度送信します | 列O「処理(注文確認メール再送)」に記録 |
| 受付完了 | 受付完了メールを送信します | 列P「処理(受付完了メール済)」に記録 |
| 処理済 | なし | 処理済みとして記録します |
受付確認（再送）
上記の自動送信メールを再送する場合に押します。再送完了すると、以下の応答がLINEに返ってきます。
受付完了
注文内容を確認できたら、「受付完了」を押すことで以下のメールがお客様に届きます。
これをもって注文確定ということにも使えますね。
処理済み
処理済みはお店側の管理上のもので、特にメール送信はしません。
スプレッドシートの状態のみ更新します。
スプレッドシートでの管理
注文ごとにLINE上でどの操作をしたか？は、以下のように記録されていきます。
またスプレッドシート上で合計金額なども集計されますので、管理にもご活用ください。
メールの設定
件名や本文は、スプレッドシートの「shop」シートで変更できます。
カスタマイズ等
今回の記事も実際の店舗の方からご相談いただいたものをいくつか取り込んだものとなっています。実際に店舗や施設等で導入の際は以下よりご連絡ください。