2
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-05-21

ブーム再来! :grinning:

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

もし ・・・ があったら

鉄板(?)の『音声翻訳機』をNode-REDIBM Watsonで作ってみます。
Node-REDIBM Watsonも初めて、という人でも楽しめると思いますよ。 :smiley:
image.png

使う道具 :anchor:

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

  • IBM Cloud
    IBM Cloudが提供するIBM Watsonを使います。
    IBM Cloudを無料で始めたい方向けに、こちらのFAQの記事が参考になると思います。

  • GitHub
    GitHubアカウントの作成は、ここにアクセスし、右上のサインアップをクリックしてアカウントを作成してください。

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

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

Web Browser
IBM CloudがサポートするWeb Browserはこちらで確認できます。
この記事ではChromeブラウザを使用しました。

まずはIBM Cloudにログイン

https://cloud.ibm.com/login からIBM Cloudにサインインします。
image.png

ログインした状態はこんな感じ。
image.png

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

『IBM Cloudシェルの探索』をクリックします。
IBM Cloud Shellがオープンします。
image.png

詳細な手順は、こちらの『CLI によるインスタンスの作成』に記載されていますので、興味のある方はご参照ください。

IBM Watsonサービスを作成する

IBM Watsonサービスを検索します。

command
ibmcloud catalog search watson

IBM Watsonサービスが一覧表示されます。

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にセットします。("おまじない"ぐらいに考えて...)

command
ibmcloud target -g Default

IBM Watson Speech-To-Text(STT)を作成します。

command
ibmcloud resource service-instance-create STT-lite-01 bc35fb8c-bc5b-431b-859e-3861771d5843 lite us-south

IBM Watson Text-To-Speech(TTS)を作成します。

command
ibmcloud resource service-instance-create TTS-lite-01 282c1d79-9176-4597-9cff-941a8d6cfd4c lite us-south

IBM Watson Language Translator(LT)を作成します。

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を作成します。

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組)をコピーしておいてください。

出力結果からの抜粋
# このようなイメージです
apikey: ***6rVXkG5I-4s6TEAOy-MSBE6g26G12R4V***
url: https://api.us-south.speech-to-text.watson.cloud.ibm.com/instances/***

IBM Cloudダッシュボード画面に戻って、作成したリソースを表示してみます。
image.png

3つのサービス・インスタンスが作成されています。
image.png

続いてGitHubにサインイン

https://github.co.jp/にアクセスし、GitHubにサインインします。

Node-REDを簡単にデプロイするために、GitHubリポジトリを用意しました。
https://github.com/yanagi-hideo-biz/w_translatorにアクセスしてください。
image.png

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

Gitpod登場! (とっても便利なヤツ)

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

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

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

こんな感じです。

Web BrowswerのURL欄にコピー
https://gitpod.io#https://github.com/yanagi-hideo-biz/w_translator

警告
Gitpod起動途中で、『GitHubとGitpodを連携しますか?』的な画面が表示されたら、内容に従って許可し、進んでください。

プラグインを使えばもっと便利に!
ChromeとFirefoxには便利なプラグインが提供されています。プラグインを追加すると、GitpodというボタンがGitHubの画面に追加され、そのボタンをクリックすると、GitHubのコードをGitpodにdeployしてくれます。本当に便利なので、みなさんも是非試してみてください。
image.png

Gitpodの画面が表示されたら、[Continue with GitHub]をクリックします。
image.png

相互認証画面が表示されたら、[Authorize gitpod-io]をクリックします。
image.png

[VS Code Browser]がdefaultで選択されていることを確認して、[Continue]をクリックします。
image.png

このような画面が表示されたら成功です。(あっという間でした)
image.png

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

右上の方にある、リンクをクリックしてみてください。
image.png

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

無事、Node-REDにアクセスできました。
image.png

便利ノードを事前に読み込んでいます
自動翻訳機を作成するために必要な便利なノードを事前に追加しています。
詳しくは、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

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

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

完成イメージ

image.png

Speech to Textノードの修正ポイント

image.png

Language Translatorノードの修正ポイント

image.png

Text to Speechノードの修正ポイント

image.png

早速、試してみましょう :flag_jp: :flag_us:

image.png

完成したフローについて
GitHubに完成イメージのバックアップをflows.jsonとしてアップロードしてあるので、Node-REDに読み込んで利用することが可能です。

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

いかがでしたでしょうか

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

参考

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

更新

: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プラグインが動作することを確認しました。

2
5
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
2
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?