「免許証のアップロードって面倒」
銀行口座や証券口座の開設などで
時々求められる免許証のアップロード。
いちいち免許証の面と裏をスマホで写真撮って、
PCに転送して、アップロードするって意外と面倒なんですよね。
まあ実質かかる時間はそんなないんですが、
個人的にこういう作業は面倒だなと後回ししてしまう癖があります。
なので、こういういま欲しい写真を瞬時に呼び出せたらいいなと、
瞬時に呼び出せるLINE BOTを作ってみました。
つくりたかったもの
LINE BOTへのメッセージの内容に応じて、
いくつかの欲しい画像の中から選んでを取り出そうと思いました。
ただ、最初の発想はこちらのスケッチで。
アイデアスケッチと呼ばれる手法です。
つくったもの
免許証の写真を簡単に呼び出せるLINE BOTをつくってみた。#Linebot #protoout #ものづくり pic.twitter.com/7YGNrXPnxr
— 柳瀬浩之@人材開発×UX専門家 (@btap_hiro) August 26, 2020
GASを使うとうまくいくのかなと思い、調べてはいたものの、
複数の画像取得はうまくいかず、とりあえず１枚の画像を取得するところだけできました。
試行錯誤したところ
この部分のURLをどう置くかが重要なのですが、
なかなかそれがうまくいきませんでした。
return client.replyMessage(event.replyToken, {
type: 'image',
originalContentUrl: 'https://practical-volhard-aebb3b.netlify.app/image01.jpeg',
previewImageUrl: 'https://practical-volhard-aebb3b.netlify.app/image01.jpeg',
});
まずgoogleドライブに画像を置いて、
共有にすると発行されるリンクのURLを入力してみました。
https://drive.google.com/file/d/{ID}/view?usp=sharing
しかし、これでは全く表示されない。
色々調べると、どうやら以下のようにURLを変更する必要があるとのことで、
やってみました。
http://drive.google.com/uc?export=view&id={ID}
しかし、これも動かず。
どうやらhttpsではじめるものでないとダメらしい。
ちなみに、このURLをhttpsで入力してみると、動かず。
じゃあ、今度はdropboxでやってみようとしましたが、
画像を読み込もうとするところまでいきましたが、表示されず。
じゃあどうしようか、と調べて、たどり着いた記事が
こちら
Netlifyだとうまくいくよ、と書いてあったので、やってみると、うまくいきました。
return client.replyMessage(event.replyToken, {
type: 'image',
originalContentUrl: 'https://nostalgic-villani-a2f764.netlify.app/image02.png',
previewImageUrl: 'https://nostalgic-villani-a2f764.netlify.app/image02.png',
});
コード
'use strict';
const express = require('express');
const line = require('@line/bot-sdk');
const PORT = process.env.PORT || 3000;
const config = {
channelSecret: 'channelSecret',//自分のchannelSecretを入力
channelAccessToken: 'channelAccessToken'//自分のchannelAccessTokenを入力
};
const app = express();
app.get('/', (req, res) => res.send('Hello LINE BOT!(GET)'));
app.post('/webhook', line.middleware(config), (req, res) => {
console.log(req.body.events);
if (req.body.events[0].replyToken === '00000000000000000000000000000000' && req.body.events[1].replyToken === 'ffffffffffffffffffffffffffffffff') {
res.send('Hello LINE BOT!(POST)');
console.log('疎通確認用');
return;
}
Promise
.all(req.body.events.map(handleEvent))
.then((result) => res.json(result));
});
const client = new line.Client(config);
async function handleEvent(event) {
if (event.type !== 'message' || event.message.type !== 'text') {
return Promise.resolve(null);
}
return client.replyMessage(event.replyToken, {
type: 'image',
originalContentUrl: 'https://nostalgic-villani-a2f764.netlify.app/image02.png',//ここのNetlifyに取り込んだ画像のURLを入力
previewImageUrl: 'https://nostalgic-villani-a2f764.netlify.app/image02.png',//ここのNetlifyに取り込んだ画像のURLを入力
});
}
app.listen(PORT);
console.log(`Server running at ${PORT}`);
まとめ
よくよく考えると、NetlifyだとURLで画像が見れちゃうので、
重要な画像だと、セキュリティ管理が必要ですね。
そこの対策を今度調べてみようと思います。