とある機会に「Electron.js」でツール開発した事例を知りました。
「Electron.js」とは、Web技術でアプリを作れる仕掛けのひとつで、JavaScriptによりデスクトップアプリを作れるフレームワークです。
www.electronjs.org
「Visual Studio Code」や「Slack」もこれで作られたそうです。
Node.jsで動きますので、Node.jsが得意な人には相性がいいです。
「Electron.js」の公式サイトに「Hello World」のウィンドウを表示するサンプルプログラムがあります。
シンプルなので、理解も改造もしやすそうです。
早速、動かしたので、どんな内容なのかを説明します。
目次
なお、本記事では次の読者を想定しています
- ある程度の経験がある初心者の方
- Windows利用者
0. 前提ソフトのインストール
GitとNode.jsが入っていない場合は、インストールしてください。
この2つは広い範囲で開発に使えます。
1-1. Git for Windowsのインストール
Gitは、ソースコードなどのリソースを管理するための分散型のバージョン管理システムです(意味がわからなくても大丈夫です)。
今回は、GitHubで公開されているサンプルをダウンロードするために使います。
Windows版である「Git for Windows」を公式サイトからダウンロードしてインストールしてください。
gitforwindows.org
1-2. Node.jsのインストール
Node.jsは、スケーラブルなネットワークアプリケーションを構築するために設計された非同期型のイベント駆動の JavaScript 環境です(意味がわからなくても大丈夫です)。
今回は「Electron.js」の動作環境となります。
公式サイトからダウンロードしてインストールしてください。
nodejs.org
特にこだわりがなければ「推奨版」でOKです。
※推奨版は、LTS (Long Term Support) と記されたほうです。
1. サンプルプロジェクトのクローン
公式サイトの案内に従って、次の3つのコマンドを順番に実行してください。
$ git clone https://github.com/electron/electron-quick-start $ cd electron-quick-start $ npm install && npm start
- 1つ目は
git clone
コマンドです。
サンプルプロジェクトをクローン(ダウンロード)します。 - 2つ目は、1つ目で作成されたフォルダへの移動です。
- 3つ目は前提ライブラリのインストールとアプリの起動です。
アプリが起動すると、下記のようなウィンドウが表示されます。
2. クローンしたものを確認する
git clone
コマンドでクローンしたフォルダの中身は次のとおりです。
ポイントとなるファイルは次の5つです。
- 1. package.json
- 2. main.js
- 3. index.html
- 4. preload.js
- 5. renderer.js
順に中身を見ていきます。
2-2. main.js
main.jsの中身は次のとおりです。
ポイントを見ていきます。
- BrowserWindowクラスをnewして、アプリのWindowを作っています。
- index.htmlを表示する前に、preload.js(後述)で前処理を実行するよう設定しています。
- BrowserWindowオブジェクトのloadFile関数で、Windowの中に表示する内容としてindex.html(後述)を指定しています。
2-3. index.html
index.htmlの中身は次のとおりです。
ポイントを見ていきます。
- npm、Chrome、Node.jsのバージョンを表示しています。
バージョンに表示する値は、id属性値でnpm-version
などと指定しています。
このid属性値は、preload.js(後述)で定義しています。 - renderer.js(後述)を指定しています。
2-4. preload.js
preload.jsの中身は次のとおりです。
ポイントを見ていきます。
- このサンプルでは、index.html(前述)に表示するときに使うid属性値(
npm-version
など)を定義しています。
いずれもnpmのprocessプロパティの値なので、for文でセットしています。
2-5. renderer.js
renderer.jsの中身は次のとおりです。
- このサンプルでは空の処理になっています。
- コメントから、レンダラーの処理を書くものと想定されます。ただし、renderer.jsの中ではNode.jsのAPIは利用できず、preload.jsを使う方針のようです。
3 補足
別のサンプル(今は動かない)
いくつかのサイトで、次のようなサンプルを見かけました。
- preload.jsを使わずに、直接index.htmlの中でNode.jsのAPIを呼び出しています。
- Node.jsのAPIを呼び出せるようにするため、main.jsでnodeIntegrationをtrueにしています(セキュリティ的に非推奨な方法だそうです)
しかし、このサンプルは、今回試したElectronのバージョン(12.0.2)ではうまく動きませんでした。
具体的には、index.htmlは表示されますが、バージョン番号の値が表示されませんでした。
コンソールを確認したら、npm.processが実行できていませんでした。
ライセンス
ライセンスは「MIT LICENSE」でした。
electron/LICENSE at main · electron/electron · GitHub
まとめ
JavaScriptによりデスクトップアプリを作れるフレームワークであるElectronについて、公式サンプルを動かしてソースの中身を確認しました。
とても簡単に作れそうなので、是非お試しください。