GASでできるLINEデジタル会員証
LINE公式アカウントでいろいろな会員証が増えてまいりました！
LINEでいろいろできるようになってうれしい限りです。
いろいろハンズオンをやっていて、一番とっつきやすいものがGASを使ったもの！
サーバーを特に用意せずに、Googleアカウントさえ持っていればすぐに無料で始められるのが良いところだと思っております。
LIFFを使った会員証を作りたかったのですが、GASだとGoogleの認証が何かひっかかってうまくいきません、、、
ということで、LIFFをつかわずにできる会員証を作成してみました！
1つのLINE公式アカウントで会員証表示も、店舗運営の管理者によるポイント加算や利用もできるという、今までにあまりない(⁉)ものとなっております！
2024-10-27
既存のLINE公式アカウントにこの会員証のシステムを連携した場合、これまで一旦、ブロック⇒ブロック解除が必要でしたが、会員証と送れば、登録されるようにいたしました。
完成品イメージ
会員証デモアカウント
アカウント名：まっしゅるブラザーズ会員証
https://lin.ee/yOdU2iC
デモなので登録して是非お試しください！個人情報はいれずに、ニックネームでやってください！
管理者設定キーワードは【LINEDC管理者】です
利用者がLINE公式アカウントを友だち登録すると、名前、性別、生年月日の入力を求められ、入力が完了すると会員証が発行されます。
そして、その会員証を管理者がスマホで読み込むと、その会員にポイントを付与したり減算できるという、会員証だけではなく、管理者(店舗の方など)がポイントを自由に増減できるというところがポイントです！
それが１つのLINE公式アカウントでできる、、、なんか色々使えそうなイメージが浮かびませんか？？
GASなので一気に何十人もの人のポイント変更があると厳しいですが、数店舗でや、学校のイベントなどでもつかえるのでは！？と思っております。
作成方法
まずは、習うより慣れろということで、作ってみましょう！
まずは上記のリンク先の資料の
２．LINE Developers への登録
３. チャネル作成
４. MessagingAPI設定
までして
チャネルアクセストークン
と呼ばれるものをコピーしてメモ帳などにペーストしておいてください。
(次の章のGASとスプレッドシートの設定で使います。)
アクセストークンの先頭の文字が記号(-や+など)の場合、こちらのコードでは
うまく動かないのでLINEdeveloperでチャネルアクセストークンを再発行してください。
そして
5. LINE公式アカウント機能の設定
にある。応答メッセージで【無効】にしてください。
(今回はチャットはオフのままで大丈夫です)
次にLINEdeveloperの【Messaging API設定】タブの上の方にある
ボットのベーシックIDをコピーしてメモ帳などにペーストしておいてください。
GASとスプレッドシートの設定
次に上のスプレッドシートを開き、マイドライブかどこかにコピーをしてください。
読み取り専用のファイルとなっております。コピーしてご利用ください。
2024-04-15
Google Chart APIによるQRコード生成不可によりQR code APIへと変更いたしました。
コピーが完了しましたら、設定を行います。
【設定シート】を、開いてセルC3に会員番号の最初につける文字列をいれてください。
初期設定では【LINEDC】となっております。(店舗名の略称などがおすすめです！)
その後、会員証のQRコードを保存するフォルダを作成します。
フォルダはGoogleドライブにフォルダを作成して保存するようにします。
(Googleドライブがいっぱいの時は会員証が作成できませんので残り容量にご注意ください。)
【設定シート】にある【会員証フォルダ作成】ボタンを押してください。
すると最初だけ認証の許可をGoogleから求められますので【OK】を押します
すると、下記のように「このアプリはGoogleで確認されていません」とでます。
そこで、安全なページに戻るではなく、左下の【詳細】ボタンを押します。
すると、安全ではないページに移動とでますのでそちらを押します。
GASを使っていろいろなことを実行すると必ず出る表示なのでご安心ください。
そして、いろいろなことを実行しようとしていますがよいですか？？
と聞いてきますので【許可】を押してください。
すると、GASの実行が止まってしまってますので、再度【会員証フォルダ作成】ボタンをおしてください。
実行が終わりましたら下記の注意書きがでます。
こちらでGoogleドライブのマイフォルダに会員証フォルダが作成されております。
C8セルにリンクが表示されていますので、そちらをクリックすると、そのドライブに飛んでいきます。
このフォルダに会員証のQRコードが保存されていきます。
次に先ほど、LINEdeveloperの画面でコピーしました
チャネルアクセストークン
を、C12セルに貼り付けます。
そしてセルC15に、先ほどメモしました ボットのベーシックIDを記載してください。
(@マークありで記載してください)
そして次に管理者設定キーワードを入れます。
この文字をLINEのトーク画面に送ることでその人が管理者になれるキーワードになります。
今回は【LINEDC管理者】としました。
こちらで設定シートの入力は完了です！
あと少しで完成です！！
GASのデプロイ
何やら、聞きなれない言葉かもしれませんがご安心ください。
今作ったものや実はこっそり仕組まれていたコードを動かせるようにし、LINE APIと連携させるための設定をします。
スプレッドシートに上側にある【拡張機能】⇒【AppsScript】を選択します。
何やらいっぱい書いてますが、まずが動かすことを優先させますので気にしないでください！
右上にあります、【デプロイ】⇒【新しいデプロイ】を選択します。
下記の設定を入力します。
| 項目 | 入力内容 |
|---|---|
| 説明 | 例）ハンズオンデプロイ初回 ※この欄は空欄でもかまいません |
| ウェブアプリ | 自分 |
| アクセスできるユーザー | 全員 |
その後、デプロイボタンを押しましたら下のように新しいデプロイがでますのでウェブアプリのアドレスをコピーして、メモ帳などにペーストしてください。
そして、完了を押して画面を閉じてください。
webhook設定
こちらで先ほどのGASとLINE APIを連携させます。
LINEDevelopersの画面に戻り、MessagingAPI設定タブを選択し、Webhook設定のWebhook URLのところに、先ほどコピーしたWEBアプリのURLを貼り付けます。
貼り付けて更新ボタンを押し、そしてwebhookの利用にチェックをいれます。
以上で、完了となります。
動作確認
実際に、動くか皆さんのLINEに友だち登録をして、動作するか試してみましょう。
LINEDevelopersから、MessagingAPI設定タブを選択します。
するとQRコードが表示されておりますので、こちらをスマホで読み込んで友だち登録します。
友だち追加しますと、名前入力や性別、生年月日が聞かれますので入力して登録してください。
登録が完了しましたら、QRコードを今回は初期ポイントで50pt追加された状態の会員証が発行されます！
会員証の呼び出し方ですが【会員証】と話しかけると出てきますので
リッチメニューなどで【会員証】というメッセージを設定していただくと使いやすいと思います。
リッチメニューの設定はLINEの公式HPで、、、
管理者の設定の仕方
管理者の設定ですが、【設定シート】で設定しました、キーワードをトーク画面で送信してください。
それだけで、管理者になれます！
(なので推測されにくいキーワードで関係者以外にはもらさないようにしてください)
管理者になりましたら、会員証のQRコードを管理者のスマホで読み込んでください。
(1台のスマホでは厳しいので、スプレッドシートのuserシートに会員証の画像のリンクがあるのでそれを読み込んでいただくと、スマホ1台とPCで確認できます。)
QRコードを読み込むと、【会員番号】XXXXXXというようなメッセージが送信できる直前になっていますので
そのままメッセージを送信してください。
するとその会員番号のポイント処理をすることができます。
ポイント付与の場合は正の数
ポイント減算(利用)の場合は、-をつけて数字を送信してください。
するとその会員のポイントが変更されます！！
生年月日や名前など省きたい場合はコードをいろいろ修正してご利用ください！
終わりに
いかがでしたでしょうか？
GASだけでLINEデジタル会員証ができました！
コードをいろいろ見ていただいて修正されたいところはいろいろ修正してお試しください！
(コードの説明は今回はぶきました、、、次回時間があれば説明記事かきます！)
またこちらの内容のハンズオンを2023年12月20日にオンラインで実施いたします！
質問などもありましたらこちらでしていただけるとおこたえできますので是非ご参加ください！！
もし、当日ご参加できない場合でもYouTubeのコメント欄に質問をいただけましたらいつでもどれだけ先(!?)でも
お答えいたしますのでお気軽にご連絡ください！
それではLINE APIライフをお楽しみください！！
2023/12/20
本資料にあるスプレッドシートのGASを変更し
会員証の表示を下記のものへと変更いたしました。
(会員番号が長い場合でも表示されるようにしました)
