2016年4月12日火曜日

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

  • 1754
    ストック
  • 18
    コメント
  • negipo
  • tsuwatch
  • hasssie
  • nnabeyang
  • wata_n
  • tyamaz
  • WataruGodo
  • maginemu
  • thinca
  • gogyo

概要

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

// アプリケーションをコントロールするモジュール
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/
スクリーンショット 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 --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の知識だけでデスクトップアプリが作れてしまうのがとても嬉しいです。
次回はアプリの見栄えをもう少し整えてみようと思います。
17 contribution
凄く面白かったです!
アーカイブやパッケージングも簡単で素敵ですね!
2644 contribution
ありがとうございますー。
おっしゃる通り、パッケージングまでがとても簡単で手が出しやすいですよね。
0 contribution
大変参考になりました!
Macのアプリがサクッと作成出来て感動です。
Windowsでも開発してみようと試みたのですが、起動の段階 electron sample でエラーになってしまいます、、、。
なぜか electron main.js とすると問題なく起動します、、、困りました。
何か、情報をお持ちでしたらご教授いただければと思います。
2644 contribution
ありがとうございます。
Windowsでも開発してみようと試みたのですが、起動の段階 electron sample でエラーになってしまいます、、、。
なぜか electron main.js とすると問題なく起動します、、、困りました。
一応、package.jsonの"main"も"main.js"になっていますよね?
ElectronのQuick Startをする場合、でお間違いないですか。
Quick Startは
$ electron {プロジェクトディレクトリ}
と指定する必要があるので、もし自分の位置がプロジェクトディレクトリ内でしたら
$ electron .
と指定すれば上手くいきませんか?
もしくは、1階層上で electron sample と実行したら上手くいきませんか?
0 contribution
返答ありがとうございます。
いろいろ階層位置とプロジェクト指定を変えて試してみたのですが、結果変わらずエラーでした。
ですが、別のWindowsマシンで行ったところうまくいきました、、、。
うまくいったマシンはWin7 32bitで、エラーになるのがWin7 64bitです。
このあたり何かあるかもしれません、、、もう少し試行錯誤してみようと思います。
2644 contribution
こちらで試したところ Win7 64bit でQuick Start出来ました。
OSというよりは環境の何かかもしれません。
0 contribution
そういやnodeとnpmいれてたなあ と思って示していただいた手順通りに行ったら、、アプリができてる!
WEBアプリしか知識がない自分としてはとても嬉しいです。素敵な導入記事をありがとうございます^^
2644 contribution
ご感想頂きありがとうございますー。
誰でもサクっと出来るように書いたつもりだったので、嬉しく思います。
0 contribution
./sample で electron sample.asar をするとエラーになります。
ちなみに electron .では起動します。
よろしくお願いします。
0 contribution
windows7 64bit で起動時エラーになって困っているとコメントさせて頂いてた件、解消?出来たのでお伝えします。
プロジェクトディレクトリのパスに2バイト文字が含まれていると、packge.jsonが見つからないらしく、
Cannot find module ~ となっていました。
※結果、win 64bitの有無は関係ありませんでした、、、。
nyanchu様、ご助力頂きありがとうございました。
そして、お騒がせいたしました。
0 contribution
解決いたしました。
2644 contribution
皆様、遅れましたが解決したようで良かったです。
80 contribution
全く同じようにやったつもりだったのですが、以下のエラーを吐き出してしまいます。
Error: Cannot find module '/Users/hiro/sample/sample'
これもmain.jsと何か関係しているのでしょうか。。。
追記:解決しました。ありがとうございました。
24 contribution
補足です。以下のようにコマンド入力しても実行できます。
electron main.js
0 contribution
素晴らしい記事ありがとうございます。やってみたのですが、
以下のようなエラーが出てしまい、実行できないです。。。よろしければご教授ください。
スクリーンショット 2015-11-21 17.57.39.png
0 contribution
electronコマンドを実行するアプリへのパスが間違っているのかもしれません。
ぼくはindex.jsがある作業ディレクトリで electron ./ と実行するするとうまく起動します。
0 contribution
非常に有用な記事で参考にさせていただきました。
ただ、クイックスタートでelectron sample/して失敗されてる方が多いようなので僭越ながら補足を。
「プロジェクトの作成」のステップで cd sample を実行してカレントディレクトリを移動しているので、そのまま続きで作業を進めてelectron sample/とすると動きません。
2015/07/21にnyanchuさんが書かれている内容と被るのですが、一旦 cd ../ してカレントディレクトリをsampleより一つ上の階層に移動してからelectron sample/ とするか、移動しない場合は electron ./ とかで起動できるかと思います。
2644 contribution
返答遅れました。
ご指摘ありがとうございます!
記事を微修正しました。
Cassandra
コメントを投稿する

0 コメント:

コメントを投稿