エンターテイメント!!

遊戯王好きのJavaエンジニアのブログ。バーニングソウルを会得する特訓中。

electronの始め方

electron

ビーストウォーズに出てきそうな名前と思った奴は、思考が俺と一緒!

electronとは?

GitHubが提供するクロスプラットフォームのデスクトップアプリ作成エンジン。
Node.js + Chromiun(chromeOSS版)をベースに作られている。

electronのすごいところ

webの技術だけでデスクトップアプリが作れる。
意外とweb系のエンジニアは、デスクトップアプリを作りたがる傾向にある。
かく言う私も、デスクトップアプリを作りたかった!
主戦場は.NETに取られ、JavaエンジニアだとSwing使うか、JavaFXで作るしかない。
しかし、Javaでデスクトップアプリは非常に作りづらいのが現状。
web系の技術で作れれば、手っ取り早いのにと思っていた頃に見つけた。
JavaFXは、今は残念な状態なので、コレでウサを晴らす!

動作確認環境

OS

Mac OSX EL Caption 10.11.2(15C50)

インストール

前提条件

  • Node.js

前述したように、Node.jsを使っているので、インストールする。 インストール済みの人は次のelectronインストールへ
brew install node

コマンドが嫌いな人は(いないと思うけど)、下記からダウンロードしてインストール
https://nodejs.org/

electronインストール

下記コマンドでelectronをインストールする。
npm -g install electron-prebuilt

electronサンプル作成!

  1. 任意の場所にフォルダを作成する。
    ここでは例としてelectron-sampleを作成する。
    mkdir electron-sampel

  2. 作成したディレクトリに移動して、Nodeプロジェクトの初期化を行う。
    cd electron-sample
    npm init -y
    そうすると、package.jsonというファイルが作成される。
    このpackage.jsonファイルには、作成されるアプリの情報が記載されている。

  3. package.jsonの呼び出しJavaScriptファイル設定 デフォルト値でも問題ないですが、やや意図する名前と違うので変える。

    package.json

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

  4. main.jsの作成 package.jsonファイルがあるフォルダと同じフォルダに、main.jsを作成し、下記の内容を記載する。

    main.js 2017/09/29 最新の呼び出し方法が変わってたので修正

    "use strict";

    const electron = require("electron"); const app = electron.app; const BrowserWindow = electron.BrowserWindow; let mainWindow;

    // 全てのウィンドウが閉じたら終了 app.on('window-all-closed', function() { if (process.platform != 'darwin') { app.quit(); } });

    // Electronの初期化完了後に実行 app.on('ready', function() { // メイン画面の表示。ウィンドウの幅、高さを指定できる mainWindow = new BrowserWindow({width: 800, height: 600}); mainWindow.loadURL('file://' + __dirname + '/index.html');

    // ウィンドウが閉じられたらアプリも終了 mainWindow.on('closed', function() { mainWindow = null; }); });

  5. index.htmlの作成 前述した通り、初期表示で表示される画面。
    ここはベタにHello Worldで!

    <!DOCTYPE html><html><head><meta charset="UTF-8"><title>Electron Read Us</title></head><body><h1>Hello, World!</h1></body></html>

  6. 実行 electron-sampleフォルダ内で、electron .を実行
    すると画面が立ち上がるハズ。
    終わりたいときは画面を閉じて、以下のCtrl + C でコマンド実行を止める。

Webの技術だけでやれることに感動!

Web技術ですべてが完結する。これほどWebエンジニアにとって嬉しいことはない!
本当はビルドまで調査したかったけど、一旦ここまで。
ビルドするとWindows環境でも動くデスクトップアプリが作れる。
Web系の知識でできるので、追加の学習が不要!
たぶん、いじりだしたら止まらないだろうな、コレ。
目下の目標は、electron + AngularJSで簡易ゲームを作りたい。
遊戯王系のアプリができればよいのだが。。。
そういえば、ADS*1Mac版あったけ?
electron移植もありかな?と思えてきた。
課題として取り組めたらと思う。

参考リンク

qiita.com

electron.atom.io

*1:Auto Duel System:有志による遊戯王のシュミレーター。下手なゲームより完成度高い