SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

アイデアをすぐ形に! K5 Playgroundで開発するクラウドネイティブな最新Webアプリ(AD)

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

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

  • このエントリーをはてなブックマークに追加

LINEチャットボットアプリを確認しよう

フロントエンドアプリの確認

 アプリのデプロイが完了したら、LINEチャットボットアプリを確認してみましょう。まず、次のURLにアクセスして、LINE操作画面が表示されるか確認します。

 http://<フロントエンドアプリ名>.<リージョン識別子>.cf-app.net/

LINE操作画面が表示された
LINE操作画面が表示された

LINEとバックエンドアプリの接続情報の設定

 フロントエンドアプリのURLにアクセスすると、LINE操作画面が表示されます。ただし、このままではLINEとのやりとりはできません。「LINE Messaging APIのキーの取得」で作成したチャネルに、LINEとバックエンドアプリを接続するための情報を設定します。LINE Developersにアクセスし、ログインします。作成したチャネルを開きます。

LINE DevelopersのChannel基本設定
LINE DevelopersのChannel基本設定

 画面の下にスクロールし、「メッセージ送受信設定」において「Webhook送信」で「利用する」を選択し、「Webhook URL」に次のURLを入力します。それぞれの項目で「更新」をクリックしてください。なお、URLは先頭の「http://」を入れないことに注意しましょう。

 <バックエンドアプリ名>.<リージョン識別子>.cf-app.net/webhook

 万が一、接続確認でエラーメッセージが出力された場合、次のように対処してください。

  • 「Webhookが正常ではないHTTPステータスを返しました。」
    フロントエンドアプリのURLが設定されている、またはURLが誤っている場合、同様のエラーメッセージが表示されます。バックエンドアプリのURLが設定されているか確認してください。
  • 「Webhook との通信でエラーが発生しました。」
    通信できていた場合でも発生する可能性があります。このエラーが表示されている場合は、次の手順に進んでください。
メッセージ送受信設定
メッセージ送受信設定

友だちの追加

 スマートフォンでLINEを開き、QRコードを読み込んでLINEチャットボットを友だちとして追加しましょう。

 LINEに友だちとして追加されると、メッセージが表示されます。

友だちとして追加すると、LINEチャットボットからメッセージが送られる
友だちとして追加すると、LINEチャットボットからメッセージが送られる

 フロントエンド画面のリスト欄に、追加された友だちが表示されます。

追加された友だちが表示された
追加された友だちが表示された

LINE操作画面の確認

 では、LINE操作画面からLINEにメッセージを送ってみましょう。チャット欄の「Name」と「Message」に「LINE Test」と入力し、「POST」をクリックします。

LINE操作画面からメッセージを送信
LINE操作画面からメッセージを送信

 LINE操作画面から送られたメッセージが、LINEとLINE操作画面の両方に表示されることを確認できます。

送信されたメッセージが表示された
送信されたメッセージが表示された

 逆にLINEからメッセージを送ってみましょう。「よろしく」と送ると、LINE操作画面に表示されます。また、LINEチャットボットからメッセージが返されます。

LINEから送信したメッセージが表示された
LINEから送信したメッセージが表示された

ボット機能の確認

 LINEチャットボットアプリはボット機能により、「こんにちは」「寝るよ」というメッセージが送られてきたときに、特定のメッセージを返すようになっています。LINEからこれらのメッセージを送ってみましょう。

特定のメッセージにボットが応答する
特定のメッセージにボットが応答する

 LINEから送られたメッセージに対し、ボットが返信していることがわかります。LINE操作画面にもやりとりの履歴が残っています。

LINE操作画面に履歴が記録される
LINE操作画面に履歴が記録される

 第4回では、Chatアプリ用のテンプレートを用い、BFFにおいてLINEと連携するAPIロジック、MongoDBに保存するAPIロジック等をカスタマイズすることでLINEのチャットボットを作成しました。

 K5 Playgroundでは、冒頭でも説明した通り、LINEのほかにSlackやFacebookと連携するAPIロジックも用意しています。そのため、連携するロジックをLINEからSlackやFacebookに変えることで、SlackやFacebookのチャットボットも作ることができます。

 また本記事では、保存先のデータベースにMongoDBを使用しましたが、こちらも必要に応じて、FirebaseやPostgreSQLといったほかのAPIロジックを使用することで、容易に保存先を変えることもできます。

 興味のある方は、SlackのチャットボットやFacebookのチャットボットも作成してみてください。

 このように、一から開発すると難しく思えるアプリでも、K5 Playgroundに搭載されている小単位の機能を組み合わせることで、スピーディに数10分で形にすることができます。さらに、ユーザーのニーズに合わせて頻繁に機能を追加することができます。

 K5 Playgroundでは、今後も実用性の高いテンプレートやトレンドとなるAPIロジックを追加していく予定です。技術が激しく進化する中で、多様化するビジネスニーズにすばやく対応し、企業が成長し続けるために、K5 Playgroundを役立てていただければ幸いです。

 次回は応用編として、複数のサービスを組み合わせるアプリの事例や、作成したアプリを組み合わせてサービスを作る事例を紹介します。

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
アイデアをすぐ形に! K5 Playgroundで開発するクラウドネイティブな最新Webアプリ連載記事一覧

もっと読む

この記事の著者

西岡 結人(富士通株式会社)(ニシオカ ユイト)

 大阪府出身。基幹系業務アプリの開発を経験後、2016年に富士通株式会社に出向。現在は同社クラウドサービスK5の拡販用資材等の開発に従事。週末は外でフットサルや家でゴロゴロ読書や映画鑑賞。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/10658 2018/02/28 17:21

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング