Help us understand the problem. What is going on with this article?

30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで

概要

Electronとは、JavaScriptでデスクトップアプリケーションが作成できるツールです。
MITライセンスなので無料で使える上に商用利用も可能です。
最近ではAtomやSlackのアプリもElectronで作られたとのこと。
今かなりノっているツールの1つです。
以下、簡単な特徴。

  • Node.js + HTML + CSS という、WEBの技術でアプリが作れる。
    • Chromiumブラウザ(Chromeのオープンソース版)を内蔵しているので、普段の書き味と変わらない
  • これ1つで Windows, Mac, Linux 向けのアプリが作れる
  • 超簡単

ここではElectronのインストールからアプリの配布までを紹介します。
以下、「Hello World」を出すだけのアプリですが、ゼロからはじめて30分でここまで出来ます。

スクリーンショット 2015-07-18 18.54.55.png

インストール

まずは必要なものをインストール。

nodeのインストール

Windowsの場合は https://nodejs.org/download/ からmsiをダウンロードしてインストール。
Macの場合は以下のコマンドでインストール。

$ brew install node

Electronのインストール

nodeをインストールしたら次はElectronのインストールです。

$ npm -g install electron-prebuilt

Electronでアプリケーションを作成する

プロジェクトの作成

では早速プロジェクトを作りましょう。
アプリケーション用のディレクトリを作成し、その下で npm init します。
いろいろ聞かれるので適当に入力。
アプリケーションのエントリポイントはデフォルトで「index.js」ですが、ElectronのQuick Startは「main.js」を読みにいくので、「main.js」にしておきます。

$ mkdir sample
$ cd sample
$ npm init -y

入力内容を元に以下のような package.json が出来上がります。

package.json
{
  "name": "sample",
  "version": "0.0.0",
  "description": "サンプル",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git@github.com:Sample/sample.git"
  },
  "author": "Nyanchu",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/Sample/sample/issues"
  }
}

これで準備は完了です。

Hello Worldを出力

「Hello World」を出力してみましょう。
まずはmain.jsにHTMLを表示するだけの記述を書きます。

main.js
'use strict';

// Electronのモジュール
const electron = require("electron");

// アプリケーションをコントロールするモジュール
const app = electron.app;

// ウィンドウを作成するモジュール
const 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;
  });
});

続いてindex.htmlに「Hello World」を書いてみます。

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

さて、アプリケーションをQuick Startさせてみましょう。
以下のコマンドを打ちます。

# sampleディレクトリ内にいる場合は上の階層に戻る
$ cd ../
# クイックスタート
$ electron sample/

スクリーンショット 2015-07-18 17.14.37.png

ウィンドウが立ち上がって「Hello World」と表示されたかと思います。
とても簡単ですね。
エラーが出る場合は、jsのエラーか何かでしょう。メッセージを読めばわかると思います。
ちなみに、終了するにはアプリケーションのウィンドウを閉じるか、Control+Cを入力します。

アプリケーションをアーカイブ化する

さて、今度は作成したアプリケーションをアーカイブ化してみましょう。
Electronで作成したアプリケーションをアーカイブ化するにはasarというツールを使います。
まずはnpmインストールしましょう。

$ npm install -g asar

さて、早速アーカイブ化してみましょう。
asarコマンドを実行すると、tarのような単一ファイルが作られます。

$ # asar pack {アプリケーションディレクトリ} {出力ファイル名}.asar
$ asar pack ./sample ./sample.asar

アーカイブ化したファイルを実行してみましょう。

$ electron sample.asar

先ほどと同じようにウィンドウが立ち上がって「Hello World」が確認できたと思います。

アプリケーションを配布する

asarでアーカイブ化したファイルは、Electronをインストールしているユーザにしか起動できません。
そのため、誰でも実行可能にするためにはElectronの実行環境と一緒にパッケージングしてあげる必要があります。
今回はその辺りを自動でやってくれるelectron-packagerというツールを使います。
まずはインストール。

$ npm i electron-packager -g

そしてパッケージングします。
例えばMacとWindows向けにパッケージングする場合は以下。

$ # electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> --version=<version>
$ electron-packager ./sample sample --platform=darwin,win32 --arch=x64 --electronVersion=0.36.1

簡単に引数の説明もしておきます。

  • platform ・・・ all, linux, win32, darwin のいずれかを選択。複数入れる場合はカンマ区切りで。
  • arch ・・・ all, ia32, x64 のいずれかを選択。
  • electronVersion ・・・ Electronのバージョンを指定します。(0.36.1はElectronの最新バージョンです ※2015/12/23現在)

先ほどのコマンドを実行してしばらくすると「sample-darwin-x64」「sample-win32-x64」という2つのディレクトリが出来ています。
試しに「sample-darwin-x64」ディレクトリの中身を見てみましょう。

$ ls sample-darwin-x64/
LICENSE   sample.app  version

appファイルが出来ていますね。ダブルクリックすると実行されます。
これで誰にでも配布可能なアプリケーションが出来ました。

Electronを触った感想

とにかく簡単です。ほぼWEBの知識だけでデスクトップアプリが作れてしまうのがとても嬉しいです。
次回はアプリの見栄えをもう少し整えてみようと思います。

次回「JavaScript (Electron) を使ってアプリの見栄えを整える

nyanchu
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした