Electron入門(インストールからHello Worldまで)

  • 79
    いいね
  • 0
    コメント

Electronとは?

ElectonGithub社がテキストエディタの Atom を作成するために作ったオープンソースのソフトウェアフレームワークです。
特徴として
・Windows, Mac OS, Linux のクロスプラットフォーム対応のデスクトップアプリを作成可能
・HTML, CSS, JavaScript といったWebアプリケーションの技術で動く
でしょうか。
非常に簡単に書けて、かつ色々な場所で柔軟に動くアプリケーションを作ることができるということで、やらない手はない!といったところです。

Electronのインストール

Electronのインストールや、Qiitaの記事を参考にコードを書いても動かないといったバージョン変更で結構ハマったので、ここに手順を書いておきます

開発環境

・OS: Mac OS X EI Capitan (10.11.5)
・パッケージマネージャー:Homebrew

node.jsの最新版をインストール

既存のバージョンのnode.jsでElectronを動かそうと四苦八苦していましたが、結局これが一番重要

node.jsの最新版インストール
$ brew uninstall node
$ brew install node
$ brew link --overwrite --dry-run node # brew link node で指示されたコマンド

これで最新版のnode.jsがインストールできます。

node.jsのインストール確認
$ which node
$ which npm

でコマンドのパスが返ってこればOKです。

Electronのインストール

Electronのインストール
npm install -g electron-prebuilt

これが完了すると、

Electronのインストール確認
$ which electron

のコマンドのパスが返ってきます。

※ 失敗例(node.js最新版インストール前)

最新版でないnode.jsを使用してElectronのインストールを行っていました。

$ npm install -g electron-prebuilt

とすると、

npm ERR! 404  'electron-prebuild' is not in the npm registry.

と出て、インストールできませんでした。

ElectronでHello World

新規プロジェクトの作成

ディレクトリ構成
ElectronApp
├── index.html
├── main.js
└── package.json

Electronでは、Railsのようにnewコマンドでプロジェクトが一式作成されるわけではなさそうです。
素直に作業ディレクトリを作成して、そこに書いていきます。

新規プロジェクトの作成
$ mkdir ElectronApp
$ cd ElectronApp
$ npm init -y

最後の $ npm init -y をすることで、ディレクトリ内に package.json が作成されますので、こちらをちょこっと編集します。

package.json
{
  "name": "ElectronApp",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

アプリ制御部分のmain.jsを作成

ディレクトリ内にElectronを制御する main.js を作成

main.js
'use strict';

// アプリケーションをコントロールするモジュール
var electron = require('electron');
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;

// メインウィンドウはGCされないようにグローバル宣言
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;
  });
});

ここで、注意しないといけない点として、参考にさせていただいた記事の「30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで」では、最初のアプリケーションをコントロールするモジュールの部分が、

失敗例(古い仕様)
// アプリケーションをコントロールするモジュール
var app = require('app');
var BrowserWindow = require('browser-window');

となっているのですが、仕様変更により、

正しい例(main.jsの一部)
// アプリケーションをコントロールするモジュール
var electron = require('electron');
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;

と記載しないと正しく動きませんでしたので、注意してください。

アプリ表示部分のindex.htmlを作成

表示部分は、Webアプリケーションでよく使用するHTMLの雛形と全く同じです。

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ElectronApp</title>
  </head>
  <body>
    <p>Hello World</p>
  </body>
</html>

アプリ起動

アプリの起動は、以下のコマンドで実行します。

Electronアプリの実行
$ cd ..
$ electron ElectronApp/

以下のように、デスクトップアプリケーションが表示されれば成功です。

スクリーンショット 2016-08-06 22.54.37.png

Electronを触ってみた感想

Webアプリケーションと使う技術や書き方がほとんど同じなので、RailsなどでWebアプリケーションを作り、そのデスクトップ版をElectronで作るといったことが非常にスムーズにできそうです。
Webアプリケーションでは、その特性上、どうしてもローカルファイルとの連携が難しい部分があったのですが、これであれば、Webの技術もそのまま流用出来て良さそうです。
スマートフォン用のアプリケーションもElectronで作れるようになると理想的ですね。

おまけ

フォローお待ちしています!
Qiita: Carat 吉崎
twitter:@carat_yoshizaki
はてなブログ:Carat COOのブログ

機械学習をマンツーマンで学べる家庭教師サービス「キカガク
「数学→プログラミング→Webアプリケーション」まで一気に学べる「キカガク」に興味のある方はお気軽にご連絡ください。