LINE Messaging APIによるQRコード生成するLINEボットをGASで作ってみた【作り方説明付き】

Google Apps Script(GAS)を使った個人開発でLINE Messaging APIを使い、QRコード生成ボットを作成してみました。

LINEボットとして最初のオウム返しbotのネクストステップにオススメなツール系LINEbotの作り方を解説します。

今回作ったQRコード生成LINEボット

LINE Messaging APIを活用して作成したボットがQRコード生成ボットです。

以下のQRコードを読み込むか、またはリンクをタップすると、LINE公式アカウントとして友だち追加できます。

生成された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ファイルが作成されます↓

https://chart.apis.google.com/chart?chs=150x150&cht=qr&chl=https://auto-worker.com/blog/

※(注意)Google Chart APIのQRコード作成サービスは現在非推奨とアナウンスされているため、突然サービスが終了する恐れがあります。

QRコード生成ボットの作り方

今回作成したQRコード生成ボットの作り方を解説します。
作り方は以下の4Stepでカンタンに作成できます。

1. LINE Messaging APIの利用登録とチャネル作成
2. QRコード生成LINEボットのGASスクリプト用意
3. GASスクリプトをWebアプリとしてデプロイ
4. QRコード生成ボットのチャネルにWebhookURLの設定

①LINE Messaging APIの利用登録とチャネル作成

まず、LINE Messaging APIの利用登録とチャネル作成を行います。

下記記事にて、LINE Messaging APIの登録方法とチャネル作成手順を解説しています。

https://auto-worker.com/blog/?p=5117

解説記事の手順に従い、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をコピーし、控えます。

※デプロイ手順は下記の記事で詳しく解説しているので、より詳細なやり方は下記をご参照ください。

https://auto-worker.com/blog/?p=5141#toc_id_5

④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チャットボットの作り方は以下の記事で解説しています。

https://auto-worker.com/blog/?p=5421

想定されない投稿メッセージが来た場合はAIチャットボットが回答するといった使い方もできます。

終わりに

今回、URLを投稿すると、QRコード画像を生成し、返信してくれるLINEボットをGoogle Apps Script(GAS)で作る方法を紹介しました。

チラシやフライヤーからの誘導などにQRコードが必要になるときに便利なLINEボットです。

LINEボットの開発では、まずオウム返しbotを作りますが、次にどういったLINEボットを作ればよいか分からないという声があります。

そうした際にこうしたツール系LINEボットが次に開発するbotにオススメです。

本記事ではGASのQRコード生成LINEボットのコードを掲載し、LINE Messaging APIの設定なども作り方を詳しく解説しています。

QRコードをよく利用される方は、QRコード生成ボットを作って活用してみて下さい！