読者です 読者をやめる 読者になる 読者になる

katekichiのゆるブログ

普段の作業メモや日常の出来事とか

「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>

$ ./node_modules/.bin/electron .

f:id:katekichi:20170424183022p:plain

今日は、これくらいで