Go to Qiita Advent Calendar Top
LoginSignup
4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@youtoy(Yosuke Toyota)inKDDI株式会社

オウム返しをする LINE Bot を Node.js で作る【2025年8月の画面キャプチャ付き手順】： ngrok ではなく devtunnel を使う

Last updated at Posted at 2025-08-20

はじめに

久しぶりに LINE Bot を作ったところ、ずいぶん前に触って進めていた手順と変わった部分があったので、自分が進めた手順の一通りの内容を、画面キャプチャをたくさん貼り付けつつメモしてみました。

あと、以前はよく ngrok を使って、開発環境の Botサーバー（ローカルサーバー）をインターネット側からアクセスできるようにしていたのですが、今回は Microsoft製の CLIツール「devtunnel」を使います。ちなみに、以下の記事で使い方の流れを書いているツールです。

●VS Code の「開発者用 Remote Tunnel」を GUI からではなく CLIツール「devtunnel」で扱う（ngrok的な機能） - Qiita
　https://qiita.com/youtoy/items/d88cbb13a959bf739143

あと、ngrok・devtunnel でやったようなことを、コマンドベースではなく GUI でやれる VS Code の標準機能を使ったものを、devtunnel のかわりに使う場合の手順も紹介しています。

この VS Code の標準機能、という話は、2年前くらいに試して以下の記事を書いていたりします。

●VSCode の新機能「built-in port forwarding」を使いローカルサーバーにインターネット側からアクセス - Qiita
　https://qiita.com/youtoy/items/56e48c84d6a2f0549155

ローカルサーバーにインターネット側からアクセスできるようにする方法に関する内容

余談ですが、ngrok・devtunnel・VS Code の標準機能「port forwarding」でやるような、ローカルサーバーにインターネット側からアクセスできるようにする、という話は、過去に以下の内容を試したこともありました。

【2021年4月に試したもの】
●Cloudflare の ngrok的なサービスがあるらしい ⇒ $ cloudflared tunnel --url localhost:8080 といった使い方 - Qiita
　https://qiita.com/youtoy/items/3d312552f08a729bb5bb

LINE Bot を開発の一連の流れ

ここから、LINE Bot を作る話へと入っていきます。

コードを書く前の下準備1

コードを書く前に、いくつか下準備をします。

devtunnel のインストールとログイン

上で書いていた CLIツールの「devtunnel」をインストールします。自分は Mac で Homebrew を使っているので、以下のコマンドでインストールしました。
（その他の方法、Windows用の方法などは公式の情報をご参照ください）

brew install devtunnel

また、インストール後には、以下の記事で書いていたログインの手順を実行します。

●VS Code の「開発者用 Remote Tunnel」を GUI からではなく CLIツール「devtunnel」で扱う（ngrok的な機能） - Qiita
　https://qiita.com/youtoy/items/d88cbb13a959bf739143

そのログインをする時に使えるアカウントは、Microsoftアカウントと GitHubアカウントの 2つがあり、コマンドのオプションの有無で変えられます。

自分は GitHubアカウントを使うので、以下のコマンドでログインを行います。以下の -g オプションをつけていると GitHubアカウントでのログインになり、このオプションを除くと Microsoftアカウントでのログインになります。

devtunnel user login -g

この後、ブラウザで認証用のページが開きます。自分はブラウザで GitHub にログイン済みだったので、何も操作をしなくても認証完了の状態になりました。

そして、ターミナルのほうの表示も、以下の内容が出力されていました。

image.png

これで「開発者用 Remote Tunnel」を、コマンドで用意できる状態になりました。devtunnel に関する下準備は、いったんここまでです。

コードを書く前の下準備2

次に、LINE側の下準備を進めます。この後、いろいろと設定などを行っていきます。

LINE Developersコンソールへのログイン

まずは、以下のページにも書かれている「LINE Developersコンソール」にアクセスします。

●LINE Developersコンソールへのログイン | LINE Developers
　https://developers.line.biz/ja/docs/line-developers-console/login-account/

image.png

アクセス後の画面で、LINEアカウントでのログインをするボタンを押します。

image.png

LINEアカウントでのログイン（〜QRコードの表示まで）

今回のお試しのログインでは、スマホの LINEアプリでの QRコード読み取りを使う方法を用います。QRコードを使って LINE Developersコンソールにログインするために、以下で示した「QRコードログイン」と書かれたボタンを押します。

image.png

そうすると画面に QRコードが表示されるので、この QRコードをスマホの LINEアプリで読み込みます。

image.png

LINEアカウントでのログイン（LINEアプリ上の操作を含めたステップ）

スマホの LINEアプリで QRコードを読み込んだ後、LINEアプリ側で以下の画面が出るので、「ログイン」ボタンを押します。

IMG_3635.jpg

そうすると、PC側の画面で以下のように 4桁の数字が表示された状態になります。

2025-08-19_10-27-12.png

この 4桁の数字を、スマホの LINEアプリ側で入力して、「本人確認」ボタンを押します。

IMG_3636.jpg

そうすると、スマホの LINEアプリ側で以下の完了のメッセージが表示されます。

IMG_3637.jpg

これで、ログイン操作は完了です。

コードを書く前の下準備3

さらに LINE関連の下準備を続けます。

プロバイダー・チャネルに関する操作

ログインができたら、プロバイダーの選択画面が出てきます。

自分は以前からの試作をしてきた中で、複数のプロバイダーがある状態になっていたため、既にプロバイダーが複数表示されています。その中で、今回使うプロバイダーを選択しました。

image.png

その後の画面では、以下の「新規チャネル作成」を選びます。

image.png

次の画面では、LINE Bot開発用に「Messaging API」を選びます。

image.png

その後の画面で「LINE公式アカウントを作成する」と書かれたボタンを押します。

image.png

その後は、LINE公式アカウントの設定を進めます。

LINE公式アカウントの設定

以下の画面で、LINE公式アカウントの設定を行います。

image.png

とりあえず今回はお試しなので、必須項目に関してのみ必要最低限の内容を入力しました。それとアカウント名は、今回の内容が自分で後で分かりやすいようにしたものを、適当につけました。

image.png

image.png

上記の入力をした状態で「確認」ボタンを押すと、以下の画面が表示されます。この画面では、以下の赤矢印で示した「LINE Official Account Managerへ」と書かれたボタンを押します。

2025-08-19_10-41-03.png

さらに続きの設定を進めます。

LINE Official Account Manager での設定1

ここで、情報利用・情報提供に関する規約への同意を求められる画面が 2つ出てきたので、それらを確認して同意する操作を行い、さらに先へ進めました。

そうすると以下の画面へ進むので、「次へ」ボタンを押すなどして、さらに先へと進めていきます。

image.png

この時に、自分のスマホの LINEアプリ（上記でログインをするのに使ったもの）を見ると、先ほど作成した公式アカウントが友だちに自動追加されていました。

IMG_3638.jpg

以前は、自分で LINEアプリを使った QRコードの読み取りの操作をして、友だち追加を行っていましたが、今回はそのような操作なしに LINEアプリへの友だち追加が自動で行われました。

上記の画面からさらに先に進めていった結果、以下の LINE Official Account Manager内のホーム画面へと移動しました。

image.png

この画面から、左メニューの「応答メッセージ」を選んで、以下の画面を表示させます。そして、以下の画面に出てくる「応答メッセージ」の部分の「変更」ボタンを押します

image.png

そうすると、以下の画面が出てきます。

image.png

この画面で出ている項目のうち、「あいさつメッセージ」と「応答メッセージ」の 2つは以下のように OFF にします。

2025-08-19_10-53-13.png

LINE Official Account Manager での設定2

さらに設定を続けていきます。

今の画面で左メニューを見ると、「Messaging API」という項目が出てきているので、それを選択します。

2025-08-19_10-53-13-2.png

そして、「Messaging APIを利用する」と書かれたボタンを押します。

image.png

ここでプロバイダーの選択画面が出るので、自分が先ほど選んでいたプロバイダーを選択して、さらに「同意する」と書かれたボタンを押します。

image.png

この後に「プライバシーポリシーと利用規約」の URL を入力する画面が出ますが、とりあえずのお試しになるので、いったん内容は空のままで「OK」ボタンを押します。

以下の画面では「OK」ボタンを押します。

image.png

ここで出てくる「Channel secret（チャネルシークレット）」は後で使うものです。この後の手順で出てくる画面でも確認やコピーができますが、今、コピーしてメモしておきましょう。

image.png

その後、画面内の以下から LINE Developersコンソールを開きます。

image.png

LINE Developersコンソール での設定

LINE Developersコンソールの、以下の画面が出るので、「Messaging API設定」のタブを選びます。

image.png

画面の下へスクロールしていくと「チャネルアクセストークン」という項目があります。その項目のところにある「発行」ボタンを押します。

image.png

チャネルアクセストークンが発行されるので、以下の赤矢印で示した部分のアイコンを押して、チャネルアクセストークンをコピーします。

後で使うので、これもメモしておきます。

image.png

ひとまず、ここまでの設定を完了させて、なおかつ「チャネルアクセストークン」と「チャネルシークレット」の 2つの文字列をメモできた状態になっていれば OK です。

LINE Developersコンソール での「チャネルシークレット」のコピー

ここで、「後でも確認やコピーができる」と書いていた「チャネルシークレット」が出てきている部分について、補足しておきます。

「Messaging API設定」タブではなく、「チャネル基本設定」タブのほうを選んでから、画面の下へスクロールしていくと「チャネルシークレット」の項目があります。

これは、先ほど、LINE Official Account Manager の画面のほうでコピーしていたものと同じものです。

image.png

開発関連

次に開発まわりの内容を進めます。

パッケージのインストール

Bot用のコードを作っていきます。今回自分は Node.js の SDKを使うのですが、その SDK の GitHub のリポジトリなどは以下になります。

●line/line-bot-sdk-nodejs: LINE Messaging API SDK for Node.js
　https://github.com/line/line-bot-sdk-nodejs
●@line/bot-sdk - npm
　https://www.npmjs.com/package/@line/bot-sdk

この SDK を、以下のコマンドでインストールします（また Express も合わせてインストールしておきます）。

npm install @line/bot-sdk express

Bot用のコードサンプルを探す

公式のリポジトリを見ると、以下に公式サンプルがあります。この中から、今回のお試しに使うコードを選びます。

●line-bot-sdk-nodejs/examples at master · line/line-bot-sdk-nodejs
　https://github.com/line/line-bot-sdk-nodejs/tree/master/examples

image.png

自分は、以下の ES Modules の Echo Bot を使うことにしました。

●line-bot-sdk-nodejs/examples/echo-bot-esm at master · line/line-bot-sdk-nodejs
　https://github.com/line/line-bot-sdk-nodejs/tree/master/examples/echo-bot-esm

元にするサンプルコードの内容を掲載します。

index.js
import * as line from '@line/bot-sdk'
import express from 'express'

// create LINE SDK config from env variables
const config = {
  channelSecret: process.env.CHANNEL_SECRET,
};

// create LINE SDK client
const client = new line.messagingApi.MessagingApiClient({
  channelAccessToken: process.env.CHANNEL_ACCESS_TOKEN
});

// create Express app
// about Express itself: https://expressjs.com/
const app = express();

// register a webhook handler with middleware
// about the middleware, please refer to doc
app.post('/callback', line.middleware(config), (req, res) => {
  Promise
    .all(req.body.events.map(handleEvent))
    .then((result) => res.json(result))
    .catch((err) => {
      console.error(err);
      res.status(500).end();
    });
});

// event handler
function handleEvent(event) {
  if (event.type !== 'message' || event.message.type !== 'text') {
    // ignore non-text-message event
    return Promise.resolve(null);
  }

  // create an echoing text message
  const echo = { type: 'text', text: event.message.text };

  // use reply API
  return client.replyMessage({
    replyToken: event.replyToken,
    messages: [echo],
  });
}

// listen on port
const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`listening on ${port}`);
});

これを少しだけ書きかえて使います。

Bot用のコードの開発

以下が実際に用いたコードです。コメントを削っていたり、ポートは常に固定の番号になるようにしました（ポート設定用の環境変数を含まない形にしました）。

app.mjs
import * as line from "@line/bot-sdk";
import express from "express";

const config = {
  channelSecret: process.env.CHANNEL_SECRET,
};

const client = new line.messagingApi.MessagingApiClient({
  channelAccessToken: process.env.CHANNEL_ACCESS_TOKEN,
});

const app = express();
app.post("/callback", line.middleware(config), (req, res) => {
  Promise.all(req.body.events.map(handleEvent))
    .then((result) => res.json(result))
    .catch((err) => {
      console.error(err);
      res.status(500).end();
    });
});

function handleEvent(event) {
  if (event.type !== "message" || event.message.type !== "text") {
    return Promise.resolve(null);
  }

  const echo = { type: "text", text: event.message.text };

  return client.replyMessage({
    replyToken: event.replyToken,
    messages: [echo],
  });
}

const port = 3000;
// const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`listening on ${port}`);
});

これを nodeコマンドで実行するのですが、その前に環境変数の設定を行います。

先ほどの公式リポジトリでは、以下で示した部分に書かれている内容です。

image.png

先ほどの手順でメモしていた「チャネルアクセストークン」と「チャネルシークレット」の 2つの文字列を、ここで使います。自分は Mac でやっているので、ターミナルで公式情報のとおりの exportコマンドを使った内容で、一時的に環境変数を設定することができます。

export CHANNEL_ACCESS_TOKEN=【ご自身のチャネルアクセストークン】
export CHANNEL_SECRET=【ご自身のチャネルシークレット】

環境変数の設定を行った後に、上記のファイルを nodeコマンドで実行すると、ローカルで 3000番のポートで Botサーバーがたちあがります。

image.png

ローカルのサーバーにインターネット側からアクセスできるようにする

devtunnel を使う

Botサーバーがローカルで立ち上がった状態で、先ほど少しセットアップしていた devtunnel を使うことで、そのローカルにあるサーバーにインターネット側からアクセスできるようにします。

具体的には、以下の記事で書いていたコマンドを使います。

●VS Code の「開発者用 Remote Tunnel」を GUI からではなく CLIツール「devtunnel」で扱う（ngrok的な機能） - Qiita
　https://qiita.com/youtoy/items/d88cbb13a959bf739143

実行するコマンドは以下です。

devtunnel host -p 3000 --allow-anonymous

ローカルサーバーのポート番号 3000 の指定と、アクセス時の認証が不要となる設定（ --allow-anonymous の部分）を含む内容です。

これを実行することで、インターネット側から認証などなしに、ローカルの Botサーバーにアクセスできるようになりました
※ LINEアプリでユーザーの入力が行われた際などの Webhook を、ローカルの Botサーバーで受けられるようになりました

以下は、コマンドを実行した後の画面です。

image.png

この画面で上記の赤の下線を引いた URL の末尾に /callback をつけた URL を、この後の手順で使いますので、その URL はメモしておいてください。

LINE Developersコンソールでの設定

Webhook に関する設定

あとは、LINE Developersコンソールでの設定を行います。今回、自分が使っているプロバイダーを選んで、その後の画面で先ほど作っていた以下を選びます。

image.png

その後の画面の「Messaging API設定」のタブを選びます。

image.png

そして、ページを下に進んだ先に「Webhook URL」という部分があります。この部分にある「編集」ボタンを押します。

image.png

その後の画面で、先ほどメモした URL（末尾に /callback をつけたもの）を設定して、「更新」ボタンを押します。

image.png

URL を設定したら、以下の「検証」ボタンを押してみます。

image.png

そのボタン押下後、以下のように「成功」という表示が出れば OK です。

image.png

その後、以下の「Webhookの利用」の項目を ON にしておきます。

image.png

LINEアプリで Bot からの応答を確認する

あとは LINEアプリ側からの操作で、動作確認をします。以下のように、入力した内容と同じ文字列が、返答で出てくれば大丈夫です。

IMG_3639.jpg

おわりに

上記の手順で、オウム返しをする LINE Bot をNode.js で作って動かす、ということができました。

その他

VS Code上で Port Forwarding

最後に補足です。上記の手順で devtunnel を使っていた部分を、VS Code を使ったやり方で進める手順を紹介します。

VS Code でターミナルを表示させた場合などに出てくる、以下の「ポート」タブを選び、その下の「ポートの転送」ボタンを押します。

image.png

そして、以下の画面の左にあるテキストボックスに 3000 という数字を入力します。

image.png

ちなみに上記の手順は、コマンドパレットを使って進めることもできます。
コマンドパレットで「forward port」などと入力した際に出てくる「Forward a Port」を選んで、さらにその後で「3000」というポート番号を入力する、という手順でも大丈夫です。

image.png

image.png

上記の手順を進めると、以下のような表示が出るので、「許可」ボタンを押します。

image.png

そうすると、ブラウザで以下の画面が出るので「Continue」ボタンを押します。

image.png

さらに、以下の画面のポート番号などが出ている行のどこかで右クリックメニューを表示させて、メニューの「ポートの表示範囲 ＞ 公開」という項目を選んでいきます。

image.png

「認証なしに 3000番ポートにアクセスできる」という状態になるため、この操作を続行して良いかどうかの確認が出ています。今回の内容では、Webhook の処理を行えるよう必要な設定になるので、この画面では「続行」ボタンを押します。

image.png

あとは Webhook の設定で使う URL を取得します。

image.png

そして試しに、上記の URL にブラウザからアクセスすると、開発者用トンネルへの接続を行うかどうかという質問が出ますが、「続行」ボタンを押して先に進めます。

image.png

今回の Botサーバーの実装では、GETリクエスト用の処理がないので、以下のように「Cannot GET / 」という表示が出ていますが、サーバーからのレスポンスを得られていることを確認できました。

image.png

これで先ほどと同様、末尾に /callback をつけた Webhook用の URL を使える状態にできました。

その他

参照した情報

●LINE Developersコンソールへのログイン | LINE Developers
　https://developers.line.biz/ja/docs/line-developers-console/login-account/

●Messaging APIを始めよう | LINE Developers
　https://developers.line.biz/ja/docs/messaging-api/getting-started/#step-one-enable-use-of-messaging-api

●LINE Bot ハンズオン - Qiita
　https://qiita.com/miso_develop/items/3bb4325c7871647a919a

4
0
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
Sign upLogin
4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?