CentOS7でElectronが試せない

Electronを試そうとしましたが起動すらできなかったというお話です。

- CentOS7 64bit
- Vagant+VirtualBox

## electron-quick-start

Electron公式の[トップページ](https://electronjs.org/)の下の方に、すぐに試せる[リポジトリ](https://github.com/electron/electron-quick-start)がありますよと出ているのでこれを試してみます。

```
$ 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](https://electronjs.org/docs/tutorial/installation)を参考に、プラットフォームをLinux、アーキテクチャを64bitに指定するオプション付きでインストールしてみました。Linuxで64bitを使っているということをElectronに教えてあげました。さらに、[electron-quick-start](https://github.com/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.

```

だめでした。解決策を引き続き探します。