ElectronJSでWindowsアプリ構築

シングルページのウェブアプリケーション(通称SPA)を特定社内や組織に向けてリリースする(通称Ad hoc)際に、ネットワークの有無やChromeのバージョンの懸念、更にはZIPで固めたファイル群を展開してindex.htmlを開いてもらうことすら困難な場合があり、その度に実開発作業以外の対応が増えて悩ましかったので、macOS上のElectronJSでWindows用のアプリ構築を試してみることにしてみました。

開始環境としてNodeJSとHomebrewがインストールされているところから、公式の最下部に記述されているクイックスタートアプリをmacOS上で実行するところまで数分で確認ができました。Windowsの開発環境下ではPowerShellの文字コードの問題から文字化けするそうで、一応日本語をindex.htmlに記述しておきます。

次にelectron-packagerモジュールをインストールする作業で一つ起きた問題はnpmコマンドの権限のエラーで、ディレクトリのオーナーを自分のアカウントに変更しました。 sudo chown -R hkitago /usr/local/lib/node_modules

そのままelectron-packager ./ --platform=win32 --arch=x64でパッケージ化しようとすると参考したページの通り、Could not find "wine64" on your system.と言われてWineをインストールすることになるのですが、この部分が参考ページとちょっと違っていました。

% which wine
wine not found
% which wine64
wine64 not found
% which wineserver
wineserver not found

一応存在を確認した後、% brew install homebrew/cask-versions/wine-devel で完了しますが、プロセスを眺めているとPKGを呼んでいたので公式にあるインストーラーパッケージを落としても(Homebrew不要で)良いかと思います。

最後に気を取り直してパッケージ化して完了します…が、あまりに簡単だったのでちょっと色気を出してWindows上で上部に表示されるメニューバーの非表示とアプリ起動時のフルスクリーン(業務上需要の多いテンプレ化)もやってみました。

main.jsを開き、次のようにインデントしてない箇所を追加します。

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    },
frame: false,
  })
 
  // and load the index.html of the app.
  mainWindow.loadFile('index.html')
 
  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
 
//mainWindow.removeMenu()
//mainWindow.setApplicationMenu(null)
//mainWindow.setApplicationMenu(false)
mainWindow.removeMenu()
mainWindow.maximize()
}

メニューバー非表示の箇所は3行コメントアウトしてありますが、情報が錯綜していた痕跡になります。

なかなか簡単にWindowsアプリ実行ファイル(EXE形式)ができたのですが、参考ページにもあるようにファイル群が点在している状態で、これでは先述した納品時の問題を解決しないので、次回はインストーラ構築をやります。

投稿者: hkitago

個人事業主でウェブと iOS, Android アプリの開発者で一児の父親。JavaScript, ActionScript, AppleScript, PHP, SQL, ObjC, Swift, Java の読書実行試験運用管理を生業とし、Bind, Postfix, Apache を MacOS で使い、エディタは Vi, mi, Kod, Smultron, TextWrangler を経て Coda, Xcode, Android Studio, Atom といった IDE と CotEditor を重用しています。座右の銘は「アウトプットは量多い方がいい。フィルタは各自がやればいい。」です。