Hacktoberfest 概要、Node-REDプロジェクト貢献手順

© Hitachi, Ltd. 2021. All rights reserved.
株式会社日立製作所 OSSソリューションセンタ
2021/10/5
横井一仁
Hacktoberfest概要、
Node-REDプロジェクト貢献手順

1
横井一仁 (よこいかずひと)
所属: Node-REDプロジェクトの開発メンバー、
Node-RED User Groupの運営メンバー、
日立製作所 OSSソリューションセンタ
実績: Node-RED貢献ランキング世界4位
世界最大級のカンファレンス登壇3回
• Node+JS Interactive 2018
• Open Source Summit Japan 2020
• OpenJS World 2021
• Node-RED Con 2021も登壇予定
自己紹介
https://www.youtube.com/watch?v=3_7BikDCXk8
Node+JS Interactive登壇の様子

2
本日のイベントが紹介されました
https://hacktoberfest.digitalocean.com/events https://codezine.jp/article/detail/14846
Hacktoberfestのイベントページ CodeZineに掲載して頂いた記事

１. Hacktoberfestとは
２. OSS貢献の体験談
３. 不具合修正の手順
コンテンツ
3
４. ノード部品の日本語化の手順

4
１. Hacktoberfestとは

5
昨年はオンラインで17万名が参加した10月限定のOSS貢献イベント
• Hacktoberfestトピックがある
リポジトリに4つPull requestを出し
マージされると、記念品として
Tシャツとステッカーが贈られる
• リポジトリ管理者にトピックや
ラベルをつけて頂き、
後からHacktoberfestの
対象にして頂く事もできる
Hacktoberfestとは
https://hacktoberfest.digitalocean.com
Hacktoberfest公式ページ

6
10月 11月 12月
2022年
1月
2月
昨年は、以下のスケジュールで進められた
Hacktoberfestイベントのスケジュール
10月31日までに
4件マージ
メールを受信後、
住所を登録
自宅に記念品が届く

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

8
https://github.com/topics/hacktoberfest?q=node-red にアクセスすると
HacktoberfestトピックがついたNode-RED関連のリポジトリを検索できる
Hacktoberfestの対象リポジトリの見つけ方
Node-RED公式、
Node-RED User Group、
産業オートメーションフォーラム
などのリポジトリが存在
Hacktoberfestトピックがついたリポジトリ

9
２. OSS貢献の体験談

10
Node-RED開発者に日本語化したフローエディタを見せたところ、
Pull requestを出してほしいと依頼を頂いたのがきっかけ
OSS貢献のきっかけ
日本語化
してみた
ぜひプルリク
してほしい
マージ
された!
(1) 雑談で提案 (2) プルリクエスト提出
(3) マージ (4) リリースを待つ (5) リリース
自分のコードが
動いている!

11
開発者インタビューで
日本語化の貢献が紹介されました
Node-RED開発者側も嬉しかった
開発インタビューの内容
https://changelog.com/jsparty/95
多言語対応はメッセージを
カタログに移動させるだけの
長く辛い仕事でした。
しかし、それを行ったことで
日立が日本語の翻訳で
開発に参加してくれました。
その後、中国語、韓国語の
翻訳も入りました。

12
• Hacktoberfestは、OSS貢献を気軽に楽しめるイベント
• Node-RED User Groupでは、毎年オンラインで
コミュケーションを取り、Hacktoberfestイベントへ参加
OSS貢献を楽しめるHacktoberfest
https://twitter.com/iganari_/status/1180369486135865344 https://twitter.com/1ft_seabass/status/1319589968705064960
OSS貢献のやりがい SNSで進捗共有皆で集まり開発

13
• エンジニア同士でお互いに技術を学び、エンジニアとして成長できる
• 全世界のデバイス、クラウド環境で自分のコードが動く達成感
• 国内外で人脈を広げることができる
• 海外の一流のエンジニアから、必要とされると嬉しい
OSSに貢献するメリット
品質
向上
ユーザ
コミュニティ
運営
貢献ルール作成
書籍出版
ロードマップ作成
日本ならではの
貢献が沢山ある
OSS開発者の活動
にも影響できる
開発
コミュニティ
リード
機能開発
日本語対応

14
３. 不具合修正の手順

15
Node-REDでは、以前は表示できていたUIが新バージョンで表示されない時がある
フローエディタの不具合例
https://github.com/node-red/node-red/issues/3045 https://github.com/node-red/node-red/issues/2975
https://github.com/node-red/node-red/issues/1876 https://github.com/node-red/node-red/issues/2946
ノード間の
幅が異なる
HTMLが
表示される
ノード間の
幅が異なる
ノードの色が
黒になる
ボタンが全て
表示されない
-> これらの不具合は、git bisectコマンドで問題が生じたコミットを特定できる

16
git bisectコマンドのウィザードに従って、問題あり/なしを回答するだけで、
二分探索で効率良く不具合が生じたコミットを特定可能
不具合が生じたコミットを特定する方法
問題がある
バージョン
問題がない
バージョン
1回目の
動作確認
(1) git clone https://github.com/node-red/node-red.git; cd node-red
(2) git bisect start 2.0.6 2.0.5
(3) npm install; npm run build; npm start
(4) git bisect good (問題なし) / git bisect bad (問題あり)
-> 以降、(3)(4)の繰り返し
2回目の
動作確認
3回目で
特定
Node-RED v2.0.5～
v2.0.6の間で生じた
不具合を特定する例

17
• 不具合が生じたコミットのソースコードを確認し、不具合を修正
• フォークしたリポジトリに修正したコミットを追加、プルリクエスト提出
不具合修正の例
https://github.com/node-red/node-red/commit/ea2e3f25d8d505a939d97a1d65535e1db9153bd3#diff-
8a2fbcfdd3643b20bce98d34d49bf7f377348565860dd0b9ac9dfc16a85ac0b2R137 https://github.com/node-red/node-
red/commit/372122037fa0ff514d05152c27d60d96110223f5#diff-8a2fbcfdd3643b20bce98d34d49bf7f377348565860dd0b9ac9dfc16a85ac0b2R137
不具合が生じたコミット修正したコミット
最後のノードの下に
追加する余白が
最初のノードの下に
追加されている「first」を「last」に修正し、
最後のノードの下に余白を追加

18
• 問題の解決方法が複数ある場合もあるため、修正コードとは別にIssueを投稿
• Issueを確認する人が再現できるように、問題が生じる環境や手順を記載
• 期待する動作、スクリーンショットも貼り付けるも伝わりやすい
• プルリクエストには、Issueの番号を記載して紐づけ
不具合の報告の提出方法
不具合報告 (Issue) の例プルリクエストの例
https://github.com/node-red/node-red/issues/2946 https://github.com/node-red/node-red/pull/2947

19
４. ノード部品の日本語化の手順

20
• フローライブラリのリンクからGitHubリポジトリを参照可能
• node-red-node-smooth、node-red-node-twilio、node-red-node-redis、
node-red-node-suncalc、node-red-node-exif、node-red-node-openweathermap
などの日本語未対応の公式ノードがお勧め
日本語化で貢献するノードを見つけよう
https://flows.nodered.org/node/node-red-node-exif https://github.com/node-red/node-red-nodes/tree/master/utility/exif
フローライブラリのリンクをクリック貢献対象のGitHubリポジトリ

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

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

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

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

25
英語メッセージ部分を、参照先変数を入れた<span>タグに置き換える
HTMLファイルの修正例
https://github.com/node-red/node-red-nodes/pull/657/files
<span>タグを用いて
置き換える
置き換え対象の

26
変数と対応する英語と日本語を記載した、メッセージカタログを作成
メッセージカタログのJSONファイルの作成例
日本語メッセージカタログ
(locales/ja/<ノード名>.json)
英語メッセージカタログ
(locales/en-US/<ノード名>.json)
元の英語
を記載
日本語訳
を記載

27
上手く修正できると言語設定に応じて英語と日本語のメッセージが切り替わる
日本語化されたノードプロパティUI
日本語化されたノードプロパティ
英語のノードプロパティ
英語
メッセージ
日本語
メッセージ

28
• Node-REDプロジェクトのリポジトリは、
Hacktoberfestの対象のため、貢献を始めやすい
• Hacktoberfestのイベントをきっかけとして、OSS貢献をはじめてみよう
まとめ

30
• Node-RED、Node.jsは、米国その他の諸国における
OpenJS Foundationの登録商標です。
• GitHubは、米国その他の諸国におけるGitHub Inc.の登録商標です。
• その他記載の会社名、製品名などは、
それぞれの会社の商標もしくは登録商標です。
商標について

Hacktoberfest 概要、Node-REDプロジェクト貢献手順

More Related Content

What's hot

Similar to Hacktoberfest 概要、Node-REDプロジェクト貢献手順

More from Hitachi, Ltd. OSS Solution Center.

Hacktoberfest 概要、Node-REDプロジェクト貢献手順