～店内案内BOT～【第15週】プログラミング未経験者が独学成果物で「1千イイね」とれるまでリアルタイム実況

■TOO SHY SHY BOY は悩んでいる

初めて来たショッピングセンター。
どこになにがあるかわからない。
店員は少ない上に、他の客と話している。
店頭の案内板の前に立ち尽くすのも気が引ける。

あー！
こんなとき、商品の名前を言ったら、売場を教えてくれる、
そんな便利な道具があったらなー！

ﾃｯﾃﾚﾃｯﾃ ﾃｯ,ﾃｯ,ﾃｰ♪　

てんないあんないボット～

■BOT　画面

※縁もゆかりも無いですが、ググって使いやすそうな店内マップでテストしています(笑)

スーパー生鮮館TAIGA　座間店

■GoogleSpreadsheets

■Node-RED

・function

// msg.payloadの中にはスプレッドシート内容（2次元配列）が入っている
// 行ごとに、その行の5列目の文字がmsg.line.events[0].message.textと等しいかチェック
// もし等しければその行のインデックス数値が得られる（なければ-1）
const index = msg.payload.findIndex(rows => rows[4] == msg.line.events[0].message.text);
// 見つからない場合
let resultMessage = "見つけられませんでした！\n別の商品でも探してみてください。";
msg.line.events[0].message.text = resultMessage;
// switch(条件分岐)用のタグを用意
msg.line.events[0].message.text2 = "0";
// 見つかった場合
if (index != -1) {
 // 取得したキーでさらに2列目を検索
 let search = msg.payload[index][3];
 const index2 = msg.payload.findIndex(rows => rows[0] == search);
 // 2列目には画像のアドレスがあるので格納
 let resultPic = msg.payload[index2][1];
 msg.line.events[0].message.text = resultPic;
 // switch(条件分岐)用のタグを用意
 msg.line.events[0].message.text2 = "1";
}
msg.payload = msg.line;
return msg;

・switch

・change(商品が見つからなかったとき）

・change(商品があったとき）

■自分のGoogleドライブから画像呼び出した

今回は自分で画像を用意。（マップに印がついている画像）

これをどうにかして呼び出したかったわけです。

サーバーに置けばいい　と安易に考えましたが、どのようにしたら画像アドレス払い出されるの？と私固まる。

払い出されても、拡張子がpngかjpegじゃないとLINEの画像メッセージでは使えない…

AWS S3とかも記事が引っ掛かりましたが、不正利用被害報告も複数出てきて、不安がよぎる。遊びで作ってるのに、本アカ使用や新規でクレカ登録はちょっと怖い。

そんなとき見つけた！

Googleドライブの画像をimgタグで表示する方法、表示速度、見え方 | 春望

ドライブに保存した画像のリンクから、【画像個別ID】を確認し、

http://drive.google.com/uc?export=view&id=【画像個別ID】#dummy.png

頭とお尻を上記のように書換えするだけで呼び出せるようになったよ！

■活用の幅を考える

GoogleSpreadsheets　の画像と、function　を読んだらわかりますが、検索して見つけた値でさらに検索しています。

これ、同じ方法で階層増やせますね。

ただ、商品名のあいまい検索に難あり。（トマト、トマト缶）
Flex Message　のカルーセルで、「もしかしてこれですか？」みたいな感じで複数の画像と商品名をそれぞれ出すことができるか…？

一番最初に店舗選択ボタンを付けたかったけど、webhook　の仕様上、
1アクション＝1リプライ
これに引っ掛かった。どうにか回避できる方法あるんですかね。

PS.このBOT実際に運用されてたら、旅行先のスーパーで使って、一発で目的の商品に歩いて行って、ツレにドヤ顔出来ます(笑)

■前回