Electronで、ソフトをビルドするまでの手順

2017/01/07 10:19

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は途方もなく時間がかかる上、画面に反応がなくてかなり心配になります。じっくり待ちましょう。(筆者はここで数回中断してはあれこれ見直して、再度トライなどを繰り返して、ものすごく時間を食ってしまいました・・待つだけで良かった・・)

すると、空っぽのウィンドウとデバッグウィンドウが起動します。終了すれば、そのまま終わります。

Electronアプリが起動したところ

改造を加える

ファイルの構成を見ていきましょう。

Electronアプリのファイル構成

メインとなるのは「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畑の人でも、デスクトップアプリケーションを作れるとは可能性が広がりますね。