デスクトップアプリとしてビルドする

前の記事では netlify を用いてウェブに公開する方法を紹介しました。

ただ、せっかく作ったアプリなので、ウェブ以外で遊べるようにしたいという気持ちもあるでしょう。
この章では先ほど作ったアプリをデスクトップアプリとしてビルドする方法を紹介します。
但しそこまでサクッとはウェブ公開ほど簡単ではないです。
また、ゲームによってはこのままの設定だとビルドが難しかったりします。
あくまで、一応できるということを示すものだと考えてください。

デスクトップアプリにするのに electron を用います。
まず electron について簡単に説明します。

electronとは？

electronjs.org

GitHub が公開したデスクトップアプリ開発用のフレームワークです。
html/css/js などのウェブの技術でMac、Windows、Linux に対応したデスクトップアプリを開発が出来ます。
Node.js と Chromium をランタイムとしており、Atom、VisualStudioCode、Slack など様々がアプリが electron で制作されています。
parcel + phina.js 作ったゲームは html/css/js で作られているので、Electron を使うことで簡単にアプリケーション化することが出来ます。
ちなみに parcel1.8 から electron 向けにビルド出来るようになりましたが、うまくいかなかったので今回はその機能は使用しません。

ビルドするアプリ

今回はおすすめ最小構成を electron でビルド出来るように作り作り変えます。

github.com

mac のみをターゲットにしてビルドを行います。
ただ単にブラウザで動いているものをデスクトップアプリとしてビルドするだけなので、開発する際はブラウザで行います。
作り変えたものはこちらのリポジトリに上げてあります。

github.com

設定方法

必要なモジュールのインストール

まず、必要になるモジュールをインストールします。

npm i electron electron-builder --save-dev

electron と electron-builde は electron アプリの起動やビルドに使います。

electron.js の作成

まず、 electron.js というファイルを作成します。
これは electron アプリを起動するときに使用します。

const electron = require('electron')
const {app, BrowserWindow} = electron
const path = require('path')
const url = require('url')

let mainWindow

const createWindow = () => {
    let mainWindow = new BrowserWindow({
        contentSecurityPolicy: "default-src 'none'",
        width: 400,
        height: 600
    })
    const startUrl = url.format({
        pathname: path.join(__dirname, './elebuild/index.html'),
        protocol: 'file:',
        slashes: true
    })
    mainWindow.loadURL(startUrl)
    mainWindow.on('closed', () => {
        mainWindow = null
    })
}

app.on('ready', () => createWindow())

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

app.on('activate', () => {
    if (mainWindow === null) {
        createWindow()
    }
})

シンプルな electron の設定なので説明は省略します。
重要なのは以下の２点です。

ローカルのファイルを読み込めるように contentSecurityPolicy: "default-src 'none'" を設定する。
読み込むファイルを pathname: path.join(__dirname, './build/index.html') と設定する。

package.json の編集

scripts を編集

次にビルド用のスクリプトを package.json に追加します。

"clean": "rm -rf ./dist && rm -rf ./.cache && rm -rf ./build && rm -rf ./elebuild",
"elebuild": "npm run clear && parcel build ./src/index.html -d elebuild --public-url ./",
"pack": "npm run elebuild && electron-builder"

clean に新たに rm -rf ./elebuild を追加しました。
elebuild は build と異なり --public-url ./ を追加しています。
--public-url ./ を追加することで、html が下記のように変わります。

<script src="/src.xxxxxx.js"></script>
↓
<script src="src.xxxxxx.js"></script>

前に / がついているとelectronでうまく読み込めないのでこのようにする必要があります。
pack は npm run elebuild と electron-builder を実行します。
electron-builder は package.json の設定に従いアプリをビルドします。

ビルドの設定

次に package.json にビルドの設定を行います。
name にアプリ名を設定します。

"name": "parcel-phina-electron-example"

次に main に electron.js を指定します。

"main": "electron.js"

build に electron のビルドの設定を行います。
今回はmacに向けてビルドを行うので以下のように設定しました。
今回はとりあえずビルドすること出来るようにすることを目標にしているので、最小の設定にしています。

"build": {
  "appId": "parcel.phina.electron",
  "files": [
    "electron.js",
    "elebuild/*"
  ],
  "directories": {
    "output": "app"
  }
}

appId は今回は parcel.phina.electron としています。
files にビルド対象となるファイルを指定します。
directories の output プロパティにアプリの出力先を指定します。
他と混ざらないように app を指定しています。
electron-builder は他にも設定が出来るので自分のアプリに合わせて設定を行ってください。

Common Configuration - electron-builder

その他

その他に出力されたアプリを git に含めないために .gitignore に app/ を追加します。

ビルド方法

ビルドは npm run pack を実行します。
しばらくすると app/mac にアプリが出力されます。
出力されたアプリはそのまま実行可能です。
実行して以下の画面が表示されれば成功です。

f:id:orange634:20181113010328p:plain

まとめ

簡単にですが、electron のアプリにビルドする方法を紹介しました。
この説明はあくまでビルドする方法だけで、アプリのアップデートなどは考慮していません。
また、あくまでウェブで作ったアプリをとりあえず electron でビルドする方法を紹介しているだけです。
本格的に electron アプリを開発する際は別の方法や設定を行うことをおすすめします。

次の記事で一連の「parcel + phina で簡単ゲーム開発環境構築」の記事の総括を行います。

次の記事 orange634.hatenablog.com

みどりのあくま

勉強したことをアウトプットしていきます。

parcel + phinaで簡単ゲーム開発環境構築その４