多言語会議や1on1にNodeーRED翻訳機能をこっそり仕込もう

みなさんこんにちは、母国語以外の会議が入ったとき、ひっそりと翻訳をこなしてくれる機能が手元にあったら安心しませんか？
この記事は、Node-RED入門者向けに公開しているIBM Developer掲載済みの記事をベースに日本語化したものです。

**Build a spoken universal translator using Node-RED and Watson AI services**
https://developer.ibm.com/tutorials/build-universal-translator-nodered-watson-ai-services/

##作成手順
Step1. クラウドにNode-REDを起動
Step2. ノードインポート
Step3. JSONファイルインポート
Step4. Cloud AIサービスの設定

##[準備]IBM Cloudアカウントを作る
IBM Cloudのアカウントを持っていない人はこの動画を参考にしてアカウントを作りましょう。
今回、紹介している機能はクレカ登録不要の**”ライトアカウント”**で試すことができます。

【YouTube:3分でわかるIBM Cloud/ライトアカウントを作ろう】
https://www.youtube.com/watch?v=Krn1jQ4iy_s

アカウントを作ったら、IBM Cloud に Loginしましょう。
https://cloud.ibm.com/login

##Step1.クラウドにNode-REDを起動##
カタログ メニューより、スターターキットを選択、Node-RED Starterをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245231/73f54c14-5d3c-a29e-3456-ef52c42f0975.png)

アプリケーション名を入力、他の値も適宜選択して**「作成」**します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245231/d019c898-3cc4-b07d-275c-6598dcb2be3a.png)（お試しはデフォルト値でOK）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245231/4cb4828f-9497-052c-1e02-e9a4eefab79f.png)（お試しはライトアカウントでOK）

Node-REDのサービスが開始されたら「アプリURLにアクセス」よりNode-REDのページを開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245231/b8b76205-89a4-c937-715b-acccf5ce9ef3.png)

初回アクセス時はNode-RED用のUSER名とパスワード設定を求められます。（設定を推奨）

##Step2. ノードインポート
Node-REDに必要なNodeを追加します。
:node-red-contrib-browser-utils
:node-red-contrib-play-audio
Node-RED画面右のハンバーガーメニューより、パレットの管理を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245231/22ac30f5-1f3f-6486-a7e6-f41f93bf67d2.png)

ノードを追加タブに移動、パレットで対象のノードを検索し、内容を確認した上で追加します。
例）Install Browser Utils nodes
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245231/656794c1-8bc6-c52f-a6c6-291fb0be7926.png)

##Step3. JSONファイルインポート
GitHubに公開されているJSONファイルをコピーし、インポートします。
https://github.com/johnwalicki/NodeRED-Starter-Universal-Translator/blob/master/flows/NodeRED-UniversalTranslator-flow.json

リンク先**”NodeRED-UniversalTranslator-flow.json”**の全文を選択しクリップボードにコピーします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245231/dcb0ea98-9103-d472-eb69-ad08d7178095.png)

Node-RED画面右のハンバーガーメニューより、読み込みを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245231/99f631a4-348a-5205-a639-871bddc04ba7.png)

GitHubでJSONファイルをコピーしたクリップボードデータを貼り付け読み込みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245231/0156d496-ffc2-3a47-c087-ad5ac06b7efe.png)

Universal Translatorタブが追加され、Nodeが作成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245231/21ec6c53-b301-2b78-e4ca-d64e75179e4e.png)


##Step4. Cloud AIサービスの設定
IBM Cloudで必要なサービスを立ち上げます。
・speech to text
・language translator
・text to speech
カタログよりAIを選択し、対象のサービスをクリック、設定値を確認して作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245231/baa2fa59-5cd0-b70a-fbd5-f818edd93295.png)

立ち上げたサービスの管理メニューよりAPIキー（API鍵）をクリップボードにコピーします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245231/33280ac0-bbe2-efb8-c8ac-3d71e9f01cec.png)

接続ノードをダブルクリックして編集画面を開き、API KeyコピーしたAPIキーを貼り付け、完了して閉じます。
speech to text languarge、language translatorはSourceとTargetも合わせて設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245231/69f7c546-9714-eb9b-54e0-ee0799cda3b6.png)

3つのNodeの設定が完了後、デプロイします。


##動作確認をしよう
microphoneノードをスタートするとマイクの入力値を録音します。
もう一度microphoneを押すと、録音を終了して次のノードに進みます。

*初回はマイクなどデバイスへの接続確認が求められますので、適宜許可をしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245231/2c53e267-61ad-919a-4ebf-7b231ea55d6d.png)

いかがでしたか？
入力、出力共に動作が確認できたでしょうか。
この機能で音声を使用した対話をすることができますし、デバックタブで読み取った内容を確認することもできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245231/e70b7e39-500a-3c7f-0f19-5232dffb6dbc.png)