ローコード・ノーコードで音声翻訳機を作る

# ブーム再来！ :grinning:

最近、ローコード・ノーコードが再燃しているらしい。
ローコード・ノーコードでアプリを作りたいなら、断然、```Node-RED``` と ```IBM Watson```の組み合わせでしょう！(主観です)
それでは、早速、何か作ってみましょう:bangbang:
(安心してください。ステップ・バイ・ステップで行きます)

### もし ・・・ があったら
鉄板(?)の『音声翻訳機』を```Node-RED```と```IBM Watson```で作ってみます。
```Node-RED```も```IBM Watson```も初めて、という人でも楽しめると思いますよ。 :smiley:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/c43f2faf-f2d4-1728-8ac8-131f49b2d1e0.png)

# 使う道具 :anchor:
無料で且つクラウド環境で完結できることを前提としていますので、Windowsユーザ、MacユーザそしてLinuxユーザであっても同じ操作感で試せます。
使用する道具は全部で3つです。

* IBM Cloud
IBM Cloudが提供する```IBM Watson```を使います。
IBM Cloudを無料で始めたい方向けに、[こちら](https://www.ibm.com/jp-ja/cloud/info/cloud-jp-faq#2276674)のFAQの記事が参考になると思います。

* GitHub
GitHubアカウントの作成は、[ここ](https://github.co.jp/)にアクセスし、右上のサインアップをクリックしてアカウントを作成してください。

* Gitpod
アプリケーション環境として```Node-RED```を使用します。
そのアプリケーション実行環境としてGitpodを使用します。

:::note info
Why Gitpod?
この記事では、追加課金の心配がないGitpod環境を使います。
また、Gitpodアカウントを事前に作成する必要ありません。
:::

:::note info
Web Browser
IBM CloudがサポートするWeb Browserは[こちら](https://cloud.ibm.com/docs/overview?topic=overview-prereqs-platform)で確認できます。
この記事ではChromeブラウザを使用しました。
:::

# まずはIBM Cloudにログイン
https://cloud.ibm.com/login からIBM Cloudにサインインします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/6293778c-4ecc-9858-774b-2fe6c028640b.png)

ログインした状態はこんな感じ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/7b85628a-c0c1-05c6-8b87-cea3afa7f8fd.png)

通常であれば、ここから、IBM Watsonサービスをメニューから見つけてサービス・インスタンスを作成する手順を実行するのですが、この記事では、IBM Cloudシェルを使って、サービス・インスタンスをサクっと作ってしまいます :v:

『IBM Cloudシェルの探索』をクリックします。
IBM Cloud Shellがオープンします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/1f6b973d-845e-0758-1fad-793b6b451f2d.png)

詳細な手順は、こちらの[『CLI によるインスタンスの作成』](https://cloud.ibm.com/docs/Cloudant?topic=Cloudant-creating-an-ibm-cloudant-instance-on-ibm-cloud-by-using-the-ibm-cloud-cli&locale=ja)に記載されていますので、興味のある方はご参照ください。

### IBM Watsonサービスを作成する
IBM Watsonサービスを検索します。
```shell:command
ibmcloud catalog search watson
```
IBM Watsonサービスが一覧表示されます。
```text:Watsonサービス一覧
Name                                         ID                                     Kind   
Communication Monitoring                     3e1a2c30-11dd-11ec-b621-67e0f6600d56   service   
Watson OpenScale                             2ad019f3-0fd6-4c25-966d-f3952481a870   service   
Consult with IBM Garage                      2f756420-434f-11e8-ae40-6bdd72502abc   service   
Watson Assistant                             7045626d-55e3-4418-be11-683a26dbc1e5   service   
Watson Studio                                39ba9d4c-b1c5-4cc3-a163-38b580121e01   service   
Watson Query                                 5d307850-0404-11eb-8c8b-c7d7505f656d   service   
Watson Knowledge Catalog                     ed3a5a53-eb60-4f3c-8fd1-17f88585b6ed   service   
Watson Discovery                             76b7bf22-b443-47db-b3db-066ba2988f47   service   
Analytics Engine                             18de078f-e6b0-4b47-a7c4-0ed2f93f3e1d   service   
ibmwatsonasstsecurityprodbroker-service      30303030-3030-3030-3030-504d515f3032   ssm-service   
ibmwatsonsupplychaininsights-service         30303030-3030-3030-3030-5343495f3032   ssm-service   
Internet of Things Platform                  iotf-service-id                        service   
Knowledge Studio                             983ea9a2-0fec-4021-8b70-8da5373394e5   service   
Language Translator                          f1faf010-4107-4877-a571-fc9c8763c3dd   service   
Natural Language Understanding               bb6393bc-7d81-446b-9728-61b704f6eca5   service   
Natural Language Understanding Node.js App   natural-language-understanding-basic   template   
Machine Learning                             51c53b72-918f-4869-b834-2d99eb28422a   service   
Speech to Text                               bc35fb8c-bc5b-431b-859e-3861771d5843   service   
Text to Speech                               282c1d79-9176-4597-9cff-941a8d6cfd4c   service   
watson-assistant service                     33f247ba-2a5b-45b8-8c06-901a34134bc5   ssm-service   
```
リソースグループをDefaultにセットします。("おまじない"ぐらいに考えて...)
```shell:command
ibmcloud target -g Default
```
IBM Watson Speech-To-Text(STT)を作成します。
```shell:command
ibmcloud resource service-instance-create STT-lite-01 bc35fb8c-bc5b-431b-859e-3861771d5843 lite us-south
```
IBM Watson Text-To-Speech(TTS)を作成します。
```shell:command
ibmcloud resource service-instance-create TTS-lite-01 282c1d79-9176-4597-9cff-941a8d6cfd4c lite us-south
```
IBM Watson Language Translator(LT)を作成します。
```shell:command
ibmcloud resource service-instance-create LT-lite-01 f1faf010-4107-4877-a571-fc9c8763c3dd lite us-south
```
### API Keyを作成する

IBM Watson STT/TTS/LTのAPI Keyを作成します。
```shell:command
# Watson STT
ibmcloud resource service-key-create STTKey Manager --instance-name STT-lite-01

# Watson TTS
ibmcloud resource service-key-create TTSKey Manager --instance-name TTS-lite-01

# Watson LT
ibmcloud resource service-key-create LTKey Manager --instance-name LT-lite-01
```

上記コマンドを実行するとAPI KeyとURLが表示されますので、それぞれ(合計3組)をコピーしておいてください。
```text:出力結果からの抜粋                       
# このようなイメージです
apikey: ***6rVXkG5I-4s6TEAOy-MSBE6g26G12R4V***
url: https://api.us-south.speech-to-text.watson.cloud.ibm.com/instances/***
```
IBM Cloudダッシュボード画面に戻って、作成したリソースを表示してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/c14c30af-f8bd-5419-02e6-83cae4433daa.png)

3つのサービス・インスタンスが作成されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/ce506fd0-6691-157b-bc07-5f87c1c2c438.png)

# 続いてGitHubにサインイン
[https://github.co.jp/](https://github.co.jp/)にアクセスし、GitHubにサインインします。

Node-REDを簡単にデプロイするために、GitHubリポジトリを用意しました。
[https://github.com/yanagi-hideo-biz/w_translator](https://github.com/yanagi-hideo-biz/w_translator)にアクセスしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/95f561da-2a5c-1ff2-42fb-97703afab205.png)


この記事では、事前に用意したこのコードを使用します。

# Gitpod登場！ (とっても便利なヤツ)
何が便利かって、GitHub等で公開されているコードをブラウザだけで簡単に実行して動作が確認できる、(使い捨ての)クラウド開発環境を提供してくれます。
そして、その開発環境は、ほぼVS Codeなので、VS Codeのユーザは操作に迷うことはありません。

このクラウド開発環境を使って```Node-RED```を起動し、ノーコードで自動翻訳機を作ろうという試みです。

利用方法は簡単です。GitHubのURLを、https://<span>gitpod<span>.io# の後ろに追加するだけです。
そうやって出来上がったURLをWeb Browswerで開いてみてください。

こんな感じです。
```text:Web BrowswerのURL欄にコピー
https://gitpod.io#https://github.com/yanagi-hideo-biz/w_translator
```
:::note warn
警告
Gitpod起動途中で、『GitHubとGitpodを連携しますか？』的な画面が表示されたら、内容に従って許可し、進んでください。
:::
:::note info
プラグインを使えばもっと便利に！
ChromeとFirefoxには便利な[プラグイン](https://www.gitpod.io/docs/browser-extension)が提供されています。プラグインを追加すると、GitpodというボタンがGitHubの画面に追加され、そのボタンをクリックすると、GitHubのコードをGitpodにdeployしてくれます。本当に便利なので、みなさんも是非試してみてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/74e28a1b-c01b-da1c-c642-e9a1656da22c.png)
:::

Gitpodの画面が表示されたら、[Continue with GitHub]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/87522ba0-8b0f-ce47-9733-a0375c70561f.png)

相互認証画面が表示されたら、[Authorize gitpod-io]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/213b2d91-c9ef-6659-4e16-53d5a4e1d079.png)

[VS Code Browser]がdefaultで選択されていることを確認して、[Continue]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/982e044b-1574-bd59-10cf-68b252a910bc.png)

このような画面が表示されたら成功です。(あっという間でした)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/5147abeb-0769-fccd-f857-16f0555cc7d9.png)

# Node-REDにアクセスしてみよう

右上の方にある、リンクをクリックしてみてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/f35fb077-00cf-3a90-10e4-88babd6bca36.png)

:::note warn
警告
ブラウザに『ポップアップ・ブロック』が表示される場合は、『許可』してください。
:::

無事、Node-REDにアクセスできました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/8c11e969-e9df-c945-18a9-dbbaffcf5414.png)

:::note info
便利ノードを事前に読み込んでいます
自動翻訳機を作成するために必要な便利なノードを事前に追加しています。
詳しくは、GitHubの.gitpod.ymlを参照してください。
* node-red-node-watson
* node-red-contrib-browser-utils
* node-red-contrib-play-audio
:::

# Node-REDの操作に慣れてみる

まずは、Node-RED版の『Hello, World！』ですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/669085f5-f2a6-aca8-1be0-ff4a25ba434b.png)

:::note info
詳しい操作方法は、ページの最後に追加した『参考』を参照してみてください。
:::

# Node-REDで音声翻訳機の作成

### 完成イメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/9c805774-e834-10cc-0cc9-d345cc9c8ddf.png)

### Speech to Textノードの修正ポイント
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/0f7d9328-87a3-bb5f-fccc-57cc21b78cfe.png)

### Language Translatorノードの修正ポイント
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/c280dd81-a4cc-87a5-c660-b7f4aa6e2634.png)

### Text to Speechノードの修正ポイント
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/2d46b915-ad0a-e28f-7672-b641b39a0a15.png)

### 早速、試してみましょう :flag_jp: :flag_us:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/af870947-9ed7-34fd-7e00-f9a00c474185.png)

:::note info
完成したフローについて
[GitHub](https://github.com/yanagi-hideo-biz/w_translator)に完成イメージのバックアップをflows.jsonとしてアップロードしてあるので、Node-REDに読み込んで利用することが可能です。
:::

:::note info
詳細な手順が知りたい方へ
この記事で紹介した内容は、誰でも参加できるハンズオンで体験してもらえるように準備中です。
[IBM Tech/Developer Dojo](https://ibm-developer.connpass.com/)で告知しますので、もう少々お待ちください:exclamation:
:::

# いかがでしたでしょうか

楽しんでいただけましたでしょうか。
また、IBM Watsonがちょっぴり好きになりました :blush:


# 参考
QiitaにNode-RED、GitHub、Gitpodの記事がたくさんあります。
特に、この記事を実際に試す上で有用と思われる記事へのリンクを紹介します。
参考にしてみてください。

https://cloud.ibm.com/docs/cloud-shell?topic=cloud-shell-getting-started&locale=ja

https://qiita.com/makaishi2/items/5c7b1b6a72b6938cf3d2

https://qiita.com/haru15komekome/items/491d4e78eac76a677d19

https://qiita.com/Kakimoty_Field/items/8392028854d245054f32

https://qiita.com/renesisu727/items/248cb9468a402c622003

https://qiita.com/baby-degu/items/bacf20f657625ae8747b

# 更新
:triangular_flag_on_post: (2022/05/25) Windows10 Home (21H1 Build 19043.928) + Edgeブラウザ(バージョン 101.0.1210.53 (公式ビルド) (64 ビット))で動作することを確認しました。
:triangular_flag_on_post: (2022/05/25) Edgeブラウザ(バージョン 101.0.1210.53 (公式ビルド) (64 ビット))で、Chrome用Gitpodプラグインが動作することを確認しました。