2016年4月12日火曜日

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

nyanchuが2015/07/18に投稿(2016/03/10に編集)
編集履歴(5)
問題がある投稿を報告する

1754

ストック
18

コメント

概要

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

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

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

インストール

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

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';

// アプリケーションをコントロールするモジュール
var app = require('app');
// ウィンドウを作成するモジュール
var BrowserWindow = require('browser-window');

// メインウィンドウはGCされないようにグローバル宣言
var mainWindow = null;

// 全てのウィンドウが閉じたら終了
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/

ウィンドウが立ち上がって「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 --version=0.36.1

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

platform ･･･ all, linux, win32, darwin のいずれかを選択。複数入れる場合はカンマ区切りで。
arch ･･･ all, ia32, x64 のいずれかを選択。
version ･･･ 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) を使ってアプリの見栄えを整える」

この記事は以下の記事からリンクされています

過去の12件を表示する

今後イケそうなデスクトップGUIフレームワークからリンク約2ヶ月前
electron+baeblのテンプレートを作ってみたその１からリンク約2ヶ月前
Electronでアプリ内部にWebサーバーを立てるからリンク約1ヶ月前
初めてのElectronからリンク約1ヶ月前
ElectronでGLSL用テキストエディタを作ってみた。その１からリンク18日前

編集リクエストを送る

PR社内メールでの情報共有をなくそう - Qiita:Team

Sun

17 contribution

2015/07/21 00:25

Thank

凄く面白かったです！
アーカイブやパッケージングも簡単で素敵ですね！

nyanchu

2644 contribution

2015/07/21 00:30

Thank

ありがとうございますー。
おっしゃる通り、パッケージングまでがとても簡単で手が出しやすいですよね。

moonsheep

0 contribution

2015/07/21 16:33

Thank

大変参考になりました！
Macのアプリがサクッと作成出来て感動です。

Windowsでも開発してみようと試みたのですが、起動の段階 electron sample でエラーになってしまいます、、、。
なぜか electron main.js とすると問題なく起動します、、、困りました。
何か、情報をお持ちでしたらご教授いただければと思います。

nyanchu

2644 contribution

2015/07/21 16:39

Thank

ありがとうございます。

Windowsでも開発してみようと試みたのですが、起動の段階 electron sample でエラーになってしまいます、、、。
なぜか electron main.js とすると問題なく起動します、、、困りました。

一応、package.jsonの"main"も"main.js"になっていますよね？
ElectronのQuick Startをする場合、でお間違いないですか。
Quick Startは

$ electron {プロジェクトディレクトリ}

と指定する必要があるので、もし自分の位置がプロジェクトディレクトリ内でしたら

$ electron .

と指定すれば上手くいきませんか？
もしくは、1階層上で electron sample と実行したら上手くいきませんか？

moonsheep

0 contribution

2015/07/21 17:06

Thank

返答ありがとうございます。

いろいろ階層位置とプロジェクト指定を変えて試してみたのですが、結果変わらずエラーでした。
ですが、別のWindowsマシンで行ったところうまくいきました、、、。
うまくいったマシンはWin7 32bitで、エラーになるのがWin7 64bitです。
このあたり何かあるかもしれません、、、もう少し試行錯誤してみようと思います。

nyanchu

2644 contribution

2015/07/22 10:21

Thank

こちらで試したところ Win7 64bit でQuick Start出来ました。
OSというよりは環境の何かかもしれません。