チュートリアル - 応答ボットを作る

Markdownで表示 GitHubで表示

このチュートリアルでは、Node.jsとMessaging APIを使って、応答ボットでメッセージを送信する方法を学びます。

Messaging APIは、サービスとLINEユーザーとの間で双方向のコミュニケーションを可能にする機能です。Messaging APIの機能を利用して、ユーザーとの交流を深めることができます。様々な種類のメッセージの送信、ユーザープロフィールの取得、ユーザーが送信したコンテンツの取得など、その機能は多岐にわたります。

このチュートリアルを最後まで進めると、ユーザーが送信したメッセージに自動的に応答するアプリが作成できます。

始める前に

このチュートリアルは、JavaScriptとNode.jsの基本的な知識を必要とします。また、チュートリアルをスムーズに進めるために、「Messaging APIの概要」を読んでおくことをお勧めします。

このチュートリアルではSDKを使用しません

このチュートリアルでは、Messaging APIの仕様を理解するために、LINEプラットフォームのSDKを使わずにNode.jsでMessaging APIを使用する方法を説明します。Node.jsを使ったプロジェクトで、Messaging APIをより少ないコード行数で素早く利用したい場合は、LINE Messaging API SDK for nodejsを利用してください。

準備

チュートリアルで応答ボットを作成するために、まずは必要なシステムへの登録と、ツールをインストールします。

アカウントを登録するもの：

  • LINE Developersコンソールのアカウント：LINE DevelopersコンソールにLINEアカウントまたはビジネスアカウントでログインし、まだお持ちでなければ開発者アカウントを作成してください。
  • Herokuアカウント
    Herokuの無料プランは廃止されました

    Herokuの無料プランは、2022年11月27日をもって廃止されました。このチュートリアルを無料で試したい場合は、他のプラットフォームを利用してください。詳しくは、「Heroku’s Next Chapter」を参照してください。

インストールするもの：

1. Herokuの設定

ターミナルまたはコマンドラインツールで、以下のコマンドを実行し、Heroku CLIにログインします。

sh
heroku login

次に、チュートリアル用のディレクトリを作成し、そのディレクトリに移動します。そして、Gitを初期化してHerokuを使ったアプリを作成します。{Name of your app}は、msg-api-tutorial-{YYYYMMDD}などの一意の名前に置き換えてください。

sh
mkdir sample-app
cd sample-app
git init
heroku create {Name of your app}

アプリが問題なく作成されると、HerokuのURLがhttps://{Name of your app}.herokuapp.com/のような形式で生成されます。このURLはチュートリアルの中で必要になります。生成されたHerokuのURLを、ブラウザで開いてください。ウェルカムページが表示されます。

2. プロジェクトの設定

npmがプロジェクトを識別できるように、package.jsonファイルを作成する必要があります。このファイルには、プロジェクトのメタデータと依存関係を定義する必要があります。package.jsonは、npmパッケージを初期化するためのコマンドnpm initで作成します。このチュートリアルでは特別な設定は必要ないので、-yコマンドを使用して、パッケージをセットアップするための質問をすべてスキップします。

sh
npm init -y

以下のようなpackage.jsonが作成されます。

json
{
  "name": "sample-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

次に、スタートスクリプトを定義します。スタートスクリプトは、Herokuのようなサーバープラットフォームに、サーバーの起動時にどのファイルを使用するかを知らせるためのものです。このチュートリアルでは、サーバーの設定ファイルとしてindex.jsを設定します。テキストエディタでpackage.jsonを開き、"start"プロパティに"node index.js"を指定してください。

json
{
  "name": "sample-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

以下のコマンドを実行して、Express.jsのパッケージをインストールします。Express.jsは軽量なNode.jsのウェブサーバーフレームワークです。

sh
npm install express

Express.jsをインストールすると、package.jsonにパッケージの依存関係が追加されます。また、同時にnode_modulesというディレクトリが作成されます。このディレクトリには、ローカルでインストールしたパッケージが保存されますが、Herokuにはプッシュされないようにします。このディレクトリを除外するために、.gitignoreファイルを作成します。

sh
touch .gitignore

作成した.gitignoreファイルをテキストエディタで開き、以下のように除外したいディレクトリ名をファイルに追加します。

text
node_modules/

これにより、指定したディレクトリがプッシュされることはありません。

3. ボットの実装

準備が完了しました。応答ボットを実装しましょう。

  1. グローバル設定
  2. ミドルウェアの設定
  3. ルーティングの設定
  4. 応答メッセージを送る

3-1. グローバル設定

サーバー設定のためのJavaScriptファイルindex.jsを作りましょう。

sh
touch index.js

作成したindex.jsファイルには、先ほどインストールしたexpressパッケージをインポートするコードと、インスタンス化するコードを追加します。また、ボットがHTTPリクエストを処理できるようにhttpsパッケージもインポートします。このパッケージは、Node.jsにデフォルトで付属しているので、インストールする必要はありません。

index.jsをテキストエディタで開き、以下のコードを追加しましょう。

javascript
const https = require("https");
const express = require("express");
const app = express();

続いて、設定プロセスを簡素化する目的と、認証情報を保護する目的で環境変数を追加します。process.env.PORTは、サーバーがどのポートでListenするかを指定します。process.env.LINE_ACCESS_TOKENは、Messaging APIを呼び出すために必要なチャネルアクセストークンを指定します。index.jsで、インポートしたパッケージの下に、以下を追加します。

javascript
const PORT = process.env.PORT || 3000;
const TOKEN = process.env.LINE_ACCESS_TOKEN;

3-2. ミドルウェアの設定

Express.jsは、ミドルウェアのウェブフレームワークです。ミドルウェア関数を使って、リクエストとレスポンスのサイクルを決めることができます。

このチュートリアルでは、Express.jsに付属する関数express.json()とexpress.urlencoded()を使用します。これらの関数は、それぞれリクエストオブジェクトをJSON、文字列、配列として扱うためにあらかじめ用意されているミドルウェア関数です。ミドルウェアの機能を使用するために、app.use()を呼び出します。index.jsファイルに以下のコードを追加します。

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

3-3. ルーティングの設定

ボットサーバーに基本的なルーティングロジックを追加しましょう。ヘルスチェック等の失敗を防ぐために、ドメインのルート（/）へのHTTP GETリクエストに対して、ステータス200を返すようにします。index.jsファイルに以下のコードを追加します。

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

次に、app.listen()関数を使って、サーバーにリスナーを設定します。リスナーのポートには、先ほど設定した環境変数PORTを指定します。そのため、特に異なる指定がされていない限り、3000をListenします。index.jsに、以下のコードを追加します。

javascript
app.listen(PORT, () => {
  console.log(`Example app listening at http://localhost:${PORT}`);
});

Listenする準備ができたので、LINEプラットフォームからWebhook URLに送られてくるリクエストを処理するコードを追加しましょう。ユーザーがボットにメッセージを送信すると、LINEプラットフォームは、ボットサーバーがホストするWebhook URLにHTTP POSTリクエスト（Webhookイベント）を送信します。LINEプラットフォームからのリクエストに応答するために、app.post()関数を使って、リクエストをルーティングします。index.jsの、app.get()とapp.listen()関数の間に、以下のコードを追加します。

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

このコードは、/webhookエンドポイントにHTTP POSTリクエストが送られてきたときに、HTTP POST request sent to the webhook URL!というHTTPレスポンスを返すようにボットサーバーに指示するものです。

ここまでで、index.jsは以下のようになっているはずです。

javascript
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!");
});

app.listen(PORT, () => {
  console.log(`Example app listening at http://localhost:${PORT}`);
});

3-4. 応答メッセージを送る

応答ボットのコア機能である、ユーザーのメッセージに応答する機能を実装します。まず、ユーザーからメッセージを受信したことを識別する必要があります。Webhook URLで、typeプロパティの値がmessageになっているメッセージイベントオブジェクトを受信したら、ユーザーからメッセージが送信されたと識別します。

ボットを本番用として公開する場合は署名を検証してください

本番用として、不特定多数のユーザー向けにボットを公開する場合には署名の検証が必要です。HTTPリクエストがLINEプラットフォームから送られたことを確認するために、リクエストヘッダーのx-line-signatureに含まれる署名を検証してください。

署名の検証方法について詳しくは、「署名を検証する」を参照してください。

ユーザーに応答するには、応答メッセージを送るエンドポイント（https://api.line.me/v2/bot/message/reply）を使います。index.jsのapp.postから、応答メッセージを送るエンドポイント（https://api.line.me/v2/bot/message/reply）を呼び出します。以下のコードでapp.postを置き換えてください。それぞれの処理の詳しい説明は、コードコメントで確認してください。

javascript
app.post("/webhook", function (req, res) {
  res.send("HTTP POST request sent to the webhook URL!");
  // ユーザーがボットにメッセージを送った場合、応答メッセージを送る
  if (req.body.events[0].type === "message") {
    // APIサーバーに送信する応答トークンとメッセージデータを文字列化する
    const dataString = JSON.stringify({
      // 応答トークンを定義
      replyToken: req.body.events[0].replyToken,
      // 返信するメッセージを定義
      messages: [
        {
          type: "text",
          text: "Hello, user",
        },
        {
          type: "text",
          text: "May I help you?",
        },
      ],
    });

    // リクエストヘッダー。仕様についてはMessaging APIリファレンスを参照してください。
    const headers = {
      "Content-Type": "application/json",
      Authorization: "Bearer " + TOKEN,
    };

    // Node.jsドキュメントのhttps.requestメソッドで定義されている仕様に従ったオプションを指定します。
    const webhookOptions = {
      hostname: "api.line.me",
      path: "/v2/bot/message/reply",
      method: "POST",
      headers: headers,
      body: dataString,
    };

    // messageタイプのHTTP POSTリクエストが/webhookエンドポイントに送信された場合、
    // 変数webhookOptionsで定義したhttps://api.line.me/v2/bot/message/replyに対して
    // HTTP POSTリクエストを送信します。

    // リクエストの定義
    const request = https.request(webhookOptions, (res) => {
      res.on("data", (d) => {
        process.stdout.write(d);
      });
    });

    // エラーをハンドリング
    // request.onは、APIサーバーへのリクエスト送信時に
    // エラーが発生した場合にコールバックされる関数です。
    request.on("error", (err) => {
      console.error(err);
    });

    // 最後に、定義したリクエストを送信
    request.write(dataString);
    request.end();
  }
});

4. Messaging APIチャネルを準備する

Messaging APIの機能を利用するには、Messaging APIチャネルを作成し、Webhook URLを登録する必要があります。作成していない場合は、チャネルを作成してください。

LINE DevelopersコンソールのMessaging APIチャネルの［Messaging API設定］タブで、チャネルアクセストークンを発行します。このトークンは、「Herokuでアプリをデプロイする」で使用します。

次にWebhook URLを登録します。［Messaging API設定］タブで、［Webhook URL］に、「Herokuの設定」で取得したHerokuのURLを元に、サーバーがWebhookをListenするURLを入力します。URLはhttps://{Name of your app}.herokuapp.com/webhookという形式になっています。［Webhook URL］はhttps://{Name of your app}.herokuapp.com/ではないので注意してください。

HerokuのURLを忘れてしまったら

HerokuのURLを忘れてしまった場合は、Heroku Dashboardで確認できます。

［Webhookの利用］を有効にします。

ボットをテストするために、［Messaging API設定］タブのQRコードを読み取って、ボットに紐づけられたLINE公式アカウントを友だちとして追加します。テストのために、［応答メッセージ］と［あいさつメッセージ］は無効にしてください。

これで、Messaging APIチャネルの準備が整いました。

5. Herokuでアプリをデプロイする

先ほど「グローバル設定」で、環境変数LINE_ACCESS_TOKENの値をチャネルアクセストークンとして使うように設定しました。Herokuにデプロイしたアプリを正常に動作させるために、環境変数LINE_ACCESS_TOKENを登録する必要があります。

環境変数にチャネルアクセストークンを登録するために、ターミナルまたはコマンドラインツールで、以下のコマンドを実行してください。LINE_ACCESS_TOKENには、「Messaging APIチャネルを準備する」で取得したチャネルアクセストークンを設定します。

sh
heroku config:set LINE_ACCESS_TOKEN={チャネルアクセストークンをここに入力してください}

これで、アプリをHerokuにデプロイする準備が整いました。作成したコードをHerokuにプッシュしましょう。ターミナルまたはコマンドラインツールで、以下のコマンドを実行してください。

sh
git add .
git commit -m "First commit"
git push heroku main

Webhook URLを検証する

ボットをテストする前に、Webhookが正常に動作しているか確認しましょう。「Messaging APIチャネルを準備する」で作成したチャネルの［Messaging API設定］タブに移動します。［Webhook URL］の［検証］をクリックし、Webhookが動作するかを確認します。Webhook URLに問題がない場合、「成功」のメッセージが表示されます。これでサンプルボットが完成しました。

ボットを試す

LINEでボットにメッセージを送ってみてください。このようなメッセージが届くはずです。

トラブルシューティング

ボットが正常に動作していない場合は、以下のコマンドを実行することでHerokuのログを確認できます。

sh
heroku logs --tail

次のステップ

このボットには、さまざまな機能を追加できます。その例をいくつかご紹介します。

前述の通り、LINE Messaging API SDK for nodejsを使えば、より素早くボットを開発できます。こちらもぜひご検討ください。

関連ドキュメント