研究でデスクトップアプリケーションを作る必要があったので、試しにelectronを触ってみました。
環境
- macOS High Sierra 10.13.6
- Zsh
- Node.js v10.13.0
Node.jsのインストール
今回はnodebrewを使ってインストールします。
$ brew install nodebrew
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshrc`
$ mkdir -p ~/.nodebrew/src
$ nodebrew install v10.13.0
$ nodebrew use v10.13.0
インストールできたか確認。
$ node -v
v10.13.0
良さそうです。
特にバージョンの指定はないですが、公式ダウンロード の推奨板がv10.13.0だったのでこれにしました。(他のパッケージ等でエラーが出たら別バージョンに変えようと思います...)
Yarnのインストール
npmの代わりとして今回はyarnを使います。
$ brew install yarn
インストールできたか確認。
$ yarn -v
1.12.1
良さそう。
create-react-app を使う
コマンドで1つでReactアプリケーションの雛形が作れる強いパッケージです。今回はこれを使用します。
$ yarn global add create-react-app
$ create-react-app electron_sample
アプリが作成されました。起動してみます。
$ cd electron_sample
$ yarn start
localhost:3000にアクセスして、こんな感じになったらOKです。
electronを導入する
yarn を使ってインストールします。
$ yarn add electron --dev
次にpackage.jsonを編集します。
package.json
{
"name": "electron_sample",
"version": "0.1.0",
"private": true,
"main": "src/electron-starter.js",
"dependencies": {
"react": "^16.6.0",
"react-dom": "^16.6.0",
"react-scripts": "2.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"electron": "electron ."
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"electron": "^3.0.7"
}
}
"main": "src/electron-starter.js",と"electron": "electron ."の2行を追加する感じです。
続いてsrc/electron-starter.jsを作成し編集していきます。
(こちらのソース からコピペしました)
src/electron-starter.js
const electron = require('electron');
// Module to control application life.
const app = electron.app;
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow;
const path = require('path');
const url = require('url');
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow;
function createWindow() {
// Create the browser window.
mainWindow = new BrowserWindow({width: 800, height: 600});
// and load the index.html of the app.
mainWindow.loadURL('http://localhost:3000');
// Open the DevTools.
mainWindow.webContents.openDevTools();
// Emitted when the window is closed.
mainWindow.on('closed', function () {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null
})
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);
// Quit when all windows are closed.
app.on('window-all-closed', function () {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
});
app.on('activate', function () {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (mainWindow === null) {
createWindow()
}
});
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
$ yarn startしながら別ウィンドウで$ yarn electronすると、デスクトップアプリのウィンドウが起動します。
OK!! 良さそうです。