Node-REDのノードの日本語化でOSSコミュニティへ貢献してみよう

© Hitachi, Ltd. 2020. All rights reserved.
日立製作所 OSSソリューションセンタ
2020/10/23
横井一仁
Node-REDのノードの日本語化で
OSSコミュニティへ貢献してみよう

横井一仁 (よこいかずひと)
• GitHub上のNode-REDプロジェクトの開発メンバー
• Node-REDのノード開発ツールNode generatorのメンテナ
• Node-RED日本ユーザー会の運営メンバー
Node-REDプロジェクトのページ
https://github.com/orgs/node-red
自己紹介
1

Node-RED開発者へNode-REDの日本語化を試したことを紹介したところ、
Pull requestを出して欲しいとお願いされ、貢献のきっかけになった。
Node-RED貢献のきっかけ: フローエディタの日本語化
2
多言語対応はメッセージを
カタログに移動させるだけの
長く辛い仕事でした。
しかし、それを行ったことで
日立が日本語の翻訳で
開発に参加してくれました。
その後、中国語、韓国語の
翻訳も入りました。
開発者インタビューの内容
https://changelog.com/jsparty/95
Node-REDの開発ストーリーで
この出来事が紹介されました。

１. Hacktoberfestとは
3

DigitalOcean社、Intel社、DEV社が主催する10月限定のOSS貢献イベント
• Hacktoberfestのトピックがついているリポジトリに4つPull requestを出し、
マージされると、記念品としてTシャツやステッカーが贈られる。
• リポジトリ管理者に、後からトピックやラベルをつけて頂き、
Hacktoberfestの対象にして頂く事もできる。
https://hacktoberfest.digitalocean.com
Hacktoberfestとは
4

(1) トップページの”START HACKING”ボタンをクリック
(2) 必要事項(国など)を入力し、説明動画を確認すると、登録完了
(3) コントリビューション状況の画面に行くと、現在の進捗を確認できる
参加登録方法、進捗画面の確認方法
5
現在の進捗の画面
審査中も
含む進捗
審査中
Hacktoberfest
対象外リポジトリ
14日後に了承されると
Acceptedになる

https://github.com/topics/hacktoberfest にアクセスすると
hacktoberfestトピックがついたリポジトリを検索できる。
Hacktoberfestの対象リポジトリの見つけ方
6
Node-RED公式、
日本Node-REDユーザー会、
産業オートメーションフォーラム、
Nexmo、 MindSphereなどの
リポジトリがHacktoberfestの対象
HacktoberfestトピックがついたNode-RED関連のリポジトリ

２. 日本語化で貢献するノードを見つけよう
7

お気に入りのノードが公式ノードのリポジトリにあるか確認してみよう。
Node-REDプロジェクト公式ノードのGitHubリポジトリ
8
# 種類 GitHubリポジトリノードの例
1 追加ノード https://github.com/node
-red/node-red-nodes
node-red-node-smooth、
node-red-node-pi-sense-hat、
node-red-node-serialport、
node-red-node-twilio、
node-red-node-mongodb、
node-red-node-mysql、
node-red-node-redis、
node-red-node-sqlite、
node-red-node-suncalc、
node-red-node-exif
2 ウェブサービスと
接続するためのノード
https://github.com/node
-red/node-red-web-nodes
node-red-node-google、
node-red-node-
openweathermap
3 Node-REDダッシュ
ボード用の追加ノード
https://github.com/node
-red/node-red-ui-nodes
node-red-node-ui-lineargauge、
node-red-node-ui-microphone、
node-red-node-ui-table

サードパーティノードのGitHubリポジトリは、
フローライブラリ(https://flows.nodered.org)のリンクから参照できます。
https://flows.nodered.org/node/node-red-contrib-tensorflow
サードパーティノードのリポジトリ
9

３. ノードを日本語化する手順
10

ローカル環境構築が難しい方は、Google CloudのCloud Shell環境をご準備ください。
(1) Cloud Shell環境にブラウザーからアクセス
https://ssh.cloud.google.com/
(2) Node-REDのインストールと起動
ターミナル上で下記コマンドを実行
$ npm install –g node-red
$ node-red –p 8080
(3) Node-REDフローエディタへアクセス
「ウェブでプレビュー」アイコンをクリック
->「ポート8080でプレビュー」を開く
環境構築1: GCP Cloud ShellにNode-REDをインストール
11
(4) Cloud Shellのエディタ上で
隠しファイルを表示
エディタメニューの「View」
->「Toggle Hidden Files」を選択
->.node-redディレクトリ以下が
表示される

ローカル環境を用いる場合は、下記の通りご準備をお願いします。
(1) Node.jsのインストール
下記サイトからLTSの推奨版Node.jsをダウンロードして、インストール
https://nodejs.org/ja/
(2) Node-REDのインストールと起動
コマンドプロンプト上で下記コマンドを実行
> npm install –g node-red (macOSの場合はターミナル上でsudoを付けて実行)
> node-red
(3) Node-REDフローエディタへアクセス
ブラウザーからhttp://localhost:1880を開く
(4) Visual Studio Codeなどのテキストエディタをインストール
※Node-REDインストール済の環境では、既存環境を壊してしまうかもしれないため
<ユーザーホーム>¥.node-redディレクトリのバックアップをお願いします。
環境構築2: Node-REDとテキストエディタのインストール
12

(1) Node-REDフローエディタ右上のハンバーガーメニューから、
「パレットの管理」->「パレット」->「ノードを追加」を選択し、
検索窓にノード名を入れて、対象のノードをインストール
(2) .node-redディレクトリ内のnode_modules以下にインストールされる。
日本語化したいノードをNode-REDへインストール
13
ノードのインストール画面インストールされたファイル

ノードで日本語化できる部分は主に以下の4つ
• ノードプロパティUI (以後、本UIの日本語化の方法を説明)
• 情報タブに表示されるノードのヘルプ
• ステータスに表示するメッセージ
• コンソールに出力するメッセージ
https://nodered.jp/docs/creating-nodes/i18n
ノードの日本語化の方法
14
詳細は国際化のドキュメントに
掲載されています

~/.node-red/node_modules/node-red-contrib-<ノード名>に
以下のファイルが配置される。
ノードを構成する主なファイル
15
- package.json
- <ノード名>.js # ランタイム側で実行されるコードのJavaScriptファイル
- <ノード名>.html # エディタ側の外観を記載したHTMLファイル
(ノードプロパティUI、ノードのヘルプ)
- locales
+- en-US
+- <ノード名>.json # ノードプロパティUIのメッセージカタログ(英語)
+- <ノード名>.html # ノードのヘルプ(英語)
+- ja
+- <ノード名>.json # ノードプロパティUIのメッセージカタログ(日本語)
+- <ノード名>.html # ノードのヘルプ(日本語)
- LICENSE
- README.md
※赤色は今回の日本語化での編集対象のファイル

ノードのHTMLファイルに記載されているメッセージを変数化し、ブラウザー
の表示言語に応じ英語と日本語のメッセージカタログを参照する様に修正
ノードの日本語化の修正手順
16
IP address:
Name:
日本語メッセージ
カタログ
ipaddr: “IPアドレス”,
name: “名前”
英語メッセージ
カタログ
ipaddr:
name:
ipaddr: “IP address”,
name: “Name”
直接記載されている
英語メッセージ
(1)英語メッセージ
部分を変数化
(2)変数と対応する
各言語ファイルを作成
修正前修正後
ノードの
HTMLファイル
ノードのHTMLファイル
フローエディタが
自動的に選択

英語メッセージ部分を、参照先変数を入れた<span>タグに置き換える
https://github.com/node-red/node-red-nodes/pull/657/files
HTMLファイルの修正例
17
Node-REDに用意されている
メッセージを用いるケース
<span>タグを用いて
置き換える典型的なケース
placeholderを
変更するケース

変数と対応する英語と日本語を記載した、メッセージカタログを作成
-> ファイルを編集後、Node-REDをCtrl+cで終了し、再度起動。
その後、ブラウザーをリロードすると、日本語メッセージが表示される。
メッセージカタログのJSONファイルの作成例
18
日本語メッセージカタログ
(locales/ja/<ノード名>.json)
英語メッセージカタログ
(locales/en-US/<ノード名>.json)
元の英語
を記載
日本語訳
を記載

• 多言語対応(日本語、中国語、韓国語など)
• 品質向上(バグ修正、テストケース作成、テストフレームワーク提案)
• Windows対応(macOSのみで開発するケースも多いため
Windowsで動作検証できるノウハウは貴重)
• 性能向上(ボトルネック分析、性能向上方式)
-> 得意な所から貢献を始めてみよう。
取り組みやすい事が分かってきた他の貢献ポイント
19

４. Node-REDプロジェクトで用いているツール紹介
20

Node-RED開発者とユーザーとのリアルタイムなコミュニケーションツール
• generalチャンネルは現在8316名が参加
• プロジェクトを共有するshare-your-projectsチャンネル
• 日本語で議論できるjapanチャンネル
https://nodered.org/slack/
Slack(チャットツール)
21

スクリーンショットやログを貼り付けた説明に向いているため、
主に詳細なバグ報告や新機能提案などに適した掲示板
https://discourse.nodered.org/t/since-version-1-0-japanese-inline-input-has-become-difficult-to-use/19009
https://discourse.nodered.org/t/web-of-things-support-for-node-red-nodegen/6545
フォーラム(掲示板)
22
ユーザーからのバグ報告新機能提案

カンバンボードを用いて開発の状況を共有
• Node-RED本体の開発では、主にTrelloを使用
• 単体機能やサブプロジェクトの開発では、GitHub projectsを利用
https://trello.com/b/R0O3CSrI/node-red-whiteboard
https://github.com/node-red/node-red/projects/2
Trello、GitHub Projects(カンバン)
23
GitHub projects
Trello

CIツールとしてTravisを利用
テストが成功した場合はGitHubのコミットに緑色のチェックが付く、
失敗した場合は、赤色の×印が付くため、開発者は容易に識別可能
Travis CIの実行結果
https://travis-ci.com/github/kazuhitoyokoi/node-red-contrib-tensorflow
Travis CI(CIツール)
24
異なるOS、異なるバージョンの
Node.jsでのテストをコミット毎に
実行することで品質確保

テストケースがカバーしているカバレッジを確認できるサービスと連携
• コミット毎のカバレッジをサイトから確認可能
• ファイル毎、ディレクトリ毎にカバレッジが上下した部分を確認可能
https://coveralls.io/builds/29407838
Coverall(コードカバレッジ)
25

Node-REDのノードの日本語化でOSSコミュニティへ貢献してみよう

• GitHub is a registered trademark of GitHub Inc.
• Intel is a registered trademark of Intel Corporation.
• Nexmo is a registered trademark of Nexmo Inc.
• Google is a registered trademark of Google LLC.
• Visual Studio Code and Windows are registered trademarks
of Microsoft Corporation.
• macOS is a registered trademark of Apple Inc.
• Slack is a registered trademark of Slack Technologies, Inc.
• Trello is a registered trademark of Trello, Inc.
• Travis CI is a registered trademark of Travis CI GmbH.
• Coverall is a registered trademark of Coverall North America Inc.
Other brand names and product names used in this material
are trademarks, registered trademarks,
or trade names of their respective holders.
商標について
28

Node-REDのノードの日本語化でOSSコミュニティへ貢献してみよう

More Related Content

What's hot (20)

Similar to Node-REDのノードの日本語化でOSSコミュニティへ貢献してみよう (10)

More from Hitachi, Ltd. OSS Solution Center. (20)

Node-REDのノードの日本語化でOSSコミュニティへ貢献してみよう