Electron製アプリ、「アニメ画像に変換する君」をMac App Storeに展開しました。このアプリでは連番PNGファイルから、LINEスタンプ用のAPNGファイルを作成したり、Webページ用の綺麗で軽量なアニメ画像とそれを表示するためのHTMLファイルの作成ができます。

インストールや使い方はICS MEDIA記事「LINEアニメスタンプにも利用できる！ APNGやWebPへ変換可能なアプリ「アニメ画像に変換する君」をリリース」ご覧ください。

本記事は、アニメ画像に変換する君を「Mac App Storeに登録したときの手順」を公開します。

手順は主に「1. Getting Started - electron-osx-sign」を参考にしてます。

※ 以下、Mac App StoreはMASと省略します。

MAS提出用のアプリ作成に使用した環境・ツール

フォルダ構成（省略あり）

package.json (Electronアプリ用ではなく、アプリ全体のパッケージング用)
tmp-release （リリース用ファイルのみ配置したテンポラリフォルダー）
- package.json (Electronアプリ用)
- index.js
- index.html
resources
- app.icons
dev
- info.plist
- parent.plist
- child.plist

ElectronアプリをMac App Storeに登録したときの手順

1. Apple Developer Programに登録する

MASでの公開にはAppleへのお布施が必須です。チームエージェントに追加してもらっただけなので、特につまずいたことはなかったです。

2. 署名用の証明書ファイルを取得する

ここは別の人に作業してもらったので、具体的な取得の内容は割愛。「Apple Developer Center - サポート - 証明書」を参考にどうぞ。Mac App配布用証明書とMacインストーラ配布用証明書が必要で、ダウンロード後に証明書をダブルクリックして、キーチェーンに追加します。

3. MAS用アプリを作成する

ElectronでMAS用ではないアプリ作成をする具体的な手順は割愛します。ICS MEDIA記事「初めてのElectron！ HTML5でデスクトップアプリを作成しよう」を参考にしてください（この記事はElectron v1.1.3を対象に解説しています）。

3-1. MAS用のアプリを作成する

MAS用のアプリを作成するために、electron-packagerを使用しました。MASアプリとして作成する場合は、platformにdarwinではなくmasを指定します。また、アプリ内にあるInfo.plistのチームIDを上書きするためにextend-infoオプションでdev/info.plistを指定しました。チームID以外でInfo.plistに記載するアプリ名とかバンドルIDとかの細かいところの設定はオプションで指定すればelectron-packagerがやってくれます。

info.plistに指定するチームIDはDeveloper Centerの[Membership]から見れます。

dev/info.plist

<plist version="1.0">
<dict>
    <key>ElectronTeamID</key>
    <string>チームID</string>
</dict>
</plist>

electron-packagerに指定するオプションはいろいろあるけれど、だいたいこんな感じ。下記のオプションは多分全部必要。

第1引数 : パッケージするElectronアプリのディレクトリ
第2引数 : アプリ名
platform : プラットフォーム
app-bundle-id : Developer Centerで登録したバンドルID (逆ドメイン.アプリ名)
extend-info : Info.plistの上書き用ファイル。
build-version : ビルドバージョン、iTunes Connectでアップロードする際には、ここのバージョンを更新する必要がある
version : electron-prebuiltのバージョン
app-version : アプリケーションのバージョン
icon : アプリのアイコン

electron-packager ./tmp-release '日本語アプリ名' --platform=mas --arch=x64 --app-bundle-id='バンドルID'  --extend-info=dev/info.plist  --version='1.2.3'  --app-version='1.0.0' --build-version='1.0.001' --icon='resources/app.icns' --overwrite

3-2. アプリを署名する&アプリのセキュリティの許可

アプリはelectron-osx-signで署名しました。また、アプリへの権限の追加のために、parent.plistとchild.plistを指定しています。

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>

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>チームID.バンドルID</string>
    </array>
    <key>com.apple.security.network.client</key>
    <true/>
    <key>com.apple.security.files.user-selected.read-write</key>
    <true/>
  </dict>
</plist>

署名する

electron-osx-sign '日本語アプリ名-x64-mas/日本語アプリ名.app' --entitlements='dev/parent.plist' --entitlements-inherit='dev/child.plist'

コマンドの実行前にターミナルでexport DEBUG=electron-osx-signを実行しておくと、どのファイルが署名されたかとか見れてなんとなく安心できます。

3-3. インストーラーを作成する

インストーラーの作成には「electron-osx-flat」を使用しました。これは、「electron-osx-sign」をインストールすると一緒にインストールされます。

electron-osx-flat '日本語アプリ名-mas-x64/日本語アプリ名.app' --verbose --pkg AnimationImageConverter.pkg

3. MAS用アプリを作成したときの、つまずき集

アプリに署名が出来ない
Electronアプリがspctlコマンドで署名が正しくないとされてしまう件
作成したアプリでファイルの保存が出来ない
作成したアプリで起動時にアプリがフリーズする
pkgで作成したアプリが自PCにインストール出来ない
- 未解決。インストーラー作成者と別の人にインストールしてもらうと何故か出来た。不思議。
MAS用アプリを実行すると開発者が未確認とされてしまう
- 審査通ったのでたぶんそういうものなんだろうと諦め。

4. アプリを提出

4-1.マイAppを登録する

アプリの提出前にiTunes Connectから、マイAppを登録する必要があります。メモを忘れてしまったので、具体的には覚えていないけれど、Developer Centerから登録したバンドルIDと連携させました。[SKU]はランダムな文字列でOKです。[会社名]はどこの会社とも重複していない名前を登録する必要があります。英語会社名で取ろうとしたら「すでにその会社名存在するよ～」みたいなメッセージがでてしまってダメだったので日本語名で取りました。また、あとから変更はできないようなので確認はちゃんと取らなければだめ

4-2. Application Loader

Application Loaderを起動する。
[Xcode]→[Open Developer Tools]→[Application Loader]で実行できます。もしくは、iTunes Connectからも直接インストーラーをダウンロードできます。

4-3. アプリのアップロード

Application Loaderの右下の[選択]ボタンから、pkgファイルを選択します。
iTuens Connectにアプリを登録してないと、アプリないんだけど！みたいなエラーメッセージがでます。

その他に、アイコンに含まれている画像のサイズがないだとか、そういった簡単なチェックはこの時点で行われます。

4.アプリを提出したときのつまずき集

5. 審査

アプリのアップロードが終わった後、iTunes Connectから審査に出すボタンを押して審査に出します。

審査に出すには、概要の記載や、スクリーンショット、レーティングや連絡先、住所の登録などなどが必要でした。

App アイコンはApplication Loaderでのアップロード後すぐには表示されず、ちゃんと登録できたのかな・・・とちょっとドキドキしました。

参考

大変参考にさせていただきました。

おわりに

右往左往、結構疲れました。App Store向けのアプリ作成経験がないため、読み返してみると「えっ、そこでつまずくの！？」といったようなつまずきが多かったです・・・。また、試行錯誤しながら提出したため作業が前後していて、重複している作業があるかもしれません。コメント大歓迎ですが、マサカリは優しくお願いします :;(∩´﹏`∩);:

それにしても、シェルスクリプトの準備とか大変そうだったので、electron-packagerがmas対応完了してたみたいで良かった・・・。

本記事がみなさんの参考になれば幸いです。

Electron製アプリ「アニメ画像に変換する君」をMac App Storeにリリース、アプリリリース時の手順まとめ