heimdalの技術ノート

IT全般、Linux、Windows、プログラミング開発など、何でもござれ

トップ > Electron > Electron初心者のためのHelloWorld（解説あり)

Electron初心者のためのHelloWorld（解説あり)

Electron nodejs javascript

はじめに

Electronの紹介をしたので、Hello Worldを動かすサンプルを作成してみます。
HTMLもJavascriptも始めたばかりの人が少しでもソースコードが読めるなど、役に立てれば幸いと思ってます。

環境

node.js v6.4.0
electron v1.3.4

ソースコード作成

今回はここを参考にしてみました。＆補足情報もあわせて書きました。
http://electron.atom.io/docs/tutorial/quick-start/

まずは、3ファイルを適当なフォルダに作成。

package.json

{
  "name"   : "HelloApp",
  "version": "0.1.0",
  "main"   : "main.js"
}

main.js

//厳格モード。曖昧な表現や変数宣言を怠るとエラーになるので、常につけるべき、おまじない。
'use strict';

//nodeの書き方。requireは、括弧内のものを読み込み、宣言したオブジェクトに格納する。
//ここでは「electron」というnodeのモジュールを読み込む。
//読み込みはモジュールだけじゃなく、括弧内に「'./hoge.txt'」などを書けばそのファイルを読み込むことができる。
const {app, BrowserWindow} = require('electron')

//オブジェクトが勝手に破棄されないように、空オブジェクトのグローバル変数を宣言します。
let win

function createWindow () {
  // Windowsのサイズを決めて、オブジェクト生成する。
  win = new BrowserWindow({width: 800, height: 600})

  // 同じ階層にいるindex.htmlを読み込む
  win.loadURL(`file://${__dirname}/index.html`)

  // Chromium のDevTools有効にする。
  win.webContents.openDevTools()

  // 表示したWindowsを閉じたときの処理
  win.on('closed', () => {
    // オブジェクトを初期化する
    win = null
  })
}

// Electronの初期化が完了し、ブラウザウインドウの作成準備が完了したときに呼び出される。
app.on('ready', createWindow)

// 全てのウィンドウが閉じられた時の処理
app.on('window-all-closed', () => {
  // macOS(darwin)の場合、全てのウィンドウが閉じても メニューバーが生きている。
  // それ以外のOSは閉じる処理をする。macOSを考慮しなければ、このif文は不要で、app.quit()のみ記載すればいい。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // macOSのドックアイコンをクリックした際にウィンドウを再生成する。
  // macOSを考慮しなければ、このapp.onの関数自体不要。
  if (win === null) {
    createWindow()
  }
})

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

上記の3つのファイルを作成したら、
コマンドプロンプトを開き、ファイルを格納したフォルダまで移動して

electron .

を実行すれば、Hello Worldを表示すると思います。

おまけ

Windowsに特化しつつ、もっとスリムに書くなら以下に書き換えてくれればいいです。

main.js

'use strict';
const {app, BrowserWindow} = require('electron')
let win
function createWindow () {
  win = new BrowserWindow({width: 800, height: 600})
  win.loadURL(`file://${__dirname}/index.html`)
  win.on('closed', () => {win = null})
}
app.on('ready', createWindow)
app.on('window-all-closed', () => {app.quit()})

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

以上！