今回は一番LINE Botを使ってランダムに犬の画像を表示するLINEBOTを作成します。
通常LINE Bot(Messaging API)を利用するにはウェブサーバーが必要です。
ですが、今回は無料でできるGASを使用してみたいと思います。
この記事でわかること
犬の画像をランダムで表示するボットを作成する
今回作ったボットはこちらから
犬画像をランダムで表示するAPI
![](https://dyna-knowledge.com/wp-content/uploads/cocoon-resources/blog-card-cache/993d1df1dfa7d6beb57b0c3ec5b1f065.jpg)
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);
}
まとめ
LINEを通してAPIを実行する方法をまとめました。
LINEボットでできることは結構ありますので、色々挑戦していきたいですね。
受講者数No.1のプログラミングスクール
独学でプログラミングを学ぶのは大変なのでスクールもおすすめです。
テックアカデミーでは無料体験もしているので、気軽にお問合せください!
コメント