ElectronでHelloWorldを表示する

Electronにちょっと手を出してみたので、とりあえずHelloWorldを表示してみる。

Electronインストール

$ mkdir hello_electron
$ cd hello_electron

$ npm init

これでpackage.jsonの中身を作成する。package nameやversionをここで指定することができるので、変更したかったら入力しよう。

{
  "name": "hello_electron",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

全部Enterだと上のような感じのpackage.jsonが出来上がる。

electronインストール。

$ npm install electron@1.6.1 --save-dev

これでpackage.jsonにelectronが追加されるのが確認できるはず。electronってpackageとして入れるんですね。

./node_modules/.bin/electron

これでelectronの画面が出ればelectronのインストールはok。

f:id:utr066:20180505102813p:plain

HelloWorldを表示する

先ほど作ったpackage.jsonではindex.jsonがエントリーポイントとして作成されているので、index.jsonを作る。

const { app, BrowserWindow } = require("electron");
let win;
function createWindow(){
  win =  new BrowserWindow({width: 800, heighr: 600});
  win.loadURL('file:///Users/yutaro/desktop/hello_electron/index.html');
  win.on("closed", () => { win = null; });
}
app.on("ready", createWindow);
app.on("window-all-closed", () => {
  if (process.platform != "darwin") {
    app.quit();
  }
});
app.on("activate", () => {
  if (win === null){
    createWindow();
  }
})

app.on("ready", createWindow);でcreateWindow()が動いてウィンドウが作られる。そのウィンドウでは、HTMLファイルを読み込んでいます。

コードを見ると結構直感的に実装できそうな感じですよね。

読み込むHTMLファイルを作ります。index.htmlを作って下記のように作る。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF=8"></meta>
    <title>HelloWorld</title>
  </head>
  <body>
    <h1>HelloWorld!</h1>
  </body>
</html>

これで準備完了。以下のコマンドを打ってみるとどうだろう。