たくさんの自由帳

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

投稿日 : | 0 日前

文字数(だいたい) : 9159

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

うーんでも新しい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ではない(むしろWPFUWPのコンポーネントが使えるイメージ)ので、
Windowsのアプリストアを使わずに、インストーラーzipファイルにして普通に配布出来ます。
P/Invokeも普通にできます(WPFと同じだね)。WPFより機能はまだ無いかもだけどWinUI 3のデザインが(ここ最近のWindowsの中で)とてもいい(気がする)!!!

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

環境

なまえあたい
Windows10 Pro ( 11 の場合は部分的に違うかも? )
Visual Studio2022 Community
.NET6 ( 7 でもいいはずです )
Windows App SDK1.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.xamlBOM付き 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、配置モードをフレームワーク依存、ファイルの公開オプションを開き、単一ファイルの作成へチェックマークを入れるといいと思います。
自己完結だと.NETexeの中に入るため、.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を入れなくても起動できるメリットがあります。
  • ファイルの構成オプション の 単一ファイルの作成
    • どっちでもいいはず?

Imgur

出来たら保存してください。

インストーラーに配布するファイルを設定する

参考:https://learn.microsoft.com/en-us/visualstudio/deployment/installer-projects-net-core?view=vs-2019

ソリューションエクスプローラーから、さっきつくったインストーラーを右クリックして、File Systemを開きます。

Imgur

Application Folderを選び、プロジェクト出力を押します。

Imgur

項目の公開、を選んでOKします

Imgur

項目の公開と WinUI 3 の成果物を紐付ける

ソリューションエクスプローラーから、さっきつくった項目の公開を右クリックしてプロパティを押します。

Imgur

プロパティの中のPublishPropertiesのドロップダウンメニューを押すと、なんか3つくらいでてくると思うので、x64と書いてある方を選びます。

Imgur

その他の値もセットする

ソリューションエクスプローラーで、インストーラープロジェクトをクリックし、下のプロパティから、
TargetPlatformx64にします。

Imgur

また、以下の値も変えておくと良いでしょう。

  • ProductName
    • アプリの名前
  • Another
    • 作者
  • Title
    • インストーラーの名前
  • Manufactor
    • 作者?

Imgur

インストーラーをつくる

やる必要があるのか知りませんが、実行ボタンの隣りにあるドロップダウンメニュー、Releasex64にしておきました。

Imgur

あとは、ソリューションエクスプローラーのインストーラープロジェクトを右クリックして、ビルドを押すことで開始できます。

Imgur

はい!!!

Imgur

こんな感じにインストーラーが出来ているはず

Imgur

UACたまによく気付かないんだけど私だけ?

Imgur

ちゃんとアンインストールもできます。

Imgur

スタートメニューに表示させる

File Systemから、User's Programs Menuを押し右クリックして新しいショートカットの作成を押します。

Imgur

Application Folderから、項目の公開を選びOKします。

Imgur

名前はプロジェクトから変えることが出来ます。

Imgur

これでスタートメニューに出てくるはず

Imgur

アイコン変更

WPFのときとほぼ同じですが・・・
GIMPとかを使って128x128icoファイルを作ってください。

Imgur

WinUI 3のプロジェクトを右クリックして、プロパティに進みます。

Imgur

リソースを押して、まだ作っていない場合は作成する/開くを押します

Imgur

そしたらここに.icoを投げ込みます。

Imgur

Imgur

また、ソリューションエクスプローラーから、先程追加したicoのプロパティを開き、ビルドアクションリソースにします。

Imgur

アプリ自体のアイコン

アプリのアイコンの設定は、さっきのWinUI 3のプロパティのここです。

Imgur

変わってるはず?

Imgur

こっちを変更するのはまた別に C# コードを書かないといけないそうです・・・
参考 : https://github.com/microsoft/WindowsAppSDK/issues/1914

Imgur

ショートカットのアイコン

インストーラープロジェクトのFile Systemより、Application Folderを右クリックして、ファイルを押します。

Imgur

あとはさっき追加したicoを探して追加します。

Imgur

そのあと、User's Programs Menuより先程作ったショートカットを選び、プロパティのIconにあるドロップダウンメニューをおし、Browse...を押します。

Imgur

でてきたら、Application Folderにさっき追加したicoがあると思うので、それを選べばOKです!

Imgur

これで再度ビルドしてみて、実際にインストールするとこうなるはず!
どうでしょう????

Imgur

おわりに

ここまでのソースコードです。
zipでもインストーラーでも作れると思います。

https://github.com/takusan23/ExampleWinUI3Installer

と、、思ったんですけど.pubxmが追跡対象外だった...

Imgur

おわりに

マウスのショートカットキー割り当て機能でよくない????ってインストーラー作ってるときに思いました。

おわりに2

Next.jsApp Router移行をそろそろやりたいなと思っています。