AWS LambdaとAPI GatewayでQiita検索botを作ってみた

### 完成物
■Qiita検索
検索したいタグを入れると、そのタグの新着記事が返ってくるLINE bot
![qiita検索.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567568/cf017a1f-d72d-ce68-ad73-ffbeb43595ef.gif)

### 今回使うもの
- LINE Messaging API   
- Amazon API Gateway
- AWS Lambda（言語：node.js）
- Qiita API


LINE Messaging API, Amazon API Gateway, AWS Lambdaの準備は以下の記事に書きましたので、
こちらをご参照ください。
[[過去記事]AWS(Lambda, API Gateway)でLINEの天気予報botを作ってみる](https://qiita.com/rieeeee1109/items/e2c9840c4890f26762bf)


この記事では、実際のコードについてのみ書いています。

## Lambda関数を書く

ローカルで、以下の通りにモジュールをインストールします。

```言語:
$ npm install @line/bot-sdk
$ npm install axios
```
index.jsは以下の通り。

```javascript:index.js
const line = require('@line/bot-sdk');
const axios = require('axios');
axios.defaults.baseURL = 'https://qiita.com/api/v2';

const client = new line.Client({ channelAccessToken: process.env.ACCESSTOKEN });

let event;
let callback;
let userMessage = '';
let message = {};

exports.handler = (_event, _context, _callback) => {
    event = _event;
    callback = _callback;
    
    userMessage = JSON.parse(event.body).events[0].message.text;
    const url = '/tags/' + userMessage +'/items?page=1&per_page=5';
    
    main(url);
};


function main(url) {

    axios.get(url)
    .then(function (response) {
        
        if (response.data.length !== 0) {
            let columns = [];
            
            for (let i = 0; i < 5; i++) {
                let column = {};
                let tags = "";
                for (let j = 0; j < response.data[i].tags.length; j++) {
                    tags += response.data[i].tags[j].name + ", ";
                }
                tags = tags.slice(0, -2);
                
                column = {
                    "thumbnailImageUrl": response.data[i].user.profile_image_url,
                    "title": response.data[i].title.length > 40 ? response.data[i].title.slice(0, 40) : response.data[i].title, //最大40文字
                    "text": tags.length > 55 ? "tag: " + tags.slice(0, 55) : "tag: " + tags, //最大60文字
                    "actions": [
                        {
                            "type": "uri",
                            "label": "記事を読む",
                            "uri": response.data[i].url
                        }
                    ]
                }
                columns.push(column);
            }
            
            message = {
                "type": "template",
                "altText": "#" + userMessage + "の新着記事",
                "template": {
                    "type": "carousel",
                    "columns": columns
                }
            }
        } else { //検索結果が0件だった場合
            message = {
                type: "text",
                text: "検索結果は0件でした。"
            };
        }
    })
    .catch(function (error) { //該当するタブが存在しない場合
        console.log(error);
        message = {
            type: "text",
            text: "#" + userMessage + "は存在しません。"
        };
    })
    .finally(function () {
        //メッセージ返信
        console.log(JSON.stringify(message));
        client.replyMessage(JSON.parse(event.body).events[0].replyToken, message)
            .then(() => {
                callback(null, {});
            })
            .catch((err) => {
                callback(null, {});
            });
    });
};
```
環境変数には、LINE botのチャネルアクセストークンを設定します。

これで完成！:laughing:

## まとめ
今回は、簡単なカルーセルテンプレートを使用したので記事は5つのみの表示です。

[ここ](https://developers.line.biz/ja/docs/messaging-api/flex-message-elements/#component)に色々なメッセージタイプが載っているので、是非色々試してみてください。