2018/1 Electronで効率を上げる

佐々木誠

2018年1月22日に公開大阪

紹介

デスクトップアプリケーション作成フレームワーク
ChromiumとNoe.jsがベース
Mac, Windows, Linuxで動作する
GitHub社製
オープンソース、商用利用可能
Atom, VSCodeで利用されている

つまりElectronで自分ためのGUIアプリがHTML, CSS, JSで簡単につくれます。

環境構築

Node.jsインストール

Node.jsからインストーラーをダウンロードしてインストールする。

# バージョン確認
> node -v

作成

package.json

Node.jsのパッケージ管理ファイルを作成します。

# 任意のフォルダを作って移動
> mkdir myapp
> cd myapp

# 初期化(適当にyesやenter押下でOK)
> npm init

# Electronインストール
> npm install --save-dev electron

index.js

アプリの起動終了、HTML読込み処理を実装します。

// Electron読込み
const {app, BrowserWindow} = require('electron');

// メインウィンドウ
let mainWindow = null;

// 初期化処理
app.on("ready", () => {

    // 生成
    mainWindow = new BrowserWindow({
        width: 1280
        ,height: 720
        // jQuery読込み対策
        ,webPreferences: {
            nodeIntegration: false
        }
    });

    //htmlファイル読込み
    mainWindow.loadURL(`file://${__dirname}/index.html`);

    // ウィンドウ終了処理
    mainWindow.on("closed", () => {
        mainWindow = null;
    });
});

// アプリ終了処理
app.on("window-all-closed", () => {
    app.quit();
});

index.html

つくりたいアプリを作成してください。JSもCSSも使えます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sample</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <style>
    </style>
</head>
<body>
    <p>Hello World</p>
    <script>
    </script>
</body>
</html>

ファイル構成

こんなファイル構成になっているイメージです。

myapp
├── index.html
├── index.js
└── package.json

実行

とりあえずコマンドから実行してみましょう。

> ./node_modules/.bin/electron .

exe生成

毎回コマンドで起動するのもいいですが、electron-packagerを利用してexeファイルを生成して１クリックで便利に起動して使うことができます。 Electron Packager

未体験の人に説明しても伝えにくいので、exeファイル作れるよという紹介までにとどめておきます。実際にindex.jsやindex.htmlを作ってみてから調べるのがよいでしょう。

仕事に役立てる

ご紹介したように、日頃培ったスキルを活かしせば、サクッとアプリを作れることがお分かりいただけたと思います。 Cloudなど外部サーバにデータをajax保存をするのはコンプライアンス的にNGですが、localstrageが使えるのでPC内で閉じた安心アプリが作れます。

自分は細々した予定を立てたり、実績を把握するためのアプリを作って使っています。あくまで自分用と割り切って低機能で簡単実装で済ませられるので、作るときの気持ちも楽でした。そんな大したものでもないけど、あると便利だなというアイデアがありましたらElectronに挑戦してみると良いでしょう。

# 便利 # 大阪