Electron + Travis で楽々ビルド・リリースする最強のデスクトップアプリ開発

More than 1 year has passed since last update.

ぼくが考えた最強のデスクトップアプリ開発環境

Web技術でデスクトップアプリ書いて push するだけの環境を作る。

主に利用するのは Electron + Travis + GitHub の3つ。

Electron でデスクトップアプリ書いて、push するだけでビルドしてリリースまで完結するデスクトップアプリ開発ができる。

もっと簡単に言うと
「ローカルで開発→push」
だけで GitHub Release に自動でリリースできる。

アプリのビルド自体もTravis内で行えるため、開発環境のOSに依存しない開発が可能。
以下は OS X 環境を前提として説明するが、クロスプラットフォームのためのビルドはTravis内で行うため OS は何でも良い。

念のため各種サービス・フレームワークの説明

簡単に説明すると以下。どれもすごく便利。

  • Electron: みんな大好きHTML/CSS/JSのWeb技術でクロスプラットフォーム・デスクトップアプリケーションを書ける。
  • Travis CI: 中央集権的CI/CDサービス。GitHubと連携して、pushするだけでテスト、デプロイを実現できる。
  • GitHub: Release ページで公開したいアプリをそのまま置ける点が今回は大事。

実際のステップはこれだけ

  1. Electron を使ってWeb技術でデスクトップアプリを開発する
  2. GitHub にリポジトリを作る
  3. Travis CI で GitHub 認証して、該当リポジトリをTravisから扱えるよう許可する
  4. .travis.yml を書く
  5. push する。これだけでテストしてビルドしてインストーラが作成されて、公開まで完了

実際のコードを見ながら進めてみる

GoogleフォトをWebViewでただそのまま表示するだけのアプリ。
oniatsu/Google-Photos-desktop-viewer-app

自動ビルド・デプロイのために重要なファイルは2つ。

package.json

npm で実行できるように以下のスクリプトを追加している。

  • npm clean
  • npm pack
  • npm build
  • npm archive

npm clean

ビルドしたファイルの削除

npm pack

electron-packager を使ってElectronアプリを各種OSに合わせて生成する。

  • Windows における .exe の実行ファイル本体。
  • OS X における .app 。

npm build

npm pack + electron-builder を使ってインストーラを生成する。

  • Windows における .exe の実行ファイル本体のインストーラ exe を生成する。
  • OS X における .app のインストーラの dmg を生成する。

npm archive

npm build + インストーラをzipにまとめる。
つまりこれ一つで、実行ファイル生成 + インストーラ作成 + zip化 まで全て行う。

  • exe → zip
  • dmg → zip

zip にした方が配布に都合良い。
zip であれば GitHub Release にもアップロードできる。

package.json
{
  "name": "Google-Photos",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Warning: no test specified\"",

    "clean": "rm -rf ./dist",
    "clean:osx": "rm -rf ./dist/osx",
    "clean:win": "rm -rf ./dist/win",

    "pack": "npm run pack:osx && npm run build:win",
    "pack:osx": "npm run clean:osx && electron-packager . \"Google Photos\" --out=dist/osx --platform=darwin --arch=x64 --version=0.36.2 --icon=assets/osx/icon.icns --ignore=\"dist|assets\"",
    "pack:win": "npm run clean:win && electron-packager . \"Google Photos\" --out=dist/win --platform=win32 --arch=ia32 --version=0.36.2 --icon=assets/win/icon.ico --ignore=\"dist|assets\"",

    "build": "npm run build:osx && npm run build:win",
    "build:osx": "npm run pack:osx && electron-builder \"dist/osx/Google Photos-darwin-x64/Google Photos.app\" --platform=osx --out=\"dist/osx\" --config=builder.json",
    "build:win": "npm run pack:win && electron-builder \"dist/win/Google Photos-win32-ia32\" --platform=win --out=\"dist/win\" --config=builder.json",

    "archive": "npm run archive:osx && npm run archive:win",
    "archive:osx": "npm run build:osx && zip -j \"dist/osx/Google-Photos-osx.zip\" \"dist/osx/Google Photos.dmg\"",
    "archive:win": "npm run build:win && zip -j \"dist/win/Google-Photos-win.zip\" \"dist/win/Google Photos Setup.exe\""
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "electron-builder": "^2.5.0",
    "electron-packager": "^5.2.0",
    "electron-prebuilt": "^0.36.2"
  },
  "dependencies": {
    "electron-window-state": "^2.0.0"
  }
}

.travis.yml

それぞれの環境向けに一工夫が必要。ここが注意点。

  • Windows: Windowsソフトウェアが実行できる環境が必要あり
  • OS X: OS X 環境でビルドする必要あり
  • Linux: 特に工夫は不要

結果として、OS X 環境で Wine を入れてビルドする。

travis.yml
# 実際には Node を使うが、Objective-C を指定することで OS X 環境で動かすようにする
language: objective-c
cache:
  directories:
    - node_modules
env:
  # Node はコマンドを個別に実行してインストールするため、ここでバージョンを指定する
  - NODE_VERSION="4.1"
before_install:
  # nvm をインストールする。Travis の OS X 環境には nvm はデフォルトで入っていない
  - git clone https://github.com/creationix/nvm.git /tmp/.nvm
  - source /tmp/.nvm/nvm.sh
  # 指定バージョンの Node をインストールする
  - nvm install $NODE_VERSION
  # 指定バージョンの Node を有効にする
  - nvm use --delete-prefix $NODE_VERSION
  - node --version
install:
  - npm install
script:
  - npm test
before_deploy:
  # brew は最新状態にする
  - brew update
  # Windows環境へのビルドのために Wine は必須
  - brew install wine
  - wine --version
  # Windowsインストーラ作成のために makensis は必須
  - brew install makensis
  # ビルド + インストーラ作成 + zip化 までを各プラットフォームに対して行う
  - npm run archive
deploy:
  provider: releases
  # GitHub にリリースするための API KEY を暗号化した値
  api_key:
    secure: rHkNMAOFTOXoE2aiNw6YTOmfJUEE0Hk3PbljK0caHKlI0V/0J+cXbWDAn/+8key6DITVYAaRvpBNx5pI5SMibEaUPah1E5fPzSdHdcmpVO4FlPDyA/b4SSxXGittGKf3GrqdkgNNVI/oY4KuzFVU3ZXJTPbgRC858LlU0J9ni01GZ8Y1q2SKSOu4LAwHExbG4vHN9ysAVCr3+sCt56omQJFSOSxzwXhD7UtczYpreP3E0lQggfy5UtgTqvSlEM+ZOZOSX8DKltJx4fTV9ACt0HoYUdeIsCXq5JZVGT4hb6WFXV7wqkmbh3jXVh9TQ3jJVfaw/lRwrdiudd6K/2QY4tC79XoOKwitYGQ9td0y1CYgyBfjZG/PJ+X2n2ndKarUwZJeDnJ94j+Nco0q4esUZXjkhMvlftFOHa1uLMgfatElHKiao7zIlWdcyUkSJaT71cTOrgM2EBhWSE2OiP5UDzv3OEKHCFoUeoPAYap6s4vamacK/yW/JxTkOuqlaj6vWLTbxNAXjwOA5T6wisVbri7+LVUIAupi2nEt3DO7nk+nZ8be5bZgGnXmps7VUfLlk7mM9JOYYVjWlOAoChNp2OwJkXgIRfjLM7xtwXaV3S/mtbr85+jl//BogOdLLs1w/CWhBhbz4wWeincFugXLcqwWDUepA6mHW/gbAFxs7OA=
  # Releases ページにアップロードするファイル
  file:
    - dist/win/Google-Photos-win.zip
    - dist/osx/Google-Photos-osx.zip
  skip_cleanup: true
  on:
    repo: oniatsu/Google-Photos-desktop-viewer-app
    tags: true
    all_branches: true

api_key の部分は GitHub の API KEY を暗号化した値を入れる。以下を実行すれば良い。
参考: GitHub Releases Uploading - Travis CI

gem install travis    # Travis CI クライアントをインストール。要 Ruby
travis setup releases # GitHub の API KEY をセットする

後は GitHub に push するだけ

すると Travis が後は頑張ってくれる。
今回の .travis.yml ではタグが付いているリビジョンのみリリースビルドとして扱う。
実際のログはこちら: Build #75 - oniatsu/Google-Photos-desktop-viewer-app

時間は結構かかるので注意。
ビルドやインストーラ作成のための依存パッケージのインストールが時間の全体を占める。
ここはキャッシュできるようにすれば高速化できるかも。

リリースされたページ

これで GitHub Release にリリースされる。

OS X, Windows 向けのアプリはビルド済みのため以下からすぐにダウンロードできる。
Releasesページのダウンロードリンク

これで完了だ。
後はコードを書いて tag を付けて push するだけでリリースできる。

push するだけでリリースまで完了するため、後は開発に全て集中できる。

みんなも快適にクロスプラットフォーム・デスクトップアプリを作ってみよう。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.