Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

IBM Cloud x Lineボットハンズオン 2018年7月14日

IBM Cloud によるWatson AssistantとLine Messaging API を使ったチャットボットハンズオン資料。

  • Login to see the comments

IBM Cloud x Lineボットハンズオン 2018年7月14日

  1. 1. LINEボットハンズオン Watson Assistantによるチャットボット作成 1著者:Kohei Nishikawa https://8card.net/p/knishikawa
  2. 2. チャットボットの仕組み 会話エンジン 照会・検索 エンジン 照会用ストレージ 業務用データベースファイルサーバー Watson Discovery チャットボットの仕組みの例として、上図のように、エンドユーザーと対話するフロント(LINE やFacebookなど)があり、裏に会話を制御する仕組み、「会話エンジン」があり、利用者からの 質問に適切な結果を返すために、「照会・検索エンジン」があります。 「照会・検索エンジン」は、「照会用ストレージ」とつながり、「照会用ストレージ」に業務用 データベースやファイルサーバーから取得したテキストデータが格納され、チャットボット利用 者からの質問に適切に回答する源泉となります。 2 Watson Assistantフロント 今回のハンズオンの範囲 Watson Discovery Data Crawler
  3. 3. 目次 • ハンズオン環境の準備 • Watson Assistantの有効化とインポート • LINEボットの作り方 • チャットボットのログを取得しよう! • Node-REDフローのバックアップ 3 P.4 P.16 P.26 P.42 P.49
  4. 4. ハンズオン環境の準備 4
  5. 5. IBM Cloud(旧Bluemix) 下記URLにアクセスし、無料で使用できるIBM Cloud ライトアカウントに申込みます。一部機能制限 がありますが、クレジットカード登録不要で、利用期間制限がありません。 申し込み後は、メールにてアカウントのアクティベーションし、ログインします。 初回ログイン後は、利用規約の同意、組織の作成、スペースの作成など画面指示に従って進めます。 IBM Cloud ライト・アカウント https://www.ibm.com/cloud-computing/jp/ja/bluemix/lite-account/ 5
  6. 6. IBM Cloudにログイン https://console.bluemix.net/にアクセスし、登録したIBM IDでログインします。 ここをクリック こちらをクリックした場合 は、ライト・アカウントの 登録画面に遷移します。 IBM Cloudには、リージョン(データセンター)として、米国南部 / 米国東部 / 英国 / シドニー /ドイ ツ があり、今回は「英国」をメインに使用しています。 6
  7. 7. IBM Cloud カタログ カタログにアクセスすると、IBM Cloudで使用可能な各サービスのカタログ画面が表示されます。 カタログ画面から、各サービスを発注し利用を開始することができます。 メニュー表示 IBM Cloud カタログ https://console.bluemix.net/catalog/ カタログとともに ダッシュボードも よく使用します。 7 AIのカテゴリを選ぶ とWatsonが表示され ます。 Node-REDは、 Starter Kitsのカテゴ リになります。
  8. 8. IBM Cloud ダッシュボード ダッシュボードにアクセスすると使用中のサービスやアプリが表示されます。稼働中のアプリケーショ ンやサービスを停止したりすることもできます。 Watson Assistant など各サービス作成 後は、このダッシュ ボードから接続情報 や学習のためのツー ルを起動する画面に アクセスすることが できます。 IBM Cloud ダッシュボード https://console.bluemix.net/dashboard 各名前をクリックすると、 詳細が表示されます。 8
  9. 9. Node-RED Starterの作成 「Node-RED Starter」をクリック IBM Cloud にログイン、画面 右上の「カタログ」をクリック します。カタログ画面のフィル タに「node-red」と入力し、 Node-REDのテンプレートを探 します。 アプリ名を入力します。 アプリ名は、英数字を推奨。 日本語も使えます。 ホスト名を入力し ます。こちらは英 数字です。 ここをクリック して作成します。 「Cloud Foundryアプリの作成」 画面が表示されますので、「アプ リ名」と「ホスト名」を入力し、 画面右下の「作成」をクリックし ます。 「ホスト名」は、他の人が既に 使っているものは使用できません。 ユニークである必要があります。 Node-RED用のサーバーがセット アップされ、しばらくした後に、 「http://ホスト名.(ドット)ドメ イン」 でアクセスできるように なります。 9
  10. 10. Node-RED初期設定.1 上図のようにアプリ設定画面が表示されれば、Node-REDサーバーが正常起動し、利用可能になった ことになります。「アプリURLにアクセス」をクリックし、Node-REDにアクセス制限用のパスワード を設定します。表示されない場合は、Webブラウザ上で再読込を行うと良いでしょう。 ここをクリック 10
  11. 11. Node-RED初期設定.2 Node-REDにアクセスすると最初にアクセス 制限のためのパスワードを設定することを求 められます。 画面下の「Next」をクリックします。 ここをクリック ここをクリック Node-REDを使用するための「Username」 と「Password」を入力、画面下の「Next」 をクリックします。 Passwordを忘れた場合は、アプリを作り直 す必要がありますので、忘れないでください。 入力例 Username:user Password :@zaq12wsx@ 11
  12. 12. Node-RED初期設定.3 Node-REDで使用できる追加機能等の説明が 表示されますが、ここでは無視しまして画面 下の「Next」をクリックします。 ここをクリック ここをクリック 「Finish the install」の画面が表示されましたら、 「Finish」ボタンをクリックして終了です。 12
  13. 13. Node-REDにログイン 「https://ホスト名.(ドット)ドメイン/red」に アクセスします。 (例 https://course-app.eu-gb.mybluemix.net/red) ここをクリック 登録した「Username」と 「Password」でログイン 先ほど設定した「Username」と「Password」 でログインします。 13
  14. 14. Node-RED画面 左図のように表示されます。 画面左側のアイテム(ノード と呼びます)を画面中央に、 ドラッグ&ドロップし、線で 繋いだり、コードを記述す ることで、データ連携やア プリケーションを作ること ができます。 また、ダッシュボード画 面には、右図のように先 ほど作成したアプリ名が 表示されており「名前」 をクリックすることで、 作成したCloud Foundry アプリ画面に戻ります。 ここをクリック 14
  15. 15. Node-RED設定 「三」をクリック します。 「設定」をクリック します。 「ノードの配置を補助」にチェックを 入れます。方眼紙のようにグリッド線 が欲しい場合は、「グリッドを表示」 にもチェックを入れます。 Node-REDでは、ノードと呼ばれる箱を並べ、線でつなぎます。配置の際にて、グリッド線(マス目) や配置操作の補助が必要なときは、「設定」の「表示」で有効化しましょう。 15
  16. 16. Watson Assistantの有効化とインポート 16
  17. 17. Watson Assistant有効化.1 チャットボットを作成するために、 Watson Assistantを使用します。 Watson Assistantサービスを探しま しょう。 1つ目の探し方は、「カタログ」画面 で、「フィルタ」に「Assistant」と 入力し、検索する方法があります。 2つ目の方法は、「カタログ」の 左側のメニューで、「AI」を選び、 一覧表示されるWatsonサービスか ら「Watson Assistant」を探す方 法です。 表示された「Watson Assistant」 をクリックします。 17
  18. 18. Watson Assistant有効化.2 左図には、Watson Assistantを有効 化する画面が表示されています。 「サービス名」は自動生成されます。 任意のサービス名に変更することも できますが、既存のAssistantと同じ サービス名にすることはできません。 また標準では無料のライトプランが 選択されています。画面を下に移動 させ、価格プランの欄で「ライト」 を選んでいることを確認します。 「作成」をクリック します。 サービス名は自動生成 されます。 18
  19. 19. ツール起動 Assistantの準備が完了すると、左図 のような画面が表示されます。 画面内の「ツールを起動」をクリック します。 右図のような画面が表示されますので、 「Workspaces」タブをクリックし、 Workspace作成画面に切り替えます。 ここをクリック します。 ここをクリック します。 19
  20. 20. Workspaceのインポート.1 「Workspace」作成画面で「Import」を クリックし、チャットボットで使用する 会話用のデータ(JSON形式)を取込みます。 Import用データは、下記URLにアクセス し、「workspace-27d8faf3-2986- 406b-9911-beadf028be22.json」とい うファイル名をクリック、ダウンロードし てください。 http://bit.ly/2JpDqLQ Import a workspaceで「Choose a file」 をクリック、インポートする学習データ (JSON形式)を選択します、「Everything」を 選び、「Import」をクリックしましょう。 「Import」をクリックし てJSON形式のファイルを 選択します。 インポート 範囲を選択 クリックで インポート実行 20
  21. 21. Workspaceのインポート.2 <前ページの続き> Importを実行すると、 Workspaceが作成されます。 Workspaceを確認するには 「Get started」をクリック します。 21 Importした Workspace ImportしたWorkspaceは、社内ヘルプデスクの会話を学習させてあります。たとえば、次の順に 入力していくと会話がつながります。 1. 「インターネットにつながらない」を入力 2. 「はい」または「いいえ」を入力 3. 上記で、「いいえ」の場合のみ、「Mac」または「iPad」を入力 4. 「終わり」または「end」と入力
  22. 22. 今回のWorkspaceの中身 22 Workspaceの操作については、IBM developerWorksの 下記コンテンツをご覧ください。 https://www.ibm.com/developerworks/jp/cognitive /library/cc-watson-chatbot-conversation/index.html
  23. 23. Deploy画面:接続情報の取得 「Deploy」をクリック します。 Assistant tool (=学習ツール)から、WorkSpaceの名前をクリックし、 WorkSpaces 画面に移動します。WorkSpaces 画面左上の「三」のアイコ ンをクリックします。 さらに「Deploy」をクリックすると、「Credentials」タブが表示され、 Watson Assistant以外から接続する際の認証情報などが表示されます。 今までは、「Build」 を使っていました。 23 ここをクリックします。 よく使う項目 よく使う項目 よく使う項目
  24. 24. 接続情報の取得(API Key版) 「Deploy」をクリック します。 今までは、「Build」 を使っていました。 <前ページの続き> 「Deploy」画面の「Credentials」タブにおいて、API Keyを表示する ケースが出てきました。2018年5月現在はシドニーでWatson Assistant を有効にした場合に適用されます。 24 よく使う項目 よく使う項目 ここをクリックします。
  25. 25. API Key認証時のEndpoint 25 Watson AssistantのWorkspace画面の「Deploy」でAPI Keyが表示されている場合、たとえばNode- REDでは、Default Endpointではなく、個別にEndpoint(Endpoint url)を入力する必要があります。 該当Workspaceが存在するWatson Assistantの管理画面で確認することができます。 Endpoint
  26. 26. LINEボットの作り方 国内で7500万人(2018年6月現在)、そのうち85%(6375万人)が毎日使用するコミュニケーション サービスで、チャットに、電話に、メール代わりに、支払いに...と日々使われています。チャット ボットを起点に、チケットの予約やランチの場所をAIに探させたり、住宅や保険サービスに繋げたり と、チャットボットを用いたビジネスが発展しつつあります。その際にLINEは国内最大規模ですから 見逃せません! 26
  27. 27. Webhook確認用フロー Node-REDを起動し、LINE Messaging APIで 使用するWebhookをNode-REDで受信できる か確認するためのフローを作成します。 仕組みはとてもシンプルで、下記ノードを使用 します。 27 カテゴリー ノード名 入力 http 出力 debug 出力 http response 入力:http 出力:http response URL欄は、ここでは「/linepost」としています。 Node-REDのURLが、https://my-nodered3 .eu-gb.mybluemix.net/red/ の場合、LINEに 送信されたメッセージを受信する「Webhoook URL」は、https://my-nodered3.eu-gb.my bluemix.net/linepost となります。 この「Webhook URL」を保管しておき、後ほ ど使用します。
  28. 28. Messaging API.1 28 https://developers.line.me/ja/services/messaging-api/ にアクセスし、PCか らLineアカウントでログイン、画面指示に従って初回登録を行います。 PCからLineにログインできない場合は、 下記手順でログインできるようにします。 https://developers.line.me/ja/docs/messaging-api/getting-started/ 「Messaging API」の画面で「今すぐはじめよう」をクリックします。下図の画 面にて、「プロバイダー選択」で、⊕をクリックし、プロバイダーを追加します。 追加後は、「次のページ」を クリックします。
  29. 29. Messaging API.2 29 これから作るLINE botアプリの名 称と説明を入力します。 また、プランと業種、メールアドレ スも入力が必要です。 特にプランは、「Developer Trial」を今回使用しますが、本番利 用の場合は「フリー」を使います。 プラントと業種を選択、連絡用の メールアドレスを入力し、「確認」 をクリックします。 次に利用規約を確認し、「同意す る」をクリック。 そして、「作成」をクリックします。
  30. 30. Messaging API.3 30 「→」をクリックし、設定画面に移ります。 表示された規約に「同意する」をクリックし、 「Channel基本設定」画面に進みます。 「Channel基本設定」の「メッセージ送受信設 定」で、先程作成したNode-REDのフローを使用 します。Node-RED側でデプロイを行い、いつで も受信できる状態にします。
  31. 31. Messaging API.4 31 「アクセストークン」は「再発行」をクリックし、 取得しておきます。Node-REDで使用しますので、 メモ帳などに保管しておきます。 また「Webhook送信」を利用するので、ペンのア イコンをクリックし、「利用する」に変更します。 「Webhook URL」は、こちらもペンのアイコン をクリックし、Node-REDで設定した「Webhook URL」を入力します。 下図のように「接続確認」が表示されますので、 「接続確認」をクリックします。問題なければ、 「成功しました」と表示されます。 どのような処理が成されたかは、Node-RED側の デバッグ結果を確認しましょう。 例として、https://my-nodered3.eu-gb.mybluemix.net/linepost となっていますが、各自で異なり ます。各自のNode-REDのURLに読み替えて確認しなければなりません。
  32. 32. Messaging API.5 32 「自動応答メッセージ」や「友だち追加時あいさ つ」は今回は利用しません。また画面下部に表示 されているQRコードは保管するか、お手元のス マートフォンで、スキャンし、LINEアプリに友 だちとして、開発中のアプリを追加しておきます。 LINE botの動作確認時に、必要です。 次はNode-RED画面に戻り、Watson Assistant を連携するLine botを作っていきます。
  33. 33. LINEボットの実装.1 33 先ほど、Webhook確認用フローを実装した Node-REDのタブに戻り、Webhook確認用 フローを削除します。 次にNode-REDで使用するフローのデータを取 得するために、http://bit.ly/2zCyQuf にアクセ スします。左図のような画面が表示されます。 画面右上の「Raw形式で表示」をクリックし、 表示されるJSON形式のデータを全てコピー、 Node-REDで、「三」→「読み込み」→「ク リップボード」にて、コピーしたJSONデータ を貼り付け、「読み込み」を実行します。
  34. 34. Node-REDフロー読み込み 34 コピーしたJSON形式のデータをNode-REDで、 「三」→「読み込み」→「クリップボード」 にて、コピーしたJSONデータを貼り付け、 「読み込み」を実行します。
  35. 35. LINEボットの実装.2 35 読み込むと下図のようなフローを取得することができます。Webhookを用いて受信したLINEアプリへ のメッセージを受信、Watson Assistantノード経由でWatsonからの出力を返信する仕組みです。
  36. 36. LINEボットの実装.3 36 LINE POST ノード LINEアプリに送られたメッセージを Webhookで受け取ります。 また青枠部分には、Channelの基本設定で Webhook用URLの確認に使用したものと同 じになるようにします。 LINE Receive ノード LINEアプリに送られたメッセージを Webhookで受け取り、メッセージ本体と 返信時に必要な「replyToken」をNode- RED内のグローバル変数として再利用でき るようにする処理を行っています。
  37. 37. LINEボットの実装.4 37 Watson Assistant ノード 下記3つを入力します。 それ ぞれ、Watson Assistantの WorkspacesのDeploy画面で 確認することができる値です。 • 「Username」 • 「Password」 • 「Workspace ID」 また下記2つにチェックを入れ ます。 • 「Use Default Service Endpoint」 • 「Save Context」
  38. 38. Assistantノード設定(API Key) 従来からよく使われてきたUsernameとPasswordによる認証が使えない場合、APIkeyによる認証を使 います。 38 APIkeyによる認証を用いる場合、2つの画面から情報 を取得する必要があります。 ◼ Service Endpoint • Watson Assistantの管理画面に”url”として 表示されています。 ◼ API KeyとWorkspace ID • Watson AssistantのWorkspacesのDeploy 画面に表示されています。
  39. 39. LINEボットの実装.5 39 Watson Responseノード Watson Assistantノード からのレスポンスをテキ ストに出力します。 今回は、会話によって、 Watson Assistantのレス ポンスが2つ出力される ケースを想定しており、 2つ目のレスポンスが無い ときは、1つ目のレスポン スだけをテキスト出力、 レスポンスが2つあるとき は、1つに結合して出力す る処理を実装しています。
  40. 40. LINEボットの実装.6 40 Create Replyノード Watson Assistantノード からのレスポンスをLINE に返信するために、JSON 形式に変換する処理を行 います。 左図では隠れていますが、 5行目の「msg.headers」 にMessaging API画面で 再発行したアクセストー クンを記述する必要があ りますので注意してくだ さい。
  41. 41. LINEボットの実装.7 41 Line POST(Reply)ノード 「Create Reply」ノード で作成したJSONファイル を用いてLINEアプリに返 信する処理を実行します。 このノードの設定は、テ キスト(文字列)を使用した LINE bot では同じなので、 変更の必要はありません。 画面右上の「デプロイ」 をクリックし、LINE bot の動作をスマートフォン から確認しましょう。
  42. 42. チャットボットのログを取得しよう! Cloudant NoSQL DBを使用 42
  43. 43. Cloudant NoSQL DBとは IBM Cloudの各サービスのなかで、非常に人気のあるデータベースサービスの1つで、データベースシ ステムのインフラ運用は、IBM側で実施されます。リレーショナルデータベースではなく、NoSQLデー タベースです。 • IBM Cloudのデータセンター上で運用 • Notesでおなじみのドキュメント指向型データベース • 一意のIDとドキュメント(JSON形式)が紐づく • データベースを作るときに項目などは定義しない • 得意な利用範囲 → 非構造化データに強い ✓ SNSの会話ログ ✓ モバイルアプリのログ ✓ センサーデータ IBM Cloudant https://www.ibm.com/analytics/jp/ja/technology/cloud-data-services/cloudant/ 43
  44. 44. アクセス方法 ダッシュボードから稼働中のCloudant NoSQL DBの名前をクリックし、プランを確認します。 IBM Cloud ダッシュボード https://console.bluemix.net/dashboard/apps カテゴリのフィル タで、「データ& 分析」を選びます。 44 Node-RED Starterの アプリ名で先頭につ いたものをクリック します。 IBM Cloudのダッシュボードから、 Node-RED環境を作成した際に同時作 成したCloudant NoSQL DBサービス にアクセスします。 「LAUNCH CLOUDANT DASHBOARD」を クリック。
  45. 45. DB管理画面とDB作成.1 <前ページの続き> データベース(DB)管理画面 にアクセスします。 DB管理画面では、新規にDB を作成したり、既存DBの データを参照、閲覧、編集な どができます。 チャットボットのログを保管 するために、「Create Database」をクリックし、 Name of databaseの入力欄 に「linelog」と入力します。 入力後は、「Create」をク リックします。 これで、DB(データベース) を作成できました。 45 DB名をクリックすると既存DB に保管されたデータが見るこ とができます。 Databasesを クリックします。 ここをクリック して新規にDB を作成
  46. 46. DB作成.2 DBを作成したばかりでは何も入っていませんが、チャットボットで会話を繰り返すことで、上図の ようにログが蓄積されます。 次のページで、Node-REDのフローに、Cloudant NoSQL DBに会話ログを蓄積するノードを配置す る手順をご紹介します。 46
  47. 47. cloudant outノードを配置 47 Cloudantと入力し てノードを検索 cloudant out ノードを配置 ドラッグ& ドロップ 「LINE Receive」と 「Create Reply」から 線をつなぐ Node-REDに戻り、上図のように、cloudant out ノードを配置し、「LINE Receive」と「Create Reply」から線でつなぎます。接続後、cloudant outノードをダブルクリックしてください
  48. 48. cloudant outノードを編集 48 cloudant outノードでは、「Service」に稼 働中のCloudant NoSQL DBサービスを選択 します。 「Database」には、作成したDB名を入力し てください。ここでは「linelog」としていま す。「Database」に未作成のDB名を入力し た場合は、自動でDBを作成してくれます。 入力後に「完了」をクリックし、Node-RED の画面右上の「デプロイ」をクリックして動 作確認を行ってください。
  49. 49. Node-REDフローのバックアップ 作成したNode-REDのフローなど、バックアップするためにプライベートリポジ トリを構築し、コードを再利用できるようします。 49
  50. 50. リポジトリ作成 リポジトリは、ざくっと申し上げればソースコードを保管・共有するための仕組みです。著名なもの ではGithubがあります。Githubの無料プランでは、パブリックリポジトリ、つまりデフォルトで外部 公開されますので、プライベートリポジトリを無料で作れる「Bitbucket Cloud」を今回使用します。 50 1.https://bitbucket.org にアクセスし、 「Get started for free」をクリックします。 2.メールアドレスを入力します。確認 メールが届けば何でも良いです。 メールアドレスを入力後、 「Continue」をクリックします。
  51. 51. 51 3.メールアドレスに続き、名前とパスワードを指定し、「Continue」 をクリックします。確認メールを送ったと画面に表示されます。 「Please verify your email address」という件名で、差出人 は、Atlassian になります。 「Verify my email address」を クリックします。 「Continue」を クリックします。
  52. 52. 52 4.自分用の区画を作ります。枠内はユニークなユーザー名でなければ いけません。 「Continue」を クリックします。 上図が表示された場合は、「Set up for Bitbucket Cloud」をクリックして進みます。 5.こちらの画面になれば登録作業が完了です。 「Create repository」をクリックします。
  53. 53. 53 6.リポジトリ名を入力します。また、「include a README?」に、 「Yes, with a tutorial」を選択します。Access level のチェックを 入れ、Version control systemは、Gitにしましょう。 左図のリポジトリ作成画面で、Access level の「This is a private repository」のチェッ クは忘れずにチェックしてください。 入力後、「Create repository」をクリック します。 7.プライベートリポジト リが作成されます。 次は画面を日本語化 しましょう。
  54. 54. 54 8.画面を日本語化しましょう。画面左下のアバターのアイコンを クリックし、続いて「Bitbucket settings」をクリックします。 「Language」で日本語を選択後、画面下部の「Update」を クリックします。 「Language」で 日本語を選択します。 画面左上のBitbucketのアイコンをクリックし、「あなたの作業」 画面に表示されているリポジトリ名をクリックします。
  55. 55. 55 9. 作成したリポジトリに、画面右上の「・・・」→「Add file」の 順にクリックします。 「ソース」画面が表示されますので、Node-RED から書き出したフロー(JSON形式)をコピー&ペー ストします。 右図のように、動作するソースコードを入力しま したら画面下の「コミット(Commit)」をクリッ クします。保存には理由を入力し、コミットする 必要があります。
  56. 56. End of The Documents 56

×