ブログ

組み込みデバイスでのGUIアプリケーションを作るフレームワークはQt, GTK, wxWidgets等がありますが、いずれも新しく覚える内容が多い等の難点があります。ここでは一般的に使用経験があると思われるJavaScript, HTML, CSSを使ってデスクトップアプリケーションを作れるElectronをArmadillo-X1で使用してみます。

1. 環境

• 製品: Armadillo-X1 + 評価用拡張ボードセット01
• Linuxカーネル: 4.9-at12
• ユーザーランド: Debian GNU/Linux 9.0(stretch)
• nodeバージョン: v12.13.1
• npmバージョン: 6.12.1
• サンプルアプリケーション: https://github.com/electron/electron-api-demos

2. Xorgのインストール

Electronで作成したデスクトップアプリケーションはXorg上で動作させることになります。

そのため、以下のコマンドを実行して、XorgとElectron実行に必要なライブラリをインストールしてください。

[armadillo ~]# apt-get install -y surf xserver-xorg-core xserver-xorg-input-all xserver-xorg-video-fbdev
[armadillo ~]# apt-get install -y libgtk2.0-0 libgconf-2-4 libnss3 libasound2

3. Node.jsのインストール

ElectronはNode.jsを使用します。

そのため、以下のブログを参考にNode.jsをArmadillo-X1にインストールしてください。

• https://users.atmark-techno.com/blog/8700/3720

※: ブログはArmadillo-640用になっていますが、Armadillo-X1でも同様の手順で問題ありません。

4. アプリケーション実行環境設定

suコマンドで一般ユーザーに移行した後、以下のコマンドを実行しサンプルアプリケーションを実行する環境を作成してください。

[armadillo ~]$ git clone https://github.com/electron/electron-api-demos
[armadillo ~]$ cd electron-api-demos
[armadillo ~/electron-api-demos]$ npm install

5. 実行

rootユーザーで以下のコマンドを実行し、Xorgを起動してください。

[armadillo ~]# Xorg -v -s 0 &

一般ユーザーに移行し、以下のコマンドを実行して、electron-api-demosを起動してください。

[armadillo ~]$ cd ~/electron-api-demos
[armadillo ~/electron-api-demos]$ DISPLAY=:0 npm start

補足

electronはバージョンによってインストールに失敗することがあるようです。インストールに失敗した場合はバージョンを変更してインストールできるか確認してみてください。