Armadillo-X1: Eletronを使ってJavaScript, HTML, CSSを使ったデスクトップアプリケーションを作ってみる

組み込みデバイスでの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

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にインストールしてください。

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

[armadillo ~]# mkdir hello
[armadillo ~]# cd hello
[armadillo ~/hello]# npm init -y
[armadillo ~/hello]# npm i -D electron-prebuilt

5. Hello Worldサンプル作成

index.htmlというファイル名で、以下の内容のファイルを作成してください。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ElectronApp</title>
  </head>
  <body>
    <p>Hello World</p>
  </body>
</html>

main.jsというファイル名で以下の内容のファイルを作成してください。

'use strict';
 
var electron = require('electron');
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;
 
let mainWindow;
 
app.on('window-all-closed', function() {
  if (process.platform != 'darwin') {
    app.quit();
  }
});
 
app.on('ready', function() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 480
  });
  mainWindow.loadURL('file://' + __dirname + '/index.html');
 
  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

6. 実行

[armadillo ~]# Xorg -v -s 0 &
[armadillo ~]# node_modules/.bin/electron .

補足

今回インストールしたelectron-prebuiltは現在は使われていません。最新バージョンはelectronになっています。 electronは、Arm上では正常にインストールできない状態になっているようなので解消したら本ブログも修正します。

製品: 
Armadillo-X1
タグ: