UWPアプリをappinstallerを構成してGithub Pages で配布する

はじめに

私は，1年半ほどC#を使ったWindowsデスクトップアプリ開発を行ってきました．その中で，アプリインストーラーを構成したアプリのリリースに関するドキュメントや記事が少なく感じたので，自分なりのリリース方法を紹介したいと思います．
私もまだまだ初心者ですので，もっといい方法はあると思います．あくまで一例として参考になればと思います．

使用環境

Visual Studio 2022 Preview

今回やること

UWPのアプリをパッケージ化しAppPackages生成する

1.1. UWPアプリにappinstaller構成ファイルを追加する
1.2. UWPアプリをパッケージ化して，AppPackagesを生成する
AppPackagesをGithub Pagesにデプロイし，リリースページを作成する

2.1. 生成されたAppPackagesをGithubにアップロードする
2.2. static htmlの構成でGithub Pagesのセットアップをする．
2.3. ワークフローを書き換える

1. UWPのアプリをパッケージ化しAppPackages生成する

UWPアプリを用意します．今回は，サンプルとして，ボタンをクリックするとカウントが1ずつ増えるだけのアプリを用意しました．

サンプルアプリの画像

1.1. UWPアプリにappinstaller構成ファイルを追加する

ここから，appinstaller構成ファイルを追加していきます．
ソリューションエクスプローラーの，メインとなるプロジェクトを右クリックして「追加」から「新しい項目」を選択します．

今回の場合，「SampleApp (Universal Windows)」を右クリック

メニューから「新しい項目」を選択

すると，「アプリインストーラー」という項目があるので，これを選択して「追加」する．

ここで追加されるPackage.appinstallerの中身は変える必要は無いが，<UpdateSettings/>の中身を変えることで，アップデートのタイミング等をいろいろ設定できる．
詳細は以下のリンクを参照.
https://learn.microsoft.com/ja-jp/uwp/schemas/appinstallerschema/element-update-settings

Package.appinstaller

<?xml version="1.0" encoding="utf-8"?>
<AppInstaller Uri="{AppInstallerUri}"
              Version="{Version}"
              xmlns="http://schemas.microsoft.com/appx/appinstaller/2017/2">

  <MainBundle Name="{Name}"
              Version="{Version}"
              Publisher="{Publisher}"
              Uri="{MainPackageUri}"/>

  <UpdateSettings>
    <OnLaunch HoursBetweenUpdateChecks="0"/>
  </UpdateSettings>

</AppInstaller>

1.2. UWPアプリをパッケージ化して，AppPackagesを生成する

AppPackagesを生成する前に前準備
リリースページを配置するためのgithubのリモートリポジトリを作成しておきましょう．今回はSampleReleasePageという名前で作成しておきました．
ここで作成する理由は，AppPackagesを生成する際に，配置するサイトのURLが必要になるためです．
今回はGithub Pagesを使用するため，サイトのURLはhttps://<ユーザー名>.github.io/<リポジトリ名>/となります．

AppPackagesを生成する
プロジェクトを右クリックして「公開」から「アプリパッケージの作成」を選択

「サイドローディング」を選択し，「次へ」

署名をしないと配布ができないため，「作成」を選択

発行者共通名を入力し，パスワードを設定して「OK」をクリック

現段階で証明書を信頼する必要性はありませんが，信頼するとインストールのテストがしやすいため，「信頼する」から証明書を信頼しておいた方がいいと思います．それが終わったら，「次へ」をクリックします．

今回はビルド時間が長くなるため，x86アーキテクチャのみにチェックを入れて公開しますが，必要に応じてチェックを増やしても大丈夫です．
チェックを付けたら，「次へ」を選択

ここで，インストーラーの場所を公開予定のGithub PagesのURLにしましょう．URLを入力したら「作成」を選択して，しばらくすると，AppPackagesの生成が完了します．

生成が完了すると，下の画面が表示されます．

これでAppPackagesの生成が完了です．では，AppPackagesの中身を見てみましょう．
プロジェクトを右クリックして，「エクスプローラーで開く」を選択すると，エクスプローラーの一番上にAppPackagesというフォルダが生成されているのが分かります．

AppPackagesを開くと，index.htmlと<アプリ名>.appinstaller，<アプリ名>_<バージョン>_Testフォルダが生成されています．今回の場合だと，index.html,SampleApp.appinstaller,SampleApp_1.0.0.0_Testが生成されています．index.htmlはアプリインストーラーの起動やダウロードを行えるようになっているため，このAppPackagesの中身をGithub Pagesで静的Webアプリとしてデプロイすれば，アプリの配布が可能となります．しかし，<アプリ名>_<バージョン>_Testのフォルダはかなり容量があるので，このままstatic htmlテンプレートのyamlでCI/CDを組むと，TimeOutでデプロイが通らない場合が出てくるため，少し加筆する必要があります．

2. AppPackagesをGithub Pagesにデプロイし，リリースページを作成する

2.1. 生成されたAppPackagesをGithubにアップロードする

エクスプローラーから，AppPackagesを右クリックし，「ターミナルで開く」を選択．
そこからは，コマンドラインでGithubにアップロードしましょう．

git init
git add .
git commit -m "<commit message>"
git branch -M main
git remote add origin https://github.com/<UserName>/SampleReleasePage.git
git push -u origin main

2.2. static htmlの構成でGithub Pagesのセットアップをする．

リリースページのGithubのリポジトリから，「Settings」から，左のメニューにある「Pages」をクリック．

「Build and deployment」項目の，Sourceを「Github Actions」に設定し，「Static HTML」の「Configure」をクリックする．

すると，yamlファイルの編集画面に入ります．このぐらいのサイズのアプリであれば，このままでもデプロイが可能かもしれませんが，アプリの容量が増えると，デプロイが通らなくなってくるので，このyamlファイルを編集していきます．

ワークフローを書き換える

ではこのテンプレート書き換えていきます．
アプリの容量が大きすぎることが問題なので，<アプリ名>_<バージョン>_Test以下のファイルを圧縮して，軽くする処理を加えます．

.github/workflows/static.yml

# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  # Single deploy job since we're just deploying
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Setup Pages
        uses: actions/configure-pages@v3

#---------------ここから-------------------
      - name: Compress files
        run: |
          for dir in SampleApp_*; do
            zip -r "%dir.zip" "$dir"
          done
      - name: Upload compressed files
        uses: actions/upload-artifact@v2
        with:
          name: compressed-files
          path: SampleApp_*/.zip
#----------------ここまで--------------------
# "SampleApp_*"を"<プロジェクト名>_*" に変更してください．

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v2
        with:
          # Upload entire repository
          path: '.'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2

この処理を追加することで，SampleApp_1.0.0.0_Test以下のファイルを圧縮してアップロードしています．アプリのバージョンはリリース毎に変わるため，SampleApp_*という正規表現で指定しています．

このファイルをコミットし，Github Actionsタブに移動し，しばらく待つと，

ワークフローがすべて通っているので，デプロイ成功です！

動作確認

一度設定からSampleAppをアンインストールします．
開発環境のパッケージ化されてないアプリが既に存在していると，競合が起きて正常にインストールが出来なくなってしまいます．

アンインストールが出来たら，デプロイしたGithub Pagesにアクセスして，インストールできるか確認しましょう．
「アプリを取得する」からインストールできます．

インストール完了！

もし，他人に配布する場合は，公開者証明書を持っていないため，アプリインストール時にエラーが発生します．そのため，「追加のリンク」から，「公開者証明書」をダウンロードして，信用する必要があります．

以上でUWPアプリをappinstallerを構成して配布する手順は終わりです．AppPackagesにリリース用のhtmlファイルが生成されるので，これをデプロイしてしまえばすぐに配布可能です．しかし，配布用のパッケージが重たいので，少し工夫が必要をする必要があります．

少しでもこの記事が参考になれば幸いです．

参考記事
https://learn.microsoft.com/ja-jp/windows/application-management/sideload-apps-in-windows-10
https://learn.microsoft.com/ja-jp/windows/msix/package/packaging-uwp-apps
https://learn.microsoft.com/ja-jp/windows/msix/app-installer/web-install-azure