JavaScript
Node.js
Bluemix
node-red
ibmcloud
Node-REDDay 25

Node-REDのノードを日本語表示に対応させる手順

今回は、Node-REDの公式ドキュメントの内容を参考にして、英語しか表示できないノードのプロパティ画面を日本語で表示できるようノードを改造してみます。例えば、WatsonのVisual Recognitionノードを日本語化すると以下の様なプロパティ画面になります。

  • Before: 従来の英語表示 image.png  
  • After: 日本語対応後の表示 image.png

日本の様にローカル言語がメインで使われている国では、ノードをローカル言語に対応させると多くのユーザにとって扱いやすいものになると思います。それでは、以降でノードの改造手順を紹介します。

開発準備: ノードのGitHubリポジトリをforkする

まず、Node-REDのフローライブラリにアクセスして日本語化を行いたいノードを検索し、GitHubリポジトリを特定します。今回はWatsonノードを例とするため、キーワード「watson」を用いて検索し、Watsonノードのページを開きます。ノードのページの右側にある「View on GitHub」のリンク先がノードのGitHubリポジトリです。

image.png

ノードのGitHubリポジトリへ移動した後、右上の「Fork」ボタンをクリックし、自分のGitHubアカウントへリポジトリをコピーします。

image.png

今回は、GitHubのエディタ機能を用いてブラウザ上でノードの改造を行います。もちろんgit cloneを実行してローカルで開発しても大丈夫です。

ノードの改造手順

ノードのプロパティ画面が実装されているHTMLファイルに対して、以下の修正1~3を実施します。

internationalizenodes.png

修正1では、HTMLファイルにハードコードされている英語ラベルをJSON形式の言語ファイルに移動します。同時に修正2にて、英語ラベルが記載されていた部分を変数化し、言語ファイルを参照するようにします。最後に修正3で、英語と同じJSON形式の日本語の言語ファイルを作成します。修正後のファイル構成にすると、Node-REDのフローエディタがブラウザの表示言語に従って言語ファイルを切り替えてくれます。以降で実際にGitHub上で修正1~3を行ってみます。

修正1: ノードのHTMLファイルに記載されている英語ラベルを英語言語ファイルへ移動する

ノードのJavaScriptファイルが存在するディレクトリのページへ移動した後、「Create new file」をクリックし、「locales/en-US/<ノードと同じファイル名>.json」のパスにファイルを新規に作成します。

image.png

Visual Recognitionノードの場合は、「services/visual_recognition/v3.html」がノードのJavaScriptファイルですので、まず「services/visual_recognition」ディレクトリに移動した後、「Create new file」をクリックし「locales/en-US/v3.json」というパスを入力してファイルを作成します。ファイルにはv3.htmlから英語ラベルを取り出し、以下の様なJSONデータを記述します。

image.png

一般的に、ルートの属性名は「区切りを大文字にしたノード名(例: visual-recognition -> visual Recognition)」、2階層目の属性は「label」、3階層目に「区切りを大文字にした属性名(例: Classify an image -> classifyAnImage)」と「ノードのプロパティ画面に表示するラベル」を記述します。

修正2: ノードのHTMLファイルに英語ラベルが記載されていた部分を変数化する

修正1の作業と並行して、ノードのJavaScriptファイルに対して、英語ラベルを取り出した部分を変数に置き換えます。公式サイトのドキュメントでは、以下の様に説明されています。

image.png

英語ラベルがあったタグに

data-i18n="<言語ファイルのJSONのパス>"

をの属性を追加すれば良いようです。また、切り出した文字列の前に空白を含む場合は、空白を残し、

<span data-i18n="<言語ファイルのJSONのパス>"></span>

に置き換えます。もし入力欄の背景文字を扱いたい場合は、

data-i18n="[placeholder]<言語ファイルのJSONのパス>"

をタグの属性に記載します。例えばVisual Recognitionノードの場合は、以下の様な置換となります。

image.png

修正3: 日本語言語ファイルに日本語ラベルを記載

修正1の操作と同様に、GitHub上にて「Create new file」をクリックし、ノードのJavaScriptファイル以下の「locales/ja/<ノードと同じファイル名>.json」のファイルを新規に作成します。JSONの構造は英語言語ファイルと同じにし、英語ラベルが記載されいた値の部分に日本語ラベルを記載します。例えば、Visual Recognitionノードの場合は、以下の様なJSONファイルとなります。

image.png

Node-REDフローエディタ上で日本語が表示されるか確認

最後にIBM Cloud版Node-REDを用いて、日本語化したノードが正しく表示されるかを確認してみます。まずいつもの(?)様にNode-RED StarterからNode-REDのインスタンスを作成します。IBM Cloudのアカウントは、クレジットカード不要で無料で利用できるライトプランでも大丈夫です。

image.png

インスタンス作成後、継続的デリバリーを有効化し、ブラウザ上で動くエディタであるEclipse Orion Web IDEに入ります。

image.png

Web IDE上でpackage.jsonを開き、14行目のWatsonノードを読み込む部分

"node-red-node-watson":"0.x",

を自分のGitHubリポジトリ

"node-red-node-watson":"git+https://github.com/zuhito/node-red-node-watson.git",

に書き換えます。最後に、「ファイル」->「保存」をクリックし、ファイルの内容を保存します。次に、Web IDEの左側にあるgitアイコンをクリックします。

image.png

この画面で、IBM Cloud内のGitlabへ修正内容を反映させます。まず、Gitコミットメッセージを入力し、右上の「コミット」ボタンをクリックした後、「プッシュ」をクリックします。次に、デプロイ状況を把握するため、左側にある左向きの矢印をクリックし、Delivery Pipelineの画面に移動します。

image.png

順調にNode-REDのインスタンスが作られている様ですね。5分ほど待つとインスタンスが作成されるので、表示されたURLをクリックし、Node-REDフローエディタへ移動します。

image.png

リンク先はいつものNode-REDのフローエディタの様ですが、Visual Recognitionノードを配置してプロパティ画面を開くと、日本語ラベルで表示されます。

image.png

もちろん、ブラウザの表示言語を英語にすると、従来通り英語で表示されます。
上手く動作したらフォーク元のリポジトリへPull requestを出して本家に取り込んでもらいましょう。一度、変数化を行うと英語、日本語以外の言語も言語ファイルを用意するのみで対応できるようになり、他のローカル言語を使う開発者が他のローカル言語に対応しやすくなります。ぜひ色々なノードの日本語化をしてみてください。