デスクトップアプリケーションを開発できるElectronを使ってみました。
Electronはweb系の技術である(HTML, CSS, JavaScript)を用いて、クロスプラットフォーム向けにデスクトップアプリケーションを作ることができます。すなわち、ElectronひとつでWindows, Mac, Linux向けのアプリケーションを開発することができ、Atom, SlackやVisual Studio CodeなどはElectronで実装されています。
この記事では、Windowsでの環境構築から、簡単なプログラムを書いて動作させるところまでをやってみます。
関連リンク
Electron | Build cross platform desktop apps with JavaScript, HTML, and CSS.
Writing Your First Electron App | Electron
インストール
Node.js
Electronを使うにはNode.jsが必要なので、こちらからインストールします。ダウンロードしたファイルからインストーラを起動して、画面の説明に従って進めていくだけです。
インストールが終了したら、コマンドプロンプトを開いてnode -v
で、インストールできたか確認してみます。バージョンが表示されたら成功です。
$ node -v
v8.11.3
Electron
Electronをインストール前に、いくつかやっておくことがあります。
まず、アプリケーション用のディレクトリを作ってそこに移動します。
今回は、pug-tutorial
という名前にしました。
cd pug-tutorial
次に、Node.jsのパッケージマネージャのnpm
、pythonでいうpip
を使ってpackage.jsonを作ります。
npm init -y
すると、以下のようなpackage.jsonが生成されます。
ここで、Node.jsのパッケージマネージャのnpmを使ってElectronのインストールをします。書き方は、npm パッケージ名
です。
npm i -D electron@latest
上のコマンドはエイリアスを使ってインストールしています。
i -> install, -D -> --save-devを表します。
--save-devとすると、package.jsonのdevDependenciesにパッケージが追加されます。
devDependenciesは開発者のためのもので、その開発者が作ったモジュールを利用者がインストールするときはdevDependenciesにあるパッケージはインストールされない。
インストールが完了したら、試しに以下のコマンドで起動してみます。
npx electron
npx
はローカルにインストールした、npmパッケージを実行するためのコマンドです。
実行すると、こんな画面が出てきます。
Electronのインストールは無事完了しました。
プログラムを書いてみる
Electronのインストールができたので、簡単なHelloWorldのプログラムを書いてみます。
まずは、index.jsにHTMLを表示するだけのプログラムを書いてから、アプリケーション起動時に読み込まれるindex.htmlを作ってみます。
ディレクトリの構成は最終的にこんな感じになります。
pug-tutorial/
/node_modules package.json
index.js
index.html
index.js
index.html
HelloWorldと表示するだけ。
package.jsonの変更
最後にpackage.jsonのscriptsのところを少し変更します。
startの1行を付け加えます。
Electronの起動
ここまでで、Electron起動の準備は整ったので、次のコマンドでElectronを起動します。
npm start
無事に起動できました。今回はここまで。