60分でLINEチャットボットアプリを作ろう～K5 Playgroundのテンプレートで本格アプリ開発

アイデアをすぐ形に！ K5 Playgroundで開発するクラウドネイティブな最新Webアプリ 第4回

新規アプリの作成

　K5 PlaygroundのサイトからK5 Playgroundを起動し、Chatテンプレートを選択します。選択するとテンプレートアプリが表示され、デフォルトで用意されている操作画面とWebAPIを確認することができます。WebAPIは、操作画面から入力されたユーザーやメッセージをデータベースに保存するAPIとデータベースからユーザーやメッセージを取得するAPIといった必要最低限の機能を備えた状態です。「CREATE APP」をクリックして新規アプリを作成します。

ChatテンプレートアプリのUI（左）　　　　　　　　　ChatテンプレートのAPI情報（右）

SPAのカスタマイズ

　SPAでは画面のUIをカスタマイズしてみましょう。この画面は、LINEアプリに登録されたユーザーから送られてきたメッセージを管理するほか、管理者からLINEのユーザーにメッセージを送信することができる画面です。アプリ全体の色調、見出しや本文で使うフォント、リスト欄とチャット欄のUI部品を第2回の記事を参考にして、お好みで変更してみてください。

UI変更後の画面例

アプリ名の変更

　アプリ名を変更します。左メニューの「App Info」をクリックし、「App Name」を任意のアプリ名（ここでは「LINEChatbot」）に変更します。

アプリ名を変更

BFFのカスタマイズ（1）

　BFFでは、LINEからの通知を受信し、その内容に応じて処理を行うWebAPIとして「POST /webhook」を追加します。また、既存のWebAPI　についてもカスタマイズを行います。

Webhookとは

　Webhookは、あるイベントの発生をトリガーとして特定のAPIを呼び出すための仕組みです。LINE Messaging APIのWebhookを例にすると、LINEアプリからの友だち追加やメッセージ送信等のリアルタイムイベントが発生した際に、LINE Messaging APIのチャネルに設定されているWebhook URLにHTTPS POSTリクエストが送信されます

LINE Messaging APIのWebhookの仕組み

BFFのカスタマイズの内容

WebAPI	APIロジック	カスタマイズの内容
POST /webhook	「LINE Messaging API Receive Message」	追加	LINEからの通知を検証する処理
	「MongoDB Save Document」	追加	LINEからのフォロー通知を受け取った際にユーザーの情報をMongoDBに保存する処理
	「MongoDB Save Document 」	追加	LINEからのメッセージ通知を受け取った際にメッセージをMongoDBに保存する処理
	「LINE Messaging API Send Message」	追加	受け取ったメッセージの内容によって、決まったメッセージを返答するボット処理
	「MongoDB Save Document」	追加	ボット機能でLINEに返答したメッセージをMongoDBに保存する処理
POST /sample_messages	「LINE Messaging API Send Message」	追加	LINE操作画面に入力されたメッセージをLINEに送信する処理

POST /webhookの追加

　左メニューの「WebAPIs」をクリックし、画面を下にスクロールして「Create a New WebAPI」に「webhook」と入力します。

新規に「webhook」を追加

　メソッドが表示されたらPOSTメソッドをオンにします。新しいWebAPIとして、POST /webhookが追加されます。

POST /webhookが追加された