ブーム再来!
最近、ローコード・ノーコードが再燃しているらしい。
ローコード・ノーコードでアプリを作りたいなら、断然、Node-RED
と IBM Watson
の組み合わせでしょう!(主観です)
それでは、早速、何か作ってみましょう
(安心してください。ステップ・バイ・ステップで行きます)
もし ・・・ があったら
鉄板(?)の『音声翻訳機』をNode-RED
とIBM Watson
で作ってみます。
Node-RED
もIBM Watson
も初めて、という人でも楽しめると思いますよ。
使う道具
無料で且つクラウド環境で完結できることを前提としていますので、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にサインインします。
通常であれば、ここから、IBM Watsonサービスをメニューから見つけてサービス・インスタンスを作成する手順を実行するのですが、この記事では、IBM Cloudシェルを使って、サービス・インスタンスをサクっと作ってしまいます
『IBM Cloudシェルの探索』をクリックします。
IBM Cloud Shellがオープンします。
詳細な手順は、こちらの『CLI によるインスタンスの作成』に記載されていますので、興味のある方はご参照ください。
IBM Watsonサービスを作成する
IBM Watsonサービスを検索します。
ibmcloud catalog search watson
IBM 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にセットします。("おまじない"ぐらいに考えて...)
ibmcloud target -g Default
IBM Watson Speech-To-Text(STT)を作成します。
ibmcloud resource service-instance-create STT-lite-01 bc35fb8c-bc5b-431b-859e-3861771d5843 lite us-south
IBM Watson Text-To-Speech(TTS)を作成します。
ibmcloud resource service-instance-create TTS-lite-01 282c1d79-9176-4597-9cff-941a8d6cfd4c lite us-south
IBM Watson Language Translator(LT)を作成します。
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を作成します。
# 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ダッシュボード画面に戻って、作成したリソースを表示してみます。
続いてGitHubにサインイン
https://github.co.jp/にアクセスし、GitHubにサインインします。
Node-REDを簡単にデプロイするために、GitHubリポジトリを用意しました。
https://github.com/yanagi-hideo-biz/w_translatorにアクセスしてください。
この記事では、事前に用意したこのコードを使用します。
Gitpod登場! (とっても便利なヤツ)
何が便利かって、GitHub等で公開されているコードをブラウザだけで簡単に実行して動作が確認できる、(使い捨ての)クラウド開発環境を提供してくれます。
そして、その開発環境は、ほぼVS Codeなので、VS Codeのユーザは操作に迷うことはありません。
このクラウド開発環境を使ってNode-RED
を起動し、ノーコードで自動翻訳機を作ろうという試みです。
利用方法は簡単です。GitHubのURLを、https://gitpod.io# の後ろに追加するだけです。
そうやって出来上がったURLをWeb Browswerで開いてみてください。
こんな感じです。
https://gitpod.io#https://github.com/yanagi-hideo-biz/w_translator
警告
Gitpod起動途中で、『GitHubとGitpodを連携しますか?』的な画面が表示されたら、内容に従って許可し、進んでください。
プラグインを使えばもっと便利に!
ChromeとFirefoxには便利なプラグインが提供されています。プラグインを追加すると、GitpodというボタンがGitHubの画面に追加され、そのボタンをクリックすると、GitHubのコードをGitpodにdeployしてくれます。本当に便利なので、みなさんも是非試してみてください。
Gitpodの画面が表示されたら、[Continue with GitHub]をクリックします。
相互認証画面が表示されたら、[Authorize gitpod-io]をクリックします。
[VS Code Browser]がdefaultで選択されていることを確認して、[Continue]をクリックします。
このような画面が表示されたら成功です。(あっという間でした)
Node-REDにアクセスしてみよう
警告
ブラウザに『ポップアップ・ブロック』が表示される場合は、『許可』してください。
便利ノードを事前に読み込んでいます
自動翻訳機を作成するために必要な便利なノードを事前に追加しています。
詳しくは、GitHubの.gitpod.ymlを参照してください。
- node-red-node-watson
- node-red-contrib-browser-utils
- node-red-contrib-play-audio
Node-REDの操作に慣れてみる
まずは、Node-RED版の『Hello, World!』ですね。
詳しい操作方法は、ページの最後に追加した『参考』を参照してみてください。
Node-REDで音声翻訳機の作成
完成イメージ
Speech to Textノードの修正ポイント
Language Translatorノードの修正ポイント
Text to Speechノードの修正ポイント
早速、試してみましょう
完成したフローについて
GitHubに完成イメージのバックアップをflows.jsonとしてアップロードしてあるので、Node-REDに読み込んで利用することが可能です。
詳細な手順が知りたい方へ
この記事で紹介した内容は、誰でも参加できるハンズオンで体験してもらえるように準備中です。
IBM Tech/Developer Dojoで告知しますので、もう少々お待ちください
いかがでしたでしょうか
楽しんでいただけましたでしょうか。
また、IBM Watsonがちょっぴり好きになりました
参考
QiitaにNode-RED、GitHub、Gitpodの記事がたくさんあります。
特に、この記事を実際に試す上で有用と思われる記事へのリンクを紹介します。
参考にしてみてください。
更新
(2022/05/25) Windows10 Home (21H1 Build 19043.928) + Edgeブラウザ(バージョン 101.0.1210.53 (公式ビルド) (64 ビット))で動作することを確認しました。
(2022/05/25) Edgeブラウザ(バージョン 101.0.1210.53 (公式ビルド) (64 ビット))で、Chrome用Gitpodプラグインが動作することを確認しました。