Node-REDのGit機能を学ぶ(5) フローをGitHubからRaspberry Pi 5へダウンロード

　本記事は「Node-REDのGit機能を学ぶハンズオン(第2回)」で紹介した内容です。

https://youtu.be/cUHIQ4a-n98?t=3574

　[前の記事](https://qiita.com/kazuhitoyokoi/items/fa7d1f5259d99999873f)では「画像認識を行なうフロー」をGitHubへアップロードしました。本記事ではGitHub上に共有されているフローをダウンロードする方法を紹介します。ここでは開発環境と本番環境の分離したいケースを例として、Raspberry Pi 5のNode-RED環境にダウンロードしてみましょう。

# アプリ開発における開発環境と本番環境の分離
　産業向けIoT分野では、Node-REDを搭載したエッジデバイスが複数のベンダーから提供されています。これらデバイスでフローを開発する際、多くのフロー開発者はGit機能を有効にしていないデフォルトのNode-RED環境を使ってしまっています。しかし、デバイスは低消費電力や長期稼働向けに作られているため、開発環境に適さない場合があります。性能が低いこともあるため、「フローエディタの動作が遅い」、「デプロイボタンを押した後の待ち時間が長い」などの問題が発生することがあります。デバイスのGit機能を有効にすることで、開発環境と本番環境を分離でき、開発効率を上げることができます。
　この方法では、ます開発者はWindowsやMacなどのPCでフローを開発し、GitHubにアップロードします。その後、GitHubからRaspberry Piの様なデバイスにフローを読み込むことで、デバイス上での開発作業が不要になります。

# Raspberry Piと周辺機器の準備
　この開発例で用いたRapsbbery Piと周辺機器は次の通りです。

・Raspberry Pi 5 Model B (メモリ4GB)
・USBカメラ (UCAM-C310FBBK)
・32GB マイクロSDカード ([64bit版Raspberry Pi OS with desktopイメージ](https://www.raspberrypi.com/software/)を書き込み)
・USB-C ACアダプタ

　単体で使用するには、さらにディスプレイ、マイクロHDMI～HDMIケーブル、USBキーボード・マウスも必要です。画像認識アプリをテストするためマグカップも用意しました。

# Node-REDのインストールと設定
　最新のRaspberry Pi OSには、標準ではNode-REDが含まれていません。そのため、下記サイトに記載されているコマンドを用いて、Node-REDをインストールする必要があります。

https://nodered.jp/docs/getting-started/raspberrypi

## (1) Node-RED のインストールコマンドを実行
　インストーラコマンドを実行するには、Raspberry Pi OSのデスクトップ上でターミナルを開き、次のコマンドを貼り付けます。

```
bash <(curl -sL https://raw.githubusercontent.com/node-red/linux-installers/master/deb/update-nodejs-and-nodered)
```

![20240312_00h16m35s_grim.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/249abd69-2c9b-170d-637d-a8862fe7219d.png)

「Are you really sure you want to do this ? [y/N]?」と「Would you like to install the Pi-specific nodes ? [y/N] ?」の質問に対しては、共に「Yes」を意味する「y」を入力します。

![20240312_00h16m54s_grim.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/f45496db-56f5-95f4-6c2d-b738054633e3.png)

インストール処理は数分かかります。

![20240312_00h16m57s_grim.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/ffb765fe-c6af-b708-56e0-12f764cae336.png)

## (2) Git機能を有効化
　インストール後、「Would you like to customise the settings now (y/N) ?」と表示されるため、「y」を入力します。
　最初にSettings fileの場所を聞かれるため、変更せずそのままエンターキーを押します。
 
![20240312_00h17m57s_grim.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/370cc553-e955-3b3a-05c7-2eed1bbd46a7.png)

　「Do you want to setup user security?」では、「No」を選択します(もし「Yes」を選択すると、Node-REDフローエディタのログイン認証を設定できます)。

![20240312_00h18m01s_grim.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/057714a5-aad8-eaee-2513-3a41de131a8f.png)

　Git機能を有効化するため、「Do you want to enable the Projects feature?」では 「Yes」を選択します。

![20240312_00h18m04s_grim.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/cfba7fec-7214-c1b9-2ca1-38f21a8c4dd1.png)

「What project workflow do you want to use?」では、変更内容を記載してコミットを作る「manual」モードを選択します(もし「Auto」モードを選択すると、デプロイボタンを押す度に自動的にコミットが作られる様になります)。

![20240312_00h18m06s_grim.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/96ff76a1-2135-a7a0-7c50-cfe87b5b595b.png)

　フローエディタのテーマは、デフォルトのままにしておきます。

![20240312_00h18m08s_grim.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/f307aa77-c44a-715e-b13b-24053f4fa9e0.png)

　次は、functionノードなどのプロパティ設定で表示されるテキストエディタをmonacoかaceどちらで表示するかの設定です。aceは既に使われていないため、デフォルトのmonacoのままにしておきます。

![20240312_00h18m11s_grim.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/f26b03f4-524e-13c8-b8e7-a418493c3e2e.png)

　functionノードで外部npmモジュールの読み込みを許可するかの設定は「Yes」のままにします。

![20240312_00h18m13s_grim.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/082badec-b098-3987-c2d1-6839beafa184.png)

　コマンドラインウィザードの入力が全て終了すると、「/home/pi/.node-red/settings.js」に設定が保存されます。

　次にRaspberry Pi起動時に、Node-REDも自動的に起動するよう、下記コマンドを実行します。
 
```
sudo systemctl enable nodered.service
```

 ![20240312_00h18m30s_grim.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/e44ca986-bba5-abcf-c3c0-71d6cb4d1b71.png)

　最後にRaspberry Piを起動します。

```
sudo reboot
```

# GitHubからフローをダウンロード
　Raspberry Pi OSを起動した後、デスクトップ上のChromiumブラウザで「[http://localhost:1880](http://localhost:1880)」を開くと次のウィザードが表示されます。

![20240312_00h21m52s_grim.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/0ec71c7e-6b7b-fde7-05af-a8565a67ecaa.png)

　今回は、GitHubリポジトリ上にあるフローをダウンロードするため、右側にある「プロジェクトのクローン」ボタンをクリックします。

## (1) ユーザ情報を登録
　次の画面ではユーザ設定を行います。Gitのコミットを作成する際に使用するユーザ名とメールアドレスを入力します。
 
 ![20240312_00h22m16s_grim.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/4b189a36-fe17-cddc-0837-23afe9164211.png)

## (2) 画像認識アプリのGitHubリポジトリを指定
 「GitリポジトリのURL」の入力欄に、画像認識アプリのフローファイルが共有されているURLを貼り付けます。自身のGitHubリポジトリを作成した場合は、そのURLを貼り付けてください。
 
```
https://github.com/kazuhitoyokoi/tensorflow-app.git
```

![20240312_00h24m38s_grim.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/b437c263-df3a-6b7a-c1f2-c19499a527e2.png)

　プロジェクト名は自動入力されるため、入力は不要です。プライベートリポジトリの場合は、GitHubのユーザ名と、[前の記事で解説したアクセストークン](https://qiita.com/kazuhitoyokoi/items/fa7d1f5259d99999873f#github%E3%81%AE%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3%82%92%E7%99%BA%E8%A1%8C)の入力が必要です。

　フローを読み込むと、追加ノードが未インストールのため、次の様な警告ダイアログが表示されます。
 
![20240312_00h25m03s_grim.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/3e4ff71e-bee4-7b86-8b93-8ae34348856e.png)

　この状態を解決するには、package.jsonファイルに定義されている追加ノードをインストール必要があります。
 
## (3) プロジェクト設定を開く  
 　まず右上メニューの「プロジェクト」から「設定」を選択します。

![20240312_00h25m19s_grim.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/0f9b4e6d-1b83-de04-74a2-171cc614f84d.png)

## (4) フローに必要な追加ノードをインストール
　プロジェクト設定の「依存関係」タブには、ノードのモジュール名とバージョン番号から成るノード一覧が表示されています。これらの追加ノードをインストールするため、各ノードの「インストール」ボタンをクリックします。

![20240312_00h25m30s_grim.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/e603b523-aa17-1ddb-6338-13f9161eba54.png)

　インストール前に表示される確認ダイアログでは、「追加」ボタンをクリックしてください。
 
![20240312_00h25m34s_grim.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/9072427b-e816-a8c3-1001-e72419adec1b.png)

　追加ノードをインストールすると、エラーのダイアログが表示されなくなり、フローを実行できるようになります。

# アプリケーションの画面を開く
　画像認識アプリの動作を確認するには、ダッシュボード2.0タブにある「ダッシュボードを開く」ボタンをクリックします。

![20240312_00h28m04s_grim.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/355cac46-0eea-2bde-1f21-b9a1c36955de.png)

　真ん中に表示される電源ボタンをクリックすると、カメラを使用して良いか確認するダイアログが表示されるため「Allow」ボタンをクリックして許可します。

![20240312_00h28m16s_grim.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/68459926-65e2-4a38-a254-706a1bc7fb6c.png)

　USBカメラの前にカップを置いた後、カメラUI下の撮影アイコンをクリックします。

 ![20240312_00h36m28s_grim.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287766/34dd0ae4-a464-41ef-3cf4-77d9a98fa3d3.png)
 
 Raspberry Piでも上手く画像認識が行われ、映像の下にある画像認識結果の所に「cup」と出力されました。

# 最後に
　本記事では、GitHubリポジトリにあるNode-REDのフローをRaspberry Piに適用する方法を紹介しました。手動でフローを読み込む従来の方法と比較すると「追加ノードのモジュール名とバージョン番号が明示されている」「数クリックでフローの適用・更新ができる」などの利点があります。
　ここで紹介した手順では、Raspberry Piを用いましたが、Raspberry Pi互換の産業用エッジデバイスでも同じ方法を用いることができます。例えば、Seeed Studio製の産業用タッチパネル型デバイス「[reTerminal DM](https://qiita.com/kazuhitoyokoi/items/ecf60f30a15457d48c2b)」でも利用できます。今後この方法は、エッジデバイスでNode-REDのフローを動かす際の標準的な方法となっていくでしょう。