「Electronではじめるアプリ開発」を写経してみた ①
最近、あまり手を動かせてないなあと思い先日購入してツンドク状態になっていた
を写経してみようと思った次第。 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
実行してみる
おお!!
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 .
今日は、これくらいで