DashboardのテンプレートAdminLTEをElectronで動かす
概要
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項目の追加
"main": "main.js",
"scripts": {
"start": "./node_modules/.bin/electron ."
},
main.jsの追加
electronのmainのテンプレートである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で使えるようにしないといけないようです。
Author And Source
この問題について(DashboardのテンプレートAdminLTEをElectronで動かす), 我々は、より多くの情報をここで見つけました https://qiita.com/h6591/items/d0ffb515c35c0b885991著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .