ホーム  >  アプリ開発

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 .",
　　(省略)
  },
(省略)
}

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

www.ultra-noob.com
ラズパイにNode.jsをインストールするときは「n」を使うな
ラズパイへNode.jsインストールはコマンド2行で出来る。「ｎ」は正しく動かないので避けた。
Qiita
Raspberry Pi3でキオスク端末(自動ログイン＋ブラウザ起動)を作る。 - Qiita
はじめに　余っているモニターと、持て余しているRaspberry Piを使って情報端末：キオスク端末を作ろうと思ったので、その作業メモ。今回使用したものRaspberry Pi 3 model Bmicro SD...

カテゴリー:アプリ開発

タグ:

関連投稿