LoginSignup
22
13

QRコードを使ったデジタル呼び出しボタンを作成!

Last updated at Posted at 2022-12-22

QRコードっていろいろできて便利ですよね!
LINEと何か連携できないかと思い作成しました。

(作成は5分でできますので、まずは試してみてください!)

image.png
こんな感じで、使えます!
通知メッセージもQRごとに変えられるので、お店の座席番号ごとにQRコードをおいて
〇〇番席呼び出しボタンみたいな感じで、通知が行くようにすれば、超おてがるに呼び出しボタンが設置できます!
image.png

では早速やり方を、、、

LINE Notify アクセストークンの取得

LINE NotifyのHPに行きアクセストークンを発行します。

右上のログインボタンからLINEアカウントでログインします。
image.png

ログインが完了したら右上に名前がでるのでクリックしてマイページを選択します。
image.png

次のページに行くとページの初めか一番下にトークンの発行ボタンがありますので
そこで【トークンを発行する】を選択します。
image.png

トークンの発行画面がでてきます。
そこで
・トークン名(この名前で通知されます。呼び出しボタンのようなわかるものでOKです!)
・どこで受け取るか
(グループか個人か選択できます。店員さん全員に通知などの場合は事前にグループを作り選択します。
個人の場合は一番上の【1:1でLINE Notifyから通知を受け取る】を選択します。)
を選択して、決まりましたら一番したの発行するのボタンを押します。

image.png

そうするとトークンが発行されます!
注意書きのように、ここでしか発行されずに閉じるを押すと二度と表示されませんので
すぐにコピーをして、メモ帳などにはりつけてください。

image.png

次に下記のスプレッドシートを開き、自分のマイドライブにコピーします。

その後セルC4に先ほどコピーしたトークンを貼り付けます!

image.png

その後、拡張機能⇒Apps Scriptを選択して、GASエディタを開き、デプロイをしてウェブアプリのアドレスをセルC7にはりつけてください。
image.png

2024/3/14 追記
QRコードが表示されないときは、下の画像の上部に表示されている【アクセスを許可】を押してください。
(GoogleのAPIを使ってQRコードを生成しております。)

image.png

2024/4/15追記
Google Chart APIでのQRコード生成が提供終了した模様ですので、
QR code API(https://goqr.me/api/ )に、変更しております。

これで完成です!

ここで下に表示されたQRコードを読み込みますと通知がいきます!

セルC9の文字列を変えれば呼び出し時に表示される文字も変わるので
ここで1番テーブル、2番テーブル、、、のように変更してQRコードを発行すれば通知時にその文字が反映されていきます。


ここから今回つかったGASのコードです。

LINE Notifyの通知用のコードです。

LINEnotify.gs
function Button(number){

var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName("notify");

 // LINEから取得したトークン
let token = sheet.getRange(4,3).getValue();

//送信するメッセージ
let messageText = number + sheet.getRange(5,3).getValue();
 


 let options = {
   "method" : "post",
   "headers" : {
     "Authorization" : "Bearer "+ token
   },
   "payload" : {
     "message" : messageText
   }
 }


 let url  = "https://notify-api.line.me/api/notify"
 UrlFetchApp.fetch(url, options)
}

index.html呼び出し用です

doGet.gs
function doGet(e) {
  var number = e.parameter.number;
  var html = HtmlService.createTemplateFromFile('index.html');
  html.number = number
  return html.evaluate();
}

表示されるページのHTMLです。

index.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
<style> 

/*全体*/
.hidden_box {
    margin: 2em 0;/*前後の余白*/
    padding: 0;
    font-size: 100px;
}

/*ボタン装飾*/
.hidden_box label {
    padding: 15px;
    font-weight: bold;
    border: solid 2px black;
    cursor :pointer;
}

/*ボタンホバー時*/
.hidden_box label:hover {
    background: #efefef;
}

/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
    font-size: 50px;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}

</style>
<script>

$(".title").on("click", function () {
  $(this).toggleClass("change");
});


google.script.url.getLocation(function(location) {
  const number = location.parameter.number;
   console.log(number)
});

</script>
<center>
<div class="hidden_box">
    <label for="label1" onclick="google.script.run.Button(<?=number ?>)"><?=number ?> 呼び出し</label>
    <input type="checkbox" id="label1">
    <div class="hidden_show">
      <!--非表示ここから-->     
      	<p>ただいま呼び出し中です。<br>しばらくお待ちください。</p>
      <!--ここまで-->
    </div>
</div>


</center>
  </body>
</html>

HTMLでパラメータの引き渡しなどしております。

いろいろなところにQRコードを貼っていろんなところにデジタル呼び出しボタンを作って遊んでください!!

ちなみにLINE Notifyは1時間に1000通知まで、1アカウントあたり100個までトークン発行という制限がありますが
ほぼほぼ引っかからないと思います!

不明点がございましたらご遠慮なくコメント欄に記載してください!

2022/12/27
GASのデプロイの記載を忘れていたので記載いたしました。。。

22
13
5

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
22
13