Electronでクロスプラットフォームのアプリケーションを作成する

スポンサーリンク

はじめに

ElectronでHello Worldを表示するだけのクロスプラットフォームデスクトップアプリを作成するためのまとめです。

注意

  • パソコンにnode.jsがインストールされている必要があります。

環境

OS Windows 7 Pro 64bit
その他 node.js 7.4.0
Electron 1.4.15
electron-packager 8.5.1

Electronとは

ElectronとはHTML、CSS、Javascriptを使用してクロスプラットフォームのデスクトップアプリを作成するためのオープンソースのライブラリです。

macOS 64ビットのバイナリのみ用意されています。サポートされているmacOSの最小バージョンはmacOS 10.9です。
Windows Windows7以降サポートされています。
ia32(x86)とx64(amd64)は両方バイナリが用意されていますが、ARMはサポートされていません。
Linux Electronのia32(i686)とx64(amd64)バイナリはUbuntu 12.04で構築されています。

Electronのインストール

package.jsonの作成

package.jsonを作成します。

> npm init

package.jsonに含まれる main フィールドに書いたファイルがアプリケーションのスタートアップスクリプトになります。

{
  ...
  "main": "index.js",
  ...
}

Electronのインストール

Electronをローカルにインストールします。

> npm install --save-dev electron

Electronをグローバルにインストールする場合は以下のコマンドを入力します。

>: npm install -g electron

Hello Worldアプリの作成

Hello Worldを表示するだけのアプリケーションを作成します。

フォルダ構成

フォルダ構成を以下のようにしておきます。Electronは package.jsonmain フィールドに書かれているファイルをロードします。 main フィールドがない場合は index.js をロードします。

root
  ┣ node_modules
  ┣ index.html
  ┣ index.js
  ┗ package.json

index.jsファイルの作成

index.jsファイルを作成し中身を以下のように編集します。

const {app, BrowserWindow} = require('electron');
const path = require('path');
const url = require('url');

// メインウィンドウ用
let win;

function createWindow() {
    // ウィンドウの作成
    win = new BrowserWindow({width: 800, height: 600});

    // index.htmlファイルを読み込む
    win.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file',
        slashes: true
    }));

    // デベロッパーツールを表示する
    win.webContents.openDevTools();

    // ウィンドウが閉じたときは開放する
    win.on('closed', () => {
        win = null
    });
}

// Electronの初期化完了後のready状態でcreateWindowを呼び出す
app.on('ready', createWindow);

// すべてのウィンドウが閉じられた場合の処理
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

// ウィンドウがアクティブになったときの処理
app.on('activate', () => {
    if (win === null) {
        createWindow();
    }
});

index.htmlファイルの作成

index.htmlファイルを作成します。

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

アプリケーションの起動

以下のコマンドを入力してアプリケーションを起動します。

> .\node_modules\.bin\electron .

Electronをグローバルにインストールしている場合は以下のコマンドで起動できます。

> electron .

アプリケーションのパッケージング

各プラットフォームで実行できるファイルを作成します。

electron-packagerのインストール

electron-packagerをインストールします。

> npm install --save-dev electron-packager

コマンドラインでの作成

コマンドラインから作成する場合は以下のコマンドを入力します。

> .\node_modules\.bin\electron-packager .

引数になにも指定がない場合は実行環境のプラットフォーム用の実行ファイルが作成されます。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする