Electron で作ったアプリを Mac App Store に公開する手順

## 前提
Electronで作ったアプリをMac App Store公開する方法は、Qiitaにも記事がありますが
情報が古いのか、自分の環境が悪いのかうまくできなかったので、この記事を公開しています

## 環境
- MacOS Mojave 10.15.3
- Electron 6.1.7
- 使用ライブラリ
   - electron-vue
     - electron-vueを使っていなくても手順には変わりないと思います
     
### 注意点
Electronのバージョン7,8はMacOSのPrivateAPIを使用しているので、審査でRejectされます(2020/2/15現在)
Electronのバージョン5以上でない場合もRejectされるので、使用できるのはバージョン5,6の最新版です。(2020/2/15現在)
現在Issueが立てられているので、時間が経てば修正されると思います。https://github.com/electron/electron/issues/20027

## 1. 証明書を取得する
Apple Developer Program に登録していなければ登録してください。（年会費がかかります）
証明書を取得します。
証明書は２つ必要になります。![Screen Shot 2020-02-15 at 22.41.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282870/39d5811d-e1b7-3e51-3a46-4c401b283471.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282870/09fd926b-7451-8bf0-67d2-182a3edfc2bf.png)
適当な場所に保存します。

Apple Developerにサインインします。
歯車のアイコンをクリックします。
![Screen Shot 2020-02-15 at 22.49.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282870/25061212-9b3d-02c2-9669-479a12166eab.png)

 ![Screen Shot 2020-02-15 at 22.55.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282870/362029ee-4c02-1431-d6be-ea242fd2a1d1.png)

Mac App Distribution を選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282870/b99679b1-c9bd-55c5-eac9-2682e0085d3d.png)

作ったファイルを選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282870/025cbc71-5c81-037d-0dd5-51bd30077f89.png)

次の画面でダウンロードできるので、ダウンロードします。
ダウンロードしたファイルをダブルクリックで開いてKeyChainに登録します。

もう一度同じ手順で証明書を作ります。
先ほどは、Mac App Distributionでしたが、次は Mac Installer Distribution　を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282870/f06328f1-3a43-dce3-6850-4e83e6959d40.png)

終わったらKeyChainに同じく登録します。
以下のように２つが登録されていればOKです。
![Screen Shot 2020-02-15 at 23.02.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282870/60ba147a-55dc-4ee7-c751-5a18154d4150.png)

## 2. AppIDを設定する
アプリケーションのIDを設定します。
![Screen Shot 2020-02-15 at 23.07.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282870/df3949ff-5497-7a73-7e28-1c2dcf3ff5ea.png)

![Screen Shot 2020-02-15 at 23.08.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282870/5ccc2467-ac0f-b049-69d0-9efcdf4c2456.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282870/caf89a64-04c9-ea70-7e6c-89929b3418e5.png)


## 3. Profileを作成する
証明書を取得したページからProfileも取得します。
![Screen Shot 2020-02-15 at 23.04.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282870/d2117795-35ae-ee73-d14d-46013e412ae0.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282870/a11f6ed5-68b1-0366-4553-f3aad2d04543.png)

先ほど作ったAppIDを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282870/cdf3280f-bacf-4b0c-9f27-14c709dd9556.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282870/4d77e27b-34ec-5a9d-79a9-52eae675853d.png)
名前を好きなようにつけて、ダウンロードします

## 4. electron-builderをインストール
npmを使って、electron-builderをインストールします。

```
npm i -D electron-builder
```

## 5. 必要なファイルを作る
``` parent.plist
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    <key>com.apple.security.app-sandbox</key>
    <true/>
    <key>com.apple.security.application-groups</key>
    <array>
      <string>TEAM_ID.appID</string>
    </array>
  </dict>
</plist>

```
TEAM_ID はapple developerのアカウントのMembershipページにあります。
AppIDは先ほど登録したAppIDを入れます。
作ったアプリケーションがネットワーク通信をするなら

```
<key>com.apple.security.network.client</key>
<true/>
```
を追加します。他にも、いくつかの機能を使うには新たにキーを追加する必要があります。
詳細はAppleのページを参照してください。
https://developer.apple.com/library/archive/documentation/Miscellaneous/Reference/EntitlementKeyReference/Chapters/EnablingAppSandbox.html



``` child.plist
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    <key>com.apple.security.app-sandbox</key>
    <true/>
    <key>com.apple.security.inherit</key>
    <true/>
  </dict>
</plist>

```

``` package.json

{
  "name": "myApp",
  "version": "1.0.0", 
  "build": {
    "productName": "myApp",
    "appId": "com.example.myapp",
    "directories": {
      "output": "build"
    },
    "mac": {
      "icon": "path to icons file",
      "target": "mas"
    },
    "mas": {
      "provisioningProfile": "path to profile",
      "entitlementsInherit": "path to child.plist",
      "entitlements": "path to parent.plist",
      "type": "distribution"
    }
}
  
```

name, version, productName は自由に入れてください
appIdには作ったappIDを
icon には icnsのパスを、provisioningProfileには作ったProfileのパスを
entitlementsInheritにはChild.plistのパスを
entitlementsにはParent.plistのパスを入れます

## アプリケーションをビルドしてAppStoreに登録する
アプリをビルドします。

```
node electron-builder
```

pkg ができたら、TransporterというアプリをAppStoreからダウンロードします。
Transporterを開いて、サインインしてドラックアンドドロップでpkgファイルをサーバーに送信します。

あとは、AppStoreConnectでアプリを作って審査に通れば、MacAppStoreに登録完了です。

## 参考にさせていただいたページ
- https://github.com/electron/electron/blob/master/docs/tutorial/mac-app-store-submission-guide.md
- https://dev.to/varisbhalala/publishing-electron-app-to-mac-app-store-2oci
- https://github.com/electron-userland/electron-builder/issues/4553