最近気になっているHTML5関連の技術。
特に、「Electron」にずっと関心があったのですが…。
今まで手を付けていませんでした。
今日は、何となくElectronの事が特に気になりましたので…。
せっかくの機会なので、Electron入門をしてみようと思い立ちました。
そこで、私はElectron開発のための環境を揃えて、最初のプログラムを作成するところまでをやってみました。
実際やってみると、そこまで難しいということはありませんでしたよ。
大体30分くらいで動作するところまでいけましたね。
今回の記事は、Electronの開発環境の構築方法と、最初のプログラムを書いて動作させる方法をまとめます。
Electronとは？
Electronというのは、GitHub社が開発したオープンソースのソフトウェアフレームワークです。
主な特徴としては、「Windows/Mac/Linuxのクロスプラットフォームに対応したデスクトップアプリを開発できる」「HTML/CSS/JavaScriptといったウェブアプリケーションの技術を使って開発する」といった点です。
Electronを使って作成されたソフトウェアとしては、AtomやVisual Studio Codeなどがあります。
開発環境
私のパソコンの開発環境は以下のとおりです。
PC: MacOS High Sierra 10.13.6
エディタ: Visual Studio Code 1.26.1
パッケージマネージャー: Homebrew
Node.jsのインストール
Electronで開発するためには、「Node Package Manager(npm)」が必要となります。
そこで、まずは「Node.js」をインストールします。
brew install node最初のElectronアプリケーション作成
最初に、適当なフォルダを作成します。
ここでは、例として「hello」フォルダを作って、そこにファイルを作成していくとします。
mkdir hello
cd hello
npm init -y
npm i -D electronこれらを実行すると、フォルダ内に「package.json」が作成されます。
これを少しだけ編集して以下のようにします。
authorは、あなたの名前に変更してください。
【package.json】
{
"name": "hello",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "Shingo Suzuki",
"license": "ISC",
"devDependencies": {
"electron": "^2.0.7"
}
}ここから、プログラムを作成していきます。
まずはメインとなる「main.js」から確認します。
【main.js】
const {app, BrowserWindow} = require('electron');
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({width: 400, height: 300});
mainWindow.loadFile('index.html');
mainWindow.on('closed', () => {
mainWindow = null;
});
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if(process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if(mainWindow === null) {
createWindow();
}
});アプリケーションの準備ができた時(ready)にウィンドウを作成します。
そして、「index.html」を読み込んでその内容を表示します。
ウィンドウが全て閉じられた時(window-all-closed)は、Mac以外の時は終了します。
アプリケーションがアクティブ化された時(activate)には、ウィンドウがnullの時には再構築します。
【index.html】
<html>
<head>
<meta charset="UTF-8">
<title>Hello Electron</title>
</head>
<body>
<h1>Hello Electron!</h1>
<p>Node: <script>document.write(process.versions.node);</script></p>
<p>Chrome: <script>document.write(process.versions.chrome);</script></p>
<p>Electron: <script>document.write(process.versions.electron);</script></p>
</body>
</html>index.htmlの内容は非常に単純です。
Node、Chrome、Electronのバージョンをそれぞれ表示しているだけです。
実行するためには、npxコマンドでelectronを使い、main.jsがあるフォルダを指定します。
npx electron .実行結果
上記プログラムを実行すると、以下のような画面が表示されます。
確かに、それぞれのバージョンが表示されているのが分かりますね。
まとめ
今回の記事では、Electronの開発環境の構築方法と、最初のプログラムを作成するところまでを確認してみました。
いかがでしょうか？
実際やってみると、それほど難しくはなさそうですよね。
これで、Electron入門ができました。
今後は少しずつ学習を進めていって、最終的には何か実用的なアプリケーションを作成してみたいです。
今のところは良いアイデアが思いつきませんけども…。
もしHTML/CSS/JavaScriptといったウェブの技術を使って、デスクトップアプリケーションを作成したいのなら…。
このElectronは、非常におすすめですよ！
ぜひあなたも入門してみてはいかがでしょうか？
(2018/8/20 21:56:21時点 Amazon調べ-詳細)
CodeBattlerAceは、私が作成した本格的なJavaFXゲームアプリケーションです。
ロボット戦車の動きを制御するプログラム(AI)をプログラミングして、他のプログラム(AI)と対戦させるゲームです。
完全無料で遊べますので、ぜひダウンロードしてみてください。
ファイルのダウンロード先は以下のリンク先になります。
簡単な遊び方の解説記事は以下のリンク先です。
