LINE Bot Handson

# 5.[応用編]メッセージに応答するサーバを作ってみる

# ゴール

  • AWS Lambdaを使ってAPIを作成する
  • 送信されたメッセージにオウム返しできるようにする
  • 2章と同じようにメッセージに応じた返答ができるようになる

# 5-1.全体構成

  • 2章の冒頭と同じ図です
  • この章ではAPIサーバを作成しメッセージに応答できるようにします

構成1

# 5-2.セットアップ

# Nodeのインストール

  • Nodeの公式サイトからインストールしてください
  • ターミナルで以下のコマンドを実行してバージョンが表示されればOKです
node -v
npm -v
1
2

# yarnのインストール

  • 以下のコマンドでインストールします
npm i -g yarn
1
  • 以下のコマンドを実行してバージョンが表示されればOKです
yarn -v
1

# ServerlessFrameworkのインストール

  • 以下のコマンドでインストールします
npm i -g serverless
1
  • 以下のコマンドを実行してバージョンが表示されればOKです
sls -v
1

# AWSのアクセスキーの発行

# 応答メッセージの削除

オフ

# 5-3.APIサーバの作成

  • 今回はAWS Lambdaを使ってAPIを作成します
  • AWS LambdaのコードはServerlessFrameworkを使って構築していきます

# プロジェクトの雛形作成

  • ディレクトリを作成し移動します
mkdir line-bot-api
cd line-bot-api
1
2
  • ServerlessFrameworkを使ってテンプレートを生成します
sls create -t aws-nodejs-ecma-script
1
  • このようなファイルが生成されているはずです
% tree
.
├── first.js
├── package.json
├── second.js
├── serverless.yml
└── webpack.config.js
1
2
3
4
5
6
7
  • 依存ライブラリをインストールします
    • コマンド実行後line-bot-api内にnode_modulesディレクトリができていればOKです
yarn
1

# Helloを返す関数の作成

  • 自動生成されたテンプレートを手直ししていきます
  • プロジェクト直下にhandler.jsというファイルを作成し以下の内容を記述してください
export const hello = async event => {
  return {
    statusCode: 200,
    body: 'Hello',
  };
};
1
2
3
4
5
6
  • serverless.ymlを修正します
    • 以下の内容に丸ごと置き換えて必要事項を修正してください
service:
  name: line-bot-api-名前 # 一意な値である必要があるので名前などを追加しておいてください
plugins:
  - serverless-webpack
provider:
  name: aws
  runtime: nodejs12.x
  region: ap-northeast-1
  # profile: xxx # AWSのアクセスキー登録で`~/.aws/credentials`に[default]以外の名前で登録した場合はここで設定します
functions:
  hello: # Lambdaの関数名
    handler: handler.hello # ファイル名.エクスポート名
    # HTTPエンドポイントを作成するAPI Gatewayの設定
    events:
      - http:
          method: get
          path: hello
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  • AWSにデプロイしてみます
sls deploy
1
  • うまくいくと以下のようにログにURLが表示されます

deployログ

  • 表示されたURLにアクセスしHelloと表示されればデプロイ成功です

# 5-4.メッセージをオウム返しする

  • Helloまで動作確認ができたのでメッセージを応答する関数を作成していきます
    • まずは送信されたメッセージをオウム返しするところまで作ってみます

# アクセストークンの取得

  • 応答メッセージを返すためにはトークンを送る必要があります
  • LINEのデベロッパーコンソールからトークンを取得しておきます
  • 2つ作ったチャネルのうちMessaging APIの方を選択します

チャネル

  • Messaging API設定タブを選択します

MessagingAPI設定

  • 一番下までスクロールするとチャネルアクセストークンという項目があるので発行ボタンを押してトークンを生成します

token

  • トークンはこの後使うので控えておいてください

# ライブラリの追加

  • LINEの機能を利用するためにライブラリを追加します
yarn add @line/bot-sdk
1

# 関数の追加

  • handler.jsに新しい関数を作成します
    • 1-33行目を追加しています
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 









import { Client } from '@line/bot-sdk';

// 環境変数からトークンを取得
const channelAccessToken = process.env.CHANNEL_ACCESS_TOKEN;

// LINE APIのクライアントを初期化
const lineClient = new Client({ channelAccessToken });

// POST:/reply
export const reply = async event => {
  const body = JSON.parse(event.body);

  // replyToken: 応答に必要なトークン, message: 送信されたメッセージの情報
  const { replyToken, message } = body.events[0];

  // デベロッパーコンソールからのテスト打鍵の場合replyせずに返す
  if (replyToken === '00000000000000000000000000000000') {
    return { statusCode: 200 };
  }

  // 応答メッセージを送信
  await lineClient.replyMessage(replyToken, [
    {
      type: 'text',
      text: message.text, // オウム返しするので受け取ったメッセージをセット
    },
  ]);

  return {
    statusCode: 200,
    body: 'OK',
  };
};

// GET:/hello
export const hello = async event => {
  return {
    statusCode: 200,
    body: 'Hello',
  };
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
  • serverless.ymlに新しく追加した関数の情報を付け足します
    • 10-11行目にアクセストークンをセットします
      • トークンをそのままGitHubにあげるなどしないように注意してください
    • 19-24行目に新しく追加したreply関数の情報をセットします









 
 







 
 
 
 
 
 

service:
  name: line-bot-api-名前
plugins:
  - serverless-webpack
provider:
  name: aws
  runtime: nodejs12.x
  region: ap-northeast-1
  # profile: xxx
  environment:
    CHANNEL_ACCESS_TOKEN: XXX # アクセストークンを設定する
functions:
  hello:
    handler: handler.hello
    events:
      - http:
          method: get
          path: hello
  reply:
    handler: handler.reply
    events:
      - http:
          method: post
          path: reply
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# デプロイ

  • ここまで修正できたらデプロイします
sls deploy
1
  • ログにはURLが2つ表示されているはずです

ログ

  • 末尾がreplyの方のURLを控えておいてください

# Webhook URLの登録

  • APIができたのでLINEのデベロッパーコンソールにWebhook URLとして登録します

  • アクセストークンを取得した時と同じMessaging API設定タブを選びます MessagingAPI設定

  • Webhookの項目でURLを登録しWebhookの利用にもチェックを入れておきます

WebhookURL

  • 検証を押して成功することも確認しておきましょう
  • 最後にWebhookの設定がオフになっていることがあるのでオンにしておきます

応答メッセージ Webhookオン

# 動作確認

  • ここまでできたらスマホでLINEアプリを開いて動作確認してみます

オウム返し

  • オウム返しができるようになりました！

# 5-5.メッセージに応じた返答をする

  • ここまでで一連のフローはできあがりました
  • あとはLamda関数のロジックを拡充していくだけです

# メッセージの内容による振り分け

  • handler.jsを修正してメッセージの内容に応じて返答を変えてみます
    • 21-41行目にロジックを追加しています
    • 47行目も修正しています




















 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 





 

















import { Client } from '@line/bot-sdk';

// 環境変数からトークンを取得
const channelAccessToken = process.env.CHANNEL_ACCESS_TOKEN;

// LINE APIのクライアントを初期化
const lineClient = new Client({ channelAccessToken });

// POST:/reply
export const reply = async event => {
  const body = JSON.parse(event.body);

  // replyToken: 応答に必要なトークン, message: 送信されたメッセージの情報
  const { replyToken, message } = body.events[0];

  // デベロッパーコンソールからのテスト打鍵の場合replyせずに返す
  if (replyToken === '00000000000000000000000000000000') {
    return { statusCode: 200 };
  }

  // 受け取ったメッセージを小文字化
  const receivedMessage = message.text.toLowerCase();

  // 受け取ったメッセージに応じて返答内容を決定
  let text = '';
  switch (receivedMessage) {
    case 'twitter':
      text = 'https://twitter.com/ozaki25rn';
      break;
    case 'qiita':
      text = 'https://qiita.com/ozaki25';
      break;
    case 'github':
      text = 'https://github.com/ozaki25';
      break;
    case 'hatena':
      text = 'https://ozaki25.hatenadiary.jp/';
      break;
    default:
      text = 'その言葉は分かりません';
  }

  // 応答メッセージを送信
  await lineClient.replyMessage(replyToken, [
    {
      type: 'text',
      text,
    },
  ]);

  return {
    statusCode: 200,
    body: 'OK',
  };
};

// GET:/hello
export const hello = async event => {
  return {
    statusCode: 200,
    body: 'Hello',
  };
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

# デプロイ

  • 修正できたらデプロイします
sls deploy
1

# 動作確認

  • スマホで動作確認してみましょう

reply

  • 今回はメッセージを送信された時の応答のみを実装しました
  • LINE Bot側から一方的にメッセージをプッシュすることもできるので興味がある人は調べてみてください
Last Updated: 2020/05/26

← 6.[応用編]LIFFアプリを埋め込む →