ElectronアプリのMicrosoft Storeアプリ申請 #Electron

概要（めっちゃ嬉しい利点）

Electronで作ったアプリもMicrosoftストアアプリとして申請したら採択されたよ！
Microsoftのストアアプリにすればコード署名証明（code signing certificate）は自動で付いてくるというのは本当だったよ！(表現は正確ではないかも)
開発者登録費用は初回のみでOKっぽいよ！2000円以下の激安！
個人登録もできるよ！
Xbox等を諦めれば、普通のデスクトップアプリとして動くよ！
みんなもストアアプリ化しよう！

はじめに（時代遅れの年寄りのたわごと・読み飛ばし可）

フリーソフトや学生時代の研究、仕事で使うちょっとしたツールなど、古くから個人でアプリを開発してきた者にとっては、最近のWindowsのSmart screenやMac OSのGatekeeperといったアプリのフィルタリングは悩みの種だと思います。時代が進むにつれ、Webでの資料も豊富になってきましたし、クロスプラットフォームのアプリも作りやすくなるなど、開発のしやすさという意味ではハードルが下がってきたと思いますが、配布のしやすさという点ではハードルが上がってしまっていると感じます。これではプロになる前の若い人たちがプログラムの楽しさを体験できないのではという心配も抱きます。

私自身もWPFが出てきたりWebが台頭してきたころから、時代についていけず、ずっと本職の計算機シミュレーションの世界に引きこもっていました。HPC向けのプログラムだけならウィンドウがいらないので、CUIアプリ作りで済みます。それでも、可視化ツールなどはウィンドウが必要でWin32で書いたりしていましたが、仕事仲間に配布する時などにSmart screenに注意喚起される悲しい日々を送っていました。

最近はもう一度奮起してElectronでのアプリ開発に挑戦していますが、折角のクロスプラットフォームアプリも、Smart screenとGatekeeperで配布し辛いですね。素直にコード署名証明書を購入しろということかもしれませんが、フリーソフトだったりオープンソースだったりする開発者にとって、年間数万円する証明書発行費用は馬鹿になりません。

さて、署名されていない所謂「野良アプリ」のインストールにおいて、

WindowsならばSmart screenの警告が出ても、ユーザーの判断で実行することが可能です。
Mac OSは2020年2月以降にインストールできなくなりました。

Mac OSをあきらめ、ユーザーをWindowsに絞れば、使ってもらえなくもないかと思ってお茶を濁していましたが、最近はもっとイラっとしたことがありました

ええ、シマンテックさんにまで怒られるようになってしまったんです。しかも、自分でビルドしたアプリにも関わらず、ダウンロードインサイトと言われる。そこで重い腰を上げて何とかしようとした奮闘記です。

期待のMicrosoft Store

Electronを始めたころから気になっていたWeb上の噂で、

Microsoft のストアアプリならコード署名証明書相当が付いてくる(真実)

というようなものがありました。ただ、その情報が少なく、本当かどうかわかりませんでした。

Microsoftのストアアプリとして自分の開発したものを申請するには、Microsoft パートナーセンターで開発者登録する必要があります。ただし、その費用が初回一度だけの払い切りで、2000円弱という破格でした。これが安すぎることが原因で

こんなに安いのでコード署名証明書が付くわけない。申請前に証明書の準備が別途必要(偽情報)
登録費用はAppleの様に毎年必要（偽情報）

という偽情報も出回っていました。少なくとも私がググった範囲では。

このような偽情報が出回るというか、疑いたくなる気持ちもわかります。一般に

コード署名証明書の発行には年間数万円の費用が必要
コード署名証明書の発行には個人ではなく組織での申請が前提
Mac OS向けのアプリではApple Developer Programへ参加すればよいが、参加費用が年間で11800円程度

とされているからです。フリーソフトやオープンソースの個人開発者にとっては、数万円は痛いでしょう。覚悟を決めてお金を準備したとしても、2番目の問題が立ちはだかります。個人事業主にでもなるのか。また、ソフトウェア会社以外で働いている人にとっては、仕事で使うツールを作って、かつ取得費用は確保できたとしても、組織の理解がなく断念なんてこともありそうです。

今回は、実際にMicrosoftのストアアプリとして個人で申請して、コード署名証明が付いて来ることを確認したのでレポートしようと思います。また、Electronのストアアプリ化も合わせて行ったので、これも報告したいと思います。

やること一覧

ElectronアプリをMicrosoft ストアアプリ(以下、単にストアアプリ)としての申請・公開までに行うことは主に次の事項です。

Microsoft開発者アカウントの登録
ストアアプリとしてのアプリ名の予約と製品IDの取得
Electronアプリのappxとしてのビルド
アプリに関する申請情報の入力
申請と認定待ち

順に見て行きましょう。

Microsoft開発者アカウントの登録

Microsoftの開発者アカウントの登録は、次のURLから行えます（2020年5月1日現在）

https://developer.microsoft.com/ja-jp/store/register/

MicrosoftのWebページは乱立していて検索しても中々見つかりにくいですね。

ここでクレジットカードで登録料を払います。無事に登録できれば、「Microsoft パートナーセンター」というところにログインできます。今後ストアアプリの申請ではここにログインして作業を行います。

ストアアプリとしてのアプリ名の予約

今度はアプリの申請に先立ち、アプリ名の予約を行います。アプリ名の予約を行うことで、他の開発者とのアプリ名の重複が避けられるだけでなく、アプリのビルド時のパッケージングや申請に必要な製品IDが発行されます。

まず、「Microsoft パートナーセンター」にログインし、ホームに行くと以下の画面になります。ここで、WindowsとXboxを選びます。

すると、「概要」というページ表示に変わり、「新しいアプリの作成」というボタンがあるので押しましょう。これでアプリ名の予約が可能です。次の画面になると思うので（スクショをとるのが遅れて薄くなってしまっていますが）アプリ名を入力し、重複がないことを確認したらボタンを押して予約してください。ちなみに、予約期間は3か月ですので、それまでに正式な申請へ進みます。

すると画面遷移して「申請を始める」というボタンが出るので押しましょう。また画面遷移して次のような申請情報の入力画面になると思います。

ここで、申請情報の入力は一旦置いておいて、アプリのパッケージングに必要な製品IDが発行されているので確認しましょう。必要な製品IDは、先の最後の画面から、「製品管理」のボタンを押して次のような画面へ遷移することで見られます。

この中で、赤で塗りつぶしたところに書かれている項目が必要です。具体的に次のものになります

パッケージ/ID/名前：「5～6桁の数字＋PublisherName.AppName」の形式の"identityName"情報
パッケージ/ID/発行元：「CN=XXXXXXXXXXX」の"publisher"情報
パッケージ/プロパティ/発行元表示名：「PublisherName」形式の発行者表示名

ここで、発行者名はユーザー登録した時の名前になりますが、右上のギアマークから多少は変更出来ます。私が嵌った注意点として発行者名には半角のハイフンを使わないことがとても重要です。半角ハイフンを使ってしまうと、後述のelectron-builderでのappx作成時にエラーになります。ちなみに、「発行者表示名」は変更することができますが、一つ目の項目のidentityNameは変更できません。万が一ハイフンをつけて登録してしまった場合の注意点は次章で書きます。

Electronアプリのappxとしてのビルド

すでにアプリがビルドできている人は、この章を飛ばして次の章へ進んでください。

さて、アプリ名の予約ができたので、今度はアプリのビルドです。今回対象とするElectronアプリは、Windowsデスクトップ向けにビルドしたものを、appxへパッケージングして申請します。パッケージング時に先の「Microsoft パートナーセンター」で発行された「製品ID」が必要になります。

Electronアプリをストアアプリ化するには、Windows向けバイナリ(exe)としてビルドしたものを、appx形式にパッケージングする必要があります。申請するのはappxファイルです。

ビルドとappx形式へのパッケージングの方法は、次の三つの方法が簡単そうです(2020年5月現在時点)

electron-builderでビルドとパッケージングを一度に行う。
electron-builderでビルドし、electron-windows-storeでパッケージングを行う
electron-packagerでビルドし、electron-windows-storeでパッケージングを行う

ちなみに、electronの公式サイトで紹介されている方法は3番目の方法です。しかし、私はelectron-packagerを使っていないのでこの方法は試していません。今回は、1番目の方法をレポートします。これはこちらの記事を参考にしました

Electronで作ったアプリをMicrosoft Storeに出すのに詰まった話

ただ、electron-builderにいくつかのバグがある(もしくはあった)ようで、上手くいかない場合もあると思います。その場合は、2番の方法を次の記事を参考に試してみてください。実際に私も1番目の方法では苦労して、最初に成功したのは2番の方法でした。

Publishing Electron App to Windows Store

方法1：electron-builderビルドとパッケージングを一度に行う

あらためて、1番目の方法について説明します。

electron-builderでのbuildに関して、package.jsonの必要な部分だけを抜き出すと次のようになります。

{
...(略)...
"name": "AppName",
"version": "0.3.28",
"scripts":{
  "build-appx": "electron-builder -w appx"
}
"build":{
   "appx": {
      "identityName":"5～6桁の数字＋PublisherName.AppName",
      "applicationId":"PublisherName.AppName",
      "publisherDisplayName":"PublisherName",
      "publisher":"CN=XXXXXXXXXX",
      "languages":["JA-JP","EN-US"]
   },
   ...(略)...
}
...(略)...

これだけです。いつものビルドスクリプトに、-wのうしろにappxを付け加えてください。さらに、"build"の中に"appx"という項目を設けてください。ここで、「Microsoft パートナーセンター」で取得した「製品ID」を次の項目として設定します

"identityName"に「パッケージ/ID/名前」を設定
"applicationId"に、「発行者名.アプリ名」という形式で設定する。"identityName"の先頭の数字を除いたもの。
"publisherDisplayName"に「パッケージ/プロパティ/発行元表示名」を設定
"publisher"に「パッケージ/ID/発行元」を設定。これは"CN=XXXXXX"の形式です。
"language"にサポートしたい言語を設定。ここで指定した言語(国)の数だけ、次章のアプリ申請時に、ストアでの表示情報を入力する必要が出てきます。

ここで注意点です。"identityName"、"publisher"、"publisherDisplayName"は「Microsoft パートナーセンター」で取得した「製品ID」に必ず一致させてください。一方で、"applicationId"には、ハイフンが使えません（これはelectron-builderのバグの可能性もあります）。

万が一、ハイフンを使ってしまった場合、一度発行された「パッケージ/ID/名前」は、パートナーセンターでユーザー情報を変更しても変えられません。変えられるのは「パッケージ/プロパティ/発行元表示名」だけです。そのときは、"applicationId"の項目から、ハイフンだけ削ってください。そうすればコンパイルが通ります。ここだけはパートナーセンターの登録内容と違ってしまっても大丈夫でした。

ここでコンパイルをいつも通りに行うと次のようなメッセージが出てきます。

my-terminal$ npm run build-appx

> AppName@1.0.0 build-appx C:\hoge\appname
> electron-builder -w appx

  • electron-builder  version=22.5.1 os=10.0.18363
  • loaded configuration  file=package.json ("build" field)
  • writing effective config  file=dist\builder-effective-config.yaml
  • packaging       platform=win32 arch=x64 electron=8.2.3 appOutDir=dist\win-unpacked
  • building        target=AppX arch=x64 file=dist\appname_setup.appx
  • AppX is not signed  reason=Windows Store only build

appxは生成されますが、なにやら怪しいメッセージとしてAppX is not signed reason=Windows Store only buildと表示されます。そう、この時点ではコード署名されていません。ですが、ご心配なく。このままストアアプリとして申請できます。ただし、署名されていないのでセルフインストールもできません。申請前にセルフインストールして動作確認したい場合は、次の方法2でパッケージングすると自己署名も同時にできるのでセルフインストール可能になります。

方法2：electron-builderでビルドし、electron-windows-storeでパッケージングを行う

さて、もしどうしてもうまくいかなかった場合、先にも書きましたがelectron-windows-storeを使った2番目の方法を試してください。2番目の方法でも実は注意が必要で、先に上げたサイトはちょっとだけコマンドが間違っています。修正したパッケージングのコマンドをpackage.jsonに書くと次のようになります。

...(略)...
"scripts":{
  "build-appx2": "electron-builder -w --x64 && electron-windows-store --input-directory .\\dist\\win-unpacked --output-directory .\\dist\\appx --package-name AppName --package-display-name AppName --package-version 1.0.0.0 --publisher-display-name PublisherName --identity-name 5～6桁の数字＋PublisherName.AppName"
}

electron-windows-storeの場合は、"publisher"すなわち「パッケージ/ID/発行元」は事前に登録しておくのでpackage.jsonには記入の必要がありません（その意味ではセキュアかも）。これで、power-shellからnpm run build-appx2してください。

また、versionの指定も必要です。特に、メジャー.マイナー.サブマイナーの3桁バージョンニングではなく、メジャー.マイナー.サブマイナー.サブサブマイナーの4桁バージョンニングが必要です。3桁だとエラーになります。(方法1のelectron-builderでは自動で4桁目に0が付加されます)

この方法2の場合ではelectron-windows-storeの利用の過程で自己署名(オレオレ署名)することができるので、申請前にインストールを試して動作確認できます。

アプリに関する申請情報の入力

アプリの準備ができたので申請を行いましょう。「Microsoft パートナーセンター」にログインし、申請中のアプリを選択します。先に紹介した次のような画面になるでしょう。

入力すべき場所として全部で六つの項目があります。正しく入力できると、右の「未承諾」のところが緑色のランプに変わります。がんばって全ての項目を入力していきましょう。

いくつか注意点を挙げていきます。

ビルドしたアプリのアップロードは「パッケージ」のところを選びます。画面遷移して次の画面になるので、ここにappxをドラッグアンドドロップします。

検証にはしばらく時間がかかるので、この間に他の項目を入力しながら待ちましょう。

次に躓いたのは「プロパティー」の項目です。ここでは次のような画面になります。

ここで、個人情報を収集するか尋ねられます。重要な点として、実際に情報を収集していなくても、Electronアプリの場合は収集可能な機能を持っていると判断されてプライバシーポリシーを記載したURLが必要になります。appxを検証することで、自動で判定されて、ここで「いいえ」が選べなくなってしまいます。

最初はプライバシーポリシーの記述なんて個人じゃできない～とか、プライバシーポリシーのテンプレート使って～とか、自動生成ツールで～なんて考えていたんですが、本当に情報収集していないのなら、そんなことは必要ありませんでした。収集していない旨を記したwebサイトを準備すれば申請が通りました。

私の場合は、Github pagesにアプリの紹介ページを作り、そのトップページ内で「Privacy Policy」という項目を作って、以下の内容を列挙しただけです。

AppName and developer do not collect any personal information or privacy-related information about user.
AppName and developer do not collect information of keyboard typing by user.
AppName and developer do not collect the information of files opened by AppName.

こんなへたくそな英語でも受け付けてもらえました。そして、プライバシーポリシーのURL、webサイト、サポートの連絡先情報のところに全て同じGithub pagesのURLを記入しました。個人開発者の場合はサポートのところにメールアドレスを書きたくない方もいると思うので、githubのissueとして受け付けますというスタンスでも認めてもらえるのはありがたいですね。参考までに実際に使用した私のwebサイトは次のものです。

NowType

また、「申請オプション」の項目では、申請が認定された後の、ストアへの公開のタイミングを選べます。私は不安もあったので「今すぐ公開を選ぶまで、この申請を公開しません」という項目を選んでおきました。こうすると、認定後に、自分で公開のタイミングを選べます。

申請と認定待ち

全ての項目を入力し、グリーンランプが点灯したら、申請に進むことができます。実際の申請から認可までの流れをスクリーンショットで紹介します。

まず、申請ボタンを押すと次のようなプログレスバーの目立つ画面になります。「前処理」は短時間で終了し、「認定」のところで待つことになります。

この状態で数時間待ちます。ブラウザはおそらく閉じてもよさそうです。

認定されたら次のような画面になります。先程、公開のタイミングは自分で選ぶようにしておいたので、このような画面になるのでしょう。

「今すぐ公開」ボタンを押すと公開準備に入ります。今すぐとはいえ、実際には公開されるまでに数分程度時間がかかりました。

無事に公開されるとストアで検索できるようになります。ここまでくると嬉しいですね。

公開後は、Microsoft パートナーセンターでの表示は次のようになります。

ストアからのインストール

さて、今回はテスト的に申請を行ったので、ストアでは「一般」公開になっていません。申請時に、「グループにだけ限定公開」というような項目を選べるので、まずはテストに協力してくれるユーザーのマイクロソフトアカウント(のメールアドレス)を列挙してグループを作れば、彼らにだけはストアで見つかるようになります。

実際にインストールしてみると、Smart screenにも引っかからずインストールされます。UWPでもなく、デスクトップアプリとして起動しているみたいです。やったぜ！

コード署名証明書を高額で買わずとも、Microsoftのストアアプリにすればコード署名証明書が自動で付いてくるというのは本当でした。正確には違うのかもしれませんが、署名証明に相当する仕組みでWindows上での動きはMicrosoftストアが担保してくれているということなんでしょう。ですので、野良アプリとしての再配布はできませんが、Windowsユーザーならストアからインストールできるので、目的は達成でしょう。

さいごに

無事に申請から承認までされると、感無量です。

ですが、まだまだ個人的に課題もあります。今のところアイコンが上手くついていません。また、アプリのversionアップを行ったときに、どうやって再申請するのか試していません。ですので、まだまだ情報も経験も不足しています。

とはいえ、ElectronアプリをMicrosoftのストアアプリとして登録する情報はあまり多くないので、活性化のためにこの記事を投稿しました。だれかのお役に立てば幸いです。コメントもいただけたら勉強になります。

みんなもElectronアプリをMicrosoftストアアプリ化しよう！