GAS(Google App Script)で犬の画像を出力するLINEBOT

今回は一番LINE Botを使ってランダムに犬の画像を表示するLINEBOTを作成します。

通常LINE Bot(Messaging API)を利用するにはウェブサーバーが必要です。

ですが、今回は無料でできるGASを使用してみたいと思います。

この記事でわかること

犬の画像をランダムで表示するボットを作成する

今回作ったボットはこちらから

犬画像をランダムで表示するAPI
「犬」と画像を送ったら表示されるようにする
犬画像を返却
全体コード
まとめ

犬画像をランダムで表示するAPI

Dog API

Dog CEO's Dog API. Over 20,000 images of dogs programmaticaly accessible by over 120 breeds. Image supplied by the Stanford Dogs Dataset.

このサイトのAPIをお借りします。

APIはこちら
https://dog.ceo/api/breeds/image/random

このAPIではランダムで犬の画像を表示することができます。

「犬」と画像を送ったら表示されるようにする

まずは犬という文字を判別する部分を記載します。

JSON.parseを行うことでデータをLINEから送られたデータを取得しています。

message.typeが”text”で、message.textが”犬”の場合、sendImageを実行します。

また、sendImageにはreplyTokenを引数にしています。

/********************************************
LINE Messaging APIからPOST送信を受けて起動
eはJSON文字列
*********************************************/
function doPost(e){
  if (typeof e === "undefined"){
    //eがundefinedの場合動作を終了
    return;
  } 


  for (const event of JSON.parse(e.postData.contents).events) {
    //受信したメッセージ情報を変数に格納する
    const replyToken = event.replyToken; //reply token
    const messageText = event.message.text; //メッセージ内容
    const messageType = event.message.type; //メッセージタイプ

      
    if(messageType == "text"){
      if (messageText == "犬"){

        sendImage(replyToken);
      }
    }
  }
}

犬画像を返却

まずはUrlFetchApp.fetchを実行し、DOGAPIから返却されたJSONを取得します。

JSONの構成はmessageのなかにURLが保管されているので、imgUrlに格納します。

その後、LINEに表示させる際にそのURLをoriginalContentUrlとして返却します。

postDataの中身がLINE botの返答になります。

function sendImage(replyToken){
  //返信先URL
  const replyUrl = "https://api.line.me/v2/bot/message/reply";
  const DOG_API = "https://dog.ceo/api/breeds/image/random";
  const res = UrlFetchApp.fetch(DOG_API);
  const imgUrl = JSON.parse(res).message;


  const headers = {
    "Content-Type": "application/json; charset=UTF-8",
    "Authorization": "Bearer " + LINE_ACCESS_TOKEN
  };
  
  const postData = {
    "replyToken": replyToken,
    "messages": [{
                  "type": "image",
                  "originalContentUrl" : imgUrl,
                  "previewImageUrl" : imgUrl,
                  }]
  };

  const options = {
    "method" : "post",
    "headers" : headers,
    "payload" : JSON.stringify(postData)
  };

  //LINE Messaging APIにデータを送信する
  UrlFetchApp.fetch(replyUrl, options);
}

全体コード

//LINE アクセストークン
const LINE_ACCESS_TOKEN = "********"

/********************************************
LINE Messaging APIからPOST送信を受けて起動
eはJSON文字列
*********************************************/
function doPost(e){
  if (typeof e === "undefined"){
    //eがundefinedの場合動作を終了
    return;
  } 


  for (const event of JSON.parse(e.postData.contents).events) {
    //受信したメッセージ情報を変数に格納する
    const replyToken = event.replyToken; //reply token
    const messageText = event.message.text; //メッセージ内容
    const messageType = event.message.type; //メッセージタイプ

      
    if(messageType == "text"){
      if (messageText == "犬"){

        sendImage(replyToken);
      }
    }
  }
}

function sendImage(replyToken){
  //返信先URL
  const replyUrl = "https://api.line.me/v2/bot/message/reply";
  const DOG_API = "https://dog.ceo/api/breeds/image/random";
  const res = UrlFetchApp.fetch(DOG_API);
  const imgUrl = JSON.parse(res).message;


  const headers = {
    "Content-Type": "application/json; charset=UTF-8",
    "Authorization": "Bearer " + LINE_ACCESS_TOKEN
  };
  
  const postData = {
    "replyToken": replyToken,
    "messages": [{
                  "type": "image",
                  "originalContentUrl" : imgUrl,
                  "previewImageUrl" : imgUrl,
                  }]
  };

  const options = {
    "method" : "post",
    "headers" : headers,
    "payload" : JSON.stringify(postData)
  };

  //LINE Messaging APIにデータを送信する
  UrlFetchApp.fetch(replyUrl, options);
}