はじめに
やること
- Google custom search engine（CSE）で画像を拾ってきて、LINE APIのpushメッセージでその画像を送る
- Google cloud function（GCF）を使ってサーバーレスアーキテクチャで画像を拾ってくるLine botを動かす
この記事のスコープ外のこと
- Google cloud platform（GCP）やCSEの基本的な使い方
- 他にいっぱい記事があるのでGCPのアカウント登録やGCFのチュートリアルはすでに終えている前提として話を進める
Line Messagesing APIを使う
アカウント登録からチャンネル設定まで
基本公式ドキュメントを読んで進めていけば問題ありません。
最終的に今回使う情報は以下の部分です。
基本情報
メッセージ送受信設定
その他
pushメッセージを送ってみる
CSEで画像を拾ってきてそれを自分に対して送ってみる。
CSEの使い方はこちらの記事が参考になる。
今回は自分の好きな声優さんの画像を拾ってくることにする。なぜならそちらの方がモチベーションが上がるから（重要）。
- packageインストール
$ mkdir test_project
$ cd test_project
$ npm install @line/bot-sdk --save
$ npm install request --save
$ npm install config --save
- confファイル作成
- channelAccessTokenとchannelSecretは、LINE developersのコンソールから取得できるアクセストークンとChannel secretである
- google APIの方のkeyとcxはAPI keyと検索エンジンIDである
$ mkdir conf
$ vi conf/default.conf
conf/default.conf
{
"lineAPI": {
"channelAccessToken": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
"channelSecret": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
},
"googleAPI": {
"key": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
"cx": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
}
}
- 画像をCSEから取得してLINEへメッセージをpushするスクリプト作成
- 今回は画像を送るが、その他にも普通のテキストはもちろん、動画やスタンプ、位置情報等も送れるので公式ドキュメントのメッセージオブジェクトの項目を参照されたし
$ vi search_image.js
search_image.js
'use strict'
const line = require('@line/bot-sdk');
const config = require('config');
const httpClient = require('request')
const lineClient = new line.Client(config.lineAPI);
const url = 'https://www.googleapis.com/customsearch/v1';
const searchWord = '立花理香';
function searchImage(searchWord) {
return new Promise(function(func){
var pageNumber = Math.floor(Math.random() * 10) + 1;
var imageNumber = Math.floor(Math.random() * 10);
var queryStrings = {
q: searchWord,
key: config.googleAPI.key,
cx: config.googleAPI.cx,
searchType: 'image',
start: pageNumber
}
var params = {
url: url,
method: 'GET',
json: true,
qs: queryStrings
}
httpClient.get(params, function(err, res, body) {
if(err){
console.log(err);
}
try {
func(res.body.items[imageNumber].link);
}catch(e){
console.log('Error: ' + e)
}
});
});
};
function returnUrl(imageUrl){
return imageUrl;
};
searchImage(searchWord)
.then(function(imageUrl){
var message = {
"type": "image",
"originalContentUrl": imageUrl,
"previewImageUrl": imageUrl
};
lineClient.pushMessage("<Your Line user ID>", message);
});
これを実行すると……
$ node search_image.js
こんな感じに画像が送られてきました。
サーバーレスアーキテクチャでbotとして動かす
上記の声優画像検索スクリプトを少し改修してbotとして動かしてみます。
$ vi index.js
index.js
'use strict';
const line = require('@line/bot-sdk');
const config = require('config');
const httpClient = require('request');
const lineClient = new line.Client(config.lineAPI);
const googleSearch = 'https://www.googleapis.com/customsearch/v1';
function searchImage(searchWord) {
return new Promise(function(func){
var pageNumber = Math.floor(Math.random() * 10) + 1;
var imageNumber = Math.floor(Math.random() * 10);
var queryStrings = {
q: searchWord,
key: config.googleAPI.key,
cx: config.googleAPI.cx,
searchType: 'image',
start: pageNumber
}
var params = {
url: googleSearch,
method: 'GET',
json: true,
qs: queryStrings
}
httpClient.get(params, function(err, res, body) {
if(err){
console.log(err);
return err;
}
try {
func(res.body.items[imageNumber].link)
} catch(e){
console.log('Error: ' + e)
}
});
});
};
function replyWithImage(event, imageUrl){
console.log(imageUrl);
var message = {
"type": "image",
"originalContentUrl": imageUrl,
"previewImageUrl": imageUrl
};
lineClient.replyMessage(event.replyToken, message);
};
function handleEvent(event) {
var searchWord = '立花理香';
searchImage(searchWord)
.then(function(imageUrl){
replyWithImage(event, imageUrl);
});
}
exports.webhook = function webhook(req, res) {
Promise
.all(req.body.events.map(handleEvent))
.then((result) => res.json(result))
.catch((error) => console.error(error));
}
これをGCFにアップロードします。処理に数分かかるかもしれません。
$ gcloud beta functions deploy webhook --trigger-http --source .
Deploying function (may take a while - up to 2 minutes).../
exportsしてgcloudコマンドでdeployした関数がGCF上から呼べるようになります。
完了すると以下のようなメッセージが出力されます。
...
availableMemoryMb: 256
entryPoint: webhook
httpsTrigger:
url: https://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/webhook
labels:
deployment-tool: cli-gcloud
...
ここで出てきているurlをLine developersのコンソール画面上からWebhook URLに設定します。
設定が完了したら早速botを呼び出してみましょう。
今回書いたコードではなんでもいいので適当なメッセージを送ると画像を返してくれるはずです。
やったぜ。
課題
- CSEで一度に拾ってこれる画像は100枚が限度、また無料枠は一日100リクエスト（それ以上は有料）
- 画像を大量収集するのには向いてないかな
- 調べるとBing APIを使ってる人の方が多いっぽい？
- 拾ってきた画像がLINE APIのメッセージオブジェクトの制限に引っかかってるぽくて失敗する（ステータスコード400が返ってくる）時がある
- originalContentUrlは最大画像サイズ：1024×1024、最大ファイルサイズ：1MB
- previewImageUrlは最大画像サイズ：240×240、最大ファイルサイズ：1MB