Google Apps Script(GAS)を使った個人開発でLINE Messaging APIを使い、QRコード生成ボットを作成してみました。
LINEボットとして最初のオウム返しbotのネクストステップにオススメなツール系LINEbotの作り方を解説します。
今回作ったQRコード生成LINEボット
LINE Messaging APIを活用して作成したボットがQRコード生成ボットです。
以下のQRコードを読み込むか、またはリンクをタップすると、LINE公式アカウントとして友だち追加できます。
https://line.me/R/ti/p/%947yyqwm
友だち追加後、トーク画面にあいさつメッセージが表示されるので、URLを入力すると、そのURLをQRコードにしたものを返してくれます。
生成されたQRコードを他のLINEの友だちユーザーに共有することができます。
QRコードは画像として保存もできるので、メールなどでQRコードを送ることも可能です。
URLのQRコード生成を限定するため、投稿メッセージにHTTPが含まれているかはバリデーションしています。
含まれていない場合はURL形式として正しくありませんと返答します。
仕事とかで紙媒体の掲載や名刺などでQRコードが必要な時に、QRコード生成ボットでさくっと用意できます。
Google Apps Scriptを使って開発
QRコード生成LINEボットの開発にあたってはGoogle Apps Script(GAS)を用いました。
利用者が増えているGoogleのスクリプトサービスで、 サーバレスな実行環境が無料で利用できるスグレモノです。
スプレッドシートやGoogleドライブなどのグーグルが提供するサービスとの連携に強みを持っています。
LINEボットを作る上ではWebアプリケーションとしてデプロイし、LINE Messaging APIのWebhook用URLを用意する必要があります。
そうしたWebアプリケーションとしてデプロイもGASはすごくカンタンです。
カンタン、高機能、その上無料と三拍子揃っています。
Google Chart APIでQRコードでQRコードを生成
QRコード生成には、Google Chart APIでQRコードの機能を利用しました。
Google Chart APIは様々な画像を作成できるグーグル提供の画像APIサービスです。
その作成可能な画像の１つにQRコードがあります。
Google Chart APIにアクセスするURLにQRコードのサイズと埋め込みたいURLを設定するだけで、QRコードのPNGファイルが作成されます↓
※(注意)Google Chart APIのQRコード作成サービスは現在非推奨とアナウンスされているため、突然サービスが終了する恐れがあります。
QRコード生成ボットの作り方
今回作成したQRコード生成ボットの作り方を解説します。
作り方は以下の4Stepでカンタンに作成できます。
- LINE Messaging APIの利用登録とチャネル作成
- QRコード生成LINEボットのGASスクリプト用意
- GASスクリプトをWebアプリとしてデプロイ
- QRコード生成ボットのチャネルにWebhookURLの設定
①LINE Messaging APIの利用登録とチャネル作成
まず、LINE Messaging APIの利用登録とチャネル作成を行います。
下記記事にて、LINE Messaging APIの登録方法とチャネル作成手順を解説しています。
解説記事の手順に従い、LINE Messaging APIの各種設定して、アクセストークンを取得します。
②QRコード生成LINEボットのGASスクリプト用意
続いて、QRコード生成LINEボットのGoogle Apps Scriptのスクリプトを用意します。
スプレッドシートの新規作成し、メニューバー「拡張機能＞Apps Script」でGASスクリプトエディタを開きます。
GASのスクリプトエディタに下記のコードをコピペして貼り付けます。
//LINEボットのアクセストークン
const ACCESS_TOKEN = ScriptProperties.getProperty('ACCESS_TOKEN');
//LINE返信用エンドポイント
const REPLY_URL = ScriptProperties.getProperty('REPLY_URL');
//LINEボットに投稿があったら稼働するWebhook関数
function doPost(e) {
//投稿データを取得
var event = JSON.parse(e.postData.contents).events[0];
//投稿データがテキストだった場合
if(event.message.type == 'text') {
try {
//投稿されたメッセージ(URL)を取得
let url = event.message.text;
if(validateUrl(url)==true){
//Googleチャート機能でQRコードを生成
let temlateUrl = "https://chart.apis.google.com/chart?chs=250x250&cht=qr&chl=" + url;
//投稿された情報をスプレッドシートに記録
recodeUser(event.source.userId, event.timestamp, url);
//LINEトークでの投稿に対し、返信を実行
sendMsg(REPLY_URL, {
'replyToken': event.replyToken,
'messages': [{
'type': 'image',
'originalContentUrl': temlateUrl,
'previewImageUrl': temlateUrl
}]
})
}else{
sendMsg(REPLY_URL, {
'replyToken': event.replyToken,
'messages': [{
'type': 'text',
'text': "URLの形式が正しくありませんでした。",
}]
})
}
}catch(e) {
Logger.log(e);
}
}
else{
sendMsg(REPLY_URL, {
'replyToken': event.replyToken,
'messages': [{
'type': 'text',
'text': "QRコードを作成したいURLを投稿してください",
}]
})
}
return ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON);
}
//LINEにメッセージを送信する関数
function sendMsg(url, payload) {
UrlFetchApp.fetch(url, {
'headers': {
'Content-Type': 'application/json; charset=UTF-8',
'Authorization': 'Bearer ' + ACCESS_TOKEN,
},
'method': 'post',
'payload': JSON.stringify(payload),
});
}
//スクリプトが紐付いたスプレッドシートに投稿したユーザーIDとタイムスタンプ、投稿URLを記録
function recodeUser(userId, timestamp, url){
//スクリプトに紐づくスプレッドシートのアクティブなシートを読み込む
let mySheet = SpreadsheetApp.getActiveSheet();
//スプレッドシートの最終行を取得する
let lastRow = mySheet.getLastRow();
//シートの末尾行にユーザーID、タイムスタンプ、投稿URLを書き込み
mySheet.getRange(1+lastRow,1).setValue(userId);
mySheet.getRange(1+lastRow,2).setValue(timestamp);
mySheet.getRange(1+lastRow,3).setValue(url);
return 0;
}
function makeQrcode(url){
let temlateUrl = "https://chart.apis.google.com/chart?chs=250x250&cht=qr&chl=" + url;
try{
let qrImage = UrlFetchApp.fetch(temlateUrl).getAs("image/png");
return qrImage;
}
catch(e){
return "QR取得エラー";
}
}
//URLが正しいか精査する関数
function validateUrl(url){
//フラグをTRUEセット
let flag = true;
//httpが含まれているかチェックし、ない場合はフラグをFALSEに変更
if(url.indexOf("http") == -1){
flag = false;
}
return flag;
}
定数として、Google Apps ScriptでLINE Messaging APIを実行するために必要なアクセストークンとエンドポイントのURLをスクリプトプロパティから読み込んでいます。
スクリプトプロパティの設定は以下のGAS関数を実行して設定します。
function setProperty(){
//*********************部分に事前に取得したLINE Messaging APIのアクセストークンに書き換え
ScriptProperties.setProperty("ACCESS_TOKEN","*********************");
ScriptProperties.setProperty("REPLY_URL","https://api.line.me/v2/bot/message/reply");
}
一度実行すれば、移行はアクセストークンを変更しない限り使わないため、setProperty関数は削除して問題ありません。
GASスクリプトのdoPost関数がWebhookURLにリクエストが発生した場合に稼働するプログラムです。
③GASスクリプトをWebアプリとしてデプロイ
コピペしたGASスクリプトをデプロイしてWebhookURLとして登録します。
１．GASスクリプトエディタ右上にある「デプロイ」から「新しいデプロイ」をクリックします。
２．GASの新しいデプロイ画面で「種類の選択」の歯車アイコンをクリックし、「ウェブアプリ」を選択します。
３．GASをウェブアプリとしてデプロイする際に、説明文と次のユーザーとして実行(自分)、アクセスできるユーザー(全員)を選択し、デプロイをクリックします。
※実行ユーザーとアクセスできるユーザーの設定が異なるとWebhook実行時にエラーします。
４．初めてデプロイする場合、承認が求められるので、「アクセスを承認」をクリックし、承認作業を行います。
５．デプロイが完了すると、「デプロイを更新しました」と表示されるので、ウェブアプリのURLをコピーし、控えます。
※デプロイ手順は下記の記事で詳しく解説しているので、より詳細なやり方は下記をご参照ください。
④QRコード生成ボットのチャネルにWebhookURLの設定
LINE Messaging APIの管理画面で、QRコード生成ボットのチャネルにデプロイして控えたWebhookURLを設定します。
加えて、LINE Messaging API稼働時にWebhookを実行するため「Webhookの利用」を有効にします。
あと、デフォルトのLINE Messaging APIでは応答メッセージ設定がオンになっているため、オフにします。
以上で、QRコード生成のLINEボットの作成と設定が完了です。
前述した冒頭部分のようにQRコードから友だち追加すれば、QRコード生成ボットがLINEアプリで実行できるようになります。
その他にもAIチャットボットの開発も可能
Google Apps ScriptでLINE Messaging APIを活用すれば、色々なLINEボットを自分で作ることができます。
今回はQRコードを生成するツール系のLINEbotでしたが、AIチャットボットなども開発可能です。
LINEでのAIチャットボットの作り方は以下の記事で解説しています。
想定されない投稿メッセージが来た場合はAIチャットボットが回答するといった使い方もできます。
終わりに
今回、URLを投稿すると、QRコード画像を生成し、返信してくれるLINEボットをGoogle Apps Script(GAS)で作る方法を紹介しました。
チラシやフライヤーからの誘導などにQRコードが必要になるときに便利なLINEボットです。
LINEボットの開発では、まずオウム返しbotを作りますが、次にどういったLINEボットを作ればよいか分からないという声があります。
そうした際にこうしたツール系LINEボットが次に開発するbotにオススメです。
本記事ではGASのQRコード生成LINEボットのコードを掲載し、LINE Messaging APIの設定なども作り方を詳しく解説しています。
QRコードをよく利用される方は、QRコード生成ボットを作って活用してみて下さい！