Electronは、近年採用事例が増えているデスクトップアプリケーション構築のためのプロダクトです。JavaScriptを利用して開発でき、Windows、macOS、Linux向けにビルドが可能なため、すぐにマルチプラットフォームのアプリケーションを開発することができます。
ここでは、そんな Electronを利用したアプリのビルド手順を紹介しましょう。
前準備
Electronを使うためには、Node.jsや Gitなどが必要です。Windowsの場合はそれぞれ次のサイトからダウンロードしてセットアップしましょう。
また、もしすでにインストールされている場合は次の手順で、npmを最新バージョンにしておきましょう。
npm update -g npm
プロジェクトをクローン
Electronでのプロジェクト制作には、Electron本体をインストールしてファイルを作成していく方法もありますが、Quick Startプロジェクトをクローンして、改造を加えていく方が楽です。次の方法で、クローンします。Windowsの場合は PowerShell、macOSの場合は Terminalを使います。
git clone https://github.com/electron/electron-quick-start myproject
「myproject」の部分は、作りたいソフトウェアの名前などで良いでしょう。そしたら、npmを使ってインストールと起動を行ないます。
cd myproject
npm install
npm start
npm installは途方もなく時間がかかる上、画面に反応がなくてかなり心配になります。じっくり待ちましょう。（筆者はここで数回中断してはあれこれ見直して、再度トライなどを繰り返して、ものすごく時間を食ってしまいました・・待つだけで良かった・・）
すると、空っぽのウィンドウとデバッグウィンドウが起動します。終了すれば、そのまま終わります。
改造を加える
ファイルの構成を見ていきましょう。
メインとなるのは「main.js」です。ここから動作がスタートします。例えば、今はデバッグウィンドウが起動してしまいますが、配布アプリからは削除したいとします。その場合、26行目付近のコードがそれを制御しているため、いったんコメントアウトなどをすると良いでしょう。
// Open the DevTools.
mainWindow.webContents.openDevTools()
ファイルを保存して、再びnpm startを打ち込めば、デバッグウィンドウがない状態で起動します。こうして、各カスタマイズを行ないます。最初の画面は「index.html」のファイルが表示されています。
パッケージングをする
作ったソフトを、各OS向けの実行ファイルにするのは別のソフトウェアを利用します。次のコマンドで「electron-packager」をインストールしましょう。
npm install -g electron-packager
続いて、今利用している Electronのバージョンを知る必要があります。これは、次のコマンドで分かります。
electron -v
いよいよパッケージングです。次のコマンドを使いましょう。
electron-packager . sample --platform=darwin,win32 --arch=x64 --version=1.4.0
パラメーターは次の通りです。
electron-packager [プロジェクトのフォルダ] [出力するアプリ名] --platform=[対象のOS] --arch=[x64, ia32, armv71から複数選択] --version=[Electronのバージョン]
対象のOSは、次の通りです。
- win32: Windows
- darwin: macOS
- mas: Mac App Store用（？）
- linux: Linux
これでしばらく待つと、プラットフォーム別にフォルダーが吐き出されます。中を見ると、.appのファイルや.exeのファイルができあがっていて、ダブルクリックで起動できます。これで完成。
Electron、思ったよりも簡単で面白そうです。Web畑の人でも、デスクトップアプリケーションを作れるとは可能性が広がりますね。