Steamworks.js + Electronで、macOS用の署名と公証を含めたSteam用アプリを生成する手順

ここまでのあらすじ

ElectronでラッピングしたHTMLゲームを、Steam用にビルドするぞ！

でも、mac用のビルドを作る時、署名と公証を含めないと、うまく配布できないらしい。

どうするんだ？

そもそも署名と公証って何？

教えてChatGPT先生。

署名（Code Signing）:

目的: ユーザーおよびオペレーティングシステムに対してアプリケーションの信頼性を確認すること。

手順: アプリケーションの実行ファイルおよび関連ファイルにデジタル署名を追加する。

結果: ユーザーがアプリケーションを実行すると、macOSは署名を検証し、アプリケーションが信頼できるものであることを示す。

公証（Notarization）:

目的: アプリケーションがAppleによって検証され、検査を通過していることを確認すること。

手順: 開発者はアプリケーションをAppleに提出し、Appleがアプリケーションを検証し、AppleのサーバーでNotarizationを行う。

結果: ユーザーがアプリケーションを実行すると、macOSはAppleのサーバーからの検証を行い、Notarizationが成功した場合にのみアプリケーションを実行できるようになる。

もう少し簡単に言うと、署名とは、「これはまごうことなき影織が作ったよ！他の人は誰も中身をいじってないよ！」という影織のお墨付きで、

公証は、「これは安全なアプリです」というAppleのお墨付き、と言えます。

署名がないと、「開発元が確認できないため開けません」となり、

公証がないと、「悪質なソフトウェアかどうかをAppleでは確認できないため、このソフトウェアは開けません」と出ます。

（まぁ開く方法もあるけど...）

ネットで調べる限り、Steamで配布する場合は公証なしでもいける、という話も見かけたのですが、念には念を。

と言うことで、この2つのお墨付きを手に入れるために頑張っていこうと思います。

※めちゃくちゃ試行錯誤をしながら進めて、その手順を後から振り返りながらこの記事を書いているため、メモに抜け・漏れがあるかもしれません。

何かお気づきのことがありましたら、ご指摘いただけると嬉しいです。

Electronで署名するには

さて、署名をする手順をざっくり解説します。

前提

Apple Developer Programに登録しておく

個人にはちょっと重荷の年間99ドル。

developer.apple.com側で必要な設定手順

CertificateSigningRequest.certSigningRequestの発行

これはローカルの作業になります。

macの中に入っているキーチェーンアクセスを開いて、上部メニューから証明書アシスタント > 認証局に証明書を要求をクリック。

メールアドレスは開発者アカウントのメールアドレス、通称は名前を入力（一応、内容は任意です）。CAのメールアドレスは空欄。

ディスクに保存、鍵ペア情報を指定を選択。

次に出てくる保存先はご自由にどうぞ（わかりやすい位置がおすすめ）。

鍵のサイズは2048ビット、アルゴリズムはRSAで発行する。

これで、指定した保存先にCertificateSigningRequest.certSigningRequestが発行されたはずです。

証明書発行

https://developer.apple.com/accountにアクセスして、証明書を開く。

Developer ID Applicationを選択。

Profile TypeにはG2 Sub-CA (Xcode 11.4.1 or later)を選択し、先ほどデスクトップに保存したCertificateSigningRequest.certSigningRequestをアップロード。

完了すると、このような画面が出るので、ダウンロードボタンを押します。

落としてきた.cerファイルをダブルクリックすると、キーチェーンアクセスにインストールされます。これは安全なところに保存しておきましょう。

Identifiersの追加

左のタブから、Identifiersを選択。

青のプラスボタンをクリックします。

App Ids > Appを選択して次へ。

Descriptionには任意の説明を入れましょう。

Bundle IDはExplicitで、ドメイン名を逆から読むような形でセットします。

例えば、com.kageori.hogehoge（hogehogeがアプリ名、kageori.comがドメインの場合）みたいな感じで。

下部のアイコン一覧のチェックは、macOSやiOS特有の機能を使わないのであれば、特にチェックを入れなくていいです。

完了したら登録しましょう！

これで晴れて署名の登録が完了です。

Developer ID Applicationが登録されていると、electron-builder側で、キーチェーン内の証明書を自動的に使用してビルドしてくれるみたいです。

一番下の行に出ているのがわかりますね

Electronで公証を受けるには

こちらの記事に大変お世話になりました。ありがたき先人の知恵...

[Electron] macOS用アプリに「コード署名」と「公証」を行う - ねこの足跡R

今回はインターネット経由で配布したmacOS用のアプリが安全であることを証明するための作業を行います。 ぶっちゃけ面倒です← あとmacOSがないと作業できませんのでWindowsユーザーの方は（お小遣いを）準備してから挑んでください。

blog.katsubemakito.net

アプリ用パスワードの取得

まず、https://appleid.apple.com/account/manage にアクセスして、アプリ用パスワードというものを取得します。

わかりやすい名前をつけましょう。

パスワードを入れて、生成完了です。

このパスワードを確認できるのはこのタイミングのみです。後から確認できないので、必ずすぐにメモを取っておきましょう。

ライブラリ追加

$ npm install electron-notarize

$ npm install  dotenv

でライブラリを追加します。

前者は公証用、後者は公証に使う個人情報を、環境変数から読み込むためのツールです。

コード追加

.envファイルを生成し、

APPLE_ID=hoge@example.com

APPLE_PASS=aaaa-bbbb-cccc-dddd

ASC_PROVIDER=EXAMPLE123

のような形で指定しておきます。""などでくくる必要はありません。

上から順に、開発用メールアドレス・先ほど発行したPW・Team IDです。

Team IDは、https://developer.apple.com/account の中にある、10桁の大文字アルファベットと数字からなるIDです。

※もちろん、この.envは.gitignoreに入れておきましょうね！！！

---

buildフォルダを作成し、entitlements.mac.plistという名前のファイルを生成し、その中に以下を丸ごとコピペします。

※参照したコードでビルドすると、公証はうまくいくけれど、steamclient.dylibファイルが署名が不正で、アプリの署名と異なるTeam ID（開発者のID）を持つため、読み込むことができない、というエラーで立ち上がらなくなっていました。

今回、別のライブラリを読み込んでいたのですが、そのライブラリを私が作ったわけではない = 署名が違う、ということで起こっていたエラーだったようです。

そのため、上記のような設定をすることで、無事に解決しました。はぁ〜沼だった。

ちなみにそれぞれ何をしているのか...

com.apple.security.cs.allow-jit: JIT（Just-In-Time）
JITコンパイルを許可するかどうかを指定します。

com.apple.security.cs.allow-unsigned-executable-memory: このキーがtrueに設定されている場合、アプリケーションが署名されていない実行可能なメモリを許可します。

com.apple.security.cs.disable-library-validation: このキーがtrueに設定されている場合、アプリケーションが使用するライブラリの検証を無効にします。

---

notarize.jsというファイルを追加します。

以下をコピペして、appBundleIdを自分のBundle IDに置き換え、appPathを揃えておきましょう。

package.jsonをこんな感じで書きます。

余分なコードも入っていて少し長いのですが、ポイントは、

・buildの中の "appId"を自分のBundle IDにする。

・"afterSign"に先ほどのnotarize.jsのパスを指定する。

・macの中で "hardenedRuntime",  "gatekeeperAssess", "entitlements": "build/entitlements.mac.plist","entitlementsInherit"を指定する（plistのパスを間違えないように）

というあたりかなと思います。

これで、

$ electron-builder --mac --x64

を叩けば、なんとelectron-builderが裏側で、公証に必要なアレやソレをAppleとの間で自動的にやってくれるのです。あらめっちゃ便利。

5-10分くらいかかるため、一回コマンドを叩いたら、お茶でも飲んで気長に待ちましょう。

最終チェック

公証が完了すると、Appleから通知メールが来ます。

また、

$ spctl -a -vv /path/to/YourApp.app

と言うコマンドで、正しく公証を受けられたか確認できます。

つまり...これで晴れて自分のmac用アプリを堂々と世に出回らせる準備ができたというわけです！！！

まとめ

情報が少なすぎてマジでしんどかった。

無事に一山乗り切れてほんとによかった。