飲み物注文ボットサンプル with LINE Pay を作ってみた #LINE_API

はじめに

こんにちは、中村です。 今回は、LINE Payで支払いができる飲み物注文ボットのサンプルを作成しました。

まずはこちらをご覧ください。実際の動作確認動画です。

作ってみる

概要

今回はサーバーレスな構成で作成していきます。簡単にどのような機能を担っているのかも記載してあります。

構成図をご覧いただけるとわかると思いますが、利用するAWSサービスは以下になります。

• AWS Lambda(以下、Lambda)
• Amazon API Gateway(以下、API Gateway)
• Amazon VPC(以下、VPC)
• Amazon DynamoDB(以下、DynamoDB)

VPCを利用するのはLINE PayにリクエストするサーバーのIPアドレスを固定する必要があるためです。

ソースコードとアカウント

ソースコード

こちらからご利用ください。

アカウント

• LINE開発者アカウント
• LINE Pay Sandboxアカウント
• AWSアカウント

LINE開発者アカウントでチャネルを作成しておいてください。詳しくはこちらの記事をご覧ください。 またチャネルアクセストークン(ロングターム)を発行し、メモしておいてください。

LambdaではじめてのLINE Botを作る

VPC

LINE PayサーバーへリクエストするIPを固定するために、VPCを作成します。

VPCにアクセスし、サイドバーのElastic IPから新しいアドレスの割り当てをクリックしてIPアドレスを取得してください。取得が完了したら、VPCダッシュボードヘ戻りVPCウィザードの起動をクリックして、パブリックとプライベート サブネットを持つ VPCを選択し作成します。NATゲートウェイの設定箇所にて先ほど取得したElastic IPを選択します。

LINE PayのSandbox環境へElastic IPを登録してください。

Lambda

4つLambdaを作成します。ランタイムはnode.js 8.10を指定してください。またソースコードはTypescriptで記述していますので、別途ローカルに環境構築が必要になります。作成後ネットワーク(VPC)の設定ができます。チャットボット(LINEサーバー)からのwebhook用とLINE Payサーバーからのwebhook用のLambdaは先ほど作成したVPCを選択し、サブネット、セキュリティグループを選択します。

• サブネット: プライベートサブネット
• セキュリティグループ: default

この時LambdaのロールにはVPCの権限が必要になります。またDynamoDBへのアクセス権限も必要なので合わせて追加しておいてください。

API Gateway

API Gatewayにアクセスします。APIの作成をクリックしてください。情報入力画面に遷移したらAPI名を入力してAPIの作成をクリックで作成されます。

作成が完了するとリソースが表示される画面に遷移します。今回は表にあるリソース/メソッドを作っていきます。

例として、/のリソースを作成してみます。アクションのプルダウンの中からメソッドの作成をクリックします。

プルダウンが/の下に表示され作成できるメソッドが表示されます。LINEからはPOSTリクエストされるのでPOSTを選択しチェックマークをクリックします。

メソッドの設定が表示されると思います。Lambdaプロキシ統合の使用にチェックを入れ、Lambda関数を選択し保存します。(作成するリソースは全てLambdaプロキシ統合の使用にチェックを入れてください。)

Lambda関数を呼び出す権限を与える旨の表示がされると思います。OKでそのまま進みます。

これで最低限動かす設定が完了しました。残りのAPIも作成方法は同様ですが、パスが変わるので先ほどのアクションプルダウンにあるリソースの作成を実行してからメソッドを作成してください。作業はリソース名の入力のみです。

全てのリソース作成が完了したらデプロイします。アクションタブのAPIのデプロイをクリックしてください。ステージを作成する画面が表示されるかと思います。ステージ名にprdと入力してデプロイをクリックしてください。ステージについては今回は深く触れませんが、URLパスで先ほど作成したリソースの前に付加されるものになります。

デプロイが完了したら、ダッシュボードに遷移します。同ページ内にAPI URLが表示されていると思います。

API URLのサンプルはこんな感じです。

https://xxxxxx.execute-api.ap-northeast-1.amazonaws.com/prd/

このURLを使ってLINE開発者コンソールで作成したボットのメッセージ送受信設定にあるWebhook関連箇所を更新しましょう。

DynamoDB

支払い情報保存用テーブル・商品マスターテーブルの2つを作成します。Lambdaの環境変数に登録するので、テーブル名は任意で構いません。 今回は説明する上でこのようにテーブル名をつけました。プライマリーキーは、作成時こちらの値を指定してください。

読み込み/書き込みキャパシティーモードは、オンデマンドを利用しましょう。 作成が完了したら、productに商品を登録します。このテーブルには、productNameとAttributesを登録します。Attributesには、priceとimageが含まれるオブジェクトを文字列にしています。

コード修正・デプロイ

さてベースの仕組みができたので、Lambdaのコードを修正していきます。各Lambdaには、環境変数が定義されています。Apexを利用している方はfunction.jsonを修正してデプロイで大丈夫です。

Lambdaのコンソールから行う場合は、エディタの下に環境変数のエリアがあるので登録してください。

Lambdaへのデプロイが完了したら完成です。実際にテストしてみましょう。

まとめ

まだまだ購入体験改善の余地はありますが、ベースの仕組みを構築しました。これに加えてAmazon LexやDialogflowを利用することで、より自然な会話を実現できます。

LINEはアプリをダウンロードするよりも簡単にユーザーへアクセスできるため、今後もっとチャットボット x LINE Payの購入体験が増えてくれるのではないかと妄想しています。個人的には、映画館のポップコーンや飲み物がLINEで事前注文できると大変嬉しいです。

チャットボット開発は弊社にご相談ください。