SHOEISHA iD

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

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

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

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

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

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

 開発ツール「K5 Playground」を活用した、最新のWebアプリ開発を紹介する本連載。前回は、実際にK5 Playgroundを使ってGoogle Map×世界遺産/Instagramアプリを開発し、アイデア次第で多様なアプリを開発できることを理解しました。今回は「チャットボット」アプリを作成しましょう。チャットボットは、さまざまな分野で普及し、開発現場でも作業を効率化する「ChatOps」と呼ばれる概念が登場しています。人気の高いチャットボットアプリですが、一から開発するのは大変なので、昨今では相次いでチャットボットサービスがリリースされています。本記事では、既存のサービスは使わず、K5 Playgroundを用いて、WebアプリとしてLINEのチャットボットを開発します。Webアプリとして作ることで、複雑な要件にも対応できる柔軟なチャットボットを実現できます。

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

操作画面とチャットボット機能を備えたアプリを作成しよう

 一般的なチャットボットアプリは、「チャットボット機能」を利用したユーザーとボットの対話のみです。しかし、K5 Playgroundのチャットボットアプリ用のテンプレートを利用すれば、標準で操作画面が付いているため、ユーザーとボットの対話だけでなく、操作画面を使って管理者とユーザーの対話も可能なチャットボットアプリを作ることができます。

 今回は、このチャットボットアプリ用のテンプレートとLINEと連携するAPIロジックやAPI追加機能を用いて、次の機能を備えたLINEチャットボットを開発します。

  • LINE@アカウントの管理者がユーザー単位で過去のメッセージをすべて確認できるUI機能
  • LINE@アカウントの管理者からユーザーにメッセージを送信できるUI機能
  • ユーザーからの特定のメッセージに対して、定型的なメッセージを返すボット機能
  • ユーザーの情報やメッセージをすべてデータベースに保存する機能

 K5 Playgroundでは、LINEと連携するAPIロジックの他に、Slack/Facebook Messengerなどと連携するAPIロジックも用意しているため、SlackやFacebookのチャットボットも作ることができます。今回作成するLINEチャットボットアプリの完成までの目安は、約60分です。

アプリの完成イメージ
アプリの完成イメージ
アプリ構成図
アプリ構成図

 本記事では、チャットボットで利用するMongoDBの環境を構築済みであることを前提に開発を進めます。データベースを使用せずにお試しでチャットボットを作成したい場合は、富士通が用意している「K5 Playground × CF Webハンズオン」の教材を参照してください。それでは、早速チャットボットアプリの開発を始めましょう。

LINE Messaging APIのキーの取得

 このアプリでは、LINEとメッセージのやりとりを行うためにLINE Messaging APIを使用します。LINE Messaging APIを使うには、LINE Messaging APIの「チャネルシークレット」と「アクセストークン」という2種類のキーが必要です。そのため、まずはLINEの開発者登録を行い、この2つを取得しましょう。

開発者登録

 最初に、LINE Developersにアクセスし、ログインします(ログインには、LINEアカウントが必要です。LINEアカウントがない場合は、あらかじめ作成しておいてください)。

LINE Developers
LINE Developers

 「開発者名」と「メールアドレス」にそれぞれに名前とメールアドレスを入力し、「LINE Developers Agreementの内容に同意します。」をオンにして、「確認」をクリックしてください。確認画面が表示されたら「登録」をクリックします。

開発者登録を行う
開発者登録を行う

 開発者登録が完了したら、「はじめる」をクリックします。この画面が表示されたら、開発者登録は完了です。

開発者登録が完了
開発者登録が完了

プロバイダーの作成

 開発者登録ができたら、LINE Messaging APIを利用し、サービスを提供するプロバイダーを作成します。「プロバイダーを作成する」をクリックします。

プロバイダーの作成
プロバイダーの作成

 「プロバイダー名」として任意の名前(会社名や個人名)を入力し、「確認」をクリックします。確認画面が表示されたら、「作成」をクリックしてください。

新規プロバイダーを作成
新規プロバイダーを作成

新規チャネルの作成

 プロバイダーを作成したら、新規チャネルを作成します。「Messaging API」をクリックしてください。LINEプラットフォームを利用するには、アプリがチャネルにリンクされていなければなりません。チャネルを作成すると、固有のチャネルIDが識別用に発行されます。チャネルには、名前、説明文、およびアイコン画像が必要です。

「Messaging API」をクリック
「Messaging API」をクリック

 新規チャネルを作成するために必要な情報を入力します。入力後、「確認」をクリックしてください。

「アプリアイコン画像」 任意の画像(3MB以下、JPEG/PNG/GIF/BMP形式、省略可)
「アプリ名」 任意のアプリ名
「アプリ説明」 アプリの説明
「プラン」  「Developer Trial」を選択
「大業種」 プルダウンリストから選択
「小業種」 プルダウンリストから選択
「メールアドレス」 任意のメールアドレス
新規チャネルを作成
新規チャネルを作成

 「LINE@利用規約の内容に同意します」と「Messaging API(Developer Trialプラン)」利用規約の内容に同意します」にチェックを入れ、「作成」をクリックします。

利用規約の内容に同意して作成
利用規約の内容に同意して作成

 新規チャネルが作成されました。「設定が完了していません」の下にある「→」をクリックします。

チャネルが作成された
チャネルが作成された

 「Channel基本設定」が表示されます。「基本情報」の「Channel Secret」の値を確認します(サンプル画像では内容がわからないようにマスクをかけています)。この値をテキストファイルなど任意の場所に保存しておきましょう。

チャネルシークレットを確認
チャネルシークレットを確認

 画面を下にスクロールし、「メッセージ送受信設定」の「アクセストークン」の値を確認します(サンプル画像では内容がわからないようにマスクをかけています)。この値もテキストファイルなどに保存しておきます。

 なお、チャネルシークレットやアクセストークンが表示されない場合は、右横の「再発行」をクリックしてください。

アクセストークンを確認
アクセストークンを確認

 チャネルシークレットとアクセストークンを取得できました。これらの値は、バックエンドの設定に使用します。

 これで準備は完了です。続いて、アプリの作成を始めましょう。

次のページ
新規アプリの作成

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

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

もっと読む

この記事の著者

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

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

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

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

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング