Node-RED で遊んでみる第五歩: ダッシュボードを使って簡単な翻訳アプリを作成してみた

自分メモを兼ねた [Node-RED](https://nodered.org/) で遊んでみた的なやつ、5投稿目になります。これまでの投稿はコチラ。

* [Node-RED で遊んでみる第一歩: Web ページを表示してみる](https://qiita.com/yamachan360/items/e3c552c1d2e83e5bf602)
* [Node-RED で遊んでみる第二歩: 配列を加工してみる](https://qiita.com/yamachan360/items/795095a77a45766ebdec)
* [Node-RED で遊んでみる第三歩: function ノードにおける変数の有効範囲](https://qiita.com/yamachan360/items/93d530e18d2ccd62caef)
* [Node-RED で遊んでみる第四歩: Web REST API で禅の言葉をゲットして日本語に翻訳してみる](https://qiita.com/yamachan360/items/266d4e55b636659034cc)

今回は Node-RED のダッシュボードを使って、簡単な翻訳アプリを作成してみましょう。

# ダッシュボードの準備

Node-RED エディタを開きます。左のパレットに dashboard が無かったら「パレットの管理」メニューを開き、「node-red-node-dashboard」ノードを追加します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/1923b910-626d-126e-55a4-c2cb5a4ce04a.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/ee8360ec-6a57-d4bd-e712-6256f9963ee4.png)
追加中に以下のような確認が表示されました。特に問題なく追加されるようですが、「ノードの情報」のリンク先は参考になるので、いったんクリックして [ブックマーク](https://flows.nodered.org/node/node-red-dashboard) しておくと良いとおもいます。英語ページですが…
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/4cc1392e-96ef-afde-0a3a-98a0f5a44389.png)
ver2.10.1 では以下の16種類のノードが追加されました。種類豊富ですね！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/233a843d-dbb8-28ca-bd76-1169fa9fc25a.png)

# ダッシュボードの管理

左のパレットだけでなく、右のコンソールにも dashboard メニューが追加されたことにお気づきでしょうか？ここがダッシュボードの管理メニューです。

「配置」のタブはまだ空ですが、ここでタブを追加したり、各ノードの配置を管理します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/b5138c37-8a2e-fe30-ae2b-c08bc85b1baa.png)
「サイト」のタブはダッシュボードの基本的な設定のようです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/bb9a4b79-99ae-31a2-58f2-5d2611fb3c3a.png)
そして「テーマ」タブは見た目に関する部分ですね。そしてその右にあるアイコンから、実際のダッシュボードにアクセスできます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/c7973860-1682-3c4f-62c8-d3585144ef2c.png)
上記のアイコンをクリックして表示されたのは以下のようなページでした。ダッシュボード用のノードを追加していない初期状態では、このようなメッセージが表示されるようになっているみたいですね。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/cab600e1-8042-24ed-7f98-180b7090c576.png)

# text ノードの追加と配置

では空のフローを用意して、inject ノードと、ダッシュボードの text ノードを配置し、繋ぎます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/fc11d62f-04fb-8581-d819-8e38be421154.png)
inject ノードのペイロードを文字列形式にし「英語から日本語に翻訳」というテキストを設定します。また起動後に自動実行するチェックボックスをonにします。ペイロードが長いので「description」と名前も付けておきましょう。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/d3405762-d7fe-1654-514a-820756a36183.png)
フローは以下のようになります。まだ text ノードに赤いエラーが表示されていますね。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/1859507d-b26e-8976-322d-84fb4cee155e.png)
text ノードの設定を開くと、どうやらグループの設定が必要なようです。鉛筆のアイコンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/e5ebe05e-5e36-67f6-2a81-31eeecfa74e0.png)
するとグループの追加画面になるのですが、今度はタブが必要なようです。また鉛筆のアイコンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/5f186109-b3b1-0761-38a3-1fced6001bb0.png)
するとタブの追加画面になるのですが、これはそのままで良さそうです。「追加」ボタンを押してタブを作成しましょう。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/76de63e4-639e-99a7-d1f4-c1cf0402e468.png)
するとさきほどのグループの追加画面に戻るので、ここでも同様に「追加」ボタンを押してグループを作成します。

これでやっと text ノードの設定画面に戻ります。グループの欄にさきほど作成したグループ(デフォルト)と、タブ(ホーム)が設定されていますね。「完了」で設定を終了しましょう。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/22d9d12d-09d8-4766-0b9c-820ba4867194.png)
タブとグループが設定されて満足したのか、text ノードの赤いエラーが消えました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/38047162-3bb7-1ba1-edb8-a20b549f833a.png)
ここで右の dashboard コンソールの「配置」タブも確認しておきましょう。さきほど作成した「ホーム」タブ、「デフォルト」グループ、そして text ノードが親子関係としてツリー上に表示されています。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/51e55a7e-e5da-4ff2-58e2-090f3399e0e8.png)
さてデプロイして、ダッシュボードを確認してみましょう。配置されたテキストがちゃんと表示されているのが確認できます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/6d07cf2d-d99d-f1a2-f284-452cd8e2f12c.png)

# グループ名を変更する

実際の表示を見ると、「デフォルト」というグループ名はちょっと間抜けですね。変更しちゃいましょう。

右の dashboard コンソールの「配置」タブで、グループのところにマウスを近づけると「編集」ボタンが表示されますので、これをクリック。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/6dd24b85-9113-15cd-21a1-4ce02f07d3af.png)
グループの設定画面になりますので、名前を「翻訳アプリ」に変更して「更新」で反映します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/377ce537-5c79-0758-ea8e-259bb74e1f73.png)
デプロイして、ダッシュボードの表示が修正されていることを確認しましょう。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/b5f5250c-0ff3-db4e-5235-c640e47849b5.png)

# テキスト表示を修正する

「英語から日本語に翻訳」の左に表示されている「text」も邪魔ですね。

text ノードの設定を開き、ラベル欄を空にします。またレイアウトを中央ぞろえのものに変更しましょう。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/81737dd0-3592-6ebb-37b5-d1d2ca80344c.png)
デプロイして、ダッシュボードの表示が修正されていることを確認しましょう。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/ef8df355-af21-2ed5-3942-ac6245409111.png)

# text input ノードを使ってみる

とりあえず、今あるフローの下にダッシュボードの text input ノードと、text ノードを並べて繋げてみます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/bbc8f20f-354a-c37c-9be9-e6efbab293b6.png)
それぞれ赤いエラーが出ていますので、設定を開いて、そのまま何もせずに「完了」で閉じればエラーは消えます。こんな感じに。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/9dd4c115-cdb9-204d-fb2c-921afae96097.png)
そして右の dashboard コンソールの「配置」タブにこれらノードが追加されているのが確認できます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/22ad9910-4091-7781-10bd-549a35bd9f7b.png)
デプロイして、ダッシュボードの表示を確認すると、ちゃんと表示されています！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/52229754-c935-99df-24cf-627949112229.png)
しかも text input の欄に入力すると、ちゃんと下の text 欄に表示されるんですよ！もう動いてる。ダッシュボード、恐るべし！ですよ。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/62240e52-769c-69d9-dff6-4505dfe89b6d.png)

# 表示を少し修正

動作には関係ありませんが、さきほど追加した text input ノードのラベルが空なので「英語」を設定し、text ノードのラベルを「日本語」に設定しておきましょう。名前を設定していないため、フローには以下のようにラベルが表示されるようです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/982f1dbb-5b21-15e7-dc11-5f38bdb574af.png)
そしてデプロイすれば、ダッシュボード表示のほうは以下のように変わります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/3e07ad49-d24a-89f0-c42b-5bbc54fd9891.png)
だーいぶ、それっぽい感じになってきましたね！

# 翻訳機能を追加しよう

ここまできたら、もう簡単です。「英語」の text input ノードと、「日本語」の text ノードの間に、英語から日本語に翻訳する設定の language transfer ノードを追加します。私は単に [前回](https://qiita.com/yamachan360/items/266d4e55b636659034cc) のフローからノードをコピーしました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/cc303fec-552a-d0de-3fc8-2ebdd0ce98cc.png)

え、[前回](https://qiita.com/yamachan360/items/266d4e55b636659034cc) って何？知らないよ！という方が多いと思いますので、 [日本語に翻訳してみよう](https://qiita.com/yamachan360/items/266d4e55b636659034cc#%E6%97%A5%E6%9C%AC%E8%AA%9E%E3%81%AB%E7%BF%BB%E8%A8%B3%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86) のセクションを参照して、language transfer ノードをフローに追加してください。

そしてデプロイすれば、ダッシュボード上で翻訳アプリが動き出します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193519/c1c88b6b-4400-21fd-50f5-4041bc4eb33e.png)
最低限の機能しかない翻訳アプリですが、いろいろ拡張できそうですよね。これをベースにいろいろ遊んでみてくださいw

# おわりに

前回に続き、たった5個のノードでアプリっぽい何かが作れてしまいました。Node-RED、そして dashboard はハンパないですね！

なんか楽しくなってきましたw

ではまた！