Raspberry piにElectronを追加してビルドする

最終更新日

Electron

この記事について

この方法は、2021/12/12に書いた時点のものです。一部古くなっている可能性があります。

※2022/06/26最終更新

また、一部基本的なコマンドの使い方は省いていますのでご了承ください。

Node.jsをインストール

Electronの実行にはNode.jsをまずインストールする必要があります。

ターミナルを開き、次のコマンドを実行します。

$ curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -
$ sudo apt install nodejs

通常のaptだと最新版が上手くインストールできないようです。

Electronのインストール

Raspberry piにインストールする際には、手動でアーキテクチャを設定しないとインストールできないようなので、注意が必要です。

$ npm install --arch=armv7l electron@latest

プロジェクトをセットアップ

cdコマンドでプロジェクトのディレクトリを指定してからこのコマンドを実行します。

$ npm init -y

プロジェクトをビルド

今回はRaspberry pi用にビルドを行います。
package.jsonに次の記述を追加します。

{
  省略...
  "scripts": {
    "build:linux": "electron-packager ./ {ディレクトリ名} --platform=linux --overwrite --arch=armv7l --electron-version=16.0.4"
  }
  省略...
}

ディレクトリ名の部分はプロジェクトフォルダに各自で置き換えてください。
(electron-versionも置き換えてください)

そうしたら、ターミナルで次のコマンドを実行します。
(electron-packagerをインストールしていない場合のみ)

$ npm install electron-packager

そして先ほど記述したプログラムを実行します。

$ npm run build:linux

これで、プロジェクトフォルダ内に新しいフォルダができました。

使いやすい場所へコピーしましょう。

Appの実行

ビルドしたアプリを実行します。

コピーしたフォルダまでcdコマンドで移動します。

フォルダ内にはpackage.jsonで設定したアプリ名のファイル(起動ファイル)が含まれているので、起動します。

$ ./{ファイル名(アプリ名)} .

例:
$ ./ExampleApps .

これで無事にアプリが起動すれば成功です。

ちなみに、Raspberrypiと一緒に自動起動

こちらも忘れそうなのでメモしておきます。

autostartに追加する

次のコマンドを実行します。(viが使いにくい方はvimでも構いません。)

sudo vi /etc/xdg/lxsession/LXDE-pi/autostart

パスワードが求められたら設定しているパスワードを入力します。

そして、autostartに下記の内容を設定します

@xset s off
@xset -dpms
@xset s noblank
@{先ほどのアプリ名のファイルまでのフルパス}

例:
@/home/pi/Exampleapp_linux/Exampleapps

これで保存することで設定が終了です。

試しに再起動して、起動できることを確認してみてください。

ビルドをせずに自動起動する方法

上記の方法だと、ビルドしたものを自動起動する方法です。

ビルドせずに直接起動させるには、autostartを以下のように設定します。

@xset s off
@xset -dpms
@xset s noblank
@npm --prefix {package.jsonがあるフォルダまでのフルパス} run build

例:
@/home/pi/Exampleapp_linux/

package.jsonには次の部分を記入してください。(記入していない場合)

{ (省略)
  "scripts": {
    "build": "node_modules/.bin/electron .",
  (省略)
  },
(省略)
}

参考にさせていただいたサイト