Electronアプリをプロダクトとして「正しく」リリースするために必要な3つのこと

by yoshida
2015/12/01
Typetalk / Development

TypetalkデスクトップアプリTypetalkデスクトップアプリ

先日、弊社チャットサービスTypetalkのデスクトップアプリをリリースしました。おそらくTypetalk.appのパッケージを覗いてElectronの痕跡を見つけ出した方もいらっしゃると思いますが、その通りElectronをベースに実装しています。

ElectronはHTML、JavaScript、CSSなどWebの技術を使用してデスクトップアプリを開発できます。GitHub社のAtomエディタをはじめとして、今では非常に多くのアプリがElectronベースで公開されており、実装方法についても既に多くの記事が書かれています。

ただし、正式にアプリを公開する場合には、コードサイニングなどを行うなど、考慮が必要なポイントがいくつかあります。そこで本記事では正式にElectronアプリをWindows/Mac向けにリリースするにあたって必要だった3つのことを紹介します。

1.各種アイコンを用意する

アプリアイコン

Electronはデスクトップアプリですので、アプリの顔とも言うべきアイコンが必要です。何も用意しない場合、Electronの標準アイコンになってしまい、製品としてはリリースできません。

Electronの標準アイコンElectronの標準アイコン

アプリ本体のアイコンでは以下を用意しました。Typetalkアプリではビルドにnpmモジュールelectron-packagerを使用していますが、そのオプションとして渡しています。

OS 形式 サイズ
Windows .ico 256×256
Mac .icns 1024×1024 
$ electron-packager 略 --icon=Icon.ico  # Windows
$ electron-packager 略 --icon=Icon.icns # Mac

TypetalkアイコンTypetalkアイコン

トレイアイコン

MacトレイアイコンMacトレイアイコン

WindowsトレイアイコンWindowsトレイアイコン

OS 形式 サイズ
Windows .png 32×32 64×64(@2x) 96×96(@3x)
Mac .png 18×18 36×36(@2x) 54×54(@3x)

Windowsの通知領域アイコンサイズはWindowsデベロッパーセンターのドキュメントによると標準解像度で16x16px、高解像度で32x32pxとあるのですが、Electronでそのサイズを指定すると潰れて表示されてしまいました。試行錯誤したところ倍にすると綺麗に表示されました。

Macのステータスバーの高さは22pxですので、余白を考えて18×18にて作成しています。
Typetalkでは通常時・未読時・オフライン時と3種類にアイコンを分けています。また通知領域・メニューバーの背景色によっては見難くなるので、Mac向けには黒を、Windows向けには白を基調にて見やすい画像を用意しました。

トレイアイコントレイアイコン

2.コードサイニングを行う

Windows

Windowsではコードサイニング証明書を購入し、インストーラの作成時に署名する必要があります。Typetalkではインストーラの生成にnpmモジュールのelectron-installer-squirrel-windowsを使用しています。このモジュールではpackage.jsonで署名に関するオプションを指定します。このオプションは内部的にSignTool.exeに渡されます。こちら後日更新致します。

{
  "name": "Typetalk",
  ...
  "sign_with_params": "/a /f .\\certs\\YOUR_CERT.pfx /p CERT_PASSWORD"
}

Mac

MacにはGatekeeperというセキュリティ機構が用意されており、不正なアプリケーションをインストールできないようになっています。信頼できるアプリケーションとして認識させるためには、Mac App Store版として申請する方法などがありますが、ストア以外で直接配布したい場合はDeveloper ID Applicationとして署名する必要があります。

ビルドマシンのキーチェーンにDeveloper ID Application用の証明書をインストールしておき、ビルド時にelectron-packagerの--signオプションにて指定します。キーチェーンで表示されている名称とオプションで渡す名称が一致しないと失敗するので注意しましょう。

$ electron-packager 略 --sign='Developer ID Application: Nulab Inc. (XXXXXXXXXX)'

3.AutoUpdaterに対応する

ElectronにはautoUpdaterモジュールが用意されており、これによってアップデート検知・インストールを行うことができます。下記を準備する必要があります。

アプリ側

アプリ側の実装はシンプルです。アップデートをチェックするためのAPI（自分で用意します）を設定し、アップデートが存在した場合の処理を記述します。

# APIのURLを設定
var feedUrl = 'https://YOUR_API_ENDPOINT?version=' + app.getVersion();
autoUpdater.setFeedURL(feedUrl);

# アップデートがありダウンロードが済んだ場合のイベント処理
autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {

  # インストールするかどうかを確認
  var index = dialog.showMessageBox(mainWindow, {
    type: 'info',
    buttons: [i18n.__('Restart'), i18n.__('Later')],
    title: "Typetalk",
    message: i18n.__('The new version has been downloaded. Please restart the application to apply the updates.'),
    detail: releaseName + "\n\n" + releaseNotes
  });

  if (index === 1) {
    return;
  }

  # アプリを再起動し、アップデートを適用
  quitAndUpdate();

他にもエラー系のイベント処理など必要ですので、ドキュメントを参考に実装すると良いでしょう。

サーバ側

アップデートの有無を返すAPIを準備する必要があります。弊社ではアップデート用のAPIをTypetalkのWebサービスに組み込みたくなかった、わざわざサーバを用意するほどでもないとの理由から、Amazon API GatewayとAWS lambdaを組み合わせて簡単なAPIを実装しています。

exports.handler = function (event, context) {
  var latestRelease = {
    version: "1.2.0",
    url: "http://example.com/Typetalk.app.zip",
    name: "Typetalk for Desktop " + version,
    notes: "- プロキシ認証\n- ウィンドウメニューの表示\n- パフォーマンスの改善"
  };

  if (event.version < latestRelease.version) {
    context.done(null, latestRelease);
  } else {
    context.done("Not Modified");
  }
};

以上の実装で、このようなダイアログが表示されるようになります。

アップデートの確認ダイアログアップデートの確認ダイアログ

ElectronのautoUpdaterモジュールは当初Squirrel.MacのみでWindowsには対応をしていませんでしたので、弊社では簡単なラッパーモジュールを書いて対応させていました。つい最近Squirrel.Windowsにも対応され、Windowsのアップデート検知もautoUpdaterを通して行えるようになっています。

その他

  • ドキュメントはelectron.atom.ioよりもgithub.com/atom/electron/tree/master/docsを読みましょう。electron.atom.ioには最新のものが反映されていないことがあります。
  • 開発が非常に活発でかなりの頻度でリリースされます。Releasesはよくチェックしておきましょう。
  • Issueの報告をしましょう。バグを踏むことも結構あったのですが、報告すれば対応してくれますし、場合によっては自分で直してプルリクを送ると取り込んでくれます。私もいくつか報告やプルリクを行いました。

最後に

Electronアプリを作って動かすのはそう難しくありませんが、実際に製品として公開するとなると、細かいところに対応しなければいけませんでしたので今回紹介しました。

また現在、Electron以外にもWebの技術を使用してデスクトップアプリを開発するライブラリがあり、そのような技術を使って公開されているアプリが増えてきています。SPAによって画面遷移が少ないアプリや、CSS3によってリッチなアニメーションなどを実装できるようになったことで、従来のネイティブアプリと遜色のないアプリが実装できるようになったこともこの要因のように思います。

皆さんも是非トライしてみてください。

ヌーラボではネイティブアプリだってWeb技術で書いてやる！というエンジニアを募集しています（もちろんそうでない方も募集しています）。

より良いチームワークを生み出す

チームの創造力を高めるコラボレーションツール

製品をみる