<h1>はじめに</h1>
<p>以前<code>discord.js</code>で簡単な受け答えをする bot を作った経験から今回は<code>puppeteer</code>でスクレイピングをし、その結果を返す bot を作成してみたいと思います。今回は<code>heroku</code>にデプロイしております。</p>
<h2>Puppeteer とは</h2>
<p>CLI から HeadlessBrowser を立ち上げてスクレイピングできるツール。
似たものに<code>PlayWright</code>もあるが今回はこちらで事足りるので不採用。</p>
<p>細かい使い方は省略するがこんな感じで簡単に動かせる。</p>
<pre><code>import puppeteer from 'puppeteer';

const sample = {
  browser: null as any,
  page: null as any,
  url: 'http://example.com/',

  initialize: async (): Promise&#x3C;void> => {
    sample.browser = await sample.launch({
      headless: true,
      args: ['--no-sandbox', '--disable-setuid-sandbox'],
    });
    sample.page = await sample.browser.newPage();
  },

  hoge: async (): Promise&#x3C;any> => {
    try {
      // Describe here
      return data;
    } catch (e) {
      console.log(e);
    }
  },

  close: (): void => {
    sample.browser.close();
  },
};

(async (): Promise&#x3C;void> => {
  await sample.initialize();
  await sample.hoge();
  sample.close();
})();
</code></pre>
<p>※<code>args: ['--no-sandbox', '--disable-setuid-sandbox']</code>は入れないと Heroku 環境だとエラーになります。</p>
<p>参考になりそうな記事</p>
<ul>
<li>https://qiita.com/tomi_linka/items/a68cf7840c3da002c6e0</li>
<li>https://qiita.com/k1832/items/87a8cf609b4ccf2c6195</li>
</ul>
<h2>Discord.js とは</h2>
<h4># Discord とは</h4>
<p><code>Zoom</code> や <code>Skype</code> と同じビデオ通話・音声通話・VoIP フリーソフトウェアの一つ。
元々は<code>ゲーマー向けチャットアプリ</code>として指示を得ていたが最近はビジネス向けとしても脚光を浴びている。</p>
<h4># Discord.js とは</h4>
<p><code>Discord</code> の API を Node.js から簡単に叩けるパワフルなモジュールだそう。
チャットで誰かがコメントしたら反応して返事をしたり、通話に入ってきて音楽を鳴らしたり結構いろいろできる。</p>
<p>以下に index.ts ファイルを晒しておきます。</p>
<pre><code>src / index.ts;

import { Client } from 'discord.js';

const TOKEN = process.env.TOKEN;

export const client = new Client();
client.on('ready', () => {
  console.log('ready...');
});

const funcs: { [key: string]: string } = {
  // describe here your functions.
  sayHello: './funcs/sayHello',
};

const loadFunctions = (funcsObj: { [key: string]: string }): void => {
  for (const name in funcsObj) {
    import(funcsObj[name]);
  }
};

loadFunctions(funcs);

client.login(TOKEN);
</code></pre>
<pre><code>src / funcs / sayHello.ts;

import { Message } from 'discord.js';
import { client } from '../index';

import { scraping } from '../util.scraping';

((): void => {
  client.on('message', (message: Message) => {
    (async (): Promise&#x3C;void> => {
      const content = message.content;
      if (message.author.bot) return;
      switch (true) {
        case /^\/sample (.+)$/.test(content): {
          const data = await scraping(RegExp.$1);
          message.channel.send(`Hello ${data}`);
          break;
        }
        default:
          break;
      }
    })();
  });
})();
</code></pre>
<p>参考になりそうな記事</p>
<ul>
<li>https://note.com/exteoi/n/n87bd4fa02c95</li>
<li>https://qiita.com/cryptocoin_harumaki/items/5d8c503e02093eca1f9b</li>
</ul>
<h2>Heroku にデプロイ</h2>
<p>まずはルートディレクトリに<code>Procfile</code>を作成して以下を記述</p>
<pre><code>worker: node &#x3C;path to index.js(compiled)>

// コンパイルされたindex.jsまでのパスを入力
</code></pre>
<p><code>HerokuCLI</code>を入れてから、</p>
<pre><code>heroku login
heroku apps:create &#x3C;app name> -b heroku/nodejs
heroku buildpacks:add https://github.com/CoffeeAndCode/puppeteer-heroku-buildpack

git remote add heroku git@heroku.com:&#x3C;app name>.git
git add --all
git commit
git push heroku master
</code></pre>
<p>環境変数追加したいなら<code>Heroku</code>のサイトで作成したアプリのページに移動してSetting>Config Vars から追加可能。</p>
<p>Resources から Dynos の設定で web をオフに、worker をオンにするのも忘れずに。</p>
<p>参考になりそうな記事</p>
<ul>
<li>https://qiita.com/jerrywdlee/items/ffc988956eb75a99bc3c</li>
<li>https://qiita.com/InkoHX/items/590b5f15426a6e813e92</li>
</ul>
