The future starts today

Webとか英語とか育児とかに関する雑記

electron-builderを使ってdmgファイルを生成する

f:id:shibe97:20170216225044p:plain

shibe97.github.io

このサイト上からdmgファイルをダウンロードし、ユーザーの端末上でインストールできるようにした。

Electronアプリからdmgファイルを生成する方法

electron-builderを用いる。

github.com

electron-builderを使うための設定

まず、package.json内に以下のプロパティを設定している必要がある。

  • name
  • description
  • version
  • author

また、electron-builder自身の設定もpackage.json内に記述する。
dependenciesscriptsと並列にbuildというプロパティを設定する。

"build": {
    "appId": "com.electron.worc",
    "mac": {
        "target": "dmg"
    },
    "directories": {
        "output": "docs"
    }
}

appId

アプリの識別子。
MacではCFBundleIdentifier、WindowsではApplication User Model IDとして用いられる。
デフォルトはcom.electron.${name}という形式。

Apple Developer Programに登録していないと警告が出るが、そのままパッケージングは進められる。
Code Signingに関してはこのあたり参照。

github.com

mac

Macにおける設定。
パッケージングファイル形式をdmgにしたい場合はtargetプロパティにそう指定する。

directories

パス関連の設定。
dmgファイルのアウトプット先はoutputプロパティに指定する。
今回はGitHub Pagesにホスティングさせるためにdocsディレクトリを指定した。

その他の設定

github.com

electron-builderを起動する

package.jsonに以下のようにscriptsを登録した。

"scripts": {
    "pack:osx": "build --mac --x64"
},

また、次の作業も必要。

  • electronをdevDependenciesに置く必要がある
  • package.jsonmainプロパティに指定しているファイルをもとにパッケージング処理が走る
  • アプリのアイコンをbuildディレクトリ配下に用意する(ファイル名はicon.icns)

Worcのディレクトリ構成は以下のような感じ(一階層のみ表示)

.
├── README.md
├── app
├── assets
├── build   <= アプリのアイコンを置く
├── dist
├── docs
├── node_modules
├── package.json
└── webpack.config.js

全てが設定済みの状態で先ほどpackage.jsonscriptsに登録したコマンドを叩けば起動する。

$ npm run pack:osx

dmgファイルをGitHub Pagesにホストする

Worcでは、GitHub Pagesを利用してランディングページをホストしている。 ここにdmgファイルも一緒において、ダウンロードしてもらおうと考えた。

しかし、dmgファイルをGitHubにpushしようとすると100MBを超えていて、pushできない現象が陥った。 そこで、Git Large File Storage(LFS)を利用した。

LFSの使い方

下記の手順で行う。(hoge.dmgは適宜、正しいパスに置き換えてください)

$ git lfs install
$ git lfs track hoge.dmg
$ git add .gitattributes
$ git add hoge.dmg
$ git commit -m "add dmg file"
$ git push origin master

git lfs trackを行うと、.gitattributesが生成され、そこに対象のファイルが記述される仕組みとなっている。

これらの作業により、100MB以上のファイルもpushできる。(ただし月に1GBまで、それ以降は有料)
たぶん1ヶ月にそんなに多くリリースしないと思うので、無料でいけるはず・・・。

まとめ

今までelectron-packagerを用いてパッケージングを行なった後、zip形式にし、GitHubのreleaseページにデプロイしていた。

なぜかzipにした後に解凍してみるとアプリケーションが動かなかったり、よくわからない現象が起こって困っていた。
また、GitHubのreleaseページからのダウンロードはあまり良いユースケースとは思えなかったため、ランディングページから直接ダウンロードできるようになって良かった。