More than 5 years have passed since last update.
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 が出来上がります。
{"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を表示するだけの記述を書きます。
'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」を書いてみます。
<!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のエラーか何かでしょう。メッセージを読めばわかると思います。
ちなみに、終了するにはアプリケーションのウィンドウを閉じるか、を入力します。
アプリケーションをアーカイブ化する
さて、今度は作成したアプリケーションをアーカイブ化してみましょう。
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の知識だけでデスクトップアプリが作れてしまうのがとても嬉しいです。
次回はアプリの見栄えをもう少し整えてみようと思います。
Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme