「Electronではじめるアプリ開発」を写経してみた ①

最近、あまり手を動かせてないなあと思い先日購入してツンドク状態になっていた

gihyo.jp

を写経してみようと思った次第。 Reactもついでにやれそうな内容だったので丁度良いかなと

1-1 Electron概要

1-2 ElectronとWeb技術の進化

1-3 Electron特徴

ざっと読んだ

2-1 Node.jsをインストールする

$ node -v

v6.2.2

※とりあえず6系をインストール済みだったので、スルー

2-2 アプリケーション作成の準備

package.jsonの作成

$ mkdir electron_first_app

$ mkdir electron_first_app

$ npm init

※基本は、デフォルトのまま。「entry point」はmain.jsで

Electronのインストール

$ npm install electron@1.6.1

$ ./node_modules/.bin/electron

実行してみる

おお！！ f:id:katekichi:20170424160103p:plain

2-3 Elactronのアプリケーション構成

Mainプロセス（Nodeから呼ばれるエントリポイント）とRenderプロセスがある（Mainプロセスから作成されたWebページが動く）。

Renderプロセスから、PCのネイティブリソースへのアクセス可

2-4 最初のアプリケーションを作成する

Hello World的なもの

main.js

const { app, BrowserWindow } = require("electron");
let win;

function createWindow() {
    win = new BrowserWindow({width: 800, height: 600});
    console.log("abx");
    win.loadURL(`file://${__dirname}/index.html`);
    win.on("closed",() => {win = null;});
}

app.on("ready", createWindow);
app.on("window-all-closed", () => {
    if (process.platform !== "drawin") {
        app.quit();
    }
});
app.on("active", () => {
    if (win === null) {
        createWindow();
    }
});

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>My first Electron app</title>
    </head>
    <body>
        <h1>Hello Electron!</h1>
    </body>
</html>