たくさんの自由帳
Androidのお話
WinUI 3 で出来たアプリを配布する（インストーラー / zip を作る）
投稿日 : | 0 日前
文字数(だいたい) : 9279
目次
目次
本題
ソースコード
本題2
環境
インストーラー vs zipファイル
Visual Studio で Windows App SDK を使う準備をする
Visual Studio 2022 で新しいプロジェクトを作る
MainWindow.xaml にワナがある （文字コード変更）
インストーラー / zipファイル を作る
参考
その前に exe で配信できる形式にする
zip で配布する
インストーラーで配布する
インストーラーを作ります
配布設定をする
インストーラーに配布するファイルを設定する
項目の公開と WinUI 3 の成果物を紐付ける
その他の値もセットする
インストーラーをつくる
スタートメニューに表示させる
アイコン変更
アプリ自体のアイコン
ショートカットのアイコン
おわりに
おわりに
おわりに2
どうもこんばんわ。
サブディスプレイが壊れてしまった（なんかしばらくしないと画面が付かなくなってしまった・・・）ため、仮想デスクトップを使ってみているのですが、
仮想デスクトップの切り替えショートカットキーが覚えられません・・・！、なんか色々組み合わせを確かめていると正解に当たったりする。
トラックパッドの場合はなんか直感的なジェスチャーがあってまぁいいかと感じなんですけどね。
うーんでも新しいXperia欲しいしディスプレイ買う金ないです・・（てか高すぎ）
ちなみにSurfaceをサブディスプレイとして使う方法もあるみたいですが、やっぱ遅延がなあ～～～
本題
というわけで仮想デスクトップの切り替えショートカットキーを押してくれるアプリを作りました。Windowsキー長押しするとすりガラスなウィンドウが出てきて、トラックパッドのように線を描くと描いた向きに切り替わります（？）
で、今気付いたのですが、長押しだとWindowsキーを使うショートカットキーが動かなくなってしまったので、Win+Ctrl長押しで起動するように直しました。スクリーンショットが取れなくなったのが一番でかい・・・
ソースコード
GitHub - takusan23/DesktopLine: 仮想デスクトップ切り替えのショートカットキーが覚えられない
仮想デスクトップ切り替えのショートカットキーが覚えられない. Contribute to takusan23/DesktopLine development by creating an account on GitHub.
https://github.com/takusan23/DesktopLine
Releases · takusan23/DesktopLine
仮想デスクトップ切り替えのショートカットキーが覚えられない. Contribute to takusan23/DesktopLine development by creating an account on GitHub.
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）なんかが少し書くだけで？使えるようになっています。
環境
| なまえ | あたい |
|---|---|
| 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のところにチェックマークをいれてダウンロードすればいいのかなあ。。。
Visual Studio 2022 で新しいプロジェクトを作る
多分、これを選べばいいと思います。
で、保存先とかをお好みで変更したあと、一番下のソリューションとプロジェクトを同じディレクトリに配置するのチェックを外しておきます。
こうしておくことで以下のようなファイル構成で行くことが出来ます。
- ソリューション
- プロジェクト (
Windows App SDK( WinUI 3 ) アプリケーション )- MainWindow.xaml
- ...
- プロジェクト ( インストーラー )
- プロジェクト (
インストーラーは新しいプロジェクトとしてソリューションに追加する必要があるのですが（多分・・？）、チェックを入れたままだと入れる場所がないんですよね、、
- ソリューション
- プロジェクト (
Windows App SDK( WinUI 3 ) アプリケーション )- MainWindow.xaml
- プロジェクト ( インストーラー ) ← 気持ち悪いけどここに入れるしか無い？。gitとかでバージョン管理する場合は・・・
- プロジェクト (
（zip で配信したい場合は逆にチェックマークを入れたほうがシンプルな構成になるかも？？）
あとはこれで作って、実行ボタンを押せば起動できるはず
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>なんですけど、設定を変えないと日本語が文字化けしてしまいます・・・
修正方法は前にも書いたのですが、MainWindow.xamlをBOM付き UTF-8にすれば修正可能です。
名前をつけて保存を選んで
エンコード付きで保存を押します
UTF-8 シグネチャ付きを選びます
これで治りました。やったー
インストーラー / zipファイル を作る
配布する前まで頑張って作ってください。。
で、ここからは配布の話を残して置こうと思います
参考
thx!!!!!
自己完結型アプリの Windows App SDK 展開ガイド - Windows apps
Windows App SDK プロジェクトは、既定ではフレームワークに依存します。 自己完結型の展開に切り替えるには、この記事の手順に従います (「*フレームワークに依存する*」と「*自己完結型*」の用語については、「Windows App SDK の展開の概要」を参照してください)。/deploy-overview.md))。
https://learn.microsoft.com/ja-jp/windows/apps/package-and-deploy/self-contained-deploy/deploy-self-contained-apps
自己完結型のWinUI 3アプリケーションを作成する | iPentec
Windows APP SDK 1.1/1.2/1.4 で自己完結型のWinUI 3アプリケーションを作成する手順を紹介します。事前準備Visual Studio 2022 version 17.2 以降をインストールし、Windows App SDK を利用できる状態にします。Visual Studio 2022のインストール手順はこちらの記事を参照してください。Windows App SDK のプロジェクトテンプレートまたは、拡張機能をインストールします。バージョン1.1の場合の手順はこちらの記事を参照
https://www.ipentec.com/document/csharp/csharp-winui3-create-self-contained-executables-application
その前に exe で配信できる形式にする
どうやらMSは未だに デフォルトだとMSIXに強いこだわりがあるらしく？exeにできません。dotnet publishを使ったとしても、設定を変更しないと起動できないexeが生成されてしまいます。。困った！
障害バケット 1463075854298809095、種類 4
イベント名: APPCRASH
応答: 使用不可
Cab ID: 0
問題の署名:
P1: ExampleWinUI3.exe
...
（Windowsだとアプリが起動できないログがイベントビューアーというアプリに保存されます。）
これを治すためには、プロジェクトを押して、プロジェクト ファイルの編集を押します。
そしたら、以下の二行を<PropertyGroup>の中に足します。以下のように
<WindowsAppSDKSelfContained>true</WindowsAppSDKSelfContained>
<WindowsPackageType>None</WindowsPackageType>
また、これを記述したあとは、以下のUnpackagedの方を実行する必要があります。
zip で配布する
お手軽ですが、スタートメニューに自動で追加とかは出来ません。（インストーラーが必要です。）
ソリューションを右クリックして、発行を押します。
x64でいいはず。
すべての設定を表示を押して、構成を Release | x64、配置モードをフレームワーク依存、ファイルの公開オプションを開き、単一ファイルの作成へチェックマークを入れるといいと思います。
自己完結だと.NETがexeの中に入るため、.NETがインストールされてなくても起動できる一方、バイナリサイズがとても大きくなってしまいます。単一ファイルにチェックすることで、WPFの時はexe一個にまとめることが出来たのですが、WindowsAppSDKではなんか出来ないっぽいです。。。が一応チェックを入れています。
あとは発行を押します
終わったら開いてみましょう。どうですか？開けましたか！？！？！？
わーい 🎉🎉🎉
zipファイルで配布する場合は、exeがあるフォルダを全部圧縮して、適当なところで公開すればいいと思います。
インストーラーで配布する
インストーラーを作ります
ソリューションを右クリックしてプロジェクトを追加します。
Setup Projectを押します
名前をよしなに変えて done
こんな感じになるはず
配布設定をする
ここの手順はzipファイルで配布するのと同じですね。WinUI 3プロジェクトを右クリックして発行を押します。
x64にします（最近はほとんどx64でいいはず）
すべての設定を表示から、以下のように変更します。
- 構成
Release | x64
- 配置モード
フレームワーク依存自己完結だと.NETが.exeの中に入るため、バイナリサイズがデカくなります。が、.NETを入れなくても起動できるメリットがあります。
- ファイルの構成オプション の 単一ファイルの作成
- どっちでもいいはず？
出来たら保存してください。
インストーラーに配布するファイルを設定する
ソリューションエクスプローラーから、さっきつくったインストーラーを右クリックして、File Systemを開きます。
Application Folderを選び、プロジェクト出力を押します。
項目の公開、を選んでOKします
項目の公開と WinUI 3 の成果物を紐付ける
ソリューションエクスプローラーから、さっきつくった項目の公開を右クリックしてプロパティを押します。
プロパティの中のPublishPropertiesのドロップダウンメニューを押すと、なんか3つくらいでてくると思うので、x64と書いてある方を選びます。
その他の値もセットする
ソリューションエクスプローラーで、インストーラープロジェクトをクリックし、下のプロパティから、TargetPlatformをx64にします。
また、以下の値も変えておくと良いでしょう。
- ProductName
- アプリの名前
- Another
- 作者
- Title
- インストーラーの名前
- Manufactor
- 作者？
インストーラーをつくる
やる必要があるのか知りませんが、実行ボタンの隣りにあるドロップダウンメニュー、Releaseとx64にしておきました。
あとは、ソリューションエクスプローラーのインストーラープロジェクトを右クリックして、ビルドを押すことで開始できます。
はい！！！
こんな感じにインストーラーが出来ているはず
UACたまによく気付かないんだけど私だけ？
ちゃんとアンインストールもできます。
スタートメニューに表示させる
File Systemから、User's Programs Menuを押し右クリックして新しいショートカットの作成を押します。
Application Folderから、項目の公開を選びOKします。
名前はプロジェクトから変えることが出来ます。
これでスタートメニューに出てくるはず
アイコン変更
WPFのときとほぼ同じですが・・・GIMPとかを使って128x128のicoファイルを作ってください。
WinUI 3のプロジェクトを右クリックして、プロパティに進みます。
リソースを押して、まだ作っていない場合は作成する/開くを押します
そしたらここに.icoを投げ込みます。
また、ソリューションエクスプローラーから、先程追加したicoのプロパティを開き、ビルドアクションをリソースにします。
アプリ自体のアイコン
アプリのアイコンの設定は、さっきのWinUI 3のプロパティのここです。
変わってるはず？
こっちを変更するのはまた別に
参考 :
C# コードを書かないといけないそうです・・・参考 :
Unable to change the title bar icon for a winui 3.0 app · Issue #1914 · microsoft/WindowsAppSDK
I am unable to change the title bar icon for my packaged winui 3.0 app. It is possible to change the title bar title, to in my case 'Koraalbewerkingen'. Can you make it possible to change the icon ...
https://github.com/microsoft/WindowsAppSDK/issues/1914
ショートカットのアイコン
インストーラープロジェクトのFile Systemより、Application Folderを右クリックして、ファイルを押します。
あとはさっき追加したicoを探して追加します。
そのあと、User's Programs Menuより先程作ったショートカットを選び、プロパティのIconにあるドロップダウンメニューをおし、Browse...を押します。
でてきたら、Application Folderにさっき追加したicoがあると思うので、それを選べばOKです！
これで再度ビルドしてみて、実際にインストールするとこうなるはず！
どうでしょう？？？？
おわりに
ここまでのソースコードです。zipでもインストーラーでも作れると思います。
と、、思ったんですけど.pubxmが追跡対象外だった...
おわりに
マウスのショートカットキー割り当て機能でよくない？？？？ってインストーラー作ってるときに思いました。
おわりに2
Next.jsのApp Router移行をそろそろやりたいなと思っています。