かずきのBlog@hatena

日本マイクロソフトに勤めています。このブログは個人ブログなので、ここに書いている内容は個人的な意見で会社の公式見解ではない点にご注意ください。好きなものは XAML と C# 。苦手なものは型の無い言語です。

electron 製アプリを DesktopBridge で Microsoft ストアに出せるようにしてみよう

詳細は、こちらのブログ記事にあります。

Convert your Electron app using the Desktop Bridge – App Consult Team

この手順に沿ってやってみます。

Node.js のインストール

これが無いと始まりませんね。

Node.js

electron のクイックスタートプロジェクトを取ってくる

雛形があるというのは素晴らしいですね。ということでクローンします。

git clone https://github.com/electron/electron-quick-start

初期設定

では以下のコマンドを打って各種 npm パッケージを取ってきます。

cd electron-quick-start
npm install

動作確認

以下のコマンドで動作確認が出来ます。

npm start

exe を作成して appx にパッケージング

electron-packager を使ってやるみたいですね。ということで -g オプションを付けてインストールします。

npm install -g electron-packager

electron-windows-store を使って appx にするので以下のものもインストールしておきます。

npm install -g electron-windows-store

electron-windows-store が PowerShell のスクリプトが実行可能に設定されてないといけないので以下のコマンドを管理者権限で実行した PowerShell で実行しておきます(一度だけやれば OK)

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned

出来たら以下のコマンドを実行して exe を作ります。

electron-packager "F:\temp\electrondac\electron-quick-start" "ElectronSample" --platform=win32 --arch=ia32 --overwrite

これで electron-quick-start フォルダの下に ElectronSample-win32-ia32 フォルダが作られて中に exe が出来てます。起動することを確認しましょう。

そして以下のコマンドで appx にします。

electron-windows-store --input-directory "F:\temp\electrondac\electron-quick-start\ElectronSample-win32-ia32" --output-directory "F:\temp\electrondac\electron-quick-start\ElectronSampleStore" --flatten true --package-version 1.0.0.0 --package-name ElectronSample

Desktop App Converter 使うか?みたいなこと聞かれますが n を選択しても動きます。 Y を選択した場合は DesktopAppConverter.ps1 のパスを聞かれます。これは以下のようなコマンドでパスが取れます。

PS F:\temp\electrondac\electron-quick-start> Get-AppXPackage "*DesktopAppConverter*"


Name              : Microsoft.DesktopAppConverter
Publisher         : CN=Microsoft Corporation, O=Microsoft Corporation, L=Redmond, S=Washington, C=US
Architecture      : X64
ResourceId        :
Version           : 2.1.1.0
PackageFullName   : Microsoft.DesktopAppConverter_2.1.1.0_x64__8wekyb3d8bbwe
InstallLocation   : C:\Program Files\WindowsApps\Microsoft.DesktopAppConverter_2.1.1.0_x64__8wekyb3d8bbwe
IsFramework       : False
PackageFamilyName : Microsoft.DesktopAppConverter_8wekyb3d8bbwe
PublisherId       : 8wekyb3d8bbwe
IsResourcePackage : False
IsBundle          : False
IsDevelopmentMode : False
IsPartiallyStaged : False
SignatureKind     : Store
Status            : Ok

上記コマンドの出力の InstallLocation をエクスプローラーのアドレスに張り付けて直接開くと DesktopAppConverter.ps1 があることが確認できます。

その他に Windows 10 SDK のパスが聞かれます。これについてはデフォルトでインストールしていればそのまま Enter で問題ありません。 Visual Studio 2017 のインストール時に UWP 開発するように構成していれば入っていると思います。Visual Studio 2017 入れてない場合は個別に入れることもできます。

Windows 10 SDK – Windows アプリ開発

パッケージングの過程でパスワードを入れるように求められますが、これは appx を署名するための証明書のパスワードになります。空でも大丈夫です。

二度目からはここらへんの設定は聞かれません。Publisher の名前とかはストアに出すときには自分のストアのダッシュボードからとれる値にしないといけなかったりするので、そこらへん再設定したければ c:\users\ユーザー名\.electron-windows-store というファイルに設定があるので消して再実行するか書き換えればいいと思います。

テスト環境にインストール

ということで appx が出来たら実際に動作するか確認ですね。 サイドローディングでない限りは、ストアに出すことになると思うのですが下記サイトの手順で Windows 10 S 環境で動くことを確認しておいたほうがいいです。2018/03/02 現在でWindows 10 S で動くことが必須条件なので。

Windows アプリの Windows 10 S 対応をテストする - UWP app developer | Microsoft Docs

課題

ネイティブの npm のモジュールを使ってると electron-packager で exe にした段階で動いてない…。

これどうやるのが正攻法なんだろう? electron-packager する前に下記サイトの electron-rebuild は試してみたんだけどなぁ…。

github.com