Node-REDとEchoでHelloWorld

###1. はじめに

IoTLT主催の、のびすけさんからアドベントカレンダー書いてみない？ってお誘い受け、ネタもあまりないのに書いてしまいました。仙台の野呂と申します。

前々からECHOが気になっていましたが、先日ようやく招待が受け付けられて実機が届いたので、ちょっと試したことを書きたいと思います。

普段ブログ書かないので初心者超丸出しの記事になってしまうと思いますが、よろしくお願いいたします。

###2. IBMCloud の CloudFoundary アプリを作成する

####2.1 IBMCloudの設定

ここのところ、Node-REDも気になっていたのですが、先日ハンズオンに触れる機会がありました。勉強会で学んだことの復習も兼ねてIBMCloud(旧Bluemix)で動かしてみます。

IBMCloudはBluemixからリブランドされた時、ライトプランとして使用出来るアカウントができました。
今回は、このライトプランの機能を利用して作業を進めます。

ログイン後、この画面で以下の操作をします。

- 画面上部のカタログをクリック
- 左側のカテゴリからプラットフォームカテゴリのボイラープレートをクリック
- Internet of Thing Starterをクリック

![1.png](https://qiita-image-store.s3.amazonaws.com/0/67237/2200f19e-04ba-1996-4d96-11bfddba956d.png)

各設定情報を入力する画面が表示されますので以下のように入力します。
入力したら作成をクリックします

|名称|入力値|補足|
|:---|:---|:--|
|アプリ名|Hello-Echo|任意|
|ホスト名|Hello-Echo|任意|
|ドメイン|mybluemix.net|デフォルト|
|デプロイする地域の選択|米国南部|ライトプランでは、現在ここしか選択できない模様|
|組織の選択|ログインしたメールアドレス|デフォルト|
|スペースの選択|dev|デフォルト|

![2-1.png](https://qiita-image-store.s3.amazonaws.com/0/67237/35b25839-1090-7561-c4f7-f9a49b597668.png)

画面上部に開始中と表示されるのでしばらく待ちます。

![3-1.png](https://qiita-image-store.s3.amazonaws.com/0/67237/f8056b19-be99-4a1f-796e-6481a90609e9.png)

この表示がでれば利用可能です。

![4-1.png](https://qiita-image-store.s3.amazonaws.com/0/67237/eb12e60e-0b4f-f44e-39ef-98c6aa7e48a9.png)

*ライトプランでは、"開発"が10日されないとロックされるので継続して使用する場合は有償プランに移行しないといけません。

ダッシュボードに移動すると関連するサービスも同時に作成されています。

![5-1.png](https://qiita-image-store.s3.amazonaws.com/0/67237/8c397a47-cfe6-aecf-3310-ad2a5cb56f1c.png)

もう一度Cloud FoundaryアプリのHello-Echoを選択してください。

![6-1.png](https://qiita-image-store.s3.amazonaws.com/0/67237/bc66c035-e131-1109-8f20-63cf72c14e72.png)

右上のアプリのURLをクリックします。
(https://hello-echo.mybluemix.net/)

####2.2 Node-REDの設定

2.1の最後の操作を行うと以下の画面が表示されます。
画面の指示に従って初期設定を行います。

![7.png](https://qiita-image-store.s3.amazonaws.com/0/67237/e54492fe-cfc9-dc72-bae9-ada900506b04.png)

NEXTをクリックします。

![8.png](https://qiita-image-store.s3.amazonaws.com/0/67237/1279622a-a3ae-f32c-6ae2-cc95a692fead.png)

Node-RED上で使用するUsernameとPasswordを任意で入力します。
入力完了したらNEXTをクリックします。

![9.png](https://qiita-image-store.s3.amazonaws.com/0/67237/4a78a918-f02d-a47c-c35a-e31a3291aef9.png)

Finishをクリックします。

![10.png](https://qiita-image-store.s3.amazonaws.com/0/67237/c269c5b0-6a28-7278-c7db-5d036ed1baa3.png)

しばらく待ちます。

![11.png](https://qiita-image-store.s3.amazonaws.com/0/67237/b02f6709-b7c1-b8d4-fbe4-78832ffb7bb5.png)

この画面が表示されれば完成です。
"Go to your Node-RED flow editor"をクリックします。

![12.png](https://qiita-image-store.s3.amazonaws.com/0/67237/1ef47282-1aaa-9d1e-9501-ffe4b06738c2.png)

認証画面が現れるので先ほど設定したUsernameとPasswordを入力してログインをクリックします。

![13.png](https://qiita-image-store.s3.amazonaws.com/0/67237/06c87835-56c5-1b01-e619-4b5169563d1d.png)

こちらの画面が表示されれば正常に終わっています。


####2.3 Node-REDで応答を作成します。

![fig1.png](https://qiita-image-store.s3.amazonaws.com/0/67237/65ec8f23-b22f-a0de-1ad1-7c0dfc8c4b06.png)

Echoで受け取った情報は、AlexaからServiceを通してNode-REDに渡されます。
その時、Node-RED上では、httpsで/helloworldというURLで受け取るものとします。
内容については、Alexa ServiceからIntentRequestに情報が渡されるので、その内容を解析してプログラミングします。最終形を以下に記します。

![14.png](https://qiita-image-store.s3.amazonaws.com/0/67237/35e443ba-0e48-489c-ac00-a43cebd935d8.png)

それでは、順を追って見てみます。

左側の入力から http node をワークスペース上にドラッグドロップして配置します。
配置したらダブルクリックしてプロパティウィンドウを表示します。
以下を入力し、完了を押します。

- メソッドをPOSTに変更する。
- URLに /HelloWorld と入力する。
- 名称を Echoからのリクエストを取得 にする。（任意で構いません）

![15.png](https://qiita-image-store.s3.amazonaws.com/0/67237/a0b1b6d6-b76e-25d7-0195-b6f3895e938a.png)

これでEchoからのリクエストを受け付けることができるようになります。

次に受け取ったリクエストからパラメータを使用し処理を分岐します。
左側の swith node をドラッグドロップしてワークスペースへ配置します。 
配置したらダブルクリックしてプロパティウィンドウを表示します。
以下を入力し、完了を押します。

- 名称に リクエスト情報からインテントで分配 を入力。（任意で構いません）
- プロパティに payload.request.type を入力する。
- 条件1：== を選択して、LaunchRequest と入力する。
- 条件2：== を選択して、IntentRequest と入力する。
- 条件3：== を選択して、SessionRequest と入力する。
- 条件4：otherwise を選択する。

httpとswitchを線で結びます。

![16.png](https://qiita-image-store.s3.amazonaws.com/0/67237/bed19b0a-2e53-2659-171d-b198361fc097.png)

Alexaからは、

```
  "request": {
    "type": "IntentRequest",
    "requestId": "EdwRequestId.64b21abe-645f-47a4-83d2-fe28c2c11b33",
    "intent": {
      "name": "HelloWorldIntent",
      "slots": {}
    },
```
と渡されてくるため、msg.payload.request.typeで、この”IntentRequest”を検査することになります。Intentの内容には、HelloWorldIntentが入っているのでこれが同じかどうかを判断します。

![17.png](https://qiita-image-store.s3.amazonaws.com/0/67237/0bbbddd8-3523-e47f-5989-f687346226ef.png)

次に受け取ったIntentから処理を分岐します。
左側の swith node をドラッグドロップしてワークスペースへ配置します。 
配置したらダブルクリックしてプロパティウィンドウを表示します。
以下を入力し、完了を押します。

- 名称に インテントで分配 を入力。（任意で構いません）
- プロパティに payload.request.intent.name を入力する。
- 条件1：== を選択して、HelloWorldIntent と入力する。
- 条件2：== を選択して、HelpIntent と入力する。

最初のswitchの右側の上から2番目の四角とこのswitchの左側を結びます。

![18.png](https://qiita-image-store.s3.amazonaws.com/0/67237/eb90763c-a760-3bdb-a2a7-95cca622a661.png)

次にHelloWorldIntentが渡された時の処理を書きます。
左側の機能から template node をドラッグドロップしてワークスペースへ配置します。
配置したらダブルクリックしてプロパティウィンドウを表示します。
以下を入力し、完了を押します。

- 名称に Helloと言ってみる と入力。（任意で構いません）
- 設定先に payload と入力する。
- 形式は Mustacheテンプレート を選択する。
- テンプレート中に HelloWorld と入力する。
- 出力形式は平文とする。

二つ目のswitchの右上の四角とこのtemplateを線で結びます。

次に、Alexa Service の返却形式に整形します。
左側の機能から template node をドラッグドロップしてワークスペースへ配置します。
配置したらダブルクリックしてプロパティウィンドウを表示します。
以下を入力し、完了を押します。

- 名称に レスポンスを作成 と入力。（任意で構いません）
- 設定先に payload と入力する。
- 形式は Mustacheテンプレート を選択する。
- テンプレート中に以下のコードを入力する。
- 出力形式は平文とする。

![19.png](https://qiita-image-store.s3.amazonaws.com/0/67237/7b62892a-31c9-f6a8-330d-1f2ce11a5535.png)

```
{
  "version":"1.0",
  "response":{
    "outputSpeech": {
     "type":"PlainText",
      "text":"{{payload}}"
    },
    "shouldEndSession":true
  }
}
```

最初のtemplateとこのtemplateを線で結びます。

最後にデータをJSON形式にしてHTTP Requestとして返却します。

![20.png](https://qiita-image-store.s3.amazonaws.com/0/67237/0bef4352-e222-d1a4-bb48-a3b871bce54f.png)


左側の JSON node をドラッグドロップしてワークスペースへ配置します。 
配置したらダブルクリックしてプロパティウィンドウを表示します。
名称に JSONへ変換 を入力。（任意で構いません）して完了を押します。

![21.png](https://qiita-image-store.s3.amazonaws.com/0/67237/a5ba0ce9-e3b4-1293-70be-701b9ca19509.png)

左側の HTTP response node をドラッグドロップしてワークスペースへ配置します。 
配置したらダブルクリックしてプロパティウィンドウを表示します。

templateとJSON、Http Responseをそれぞれ線で結びます。

デプロイを押して反映させるのを忘れないようにします。

これでNode-RED側の作成は終わりです。


###3. Alexa Serviceの作成

![22.png](https://qiita-image-store.s3.amazonaws.com/0/67237/839fa642-abb7-7d05-c564-737de7439f2a.png)

https://developer.amazon.com/ja/alexa-skills-kit
からスキル開発を始めるをクリックします。
（登録がまだの場合は、登録してください。）

無事登録できると以下の開発ポータルが表示されます。
https://developer.amazon.com/home.html

上部のタブでALEXAをクリックします。

![23.png](https://qiita-image-store.s3.amazonaws.com/0/67237/b70d3aef-acb6-b8a6-7b98-e37f45e9b621.png)

現在は、Alexa Skills Kit と Alexa Voice Service の二つが選択できますが、ここでは、Alexa Skills Kitを使用しますので、始めるをクリックしてください。

![24.png](https://qiita-image-store.s3.amazonaws.com/0/67237/8c59fba2-1526-d464-d36c-aa6d1174cfba.png)

新しいスキルを追加するをクリックします。

![25.png](https://qiita-image-store.s3.amazonaws.com/0/67237/a17a90ef-291b-77a8-4ee8-3b403edf2e8e.png)

スキル情報を以下のように入力します。

|名称|入力値|補足|
|:---|:---|:--|
|スキルの種類|カスタム対話モデル||
|言語|Japanese||
|アプリケーションID|空白|自動で作成されるので今回はこのまま|
|スキル名|IBM cloud Hello World|任意|
|呼び出し名|hello bluemix|任意|

*グローバルフィールドについてはそのまま

![26.png](https://qiita-image-store.s3.amazonaws.com/0/67237/72f8a579-b2a8-cebc-a89d-26157d42ced9.png)

保存ボタンを押してください。
正しく登録されると、スキル情報の隣のチェックが緑色に変わります。

![27.png](https://qiita-image-store.s3.amazonaws.com/0/67237/68b26133-aeb0-ac31-5250-cf1f522f893e.png)

次に対話モデルの設定をします。
他のチュートリアルを参考にすると、インテントスキーマなどに直接コード書き込んでましたが、ここではスキルビルダーを使用したいと思います。
スキルビルダーを起動するボタンをクリックしてください。

![28.png](https://qiita-image-store.s3.amazonaws.com/0/67237/2a31e6f0-3255-5cc4-cb2c-1ae4498cecf4.png)

以下の画面に切り替わると思います。
デフォルトで3つのIntentがある状態です。ここに新たにIntentを追加します。
先ほどのNode-REDの部分で使用した、HelloWorldIntentを作成します。

![29.png](https://qiita-image-store.s3.amazonaws.com/0/67237/1b33ee6a-4a02-4b59-7b47-32c14439785c.png)

Add an Intent + の部分をクリックします。
Create a new intent にチェックを入れ、入力欄に HelloWorldIntent と入力します。最後に、Create Intent ボタンをクリックします。

![30.png](https://qiita-image-store.s3.amazonaws.com/0/67237/44d64987-4e41-4e80-eb60-ef051438fd9c.png)

初期の3つのIntentの下に、HelloWorldIntentが作成されました。

![31.png](https://qiita-image-store.s3.amazonaws.com/0/67237/1fe4747e-195c-b54a-8b91-6a52147d28d3.png)

Sample Utterance(サンプル発声)欄に呼びかけ方を入力します。

- hello world
- say hello
- hello

の3つを追加してください。
入力欄に上記の値を入力して + ボタンを押すと追加されます。

次に設定を変更します。
Node-REDは、HTTPSで呼び出されるためHTTPSにチェックを入れて次へを押します。

デフォルト欄に先ほどNode-REDで作成したURLへ
https://hello-echo.mybluemix.net/HelloWorld
と入力し、エンドポイントの設定をします。

![32.png](https://qiita-image-store.s3.amazonaws.com/0/67237/6066879c-9293-9197-5c85-497e6e74414e.png)


SSL証明書の設定をします。
My development endpoint is a sub-domain of a domain that has a wildcard certificate from a certificate authority
にチェックを入れて次へを押します。

![33.png](https://qiita-image-store.s3.amazonaws.com/0/67237/e1193c7a-5070-bc18-0df4-5f6591047ad3.png)

ここまでの設定がうまくいけば、ここでテストができます。

![34.png](https://qiita-image-store.s3.amazonaws.com/0/67237/d2c5bfc7-8c6d-0605-b775-d27dd73bf560.png)

ページの中段にサービスシュミレーターがあるのでここでテストができます。

発話を入力してください。の下にテキストを入れて、IBM cloud Hello World を呼び出すボタンをクリックします。

Node-REDから正常に応答が返るとサービスレスポンス欄にJSON形式のデータが表示されます。
聴くを押して確認します。

![35.png](https://qiita-image-store.s3.amazonaws.com/0/67237/425879e9-aa3f-7786-8704-6e9bc91858bc.png)

Node-REDから Hello World と返すようにしているので Hello Worldと聞こえれば完成です。


なんかチュートリアルっぽくなってしまいました。

###4.終わりに。

ここまでできれば、Echoに
「Alexa hello blumix」
と呼びかければ、返ってくるはず。。。


でしたが、Echoの設定がうまくいかなくてまだ実機では返答されてない状況です。

できた！と書きたかったのですが、まだできてないです。

IoTLTの精神で、やったけどダメだった事例も紹介するというのがありましたので、
まずは公開させていただきました。

できるようになったらまた報告したいと考えます。

それでは、次の方へバトンタッチします。

---

12/7　追記

以下を行ったら無事ECHOから発話されました。

1. 開発者アカウントを取得したアドレスが、米国のAmazon.comのアカウントと一緒のアカウントでした。そのためECHOのAlexa設定をやりなおしてこのメールアドレスに変更しました。

2. カタカナで「ブルーミックス」と入力し直しました。

呼び出し名の発音が悪かったのか、Bluemixだと聞き取ってくれませんでした。
カタカナにしたところ無事ECHOが「Hello World」と話してくれました。