Electronを試そうとしましたが起動すらできなかったというお話です。
- CentOS7 64bit
- Vagant+VirtualBox
electron-quick-start
Electron公式のトップページの下の方に、すぐに試せるリポジトリがありますよと出ているのでこれを試してみます。
$ git clone https://github.com/electron/electron-quick-start
$ cd electron-quick-start
$ npm install && npm start
> electron1@1.0.0 start /vagrant/electron-quick-start
> electron .
/vagrant/electron1/node_modules/electron/dist/electron: error while loading shared libraries: libgtk-x11-2.0.so.0: cannot open shared object file: No such file or directory
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! electron1@1.0.0 start: `electron .`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the electron1@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
エラーが出ました。libgtk-x11-2.0.so.0というライブラリがロードできないというような内容に読み取れるのでとりあえずインストールします。
$ sudo yum install -y libgtk-x11-2.0.so.0
...
完了しました!
インストールはできましたが、再度npm startしてみても同じエラーが発生します。この時点でいろいろ検索した結果、Electronはプラットホームやアーキテクチャに依存する部分が大きいのでgit cloneしてきただけではOSに合ったelectronが導入されていないのではないかと思いました。わかりませんけど。
オプション付きでnpm install
git cloneせず、ディレクトリを作るところからやってみます。electron1というディレクトリに対して、Installationを参考に、プラットフォームをLinux、アーキテクチャを64bitに指定するオプション付きでインストールしてみました。Linuxで64bitを使っているということをElectronに教えてあげました。さらに、electron-quick-startを参考に自分でファイルを作成します。
$ mkdir /vagrant/electron1
$ cd electron1
$ npm init -y
$ npm install --platform=linux --arch=x64 electron
$ npm install eslint
$ touch index.html main.js renderer.js
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Electron</title>
</head>
<body>
<h1>App is running...</h1>
<script type="text/javascript">
require('./renderer.js')
</script>
</body>
</html>
main.js
const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
const path = require('path')
const url = require('url')
let mainWindow = null
const CreateWindow = () => {
mainWindow = new BrowserWindow({ width: 800, height: 600})
mainWindow.loadURL(url.format({
path: path.resolve(__dirname, 'main.js'),
protocol: 'file:',
slashes: true
}))
mainWindow.on('closed', () => {
mainWindow = null
})
}
app.on('ready', createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (mainWindow === null) {
createWindow()
}
})
renderer.js
console.log('renderer.js')
package.jsonにstartスクリプトを追加します
package.json
{
"name": "electron1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "electron ."
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"electron": "^1.7.9",
"eslint": "^4.11.0"
}
}
これで大丈夫だと思いたかったのですが、
$ npm run start
> electron1@1.0.0 start /vagrant/electron1
> electron .
/vagrant/electron1/node_modules/electron/dist/electron: error while loading shared libraries: libgtk-x11-2.0.so.0: cannot open shared object file: No such file or directory
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! electron1@1.0.0 start: `electron .`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the electron1@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
だめでした。解決策を引き続き探します。