Electron+p5js+VSCodeでRaspberryPiアプリをつくる（Electron v15）

はじめに

この記事のつづきになります。前回はmacOSでVSCodeとElectron＋p5jsの開発環境を整えて、アプリを書き出し、macOSでmacOSのアプリを作りました。今回は、macOSから、RaspberryPiのアプリを書き出してみます（クロスコンパイル）。

Electronでのクロスコンパイルの手順はとてもシンプルです。今回はelectron-packagerというツールをインストールし、パッケージに書き出すときのスクリプトで、OSをLinuxにして、アーキテクチャをarmv7lに設定します。できたアプリは念のためZIP圧縮してRaspbrryPiにコピーし、RaspberryPiで解凍して動作確認してみます。ちなみに時間がかかりますが、ZIP圧縮なしでコピーしても動いてくれました。

Electronは同じような手順で、Windowsアプリも、Linuxのarm64版アプリもできました。p5jsのスキルで、けっこう幅広く応用できるのが魅力的です。

VSCodeでElectron+p5js環境を整える

前回までの記事を参考に整えてください。

electron-packegerをインストールする

VSCodeからElectronアプリを作っている「electron-quick-start」フォルダを開き、「ターミナル」 > 「新しいターミナル」を選びます。

前回までで自分はVSCodeでデスクトップにつくった「ElectronTest」フォルダの中に「electron-quick-start」フォルダ一式をクローンしてアプリを作りました。今回はVSCodeで「electron-quick-start」フォルダを直接開いています。

npmで、electron-packagerをインストールします。

npm install --save-dev electron-packager

package.jsonにスクリプトを追加する

今回は、RaspberryPi3B+のRaspberryPiOS(32bit）で実行できるアプリを書き出します。electron-packagerがインストールされると「node_modules」の「.bin」フォルダに「electron-packager」という実行ファイルができています。そして実行するときにパラメータを渡すことで、クロスコンパイルができるようになります。

長いコマンドを実行する代わりに、まとめて"package"というスクリプトに登録すると便利です。

package.json

...省略
  "scripts": {
    "start": "electron .", //←コンマを追加
    "package": "./node_modules/.bin/electron-packager . AppName.sh --platform=linux --arch=armv7l --overwrite"　//この行を追加
  },
...省略

「./node_modules/.bin/electron-packager」に続くパラメータの意味は以下のようになります。

「.」・・・同じ階層で
「AppName.sh」・・アプリケーション名。「.sh」をつけるとRaspberryPiでダブルクリックで起動できます。
「--platform=linux」・・LinuxOS用
「--arch=armv7l」・・32bitのarmv7lアーキテクチャ版
「--overwrite」・・何度もコンパイルするときに上書きを許可

package.json全体は以下のようになっています。

package.json

{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "package": "./node_modules/.bin/electron-packager . AppName.sh --platform=linux --arch=armv7l --overwrite"
  },
  "repository": "https://github.com/electron/electron-quick-start",
  "keywords": [
    "Electron",
    "quick",
    "start",
    "tutorial",
    "demo"
  ],
  "author": "GitHub",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "^15.3.0",
    "electron-packager": "^15.4.0"
  }
}

packageスクリプトの実行

先ほどpackage.jsonで、"package"と名づけたスクリプトを実行します。

npm run package

うまくいくと同じ階層に「AppName.sh-linux-armv7l」という名前のフォルダが生成され、RaspberryPi用アプリ一式が書き出されます。

ここからは手動です。。「AppName.sh-linux-armv7l」フォルダ一式をZIP圧縮します。そのZIPファイルをRaspberryPiにコピーし、解凍してできたフォルダ内の「AppName.sh」をダブルクリックして実行するとRaspberryPiで動作するはずです。

RaspberryPi 3B+にコピーして動作確認！

RaspberryPi 3B+へ「AppName.sh-linux-armv7l」をコピーして解凍し、フォルダ内の「AppName.sh」を実行した様子です。

ここまでで、RaspberryPiアプリをつくることができました！！！今回はこれで終わりです。
次は、RaspberryPiに焦点を当てて、自動起動したり、SDカードをリードオンリー化して、電源ブチ切りでも大丈夫にしたり、実用的なメモをしようと思います。