Pixabay API에서 무료 자료 이미지 받기 LINE bot로 보내기

16610 단어 LineNode.js자바스크립트· Pixabayapi

할 일



Pixabay API 이라는, 프리 소재의 화상, 일러스트, 동영상을 제공하고 있는 API를 이용해 취득한 화상을 LINE bot에 송신해 보겠습니다.
LINE bot에서 사용자에게 이미지를 보내는 방법은 다음 기사에 정리했습니다.
【LINE bot에서 이미지 전송하는 방법】 물어 보면 시바의 이미지를 반환하는 LINE bot을 만들어 보았습니다.



할 수있는 것



뭔가 텍스트를 입력하면 비버의 이미지를 반환합니다. (사실은 텍스트에 맞는 이미지를 내고 싶었습니다 ....)

동물 이미지 bot 같은 LINE bot 할 수 있었다! 피 c. 라고 r. 코m/pQBX후gTRB — 마에푸@출창채원 BWG (@kmaepu) April 9, 2020


만들어 보자!



실제로 Pixabay API를 사용하여 이미지를 얻고 LINE bot에서 이미지를 보냅니다.



절차는 다음과 같습니다.



  1. Pixabay에 등록하고 액세스 키 얻기
  2. 시험에 URL을 만들어 액세스 해보십시오
  3. 프로그램에서 액세스 (Node.js)
  4. LINE bot로 보내기!


서버측의 처리는 로컬 PC에서 동작하고, ngrok로 터널링하고 있습니다.

구성은 이런 느낌입니다.





1. Pixabay에 등록하고 액세스 키 얻기



등록 방법은 여기대로 진행되었습니다. 갑자기 Pixabay 사이트로 이동하면 "어디에 API 설명이 있습니까?"상태가됩니다 (~_~;)



2. 시험에 URL을 만들어 액세스해 봅니다.



Google chorm을 열고 URL을 입력, 실행! ! 화면 가득 Json 데이터가 표시되면 확인 OK입니다. URL은 다음 형식으로 입력합니다. API 키가 필요하기 때문에 그 부분은 입력이 필요합니다. 이 예에서는 비버 이미지를 검색합니다. 



https://pixabay.com/api/?key=APIキーを入れる&q=beaver




3. 프로그램에서 액세스(Node.js)



이번에는 로컬 PC에서 Node.js의 서버를 실행하여 Pixabay에서 이미지를 가져 왔습니다. 여기에서는 중요한 처리만 해설하고, 모든 소스 코드는 마지막에 실려 있습니다.



LINE bot에서 이미지를 전송하는 데 필요한 정보는 이미지 URL입니다. 이 정보를 Pixabay APi에서 얻은 json 데이터에서 추출합니다. 다음 두 줄에서 필요한 데이터를 로그에 표시할 수 있습니다. 



console.log(response.data.hits[0].previewURL);
console.log(response.data.hits[0].userImageURL);


이 로그는 다음과 같이 표시됩니다. 이 URL을 브라우저에 입력하면 이미지를 확인할 수 있습니다. 



https://cdn.pixabay.com/photo/2020/03/19/02/22/beaver-4946032_150.jpg
https://cdn.pixabay.com/user/2020/03/14/23-23-43-766_250x250.jpg


4. LINE bot로 보내기!



취득한 이미지의 URL을 다음 형식에 적용하면 완료됩니다! 




return client.replyMessage(event.replyToken, {
    type: 'image',
    originalContentUrl: 'オリジナルサイズの画像URL', 
    previewImageUrl: 'LINEアプリのトーク画面にプレビューされるサイズの画像URL'
});


예에서는 다음과 같습니다. 




return client.replyMessage(event.replyToken, {
    type: 'image',
    originalContentUrl: 'https://cdn.pixabay.com/user/2020/03/14/23-23-43-766_250x250.jpg', 
    previewImageUrl: 'https://cdn.pixabay.com/photo/2020/03/19/02/22/beaver-4946032_150.jpg'
  });


결론



비버의 이미지를 내고 싶은데, 카피바라가 있거나 한다. Pixabay는 유저 투고형이므로, 본래 원하는 화상 나오지 않거나 하는 것은 어쩔 수 없는 생각도 한다. 이미지 해석으로 대상물의 매칭하면 필터링할 수 있을 것 같다.



다음에 Pixabay의 404 Not Found 페이지가 좋은 느낌입니다





소스 코드



'use strict';

const express = require('express');
const line = require('@line/bot-sdk');
const axios = require('axios');
const PORT = process.env.PORT || 3000;

const config = {
  channelSecret: 'LINE botのチャンネルシークレット',
  channelAccessToken: 'LINE botのアクセストークン'
};

const app = express();

app.post('/webhook', line.middleware(config), (req, res) => {
    console.log(req.body.events);

    //ここのif文はdeveloper consoleの"接続確認"用なので後で削除して問題ないです。
    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) {
  var url = 'https://pixabay.com/api/?key=PixabayのAPIキーを入力する&q=beaver&image_type=photo&category=animals';

  console.log('start');
  if (event.type !== 'message' || event.message.type !== 'text') {
    //console.log('errpr message');
    return Promise.resolve(null);
  }

  // LINE botからのリクエストで実行される処理を書く
  console.log("access to Pixabay");

  // Pixabayにアクセス
  const response = await axios.get(url);

  console.log(response.data.hits[0].previewURL);
  console.log(response.data.hits[0].userImageURL);

  return client.replyMessage(event.replyToken, {
    type: 'image',
    originalContentUrl: response.data.hits[3].userImageURL, 
    previewImageUrl: response.data.hits[3].previewURL
  });
}

app.listen(PORT);
console.log(`Server running at ${PORT}`);

【LINE/LIFF 입문】LIFF로 LINE 공식 어카운트(구LINE@)상에 예약 폼을 작성한다(Go & Heroku 사용)
「우리에서 요가하자」요가 포즈가 있을지 판정해 주는 LINE bot~Node.js에 읽어들인~

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage