LINE BOTとIFTTTでなんちゃってポケモンGO作ってみた

## はじめに

LINE BOTとIFTTTを組み合わせてポケモンGOのようなものを作ってみました

今回は新宿御苑に近づいたらLINEにポケモンの画像がpush通知してくる仕組みを作りました

本当はその後捕まえたいし、色んな場所に出現させたいんですけどね

[![Image from Gyazo](https://i.gyazo.com/1e82f73ab68d975ebd97b0a6b97fc5d1.png)](https://gyazo.com/1e82f73ab68d975ebd97b0a6b97fc5d1)

LINEではこんな見た目のがpushされます

## 開発環境
* Node.js v14.5.0
* express v4.17.1
* line/bot-sdk v7.0.0
* axios v0.19.2

ポケモンのAPIとして[こちら](https://pokeapi.co/)を利用しました。
利用したときはv2でした。

## 手順概要、目次

1. LINE BOT作成
    1. LINE Developerに登録
    2. LINE BOTの設定
    3. ソースコードをコピペ
    4. アクセストークンとチャンネルシークレットを書き換え
    4. ngrokインストール、実行
    5. ngrokのURLをLINE BOTに設定、検証
    6. コンソールで出たログからsource内の`userId`をソースコード内に置き換え
2. IFTTT作成
3. 御苑へGO

## LINE BOTの作成

こちらの通りに作りました！

「1時間でLINE BOTを作るハンズオン (資料+レポート) in Node学園祭2017 #nodefest」
https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d

### ソースコード

```js
'use strict';

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

const config = {
  channelSecret: 'チャンネルシークレット',
  channelAccessToken:'アクセストークン',
};
const LINE_USERID = 'いったん普通のLINE BOTとして動作させ自分のIDを調べる';

const app = express();

const client = new line.Client(config);

async function getRandomPoke() {
  const res = await axios.get(
    'https://pokeapi.co/api/v2/pokemon/' + Math.floor(Math.random() * 807)
  );
  // 日本語情報をデータに入れ込む
  const species = await axios.get(res.data.species.url);
  species.data.names.forEach((e) => {
    if (e.language.name == 'ja') species.data.ja_name = e.name;
  });
  species.data.flavor_text_entries.forEach((e) => {
    if (e.language.name == 'ja') species.data.ja_flavor_text = e.flavor_text;
  });
  res.data.species = species.data;

  return res.data;
}

app.get('/', (req, res) => res.send('Hello LINE BOT!(GET)')); //ブラウザ確認用(無くても問題ない)
app.post('/ifttt', async (req, res) => {
  const poke = await getRandomPoke();
  const toUri = 'https://yakkun.com/swsh/zukan/n' + poke.id;
  client.pushMessage(LINE_USERID, {
    type: 'template',
    altText: 'This is a buttons template',
    template: {
      type: 'buttons',
      thumbnailImageUrl: poke.sprites.front_default,
      imageAspectRatio: 'rectangle',
      imageSize: 'cover',
      imageBackgroundColor: '#FFFFFF',
      title: poke.species.ja_name + ' ' + poke.name,
      text: poke.species.ja_flavor_text,
      actions: [
        {
          type: 'uri',
          label: '捕まえる',
          uri: toUri,
        },
      ],
    },
  });

  res.send('ifttt post');
});

// 以下replay message用　userIDも調べられる
// 現在はメッセージを送ったらオウム返しする
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)
  );
});
async function handleEvent(event) {
  if (event.type !== 'message' || event.message.type !== 'text') {
    return Promise.resolve(null);
  }
  console.log(event.source.userId);
  return client.replyMessage(event.replyToken, {
    type: 'text',
    text: event.message.text, //実際に返信の言葉を入れる箇所
  });
}

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

```

## IFTTT作成

IFTTTは[こちら](https://ifttt.com/)です。

今回は位置情報でpushさせるので、スマートフォンアプリをインストールします。

iOS：https://apps.apple.com/jp/app/ifttt/id660944635
Android：https://play.google.com/store/apps/details?id=com.ifttt.ifttt&hl=ja

インストールしたら以下のようにアプレットを作ります。
（IFTTTの手順は相変わらずスクショ多くなるし見ずらい…）

「location」を検索し、

[![Image from Gyazo](https://i.gyazo.com/efa6e8c35d0841423884bf7515290ced.png)](https://gyazo.com/efa6e8c35d0841423884bf7515290ced)

御苑に近づいたら

[![Image from Gyazo](https://i.gyazo.com/7d5e0be423878006d12df3aa78e5a5c8.png)](https://gyazo.com/7d5e0be423878006d12df3aa78e5a5c8)

ngrokで出てきたurlに`/ifttt`を追加したURLを記述

[![Image from Gyazo](https://i.gyazo.com/253cd18e88e4c10029b8a5add4fd6670.png)](https://gyazo.com/253cd18e88e4c10029b8a5add4fd6670)

これで完成

[![Image from Gyazo](https://i.gyazo.com/53eeba8fc827d2d26c089026a1c87081.png)](https://gyazo.com/53eeba8fc827d2d26c089026a1c87081)

## 御苑へGO

自粛期間なので今はいったん置いておきます…
（動作確認はできてないが、デバッグはしてます。多分動く！）

## おわりに

他にもポケモンが出てきそうなシチュエーションでpushしても面白そうですね！

いやぁ身近にポケモンが出てくると楽しいですね！

ちなみに「[iTerm2でランダムにポケモン背景にする](https://qiita.com/tkyko13/items/985353b85ddc83f1ec98)」なんてものも書いてます