詳細は、こちらのブログ記事にあります。
Convert your Electron app using the Desktop Bridge – App Consult Team
この手順に沿ってやってみます。
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 は試してみたんだけどなぁ…。