Noodl Advent Calendar記念すべき１日目
IBM Watsonのlanguage translatorを利用し、Noodl上で英語のテキストを入力すると日本語に翻訳してくれるアプリケーションを作ってみました！
はじめに
Noodlはバージョン1.3.1を使っています。
Node-REDをIBM Cloud上で利用するための準備は、@makaishi2 さんと@kisaichi07 さんの記事を参考にさせていただきました。
・Noodl（バージョン 1.3.1）
- ダウンロード
・Node-RED on IBM Cloudについて参考にした記事
- 最新版IBM Cloud ライトアカウント登録手順(2018-05-06時点)
- IBM LiteアカウントでNode-REDインスタンスを作成する
・NoodlとIBM Cloudの連携で参考にした記事
- Noodl × IBM Cloud のNode-Red × Tone Analyzerで文章解析しよう
作ったもの
こんな感じ。
構成図
Language TranslatorとNode-REDを接続する
Node-REDでフロー構築する前に、IBM Cloud上でLanguage TranslatorとNode-REDを接続する必要があります。
手順
１. IBM Cloudログイン後、画面上の検索欄にLanguage Translator-epと検索して下の画像のページへ行きます。画像のように選択して「作成」をクリック。
2. Node-REDのダッシュボードへアクセスし、「接続の作成」をクリック。
3. サービス欄にLanguage Translator-epが出てきたら、「接続」をクリック。
Node-RED on IBM Cloudでのフロー構築
１. 以下のJSONフォーマットをコピー（今回作ったデータです）
[
{
"id": "bec2a13.2c4746",
"type": "tab",
"label": "翻訳",
"disabled": false,
"info": ""
},
{
"id": "2e245bef.5f4334",
"type": "debug",
"z": "bec2a13.2c4746",
"name": "",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "false",
"x": 650,
"y": 120,
"wires": []
},
{
"id": "32b85710.83a198",
"type": "http in",
"z": "bec2a13.2c4746",
"name": "",
"url": "/translate",
"method": "post",
"upload": false,
"swaggerDoc": "",
"x": 140,
"y": 100,
"wires": [
[
"875809e1.6f0388"
]
]
},
{
"id": "2428c962.672486",
"type": "watson-translator",
"z": "bec2a13.2c4746",
"name": "",
"action": "translate",
"basemodel": "en-tr",
"domain": "general",
"srclang": "en",
"destlang": "ja",
"password": "",
"apikey": "",
"custom": "",
"domainhidden": "general",
"srclanghidden": "en",
"destlanghidden": "ja",
"basemodelhidden": "en-tr",
"customhidden": "",
"filetype": "forcedglossary",
"trainid": "",
"lgparams2": true,
"neural": false,
"default-endpoint": true,
"service-endpoint": "https://gateway.watsonplatform.net/language-translator/api",
"x": 370,
"y": 200,
"wires": [
[
"2e245bef.5f4334",
"21d87e07.143482"
]
]
},
{
"id": "21d87e07.143482",
"type": "http response",
"z": "bec2a13.2c4746",
"name": "",
"statusCode": "",
"headers": {},
"x": 710,
"y": 200,
"wires": []
},
{
"id": "875809e1.6f0388",
"type": "change",
"z": "bec2a13.2c4746",
"name": "",
"rules": [
{
"t": "set",
"p": "payload",
"pt": "msg",
"to": "payload.text",
"tot": "msg"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 360,
"y": 100,
"wires": [
[
"2428c962.672486"
]
]
}
]
２. Node-REDの画面右上のハンバーガーメニューから「読み込み」をクリック
３. １でコピーしたJSONフォーマットをペーストし、「読み込み」をクリック
４. 以下ように表示されれば読み込み完了です！
５. 最後に必ずデプロイをクリック！！
Noodlでのフロー構築
Text inputに入力されたテキスト（apple）をRESTノードへ送り、Enterキーが押されたらcomfirmedがtrueになり、翻訳されたテキスト（リンゴ）がFetchされます。
RESTノードの設定
下の画像のように設定します。
Endpointには、下画像の赤い部分（隠してありますが、本当はリンクがあります）から飛んだページのURLを設定してください。
プロジェクトファイルのダウロード
GitHubの公開リポジトリにプロジェクトファイルがあります。
ダウンロードしてNoodlで開いていただくとフローが編集できます。
ご自由にお使いください（^-^）
https://github.com/pentake/Noodl-api-translation
注意
api_laguage_translationというフォルダの中にproject.jsonというファイルが入っています。
Noodl（バージョン1.3.1）から開く時は、Add external projectからapi_laguage_translationフォルダを選択してプロジェクトを開いてください（project.jsonは選択できません）
おわりに
ほとんどコーディングをしなくてもAPIを利用したアプリケーションが構築できてしまう所にNoodlとNode-RED連携のスゴさを感じました！（コーディングは、NoodlのRESTノードのscriptに３行くらいJavaScriptを記述したくらいです）
これからもNoodlとNode-REDに目が離せませんね...！