reTerminal 用の Electron
この文書は AI によって翻訳されています。内容に不正確な点や改善すべき点がございましたら、文書下部のコメント欄または以下の Issue ページにてご報告ください。
https://github.com/Seeed-Studio/wiki-documents/issues
はじめに
このウィキでは、Electron を使用して独自のユーザーインターフェースを構築する方法を説明します。Electron は、HTML、CSS、JavaScript などの Web 技術を使用して、ネイティブデスクトップアプリケーション（Windows、Mac、Linux）を作成するためのオープンソースフレームワークです。つまり、ウェブサイトを構築できるなら、デスクトップアプリも構築できるということです！
以下のガイドに従うことで、LCD 上のボタンをクリックするだけで reTerminal の GPIO ピンを制御するアプリケーションを作成できるようになります。それでは始めましょう！
開発環境の準備
reTerminal 上での作業
まず、reTerminal に Node.js と npm をインストールします。npm は Node.js パッケージのパッケージマネージャです。
-
ステップ 1. こちらで説明されているように、オンボード LCD、外部ディスプレイ、または SSH を使用して reTerminal にアクセスします。
-
ステップ 2. パッケージをアップグレードします。
sudo apt update
sudo apt full-upgrade
- ステップ 3. Node.js をインストールするためのスクリプトをダウンロードします。
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
- ステップ 4. Node.js をインストールします。
sudo apt install -y nodejs
これで reTerminal に Node.js がインストールされました。インストールが成功したかどうかを確認するには、以下のコマンドを実行して Node.js と npm のバージョンを確認してください。
node -v
npm -v
ホスト PC 上での作業
次に、開発のために Microsoft Visual Studio Code をセットアップします。
- ステップ 1. Microsoft Visual Studio Code をダウンロードしてインストールします。
注意: お使いのオペレーティングシステムに適したインストーラーをダウンロードしてください。
- ステップ 2. 左側のナビゲーションメニューの 拡張機能 タブをクリックし、検索ボックスに remote development と入力します。
-
ステップ 3. Remote Development を選択し、インストール をクリックします。
-
ステップ 4. キーボードで F1 を押し、ssh と入力して Remote-SSH:Connect to Host... を選択します。
- ステップ 5. 以下を入力します。
注意: pi はユーザー名で、192.xxx.xx.xx は reTerminal の IP アドレスです。
- ステップ 6. ユーザーのパスワードを入力します。
これで、SSH を使用して reTerminal にログインし、開発環境の準備が完了しました。
スマートライト Electron アプリケーション
ここでは、reTerminal の LCD 上のボタンを押すことで GPIO を制御できる スマートライト Electron アプリケーション を構築します。その後、GPIO にリレーを接続して家電製品を制御することも可能です！
ハードウェア接続
テスト目的で、reTerminal の GPIO 24 に LED を接続します。後でリレーを追加し、GPIO を使用して家電製品を制御することができます！
注意: GPIO ピンと LED の間に抵抗を挟む必要があります。そうしないと LED が焼損する可能性があります。
アプリケーションの作成と初期化
-
ステップ 1. ホスト PC 上で VSCode を開き、以前説明した方法で SSH を使用して reTerminal にログインします。
-
ステップ 2.
File > Open Folder...に移動し、reTerminal 上の任意のフォルダを選択します。
- ステップ 3. 新しいフォルダを作成し、名前を付けます。
- ステップ 4.
Terminal > New Terminalに移動し、新しく作成したフォルダに移動します。
注意: ここでは cd を使用してディレクトリを変更します。
- ステップ 5. このターミナルウィンドウ内で以下を入力し、Node.js アプリ用の必要な設定を含む package.json ファイルを作成します。
npm init
注意: デフォルトの回答を使用するには ENTER を押し続けます。ただし、entry point: (index.js) を main.js に設定し、test command: を electron .（electron の後にスペースとドットを使用）に設定します。
後で設定を変更したい場合は、メインアプリフォルダ内の package.json ファイルを確認できます。
- ステップ 6. VSCode 内のターミナルで以下を入力して Electron をインストールします。
npm install --save-dev electron
Electron が正常にインストールされると、以下の出力が表示されます。
また、Electron を実行するために必要なパッケージを含む node_modules フォルダが生成されます。
onoff npm モジュールのインストール
onoff npm モジュールを使用すると、Electron アプリを使用して reTerminal の GPIO にアクセスして制御できます。
-
ステップ 1. 前述の方法で VSCode 内にターミナルウィンドウを開き、メインアプリディレクトリに移動します。
-
ステップ 2. 以下を入力して onoff npm モジュールをインストールします。
npm install onoff
electron-rebuild npm モジュールのインストールと実行
electron-rebuild npm モジュールは、Electron プロジェクトが使用している Node.js のバージョンに対してネイティブ Node.js モジュールを再構築します。これにより、システムの Node.js バージョンが正確に一致しなくても（しばしば一致しない、または不可能な場合があります）、Electron アプリでネイティブ Node.js モジュールを使用できます。
- ステップ 1. electron-rebuild npm モジュールをインストールします。
npm install --save-dev electron-rebuild
- ステップ 2. electron-rebuild を実行します。
./node_modules/.bin/electron-rebuild
注意: 新しい npm パッケージをインストールするたびに、electron-rebuild を再実行してください。
HTML の作成（基本的な UI）
HTML ファイルを使用して、スタイリングなしの基本的なユーザーインターフェースを作成します。この HTML ファイルは、画面上に UI 要素を表示する役割を果たします。
メインアプリディレクトリ内に index.html という新しいファイルを作成し、以下のコードをコピーします。
<!doctype html>
<html>
<head>
<!-- HTML ドキュメントの文字エンコーディングを指定 -->
<meta charset="UTF-8">
<!-- アプリのタイトルバー -->
<title>Test Application</title>
<!-- material icons API を読み込む -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- Google Fonts API を読み込む -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<!-- UI スタイリング用の style.css を読み込む -->
<link rel="stylesheet" href="style.css">
<!-- JavaScript コードを埋め込む -->
<script>
// ipcRenderer モジュールを読み込む
const { ipcRenderer } = require('electron');
// ボタンを押したときに GPIO を ON にする関数
function buttonclick1()
{
// "msg" というチャンネル名でメインプロセスに 1 をメッセージとして送信
ipcRenderer.send("msg1",1)
}
// ボタンを押したときに GPIO を OFF にする関数
function buttonclick2()
{
ipcRenderer.send("msg2",0)
}
// ボタンを押したときにアプリを閉じる関数
function buttonclick3()
{
ipcRenderer.send("close-me")
}
</script>
</head>
<body>
<!-- アプリケーションの閉じるボタン -->
<button class="button3" onclick="buttonclick3()">X</button>
<br>
<!-- アプリケーションの見出し -->
<h1>SMART LAMP</h1>
<!-- material icons API からの電球アイコン -->
<i class="material-icons">lightbulb</i>
<br>
<!-- 空行 -->
<br>
<!-- ON ボタン（スタイリング用の class 属性とボタンクリックイベント用の onclick 属性を含む） -->
<button class="button1" onclick="buttonclick1()">ON</button>
<br>
<button class="button2" onclick="buttonclick2()">OFF</button>
</body>
</html>
注意: ipcRenderer モジュールは EventEmitter です。このモジュールは、レンダープロセス（ウェブページ - HTML/CSS）からメインプロセス（main.js）にメッセージを送信するためのいくつかのメソッドを提供します。また、メインプロセスからの返信を受け取ることもできます。
これで HTML ファイルの作成が完了しました。
npm test を実行すると、以下の出力が表示されます。
CSS（スタイリング）の作成
CSS ファイルを使用して、HTML ファイルで作成したユーザーインターフェースにさまざまなスタイリングを追加します。
メインアプリディレクトリ内に style.css という新しいファイルを作成し、以下のコードをコピーしてください。
/* アプリのボディのスタイリング */
body {
background-color: rgb(141, 141, 141);
}
/* アプリのヘッディングのスタイリング */
h1 {
font-size: 60px;
text-align: center;
font-family: "Roboto", "Courier New", monospace;
color: rgb(255, 255, 255);
}
/* 電球のスタイリング */
.material-icons{
font-size: 250px;
color: rgb(204, 202, 71);
display: flex;
justify-content: center;
}
/* ON ボタンのスタイリング */
.button1 {
display: inline-block;
padding: 15px 25px;
font-size: 35px;
text-align: center;
outline: none;
color: rgb(255, 255, 255);
background-color:rgb(76, 175, 80);
border: none;
border-radius: 15px;
width: 20%;
margin:auto;
display:grid;
}
/* ON ボタンの押下時のエフェクト */
.button1:active {
box-shadow: 0 5px rgb(104, 99, 99);
transform: translateY(4px);
}
/* ON ボタンのホバーエフェクト */
.button1:hover {background-color: rgb(62, 142, 65)}
/* OFF ボタンのスタイリング */
.button2 {
display: inline-block;
padding: 15px 25px;
font-size: 35px;
text-align: center;
outline: none;
color: rgb(255, 255, 255);
background-color:rgb(207, 85, 85);
border: none;
border-radius: 15px;
width: 20%;
margin:auto;
display:grid;
}
/* OFF ボタンの押下時のエフェクト */
.button2:active {
box-shadow: 0 5px rgb(104, 99, 99);
transform: translateY(4px);
}
/* OFF ボタンのホバーエフェクト */
.button2:hover {background-color: rgb(179, 44, 44)}
/* Close ボタンのスタイリング */
.button3 {
padding: 8px 25px;
font-size: 20px;
text-align: center;
outline: none;
color: rgb(255, 255, 255);
background-color:rgb(179, 44, 44);
border: none;
width: 6%;
margin:auto;
display:grid;
float: right;
}
アプリの最終的な出力は以下のようになります。
Javascript の作成（アプリのロードと実行）
Javascript ファイルを使用して、アプリケーションウィンドウを作成し、HTML ファイルをロードして表示し、GPIO 機能を追加します。
メインアプリディレクトリ内に main.js という新しいファイルを作成し、以下のコードをコピーしてください。
var Gpio = require('onoff').Gpio; // onoff モジュールをインクルードして GPIO を操作
var LED = new Gpio(24, 'out'); // GPIO 24 を出力として初期化
// app, BrowserWindow, ipcMain モジュールをインクルード
const { app, BrowserWindow, ipcMain } = require('electron')
/* ipcMain モジュールを使用して ipcRenderer モジュールからのメッセージを受信し、
GPIO を ON にする */
ipcMain.on("msg1",(event,data)=>{
LED.writeSync(data);
})
/* ipcMain モジュールを使用して ipcRenderer モジュールからのメッセージを受信し、
GPIO を OFF にする */
ipcMain.on("msg2",(event,data)=>{
LED.writeSync(data);
})
/* ipcMain モジュールを使用して ipcRenderer モジュールからのメッセージを受信し、
アプリを閉じる */
ipcMain.on("close-me", (event, arg) => {
app.quit()
})
// アプリケーションウィンドウを作成
app.on('ready', function() {
var mainWindow = new BrowserWindow({
// アプリをフルスクリーンにする
"fullscreen": true,
webPreferences: {
// メインプロセスとレンダープロセス間の通信を有効化
nodeIntegration: true,
contextIsolation: false
}
});
// CSS スタイリング付きの HTML ページをロード
mainWindow.loadFile('index.html');
});
注意: ipcMain は、レンダープロセス（ウェブページ）から送信されたメッセージを受信するためのいくつかのメソッドを提供します。
アプリのテスト
前のファイルを保存すると、electron-rebuild をオンにしているため、すぐに出力が表示されます。ただし、アプリを閉じた場合は、再度 npm test を使用してアプリを開き、以下の出力を確認してください。
アプリを実行するスクリプトを準備する
- ステップ 1. 以前作成したルートフォルダを開き、そのフォルダ内に新しい .sh ファイル を作成します。
- ステップ 2. 作成したファイルを開き、以下を入力します。
#!/bin/bash
cd $HOME/Desktop/testapp
DISPLAY=:0 npm test
注意: ここで $HOME/Desktop/testapp は Electron プロジェクトの場所を指します。
- ステップ 3. VSCode 内でターミナルウィンドウを開き、アプリのルートディレクトリに移動します。
例:
cd ~/Desktop/testapp
- ステップ 4. ledstart.sh を実行可能ファイルにします。
sudo chmod +x ledstart.sh
アプリを起動するデスクトップファイルを準備する
- ステップ 1. Desktop フォルダを開き、そのフォルダ内に新しい .desktop ファイル を作成します。
- ステップ 2. 作成したファイルを開き、以下を入力します。
[Desktop Entry]
Encoding=UTF-8
Name=LED Test
Comment=IconTest Link
Exec=/home/pi/Desktop/testapp/ledStart.sh
Type=Application
Categories=Application;Development;
注意: Exec は先ほど作成したスクリプトの場所を指します。
- ステップ 3. VSCode 内でターミナルウィンドウを開き、Desktop に移動します。
例:
cd ~/Desktop
- ステップ 4. ledStart.desktop を実行可能ファイルにします。
sudo chmod +x ledStart.desktop
アプリを起動する
reTerminal LCD のデスクトップ上にある LED Test ファイルをダブルクリックします。
以下のような出力が表示されます。
これでボタンをクリックすると、LED が点灯するのが確認できます！
アプリをデバッグする
開発中にアプリをデバッグする手順を説明します。
-
ステップ 1. 以前説明したように、Microsoft Visual Studio Code を使用して SSH 経由で reTerminal にログインします。
-
ステップ 2. MobaXterm のような SSH アプリケーションを使用して reTerminal に SSH 経由でログインします。この際、X11 サーバー機能を有効にします。
注意: X11 は reTerminal のディスプレイを PC 上に転送して表示するために必要です。
- ステップ 3. Microsoft Visual Studio Code 上で reTerminal にコードを書き込んだ後、メインアプリディレクトリに移動し、以下を実行します。
npm test
最終的に、新しいウィンドウに出力が表示されます。コードにエラーがある場合は、MobaXterm のターミナルウィンドウに表示されます。
FAQ
Q: アプリを保存するたびに自動更新するにはどうすればよいですか？
これには、electron-reloader npm モジュールを使用してホットリロード機能を設定できます。
- ステップ 1. electron-reloader をインストールします。
npm install --save-dev electron-reloader
- ステップ 2. main.js ファイルの末尾に以下の行を追加します。
try {
require('electron-reloader')(module)
} catch (_) {}
これで npm test を一度実行すると、ファイルを保存するたびにアプリケーションが更新されます。プロジェクト内の内容を変更するたびに npm test を実行する必要はありません。
ボーナスデモ
Electron を使用したより興味深いデモを体験したい場合は、この GitHub リポジトリをチェックしてください。
リソース
- [GitHub] Electron_reTerminal_Smart_Lamp_UI
- [Webページ] Electron ドキュメント
技術サポートと製品ディスカッション
弊社製品をお選びいただきありがとうございます！製品の使用体験がスムーズになるよう、さまざまなサポートを提供しています。異なる好みやニーズに対応するため、いくつかのコミュニケーションチャネルをご用意しています。