windowsのデスクトップアプリケーションといえばJava or C# or VBだと思っていましたが、Blender-Hubを見て今はWeb技術で開発する時代なのだということを知りました。
知識不足を反省しつつ備忘録として残しておきます。
目次
環境構築
必要なもの
Node.js
下のリンクからNode.jsをWindowsにインストール。
Node.jsとは、ご存じかもしれないがサーバサイドで動作するJavaScriptです。もともとは「Web技術のバックエンドもJavaScriptで掛けたら便利じゃね？(効率とかリアルタイム通信とか同時接続対応性とか)」という名目で開発された技術(JavaScript実行環境)ですが、アプリケーションプログラムとしても動作できます。
なぜなら、通常のブラウザという実行環境ではOS機能にアクセスできないのに対してNode.jsではOSの機能も使用できるからです。
プロジェクトの準備
インストールが必要なモノはNode.jsのみ、HTML+CSS+JavaScriptでデスクトップアプリケーションを開発する強みですね。ここからは実際にWindowsアプリケーションを作成し、実行までしていきます。
プロジェクトフォルダの作成
適当な場所にプロジェクト用のフォルダを作成しましょう。
私はいつも
Users/Document/repo
に作成しています。
package.jsonの作成
npmでの開発では最初に
npm init
をするところから始まります。これによって実行したディレクトリにpackage.jsonが生成されます。
早速先ほど作成したフォルダでコマンドプロンプトを開き、上記のコマンドを実行しましょう。
色々初期設定について聞かれますが、すべてEnterで大丈夫です。
フォルダ内にpackage.jsonがあれば成功です。
Electronのローカルインストール
以下のコマンドを実行し、Electronパッケージをプロジェクトにローカルインストールします。
npm install --save-dev electron
しばらくすると以下の順番でプロジェクトが変更されます。詳しい内容は調べてください。package-lock.jsonで検索をかければ色々出てきます。
- package.jsonにelectronがインストールされた旨の記述が追加されます。
- プロジェクトフォルダ内にnode_modulesフォルダが作成され、electronとその依存関係パッケージがインストールされます。
- package-lock.jsonに実際インストールされたパッケージ情報が記述されます。
開発
環境構築が終了しましたので、開発に入ります。
基本機能の実装
エントリーポイントの作成(JavaScript)
先ほど[npm init]した際に、[entory point]の設定を求められていたと思います。これは、一番最初に実行されるプログラムの設定のことです。(読んで字のごとく)
先ほどデフォルトで設定してあればプロジェクトルートの[index.js]がエントリーポイントとなっています。
package.jsonで確認できます。(“main”: “hoge.js”の部分)
{
"name": "electron_test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^12.0.1"
}
}
プロジェクトのルートディレクトリに[index.js]を作成しましょう。
実際のコードはこんな感じ。
// 厳密モード
"use strict";
// Electronのモジュールの最低限をインポート
const {
app,
BrowserWindow
} = require('electron');
// メインウィンドウはグローバルで保持
let mainWindow;
// Electronのウィンドウ生成テンプレート
const createWindows = () => {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
// useContentSize: falseだと高さと幅にフレームも含まれて後に面倒なのでtrueに
useContentSize: true
});
// GUI(HTML)ファイルを読み込み
// ネット上のファイルも読み込める
mainWindow.loadFile('index.html');
// メインウィンドウが閉じられた時のイベントハンドラ登録
mainWindow.on('closed', () => {
// windowをnullに
mainWindow = null;
})
}
// Electronの初期化の完了を待ってからウィンドウ生成関数を実行
app.whenReady().then(createWindows);
// すべてのウィンドウが閉じられた時のイベントハンドラ登録
app.on('window-all-closed', ()=> {
app.quit();
});
GUIの作成(HTML+CSS)
次にGUI部分にあたる[index.html]を作成しましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF=8">
<title>electron_test</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
実行
以下のコマンドで実行できます。
エレクトロンをローカルにインストールしたためちょっとコマンドが長いです。
.\node_modules\.bin\electron .
実行結果はこんな感じ。
簡単にWindow表示ができましたね。
おまけ
Macに対応しよう
ちょっと改良してMacにも対応できるようにしておきましょう。
index.jsを以下のように変更
// 厳密モード
"use strict";
// Electronのモジュールの最低限をインポート
const {
app,
BrowserWindow
} = require('electron');
// OS判定用モジュール
const os = require('./os');
// メインウィンドウはグローバルで保持
let mainWindow;
// Electronのウィンドウ生成テンプレート
const createWindows = () => {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
// useContentSize: falseだと高さと幅にフレームも含まれて後に面倒なのでtrueに
useContentSize: true
});
// GUI(HTML)ファイルを読み込み
// ネット上のファイルも読み込める
mainWindow.loadFile('index.html');
// メインウィンドウが閉じられた時のイベントハンドラ登録
mainWindow.on('closed', () => {
// windowをnullに
mainWindow = null;
})
}
// Electronの初期化の完了を待ってからウィンドウ生成関数を実行
app.whenReady().then(createWindows);
// すべてのウィンドウが閉じられた時のイベントハンドラ登録
app.on('window-all-closed', ()=> {
// Mac以外はアプリケーションを完全に終了する
if(os.is_mac === false){
app.quit();
};
});
// アプリケーションがアクティべート状態になった時のイベントハンドラ登録
app.on('activate', () => {
// Mac対応
// Dockアイコンクリック時にメインウィンドウがnullであれば、メインウィンドウを生成する
if(mainWindow === null) {
createWindow();
}
})
os.jsというファイルを生成して、以下のコードを記述。
exports.is_windows = process.platform==='win32'
exports.is_mac = process.platform==='darwin'
exports.is_linux = process.platform==='linux'
以上です。
おわりに
あっという間にWindow表示ができましたね。
OSを気にせずに記述できるというのは大きな強みだと思います。
コメント