Node-RED 「node-red-contrib-wws」のお勉強-その２
Node-RED 「node-red-contrib-wws」のお勉強こんばんは皆様はもうお盆休みに入っていますでしょうか週末は晴れれば猛暑、天気が悪いとゲリラ豪雨というお出掛けするにも難しい日々ですねさて、前回「node-red-contrib-wws」を使ってAction Fulfillmentを実装しかけていました今回、実装してみたので紹介していこうと思います。まずは、IBM Championの吉田さんのAction Fulfillmentのブログを（勝手に）参考にさせていただきました。https://www.ibm.com/developerworks/community/blogs/YoshidaTakeshi/entry/2017%E5%B9%B47%E6%9C%8823%E6%97%A5_14_43_38?lang=en_usこのブログがなかったら実装できなかったです最初に伝えておきます・・・実装はできたんですが・・・「正解ではない気がします」その理由も後にわかると思います・・・１）Watson Assistantの設定を変更するIBM Cloudから Watson Assistant を選択し、今回のAction Fulfillment用に作成したWorkspaceを開き、Entitiesを選択、新しく「開発依頼」を追加します。Value name:開発依頼Synonyms:開発 と 依頼 と Dev 追加します（とりあえず）。次にDialogを開き、「Add response condition」の右にあるメニュー（○３つ）をクリックします。表示された「Open JSON editor」をクリックします。Conversation サービスが response として返す JSON の編集画面になります。https://developer.watsonwork.ibm.com/docs/tutorials/action-fulfillment上記マニュアルを参考に以下のJSONを追記します。{ "output": { "actions": [ "開発依頼" ] }}Watson Assistantの設定は以上です。２）Node-REDの画面に戻り、前回のノードから以下のノードに変更します。まず上の赤枠のノード、Filter Actionsの設定は以下のようにしました。次に下の赤枠のノード、Filter Annotationsの設定は以下のようにしました。３）Filter Annotationsノードに以下のノードを追加しました。switchノードは以下のように設定しました。Filter AnnotationsノードのアウトプットのactionIdを見て処理を分岐します。まずは以下のFunctionノードの設定です。Watson Work Services へプライベートダイアログを表示するように指示します。マニュアルを見るとGraphQL を記述し送信すると書いてあるようです。send GraphQL queryノードが使えそうですね早速、send GraphQL queryノードの説明を見ると・・・こんな風にGraphQL書くんだよーとサンプルがあったので、以下のように書いてみました。conversationIdは出力された中にあるので、そのまま追記しました。targetDialogIdも同じで出力された中にあるので、そのまま追記しました。targetUserIdは見当たらないので、サンプルと出力が一番近い形のものを探してみました。createdByが一番近い形だったので、createdByを記述しました。サンプルを記述しておきます。msg.payload = ` mutation { createTargetedMessage(input: { conversationId:"`+ msg.payload.conversationId + `" targetUserId: "`+ msg.payload.createdBy + `" targetDialogId: "`+ msg.payload.targetDialogId + `" annotations: [ { genericAnnotation: { title: "開発者の選択", text: "誰に開発をお願いしますか？" buttons: [ { postbackButton: { title: "ボタン1", id: "sample1", style: PRIMARY } }, { postbackButton: { title: "ボタン2", id: "sample2", style: PRIMARY } } ] } } ] }) { successful } }`return msg;４）Functionノードの後にsend GraphQL queryノードを繋げます。設定は以下のようにしています。５）次にchangeノードをswitchの「!=開発依頼」の後に繋げます。先ほどGraphQLで記述したボタンIDを書き換えます。例えばIDがsample1だったら表記をサンプル１にするといった感じです。６）changeノードの後ろに続く下記イメージ赤枠のFunctionノードです。こちらもWatson Work Services へプライベートダイアログを表示するように指示しますのでGraphQLを記述します。このGraphQLはどのボタンをクリックしたかを表示させたいので、以下のようにしてあります。変数には前に記述したchangeノードの変換後の値を代入します。conversationId、targetDialogId、targetUserIdは３）で書いた内容と同じです。このノードの後ろにsend GraphQL queryノードを繋げます。設定は先ほどと同じです。７）以下、赤枠のFunctionノードを追加します。Functionノード名が紛らわしいですが、こちらはGraphQLではなくmsg.payloadを書き換えるだけです。変数unamには前に記述したchangeノードの変換後の値を代入します。８）上記Functionノードの後ろにsend messageノードを追加します。前回、画像の追加方法がよくわかっていませんでした。Pictureの欄にある[参照...]ボタンをクリックし、画像を選択し、青枠のアイコンをクリックします。Message Previewに表示されればアップロード成功となります。長かったですが、Node-REDの準備は以上で完了です。デバッグのためにあちこちにDebugノードを追加しておくとわかりやすいかもです。流れは以下のようになります。・WWSで「開発」や「依頼」が含まれるメッセージが投稿されると①で投稿メッセージに下線をつける。・下線をクリックすると、Filter Annotationに流れ②に流れる。・ボタンが表示されボタンをクリックすると③に流れボタンIDが変換される。・④でボタンをクリックした結果表示とメッセージの投稿を行う。WWSで動作確認してみます。「誰にこの開発の依頼をしようかな？？」とメッセージを投稿します。メッセージに下線が引かれ、クリックすると開発依頼というアクションが表示されます。表示されたボタンのうち、いづれかのボタンをクリックします（赤枠）。「◎◎さんを選択しました」と確認のダイアログのほかにも、「◎◎さん、開発をお願いします！！」とメッセージが投稿されました（アイコンも変わってるでしょ）おぉ！これで自分もAction Fulfillmentが出来るようになったぞーAction Fulfillment・・・そうです、冒頭で書きましたように「正解ではない気がします」と書きました。勘のいい方は気づいたかもしれません・・・何か余ってる・・・そう、まるで組み立てたプラモデルの1パーツのように・・・そして、使い方もよくわかっていない・・・どなたか、このAction Fulfillmentノードの使い方を、やさしくこっそり教えてください今日はこの辺で・・・・あでゅー
