Node-RED で遊んでみる第四歩: Web REST API で禅の言葉をゲットして日本語に翻訳してみる

自分メモを兼ねた [Node-RED](https://nodered.org/) で遊んでみた的なやつ、4投稿目になります。これまでの投稿はコチラ。

* [Node-RED で遊んでみる第一歩: Web ページを表示してみる](https://qiita.com/yamachan360/items/e3c552c1d2e83e5bf602)
* [Node-RED で遊んでみる第二歩: 配列を加工してみる](https://qiita.com/yamachan360/items/795095a77a45766ebdec)
* [Node-RED で遊んでみる第三歩: function ノードにおける変数の有効範囲](https://qiita.com/yamachan360/items/93d530e18d2ccd62caef)

# 今回のアプリ

今回はWeb REST APIを使って、禅の言葉を得る小さなアプリを作成してみます。使用する API に関しては [禅APIとは何か？](https://qiita.com/yamachan360/items/c63f364c2d7352686c0d#%E7%A6%85api%E3%81%A8%E3%81%AF%E4%BD%95%E3%81%8B) を参照してください。

この禅APIは英語のテキストを返すので、それを日本語に翻訳もしてみましょう。

# さて作りましょう

さて、まずは空のフローにノードを並べていきましょう。inject ノード、http request ノード、debug ノードを順に並べて、それぞれを接続します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/57ad88ae-ce89-bcc6-a9f2-97a02c616113.png)
http request ノードのURL欄に以下の値を設定します。

```
https://api.github.com/zen
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/51ccbade-e525-e863-5376-1c0ef207ea5e.png)
デプロイして、inject ノードをクリックしてみましょう。有難い禅の言葉が… 表示されませんね。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/bb4d6a66-0061-5812-845b-be90b54a5fa6.png)
リクエスト時に User-Agent が指定されていない、と注意されているようです。さっそく指定しましょう！

フローの http request の前に change ノードを追加します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/0eaf4b3a-305f-e3f6-ddf8-7405896ed2c7.png)
change ノードの値の代入先に headers を指定し、対象の値の形式を JSON に変更した後、値として以下の JSON 文字列を設定します。

```json
{"User-Agent": "Node-RED sample"}
```

以下のような設定になります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/dff667b8-1d30-f1d0-8750-9a9232ca2454.png)
全体のフローは以下のようになります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/0455d2b9-9acd-8c86-e301-ba96b8a3a2b8.png)
もう一度デプロイして、inject ノードをクリックしてみましょう。今度はうまくいきました。クリックのたびに、有難い禅の言葉がコンソールに表示されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/64570e20-99b7-2d5c-7c8f-5217f191d337.png)
いやー、めでたしめでたし！

# 日本語に翻訳してみよう

英語だとなかなか辛いので、禅の言葉を日本語に翻訳してみましょう。

## IBM Watson の Language Translator サービスの作成

今回は IBM Watson の Language Translator サービスを使ってみます。無料の [ライト・アカウント](https://console.bluemix.net/registration/free) でも利用できます。

IBM Cloud にログインしたら、カタログの「AI」カテゴリにある以下のアイコンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/48976ed7-0a57-cc47-beeb-e3543d06d42c.png)
サービスの作成画面になりますので、必要であれば名前など変更して「作成」をクリック。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/7773b0ba-4496-d1ee-e2b9-a6a3751d9cff.png)
生成後の画面に「資格情報」が表示されていますので、「資格情報を表示」リンクをクリックして **API鍵** を表示させ、それをコピーしておきます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/8382b969-be61-3e19-bbf8-0fc1ff798d86.png)

## Language Translator ノードの追加

http request ノードの後に、IBM Watson パレットにある Language Translator ノードを追加します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/3737c995-218c-5c5e-c97d-6c3e54837ebb.png)
パレットにない場合は「パレットの管理」メニューを開き、「node-red-node-watson」ノードを追加します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/1923b910-626d-126e-55a4-c2cb5a4ce04a.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/9600778e-3aed-4674-a68e-3ad1ef922582.png)

## Language Translator ノードの設定

Language Translator ノードの設定を開き、API Key欄にさきほどコピーした API鍵の値をペーストして設定します。また Target 欄を Japanese に変更します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/0765f518-5ada-4eee-5983-3dc3131f611a.png)
設定してもフローの見た目は特に変わりませんね。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/3737c995-218c-5c5e-c97d-6c3e54837ebb.png)

## 実行してみよう

デプロイして、inject ノードをクリックしてみましょう。ちゃんと日本語に翻訳された禅の言葉が出てきましたね。クリックのたびに、異なった禅の言葉がコンソールに表示されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/5215c49f-c1b5-ec51-6b08-0c2fc1de5e1f.png)
翻訳したらよけいに意味がわからない？ぜ、禅ってきっとそうゆうものですよ(汗)

それにしても、Language Translator ノードは簡単に使えていいですね。API 鍵さえ得ておけば、めっちゃ簡単にテキストの翻訳ができそうです！

# おわりに

今回、Node-RED ではじめてちゃんと動作するアプリっぽいものを作った気がします。如何でしたでしょうか？

たった5個のノードだけで、禅の言葉を得て、翻訳までしちゃうんですから、凄いですよね。まあ、既存の禅APIと、IBM Watson の Language Translator サービスを繋いだだけなんですけどw

ではまた！