Pixabay APIでフリー素材の画像を取得しLINE botで送信する

#やること
　**[Pixabay API](https://pixabay.com/api/docs/)**という、フリー素材の画像、イラスト、動画を提供しているAPIを利用して取得した画像をLINE botへ送信してみます。
　LINE botからユーザに画像を送信する方法は次の記事にまとめました。
[【LINE botから画像送信する方法】問いかけると柴犬の画像を返してくれるLINE botを作ってみた](https://qiita.com/kmaepu/items/fe718d6fd57929dd6e36)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/f54afe5a-9781-f7c6-6ed6-e2e30f642fe6.png)


#できたもの
　何かテキストを入力すると、ビーバーの画像を返してくれる。（本当は、テキストに応じた画像を出したかった...。）

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">アニマル画像botのようなLINE botできた！ <a href="https://t.co/pQBXfAgTRB">pic.twitter.com/pQBXfAgTRB</a></p>&mdash; まえぷー@出窓菜園 BWG (@kmaepu) <a href="https://twitter.com/kmaepu/status/1248248528679231488?ref_src=twsrc%5Etfw">April 9, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#作ってみよう！
　実際にPixabay APIを利用して画像を取得し、LINE botから画像を送信してみます。

手順は次の通り。

 1. Pixabayに登録し、アクセスキーを取得
 2. 試しにURLを作ってアクセスしてみる
 3. プログラムからアクセス（Node.js）　
 4. LINE botに送信！

　サーバサイドの処理はローカルPCで動かし、ngrokでトンネリングしています。
構成はこんな感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/86dcb762-fd78-1ca0-9978-71947817e717.png)

##１．Pixabayに登録し、アクセスキーを取得
　登録方法は[こちら](https://paiza.hatenablog.com/entry/2017/11/30/120万枚超えの画像をJavaScriptから無料で使える「Pixabay_API」で画)のとおりに進めました。いきなりPixabayのサイトに行くと、「どこにAPIの説明があるんだ？」状態となります(~_~;)

##２．試しにURLを作ってアクセスしてみる
 Google chormを開いてURLを入力、実行！！画面いっぱいにJsonデータが表示されれば確認OKです。URLは次のフォーマットで入力します。APIキーが必要なので、その部分は入力が必要となっています。この例では、ビーバーの画像を検索しています。

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/4d2d5fb8-feb6-2975-bffe-1586b8791ccd.png)


##３．プログラムからアクセス（Node.js）
　今回はローカルPC上でNode.jsのサーバーを実行し、Pixabayから画像を取得するようにしました。ここでは重要な処理だけ解説し、全ソースコードは最後に載せています。

　LINE botで画像送信するために必要な情報は画像のURlです。この情報をPixabay APiで取得したjsonデータの中から抜き出します。次の２行で必要なデータをログに表示することができます。

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

　このログは次のように表示されます。このURLをブラウザに入力すると画像を確認することができます。

```javascript
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
```

##４．LINE botに送信！
　取得した画像のURLを次のフォーマットに当てはめれば完了です！

```javascript

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

　例では次のようになります。

```javascript

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ページはいいセンスしている

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/a6258669-946a-1367-000b-10c460063049.png)

#ソースコード
```javascript
'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}`);
```