![Watson LINE 診断士](https://sugiyamayoshiaki.jp/wp-content/uploads/2019/01/38e723a3c32ae6a1963f0c087392fc9e.png)
WatsonのUIをLINEに設定する2
の続きの記事です。
httpノードをフロー1に置く。
![WEB IT 中小企業診断士 WordPress sugiyamayoshiakijp ハンノマライフ](https://sugiyamayoshiaki.jp/wp-content/uploads/2019/01/38e723a3c32ae6a1963f0c087392fc9e.png)
ノードをクリックすると編集画面になるので、プロパティを下記のように入力する。
![WEB IT 中小企業診断士 WordPress sugiyamayoshiakijp ハンノマライフ](https://sugiyamayoshiaki.jp/wp-content/uploads/2019/01/65761ba6d0f2a03767423c9fa822d586.png)
functionノードを同じように置いてダブルクリックします。
![WEB IT 中小企業診断士 WordPress sugiyamayoshiakijp ハンノマライフ](https://sugiyamayoshiaki.jp/wp-content/uploads/2019/01/735db71222e7463d908a461efe0c8efa.png)
エディタが開くので下記のように入力し「完了」します。
flow.set(“replyToken”,msg.payload.events[0].replyToken);
return msg;
![WEB IT 中小企業診断士 WordPress sugiyamayoshiakijp ハンノマライフ](https://sugiyamayoshiaki.jp/wp-content/uploads/2019/01/bb51d8f264c987093d52f3627363f57e.png)
ノードとノードを接続します。
![WEB IT 中小企業診断士 WordPress sugiyamayoshiakijp ハンノマライフ](https://sugiyamayoshiaki.jp/wp-content/uploads/2019/01/ebbdc896a870f6e3833c13f8d2f3033c.png)
http responseノード(httpノードではありません。)を下記のようにfunctionノードと繋ぎます。
![WEB IT 中小企業診断士 WordPress sugiyamayoshiakijp ハンノマライフ](https://sugiyamayoshiaki.jp/wp-content/uploads/2019/01/91ac16ac39244e0b8f8f13d89167e980.png)
changeノードを置いて、編集画面で下記のように入力して「完了」します。
(値の代入 msg.)
payload
(対象の値 mag.)
payload.events.0.message.text
![WEB IT 中小企業診断士 WordPress sugiyamayoshiakijp ハンノマライフ](https://sugiyamayoshiaki.jp/wp-content/uploads/2019/01/c0ad9ef735afaa0965531f3156209fa0.png)
functionノードとchangeノードを下記のように繋げます。
![WEB IT 中小企業診断士 WordPress sugiyamayoshiakijp ハンノマライフ](https://sugiyamayoshiaki.jp/wp-content/uploads/2019/01/470eeedde029c7783ed128134810bf94.png)
次にassistantノードを下記のように繋ぎます。
![WEB IT 中小企業診断士 WordPress sugiyamayoshiakijp ハンノマライフ](https://sugiyamayoshiaki.jp/wp-content/uploads/2019/01/5c72c69743daad1243fc4e52b29ca380.png)
changeノードを置きます。
![WEB IT 中小企業診断士 WordPress sugiyamayoshiakijp ハンノマライフ](https://sugiyamayoshiaki.jp/wp-content/uploads/2019/01/7f5e3ce4b5b0e5e7c490abf9e82984d7.png)
changeノードに下記を入力して「完了」します。名前はなんでも良いのでわかりやすいものにしてください。
(値の代入 msg.) payload.optext (対象の値 mag.) payload.output.text.0
![WEB IT 中小企業診断士 WordPress sugiyamayoshiakijp ハンノマライフ](https://sugiyamayoshiaki.jp/wp-content/uploads/2019/01/16c4197a19ae8bd0625c0891ceb42077.png)
また繋げます。
![WEB IT 中小企業診断士 WordPress sugiyamayoshiakijp ハンノマライフ](https://sugiyamayoshiaki.jp/wp-content/uploads/2019/01/f83178bdd27cdc03799cb97e6a2639d9.png)
functionノードを追加して、名前は自分でわかるように、コードには下記のように入力し、「{LINEアクセストークン}」部分は一旦このままで「完了」する。
var output_text = flow.get("text");
var post_request = {
"headers": {
"content-type": "application/json; charset=UTF-8",
"Authorization": " Bearer " + "{LINEアクセストークン}"
},
"payload": {
//"replyToken": msg.payload.events[0].replyToken,
"replyToken": flow.get("replyToken"),
"messages": [
{
"type": "text",
"text": msg.payload.optext
}
]
}
};
return post_request;
![WEB IT 中小企業診断士 WordPress sugiyamayoshiakijp ハンノマライフ](https://sugiyamayoshiaki.jp/wp-content/uploads/2019/01/617ca986b623f9535733b87b1105cf17.png)
http requestノードを作って、メソッドは「POST 」、URLは下記の文字列、出力形式はJSON、名前は「Reply Message」として「完了」する。
URL
https://api.line.me/v2/bot/message/reply
![WEB IT 中小企業診断士 WordPress sugiyamayoshiakijp ハンノマライフ](https://sugiyamayoshiaki.jp/wp-content/uploads/2019/01/b5a2a3fddee80a200968e78115ee375e.png)
ここまでで、一旦Node-REDは置いておきます。次に、IBM Cloudのダッシュボードに戻ります。
ダッシュボードのサービスからWatsonのSkillsを開発した名前をクリックします。Watson Assistantの画面から「ツールの起動」をクリックします。
メニューから「Skills」を選択します。すでに設定してあるSkillsが表示されたら、縦に・が並んだアイコンをクリックして、「View API Details」をクリックします。
![WEB IT 中小企業診断士 WordPress sugiyamayoshiakijp ハンノマライフ](https://sugiyamayoshiaki.jp/wp-content/uploads/2019/01/33b25e3ba81a27c745559573997f650a.png)
Workspace IDが表示されるので、それをコピーする。
![WEB IT 中小企業診断士 WordPress sugiyamayoshiakijp ハンノマライフ](https://sugiyamayoshiaki.jp/wp-content/uploads/2019/01/5897d383c96c00b382206d517f249a3c.png)
Assistantノードをダブルクリックし編集画面を表示する。
![WEB IT 中小企業診断士 WordPress sugiyamayoshiakijp ハンノマライフ](https://sugiyamayoshiaki.jp/wp-content/uploads/2019/01/10d9e352aaa4e04f2e33313b82be986d.png)
先ほどのWorkspace IDを入力し、「完了」する。
![WEB IT 中小企業診断士 WordPress sugiyamayoshiakijp ハンノマライフ](https://sugiyamayoshiaki.jp/wp-content/uploads/2019/01/e95bb258c3d86083b89d1c35cc025819.png)
次は、LINE側のAPIをいじります。LINE Developersに戻り、「Massaging API」の「チャネルを作成する」をクリックする。
その後、チャネルの名前などを決めていきます。
![WEB IT 中小企業診断士 WordPress sugiyamayoshiakijp ハンノマライフ](https://sugiyamayoshiaki.jp/wp-content/uploads/2019/01/9eb8b8282424360a1f3d0bccf50cf134-1.png)
チャネルが作成されると、新規チャネル「@@@@」が作成されました。と表示され、プロバイダーリストの下位レイヤーにチャネルが作成されます。
![WEB IT 中小企業診断士 WordPress sugiyamayoshiakijp ハンノマライフ](https://sugiyamayoshiaki.jp/wp-content/uploads/2019/01/17997fdf1a14cfad443d7bc65102d3c5.png)
LINE系の言葉がたくさん出てきたので整理します。LINE Developersは、通常の個人LINEアカウントと紐づけることができます。レイヤーで見ると、
LINE Developers – 個人LINEアカウント
∟プロバイダー
∟チャネル
また、ややこしいのは、LINE@ MANAGERでこれらを開くと、
LINE@MANAGER(アカウント一覧)
∟プロバイダー
∟チャネル
と、プロバイダーとチャネルのアカウントが並列に表記されているので、行ったり来たりするとよくわからなくなるかもしれません。
新チャネルを開くと、「チャネル基本設定」画面にたどり着きます。
![WEB IT 中小企業診断士 WordPress sugiyamayoshiakijp ハンノマライフ](https://sugiyamayoshiaki.jp/wp-content/uploads/2019/01/4d4b265aad80be8cb351f74b671311a9.png)
ここで、
・Webhook送信を「利用する」
・Botのグループトーク参加を「利用する」
にします。(*画像は利用しないになっていますが、「利用する」に変更してください。もし、グループトークに招待してテストなどをした後、退室させたい場合は、ここを一時的に「利用しない」に変更してください)
![WEB IT 中小企業診断士 WordPress sugiyamayoshiakijp ハンノマライフ](https://sugiyamayoshiaki.jp/wp-content/uploads/2019/01/f48e9f630b7820ad90dae40a4896065e.png)
また、下記のWebhook URLについては、 Cloud Foundry アプリにつけたアプリ名をxxxの部分と置換すると接続できます。
https://xxx.mybluemix.net/line_hook
![](https://sugiyamayoshiaki.jp/wp-content/uploads/2019/03/f4e035cc5cf846eb5053fa4919ee6312.png)
もしよくわからなければ、IBM Cloudのダッシュボードから、「リソースの要約」欄のサービスをクリックすると、リソース・リストを開くことができます。
このリストの中で、Cloud Foundry サービスのxxx-cloudantNoSQLDBを開き、下記のような「経路」表示された文字列を探してください。それを上記に当てはめると解決すると思います。
![WEB IT 中小企業診断士 WordPress sugiyamayoshiakijp ハンノマライフ](https://sugiyamayoshiaki.jp/wp-content/uploads/2019/03/593f22e8dd54f41b7186f12f226c40e6.png)
また、ライトプランの場合は、一定時間(数日)動かさないでいると、LINEとの接続が切断されます。その場合も、このリソースリストから、状況が実行中になっていないアプリを見つけ、下記のように縦に三つ並んだ・から実行をクリックすると接続が再開されます。(*写真は、実行中のステータス時の選択肢)
![WEB IT 中小企業診断士 WordPress sugiyamayoshiakijp ハンノマライフ](https://sugiyamayoshiaki.jp/wp-content/uploads/2019/03/2950d57c45db167c87df69dd029929c0.png)
次に、下の方へスクロールして、
メッセージ送受信設定の真下にある、アクセストークン(ロングターム)を再発行します。
![](https://sugiyamayoshiaki.jp/wp-content/uploads/2019/05/スクリーンショット-2019-05-01-19.15.32.png)
このアクセストークンをコピーして、Node-REDの画面に戻りfunctionノードをダブルクリックして、{LINEアクセストークン}の中に、ペーストとします。
![](https://sugiyamayoshiaki.jp/wp-content/uploads/2019/05/スクリーンショット-2019-05-01-19.23.37.png)
それでは、実際にLINE上でWatson Assistantが動くかどうかLINE@ MANAGERに移り、アカウント設定の基本設定をクリックします。画面をスクロールしていくと、QRコードと友だち追加ボタンが表示されます。
![Watson LINE 診断士](https://sugiyamayoshiaki.jp/wp-content/uploads/2019/01/1c0d181339f8f69a0dc08e6518257a37.png)
私の環境では、なぜかここで表示されるはずのQRコードが表示されていませんが、友だち追加のボタンをクリックすると、QRコードを表示する下記の画面に遷移します。
![Watson LINE 診断士](https://sugiyamayoshiaki.jp/wp-content/uploads/2019/01/b356a4c2b5ffb5d5753f8be54748e282.png)
これをスマートフォンのカメラアプリで読み取り早速テストしてみましょう。実際の会話は、Watson AssistantでDialogue(会話)を作っていくとボットとして幅広い対応ができるようになります。
お疲れ様でした。
![](https://sugiyamayoshiaki.jp/wp-content/uploads/2019/03/af6e18379884c91ad9443563b2fc8a7f.png)
スギヤマです。
主にガジェットいじりに関わる記事を投稿します。
この記事へのコメントはありません。