たくさんの自由帳

WinUI 3 で出来たアプリを配布する（インストーラー / zip を作る）

投稿日 : 2023/6/11 | 0 日前

文字数(だいたい) : 10859

どうもこんばんわ。
サブディスプレイが壊れてしまった（なんかしばらくしないと画面が付かなくなってしまった・・・）ため、仮想デスクトップを使ってみているのですが、
仮想デスクトップの切り替えショートカットキーが覚えられません・・・！、なんか色々組み合わせを確かめていると正解に当たったりする。トラックパッドの場合はなんか直感的なジェスチャーがあってまぁいいかと感じなんですけどね。

うーんでも新しいXperia欲しいしディスプレイ買う金ないです・・（てか高すぎ）
ちなみにSurfaceをサブディスプレイとして使う方法もあるみたいですが、やっぱ遅延がなあ～～～

本題

というわけで仮想デスクトップの切り替えショートカットキーを押してくれるアプリを作りました。
Windowsキー長押しするとすりガラスなウィンドウが出てきて、トラックパッドのように線を描くと描いた向きに切り替わります（？）

Imgur

で、今気付いたのですが、長押しだとWindowsキーを使うショートカットキーが動かなくなってしまったので、Win+Ctrl長押しで起動するように直しました。
スクリーンショットが取れなくなったのが一番でかい・・・

ソースコード

https://github.com/takusan23/DesktopLine
https://github.com/takusan23/DesktopLine/releases

本題2

たまにWinUI 3を使いたくなる未来の私のために、WinUI 3のプロジェクトを作り、インストーラーを作るところまでを記録にしておこうと思います。
UWPみたいなUI ( Windows 11 のUIコンポーネント ) が使えるのですが、これはUWPではない（むしろWPFでUWPのコンポーネントが使えるイメージ）ので、
Windowsのアプリストアを使わずに、インストーラーやzipファイルにして普通に配布出来ます。
P/Invokeも普通にできます（WPFと同じだね）。WPFより機能はまだ無いかもだけどWinUI 3のデザインが（ここ最近のWindowsの中で）とてもいい（気がする）！！！

どんなコンポーネントが使えるのかというと、以下のアプリを入れて見てみてください。すりガラス（Acrylic / Mica）なんかが少し書くだけで？使えるようになっています。

WinUI 3 Gallery
- https://www.microsoft.com/store/productId/9P3JFPWWDZRC

環境

なまえ	あたい
Windows	10 Pro ( 11 の場合は部分的に違うかも？ )
Visual Studio	2022 Community
.NET	6 ( 7 でもいいはずです )
Windows App SDK	1.2.220902.1-preview1 ( 最新版にしても問題ないはずです )

Visual Studioと.NET 6のインストールはやっておいてください。

インストーラー vs zipファイル

インストーラーだと、スタートメニューとかデスクトップに自動でショートカット追加出来たり、あと.NETが入ってない場合はインストールさせる機能がありますね。
zipファイルをばらまく場合は配布が楽ですね。インストーラーの機能がいらない場合はありだと思う。

Visual Studio で Windows App SDK を使う準備をする

ごめんなさい。。。覚えてないです。
Visual Studio Installerで、.NETのところのWindows アプリSDKのところにチェックマークをいれてダウンロードすればいいのかなあ。。。

Imgur

Visual Studio 2022 で新しいプロジェクトを作る

多分、これを選べばいいと思います。

Imgur

で、保存先とかをお好みで変更したあと、一番下のソリューションとプロジェクトを同じディレクトリに配置するのチェックを外しておきます。
こうしておくことで以下のようなファイル構成で行くことが出来ます。

ソリューション
- プロジェクト ( Windows App SDK ( WinUI 3 ) アプリケーション )
  - MainWindow.xaml
  - ...
- プロジェクト ( インストーラー )

インストーラーは新しいプロジェクトとしてソリューションに追加する必要があるのですが（多分・・？）、チェックを入れたままだと入れる場所がないんですよね、、

ソリューション
- プロジェクト ( Windows App SDK ( WinUI 3 ) アプリケーション )
  - MainWindow.xaml
  - プロジェクト ( インストーラー ) ← 気持ち悪いけどここに入れるしか無い？。gitとかでバージョン管理する場合は・・・

（zip で配信したい場合は逆にチェックマークを入れたほうがシンプルな構成になるかも？？）

Imgur

あとはこれで作って、実行ボタンを押せば起動できるはず

Imgur

MainWindow.xaml にワナがある（文字コード変更）

WinUI 3 Galleryを見てもらえるとわかるのですが、最初からきれいなコンポーネントがあるんですよね。
こんな風に少し書くだけできれいなUIが作れます。

<!-- Copyright (c) Microsoft Corporation. All rights reserved. -->
<!-- Licensed under the MIT License. See LICENSE in the project root for license information. -->

<Window
    x:Class="ExampleWinUI3.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ExampleWinUI3"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">


    <NavigationView x:Name="nvSample">
        <NavigationView.MenuItems>
            <NavigationViewItem Icon="Play" Content="再生" />
            <NavigationViewItem Icon="Save" Content="保存" />
            <NavigationViewItem Icon="Refresh" Content="リロード" />
            <NavigationViewItem Icon="Download" Content="ダウンロード" />
        </NavigationView.MenuItems>

        <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Button Padding="10" x:Name="myButton" Click="myButton_Click">Click Me</Button>
            <ProgressRing Padding="10" IsActive="True" Background="LightGray"/>
            <ToggleSwitch Padding="10" AutomationProperties.Name="simple ToggleSwitch"/>
        </StackPanel>

    </NavigationView>
</Window>

なんですけど、設定を変えないと日本語が文字化けしてしまいます・・・

Imgur

修正方法は前にも書いたのですが、MainWindow.xamlをBOM付き UTF-8にすれば修正可能です。
名前をつけて保存を選んで

Imgur

エンコード付きで保存を押します

Imgur

UTF-8 シグネチャ付きを選びます

Imgur

これで治りました。やったー

Imgur

インストーラー / zipファイルを作る

配布する前まで頑張って作ってください。。
で、ここからは配布の話を残して置こうと思います

参考

thx!!!!!

https://learn.microsoft.com/ja-jp/windows/apps/package-and-deploy/self-contained-deploy/deploy-self-contained-apps https://www.ipentec.com/document/csharp-winui3-create-self-contained-executables-application

その前に exe で配信できる形式にする

~~どうやらMSは未だにMSIXに強いこだわりがあるらしく？~~ デフォルトだとexeにできません。
dotnet publishを使ったとしても、設定を変更しないと起動できないexeが生成されてしまいます。。困った！

障害バケット 1463075854298809095、種類 4
イベント名: APPCRASH
応答: 使用不可
Cab ID: 0

問題の署名:
P1: ExampleWinUI3.exe
...

Imgur

（Windowsだとアプリが起動できないログがイベントビューアーというアプリに保存されます。）

これを治すためには、プロジェクトを押して、プロジェクトファイルの編集を押します。

Imgur

そしたら、以下の二行を<PropertyGroup>の中に足します。以下のように

<WindowsAppSDKSelfContained>true</WindowsAppSDKSelfContained>
<WindowsPackageType>None</WindowsPackageType>

Imgur

また、これを記述したあとは、以下のUnpackagedの方を実行する必要があります。

Imgur

zip で配布する

お手軽ですが、スタートメニューに自動で追加とかは出来ません。（インストーラーが必要です。）
ソリューションを右クリックして、発行を押します。

Imgur

x64でいいはず。

Imgur

すべての設定を表示を押して、構成を Release | x64、配置モードをフレームワーク依存、ファイルの公開オプションを開き、単一ファイルの作成へチェックマークを入れるといいと思います。
自己完結だと.NETがexeの中に入るため、.NETがインストールされてなくても起動できる一方、バイナリサイズがとても大きくなってしまいます。
単一ファイルにチェックすることで、WPFの時はexe一個にまとめることが出来たのですが、WindowsAppSDKではなんか出来ないっぽいです。。。が一応チェックを入れています。

Imgur

あとは発行を押します

Imgur

終わったら開いてみましょう。どうですか？開けましたか！？！？！？

Imgur

わーい 🎉🎉🎉

zipファイルで配布する場合は、exeがあるフォルダを全部圧縮して、適当なところで公開すればいいと思います。

Imgur

インストーラーで配布する

WPF版もあります : https://takusan.negitoro.dev/posts/windows_dot_net5_wpf_making_installer/

Visual Studioに拡張機能を入れます。
https://marketplace.visualstudio.com/items?itemName=VisualStudioClient.MicrosoftVisualStudio2022InstallerProjects

Imgur

インストーラーを作ります

ソリューションを右クリックしてプロジェクトを追加します。

Imgur

Setup Projectを押します

Imgur

名前をよしなに変えて done

Imgur

こんな感じになるはず

Imgur

配布設定をする

ここの手順はzipファイルで配布するのと同じですね。
WinUI 3プロジェクトを右クリックして発行を押します。

Imgur

x64にします（最近はほとんどx64でいいはず）

Imgur

すべての設定を表示から、以下のように変更します。

構成
- Release | x64
配置モード
- フレームワーク依存
  - 自己完結だと.NETが.exeの中に入るため、バイナリサイズがデカくなります。が、.NETを入れなくても起動できるメリットがあります。
ファイルの構成オプションの単一ファイルの作成
- どっちでもいいはず？