dayjournal | Electron #001 – Electronでディスクトップアプリ作成

今回は、先日の「HTML5fun」のイベントでも紹介されていたElectronを試したいと思います。

Electronとは、Web技術でWindows・Mac・Linuxで利用できるクロスプラットフォームデスクトップアプリケーションを作成できる実行環境です。

早速、簡単なアプリ作成まで試します。

まずnpmでelectron-prebuiltをインストールします。


npm -g install electron-prebuilt

Electronがインストールされているか確認します。


electron -v

インストールが確認できたら構築に必要なファイルを用意します。

ファイル名	備考
package.json	アプリの情報を記載
main.js	アプリの起動用js
index.html	表示するデータ

package.json


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

アプリ名の設定 :


"name": "Electron_sample",

バージョンの設定 :


"version": "0.1.0",

アプリ起動jsのファイル名の設定 :


"main": "main.js"

main.js



var app = require('app');
var BrowserWindow = require('browser-window');
var path = 'file://' + __dirname + '/index.html';

require('crash-reporter').start();

var mainWindow = null;

app.on('window-all-closed', function () {
    if (process.platform != 'darwin') {
        app.quit();
    }
});

app.on('ready', function () {
    mainWindow = new BrowserWindow({
        width: 600,
        height: 600
    });
    mainWindow.loadUrl(path);
    mainWindow.on('closed', function () {
        mainWindow = null;
    });
})

Electronを操作するモジュール :


var app = require('app')

アプリウィンドウを作成するモジュール :


var BrowserWindow = require('browser-window')

起動ファイルのパスを指定 :


var path = 'file://' + __dirname + '/index.html'

クラッシュレポート :


require('crash-reporter').start()

メインウィンドウ変数宣言 :


var mainWindow = null

全てのウィンドウが閉じたら終了 :


app.on('window-all-closed', function() {
    if (process.platform != 'darwin') {
        app.quit();
    }
})

Electronの初期化完了後に実行 :


app.on('ready', function () {
    mainWindow = new BrowserWindow({
        width: 600,
        height: 600
    });
    mainWindow.loadUrl(path);
    mainWindow.on('closed', function () {
        mainWindow = null;
    });
})

メイン画面サイズ :


mainWindow = new BrowserWindow({
    width: 600,
    height: 600
})

アプリのindex.htmlをロード :


mainWindow.loadUrl(path)

ウィンドウが閉じられたらアプリも終了 :


mainWindow.on('closed', function() {
    mainWindow = null;
})

index.html


<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Electron_sample</title>
    </head>
    <body>
        <h2>Electron_sampleを起動しました!</h2>
    </body>
</html>

ファイルが完成したらアプリを起動


electron .

無事起動されました。

Web技術でデスクトップアプリを作れるなんてすごい時代になりました。ちょっとしたツール作成なんかにも便利かも。

参考文献

Electron Electronでアプリケーションを作ってみよう

dayjournal memo

Electron #001 – Electronでディスクトップアプリ作成

Yasunori Kirimoto 2016/1/16

package.json

main.js

index.html