ElectronはJavaScriptを使ってデスクトップアプリケーションを作成することのできる、今ノリノリのソフトウェアです。少し前までAtom Shellと呼ばれていました。
テキストエディタであるAtomや先ほど発表された、Visual Studio CodeもElectronで作成されています。
作成したアプリケーションはWindows/Mac/Linuxに配布することができます。
JavaScript+HTMLでいろいろなアプリケーションを作成する流れは今後も加速していくでしょう。その流れに乗るために、今のうちにElectronを触っておきましょう。
本投稿ではElectronを使っての簡単なアプリケーションの作り方を紹介します。
Electronのセットアップ
Electronのセットアップはダウンロードによるものとnpmによるものがありますが、今回はダウンロードによるもので行います。
まずはこちらから環境に合うZIPファイルをダウンロードします。
そして、ダウンロードしたZIPファイルを展開します。
セットアップは以上です。簡単ですね。
Electronでアプリケーションの作成
アプリケーション用のディレクトリを作成し、その中に3つのファイルを作成します。
ディレクトリ名はなんでも良いのですが、後々の事を考慮するとappとしておくのが良いです。
app —————————————— アプリケーションが配置されるディレクトリ
└package.json —— アプリケーションの設定を記したファイル
└index.js —————— 最初に起動されるJavaScript
└index.html ———— 表示する画面
では、各中身を見て行きましょう。
{
"name" : "first-application",
"version" : "0.1.0",
"main" : "index.js"
}
package.jsonにより、最初に起動するのがindex.jsであることが指定されています。
// アプリケーションのライフサイクルをコントロールするモジュール
var app = require('app');
// アプリケーションのウィンドウを作成するためのモジュール
var Window = require('browser-window');
// GCで回収されないようにメインウィンドウはグローバル領域で宣言します。
var mainWindow = null;
// Electronの初期化が完了したら呼び出されます。
app.on('ready', function() {
// 画面を表示します。
mainWindow = new Window({
width : 800,
height : 600
});
// 画面の内容となるHTMLファイルをロードします。
mainWindow.loadUrl('file://' + __dirname + '/index.html');
// ウィンドウが閉じられたら、アプリも終了するようにします。
mainWindow.on('closed', function() {
app.quit();
});
});
index.jsによって、index.htmlがウィンドウに読み込まれます。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>はじめてのElectron</title>
</head>
<body>
<h1>初めてのElectron!</h1>
JavaScript+HTMLでデスクトップアプリケーションを作成することができます。
</body>
</html>
実行する
ダウンロードしたElectronのアプリケーションを実行すると、ウインドウが表示されます。
そのウインドウに作成したアプリケーションのディレクトリをドラッグ&ドロップするとアプリケーションが実行されます。
実行する その２
実行のもう一つの方法は、作成したアプリケーションのディレクトリを、ダウンロードしたElectronの下にあるリソースディレクトリに配置し、Electronを実行することです。
配置するディレクトリは、Windows/Linuxだったら、resources です。
Macでしたら、展開したElectronアプリを右クリックし、「パッケージ内容を表示」で表示される Contents/Resources です。
Electronで簡単デスクトップアプリケーション
Electronに興味を持っていただけましたか？
Electronをつかえばお手軽にデスクトップアプリケーションを作成できる事を知っていただけたと思います。
配布も簡単なので、あなただけのアプリケーションを作成して皆に配ってみてはいかがですか？
リンク集
最後に、さらにElectronに親しんでいただくために標準ドキュメントのリンクをご紹介して、シメの代わりとさせていただきます。
Electronのドキュメント https://github.com/atom/electron/tree/master/docs
・Quick Start https://github.com/atom/electron/blob/master/docs/tutorial/quick-start.md
・使えるAPI群 https://github.com/atom/electron/tree/master/docs#api-references
・配布方法 https://github.com/atom/electron/blob/master/docs/tutorial/application-distribution.md