LoginSignup
119

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-08-06

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アプリケーション」まで一気に学べる「キカガク」に興味のある方はお気軽にご連絡ください。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
119