概要

ElectronでデスクトップアプリとしてDashboardを作ってみようと思います。Dashboardのテンプレートを探してAdminLTEが良さそうなのでこれをElectronで動かしてみました。

実行環境

Windows10
Node.js v10.15.3

AdminLTEのダウンロード

AdminLTEのサイトからAdminLTE 2.4.10をダウンロードして解凍します。

Electronのインストール

解凍したAdminLTEのフォルダに移動してelectronのインストール

AdminLTE-2.4.10> npm install electron --save-dev

package.jsonの変更

main項目の変更、script項目の追加

package.json

  "main": "main.js",
  "scripts": {
    "start": "./node_modules/.bin/electron ."
  },

main.jsの追加

electronのmainのテンプレートであるmain.jsを追加します。コードのコメントは全て削除しました。

main.js


const { app, BrowserWindow } = require('electron')

let mainWindow

function createWindow() {
  mainWindow = new BrowserWindow({show:false, backgroundColor: '#FFF', width: 800, height: 600, frame:true})

  mainWindow.loadFile('index.html')

  mainWindow.once('ready-to-show', () => { mainWindow.show() })
  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  if (mainWindow === null) {
    createWindow()
  }
})

実行、しかしエラーでした

次のコマンドで実行します

AdminLTE-2.4.10> npm start

しかし、Salesのグラフなど画面の一部が表示されませんでしたので、Developer Toolsで確認しますと次ようなエラーが確認できました。これはjQueryに関してエラーになっているようです。調べるとQIITAに「ElectronでjQueryがundefinedになる」があり、ElectronのFAQにもありました。

main.jsを修正して再度実行

今回はnew BrowserWindowでnodeIntegration: falseを追加しました。

  mainWindow = new BrowserWindow({
    show: false, backgroundColor: '#FFF', width: 800, height: 600, frame: true,
    webPreferences: {
      nodeIntegration: false
    }
  })

再度実行

AdminLTE-2.4.10> npm start

今度はちゃんと表示されました。

最後に

とりあえず、jQuery問題はありましたが簡単に動いてしまいました。今度はChartsとTablesのメニューのところをデータベースからデータを取ってきて表示してみようと思います。ただし、nodeIntegration: falseとしたのでRendererプロセスからNode.jsのコードがそのままでは使えません。preloadでipcを使えるようにしてMainプロセス側でデータベースにアクセスしてデータをipc経由で受け取るか、あるいはデータベースのドライバをpreloadで使えるようにしないといけないようです。

DashboardのテンプレートAdminLTEをElectronで動かす

概要