6
1

More than 1 year has passed since last update.

LINE Bot を Replit でEverything It's you してみた!

Last updated at Posted at 2022-12-05

Replit がとても便利そうだったので試してみたくなり、ちょうどアドベントカレンダーの5日目が埋まっていなかったので試してみました。
ということで以下のアドベントカレンダー5日目の記事でもあります。

Replitって?

  • オンライン統合開発環境
    • 開発環境を構築しなくともブラウザでプログラミングを行うことが可能
  • 50以上の言語に対応
  • サーバー起動可能

ということで、 LINE Bot のバックエンドを Replit を使って実装・デプロイしてみました。

Developers Console

LINE Bot (Messaging API) の準備は以下をご覧ください。

Replitの準備

https://replit.com/ よりアカウントを作成しログイン

Create押下

image.png

今回は Node.js を選択

image.png

Title を入力し、 Create Repl 押下

image.png

以下のような画面が開きます。
デフォルトで index.js, package.json, package-lock.json の3つのファイルが出来上がってます。

image.png

index.js
空っぽ
package.json
{
  "name": "nodejs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/node": "^18.0.6",
    "node-fetch": "^3.2.6"
  }
}
package-lock.json
(略)

チュートリアルをベースにBotを実装

今回、 Replit でサーバーを起動するのでHeroku や Git は特に使いません。
チュートリアルをもとにやることはやることは2つだけです。

js の実装
index.js
const https = require("https");
const express = require("express");
const app = express();
const PORT = process.env.PORT || 3000;
const TOKEN = process.env.LINE_ACCESS_TOKEN;

app.use(express.json());
app.use(
  express.urlencoded({
    extended: true,
  })
);

app.get("/", (req, res) => {
  res.sendStatus(200);
});

app.post("/webhook", function (req, res) {
  res.send("HTTP POST request sent to the webhook URL!");

  if (req.body && req.body.events[0].type === "message") {
    const dataString = JSON.stringify({
      replyToken: req.body.events[0].replyToken,
      messages: [
        {
          type: "text",
          // おうむ返し
          text: req.body.events[0].message.text,
        },
      ],
    });

    const headers = {
      "Content-Type": "application/json",
      Authorization: "Bearer " + TOKEN,
    };

    const webhookOptions = {
      hostname: "api.line.me",
      path: "/v2/bot/message/reply",
      method: "POST",
      headers: headers,
    };

    const request = https.request(webhookOptions);

    request.on("error", (err) => {
      console.error(err);
    });

    request.write(dataString);
    request.end();
  }
});

app.listen(PORT, () => {
  console.log(`Example app listening at http://localhost:${PORT}`);
});
package.json に "start": "node index.js" を追加
package.json
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js"
  },

Replit にて実行!

Replit にある Shell にて express をインストールします。

image.png

package.json に express が追加されます。

package.json
  "dependencies": {
    "@types/node": "^18.0.6",
    "express": "^4.18.2",
    "node-fetch": "^3.2.6"
  }

環境変数は以下の Secrets にて設定できます。

image.png

LINE_ACCESS_TOKEN を設定します。

image.png

上部の Run ボタンを押すと ホストされた URL が生成されます。
image.png

image.png

発行されたURLを Developers Console の Webhook に設定すれば完了!

image.png

ボットをお友達登録して、メッセージ送信!無事に応答メッセージが返ってきました。

IMG_9216.PNG

ということで

とても簡単に実装・デプロイできてしまいました。ちょっと試す分には十分ではないでしょうか!

6
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
1