自分メモを兼ねた Node-RED で遊んでみた的なやつ、5投稿目になります。これまでの投稿はコチラ。
- Node-RED で遊んでみる第一歩: Web ページを表示してみる
- Node-RED で遊んでみる第二歩: 配列を加工してみる
- Node-RED で遊んでみる第三歩: function ノードにおける変数の有効範囲
- Node-RED で遊んでみる第四歩: Web REST API で禅の言葉をゲットして日本語に翻訳してみる
今回は Node-RED のダッシュボードを使って、簡単な翻訳アプリを作成してみましょう。
ダッシュボードの準備
Node-RED エディタを開きます。左のパレットに dashboard が無かったら「パレットの管理」メニューを開き、「node-red-node-dashboard」ノードを追加します。
追加中に以下のような確認が表示されました。特に問題なく追加されるようですが、「ノードの情報」のリンク先は参考になるので、いったんクリックして ブックマーク しておくと良いとおもいます。英語ページですが…
ver2.10.1 では以下の16種類のノードが追加されました。種類豊富ですね！
ダッシュボードの管理
左のパレットだけでなく、右のコンソールにも dashboard メニューが追加されたことにお気づきでしょうか？ここがダッシュボードの管理メニューです。
「配置」のタブはまだ空ですが、ここでタブを追加したり、各ノードの配置を管理します。
「サイト」のタブはダッシュボードの基本的な設定のようです。
そして「テーマ」タブは見た目に関する部分ですね。そしてその右にあるアイコンから、実際のダッシュボードにアクセスできます。
上記のアイコンをクリックして表示されたのは以下のようなページでした。ダッシュボード用のノードを追加していない初期状態では、このようなメッセージが表示されるようになっているみたいですね。
text ノードの追加と配置
では空のフローを用意して、inject ノードと、ダッシュボードの text ノードを配置し、繋ぎます。
inject ノードのペイロードを文字列形式にし「英語から日本語に翻訳」というテキストを設定します。また起動後に自動実行するチェックボックスをonにします。ペイロードが長いので「description」と名前も付けておきましょう。
フローは以下のようになります。まだ text ノードに赤いエラーが表示されていますね。
text ノードの設定を開くと、どうやらグループの設定が必要なようです。鉛筆のアイコンをクリックします。
するとグループの追加画面になるのですが、今度はタブが必要なようです。また鉛筆のアイコンをクリックします。
するとタブの追加画面になるのですが、これはそのままで良さそうです。「追加」ボタンを押してタブを作成しましょう。
するとさきほどのグループの追加画面に戻るので、ここでも同様に「追加」ボタンを押してグループを作成します。
これでやっと text ノードの設定画面に戻ります。グループの欄にさきほど作成したグループ(デフォルト)と、タブ(ホーム)が設定されていますね。「完了」で設定を終了しましょう。
タブとグループが設定されて満足したのか、text ノードの赤いエラーが消えました。
ここで右の dashboard コンソールの「配置」タブも確認しておきましょう。さきほど作成した「ホーム」タブ、「デフォルト」グループ、そして text ノードが親子関係としてツリー上に表示されています。
さてデプロイして、ダッシュボードを確認してみましょう。配置されたテキストがちゃんと表示されているのが確認できます。
グループ名を変更する
実際の表示を見ると、「デフォルト」というグループ名はちょっと間抜けですね。変更しちゃいましょう。
右の dashboard コンソールの「配置」タブで、グループのところにマウスを近づけると「編集」ボタンが表示されますので、これをクリック。
グループの設定画面になりますので、名前を「翻訳アプリ」に変更して「更新」で反映します。
デプロイして、ダッシュボードの表示が修正されていることを確認しましょう。
テキスト表示を修正する
「英語から日本語に翻訳」の左に表示されている「text」も邪魔ですね。
text ノードの設定を開き、ラベル欄を空にします。またレイアウトを中央ぞろえのものに変更しましょう。
デプロイして、ダッシュボードの表示が修正されていることを確認しましょう。
text input ノードを使ってみる
とりあえず、今あるフローの下にダッシュボードの text input ノードと、text ノードを並べて繋げてみます。
それぞれ赤いエラーが出ていますので、設定を開いて、そのまま何もせずに「完了」で閉じればエラーは消えます。こんな感じに。
そして右の dashboard コンソールの「配置」タブにこれらノードが追加されているのが確認できます。
デプロイして、ダッシュボードの表示を確認すると、ちゃんと表示されています！
しかも text input の欄に入力すると、ちゃんと下の text 欄に表示されるんですよ！もう動いてる。ダッシュボード、恐るべし！ですよ。
表示を少し修正
動作には関係ありませんが、さきほど追加した text input ノードのラベルが空なので「英語」を設定し、text ノードのラベルを「日本語」に設定しておきましょう。名前を設定していないため、フローには以下のようにラベルが表示されるようです。
そしてデプロイすれば、ダッシュボード表示のほうは以下のように変わります。
だーいぶ、それっぽい感じになってきましたね！
翻訳機能を追加しよう
ここまできたら、もう簡単です。「英語」の text input ノードと、「日本語」の text ノードの間に、英語から日本語に翻訳する設定の language transfer ノードを追加します。私は単に 前回 のフローからノードをコピーしました。
え、前回 って何？知らないよ！という方が多いと思いますので、 日本語に翻訳してみよう のセクションを参照して、language transfer ノードをフローに追加してください。
そしてデプロイすれば、ダッシュボード上で翻訳アプリが動き出します。
最低限の機能しかない翻訳アプリですが、いろいろ拡張できそうですよね。これをベースにいろいろ遊んでみてくださいw
おわりに
前回に続き、たった5個のノードでアプリっぽい何かが作れてしまいました。Node-RED、そして dashboard はハンパないですね！
なんか楽しくなってきましたw
ではまた！