중요한 이미지를 즉시 호출할 수 있는 LINE BOT
「면허증 업로드는 번거로움」
은행 계좌 및 증권 계좌 개설 등
때때로 요구되는 면허증 업로드.
일일이 면허증의 면과 뒷면을 스마트 폰으로 사진 찍고,
PC에 전송하여 업로드한다는 의외로 번거롭지요.
뭐 진짜 걸리는 시간은 그런 없지만,
개인적으로 이런 작업은 귀찮다고 후회해 버리는 버릇이 있습니다.
그래서, 이런 지금 원하는 사진을 즉시 호출할 수 있으면 좋겠다고,
순식간에 불러낼 수 있는 LINE BOT를 만들어 보았습니다.
만들고 싶은 것
LINE BOT에 대한 메시지 내용에 따라,
몇 가지 원하는 이미지 중에서 선택을 꺼내려고했습니다.
다만, 최초의 발상은 이쪽의 스케치로.
아이디어 스케치라고 불리는 기술입니다.
만든 것
면허증 사진을 쉽게 불러낼 수 있는 LINE BOT을 만들어 보았다. #Linebot #protoout #제조 피 c. 라고 r. 이 m/7YGnrXPnxr — 야나세 히로유키@인력개발×UX전문가 (@btap_hiro) August 26, 2020
LINE BOT에 대한 메시지 내용에 따라,
몇 가지 원하는 이미지 중에서 선택을 꺼내려고했습니다.
다만, 최초의 발상은 이쪽의 스케치로.
아이디어 스케치라고 불리는 기술입니다.
만든 것
면허증 사진을 쉽게 불러낼 수 있는 LINE BOT을 만들어 보았다. #Linebot #protoout #제조 피 c. 라고 r. 이 m/7YGnrXPnxr — 야나세 히로유키@인력개발×UX전문가 (@btap_hiro) August 26, 2020
GAS를 사용하면 잘 작동하는지 궁금해했지만,
복수의 화상 취득은 잘 되지 않고, 우선 1장의 화상을 취득하는 곳만 할 수 있었습니다.
시행착오한 곳
이 부분의 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}`);
요약
'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에서 이미지를 볼 수 있으므로
중요한 이미지라면 보안 관리가 필요하네요.
거기 대책을 이번에 살펴보겠습니다.
좋으면 LGTM 부탁드립니다!
Reference
이 문제에 관하여(중요한 이미지를 즉시 호출할 수 있는 LINE BOT), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kaiser355/items/5f33da9b2881c8551106텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
