LoginSignup
4
6

More than 5 years have passed since last update.

LINEスマートスピーカー Clovaスキル(Custom Extension)をNode-REDで作る

Last updated at Posted at 2018-09-24

LINEスマートスピーカーClovaとNode-REDとの連携サンプルです。[ハンズオン] LINE Clova×IBM WatsonでAIを学ぶでのIBM Cloud Node.jsでCustom Extensionを作成しているものを、Node-REDに移行しました。

必要なもの

スキルの登録 & 対話モデルの作成

[ハンズオン] LINE Clova×IBM WatsonでAIを学ぶの資料「LINE Clova Skill ハンズオン資料」を30ページまで実施します(「Herokuの準備」手前まです)。

Node-RED Starterサービスの作成

IBM Cloud にログインしてNode-RED Starterサービスを作成します。
こちら「Node-RED で遊んでみる第一歩: Web ページを表示してみる」の簡単な始め方を参照して、作成お願いします。

以下のNode-REDエディタが開いた状態まで進めます。
image.png

Node-RED上でCustom Extensionの作成

1. こちら のコードをクリップボードにコピーします。
2.  Node-REDメニューから「読み込み」→「クリップボード」をクリック。
3. 「JSON形式のデータを貼り付けてください」とかいてある枠に、1でコピーした内容を貼り付けし、「読み込み」をクリックする

image.png

下記のようなフローが読み込まれます:
image.png

これは[ハンズオン] LINE Clova×IBM WatsonでAIを学ぶで使用しているapp.jsをNode-REDのフローにしたものです。

尚、このフローでは「リクエストの検証」は実装していませんのでご了承ください。

Node-REDではClovaのCEKのsdkは使用していないので、RESTのメッセージを直接受け取って、規定のレスポンスを返す形としています。CEKのドキュメントCustom Extensionを作成する - Custom Extensionリクエストを処理する を参考にしてください。

 4.  最後に右上の「デプロイ」をクリックしてデプロイを完了させてください。
image.png

スキルとの紐付け

[ハンズオン] LINE Clova×IBM WatsonでAIを学ぶの資料「LINE Clova Skill ハンズオン資料」の40ページ「スキルとの紐付け」から

  • スキルのサーバーURLを指定

を実施してください。

ここで指定するURLは以下になります。
https://[Node-REDアプリ名].mybluemix.net/clova

[Node-REDアプリ名]は「Node-RED Starterサービスの作成」で設定しています。
または今開いているNode-REDエディターのURLの先頭部分の文字列です。

  • 例: https://clovasamplexxxxx.mybluemix.net/clova
    赤文字部分が[Node-REDアプリ名]です。自分のものを入れてください image.png

動作確認・実機で使ってみる

これで動作するようになりました!!
引き続き[ハンズオン] LINE Clova×IBM WatsonでAIを学ぶの資料「LINE Clova Skill ハンズオン資料」、40ページ「スキルとの紐付け」から

  • 動作確認
  • 実機での体験

を実施して実際にClovaと会話してみましょう。

フローの説明

image.png
Clovaからのリクエストを取得します。

image.png
決まり文句を定数にセットしています。

image.png
msg.payload.request.typeに3種類のリクエストタイプがセットされますので、それによって処理を分けています。
3種類のリクエストタイプの説明はCEKのドキュメントCustom Extensionを作成する - Custom Extensionリクエストを処理する
にあります。

image.png
LaunchRequestの処理をしています。
ここで「サンプル占いを起動して」と行った時に返す言葉を設定しています。
flow.get("TEMPLATE_INQUIRY")は最初の「set const value」で設定した定型文です。


let speech;
speech = {
            lang: 'ja',
            type: 'PlainText',
            value: "「サンプル占い」が起動されました。 " + flow.get("TEMPLATE_INQUIRY")
          }
msg.responseSpeech = speech;`

image.png
IntentRequestの処理をしています。実際はその先のswitchノードでインテント別に分けてから処理をしています。

image.png
msg.payload.request.intent.nameにClova側で判断したインテントの名前がセットされてますので、インテント別に処理を分けています。
ただし、Clova.YesIntentとClova.NoIntentとClova.CancelIntentは同じ処理に繋いでいます。

image.png
インテント別の処理を実装しています。これは[ハンズオン] LINE Clova×IBM WatsonでAIを学ぶで使用しているapp.jsswitch (intent) { でインテント別の処理をしている部分とほぼ同じ処理をしています。
このフローを応用して別の対話モデルで別のスキルを作る場合はこの部分を変更していくことになります。
LaunchRequestと同様にspeech=の部分で返答の言葉を設定しています。


speech = {
    lang: 'ja',
    type: 'PlainText',
    value: `星座に誤りがあります。他の星座でお試し下さい。`
  }

image.png
SessionEndedRequestの処理です。
ここで返答を返すことはできないのですが、何もレスポンスしないと終了したはずなのに、「サンプル占いを起動できませんでした。もう少し時間がたってからお試しください」のようなメッセージが流れてしまうため、とりあえず適当な返答をセットしておきます。

image.png
最後に規定のフォーマットでレスポンスメッセージを返します。

clovaResponse = {};
clovaResponse.response = {};
clovaResponse.response.card = null;

clovaResponse.response.directives = []
clovaResponse.response.outputSpeech = {}
clovaResponse.response.outputSpeech.type = "SimpleSpeech";
clovaResponse.response.outputSpeech.values = {}
clovaResponse.response.outputSpeech.values = msg.responseSpeech;

clovaResponse.response.reprompt = {}
clovaResponse.response.reprompt.outputSpeech = {}
clovaResponse.response.reprompt.outputSpeech = msg.responseSpeech;

clovaResponse.response.shouldEndSession= false;
clovaResponse.version = msg.payload.version;
clovaResponse.sessionAttributes = null;
msg.payload = clovaResponse
return msg;

image.png
Clovaにレスポンスを返しています。

まとめ

Node-REDを使うとお気軽にLINEスピーカーのスキルの作成ができます。皆さんもぜひ作成してみてください!

4
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
6