キューブ日報

キューブキューブが書きそぼる日報。

お手軽Windowsアプリ開発(WPF - .NET 5編)

Visual Studio Code(以下VSCode)でサクサクWPFアプリの開発をしようという試みです。

.NET Frameworkの開発も可能ですが、どうやらC#拡張機能や開発ツールが .NET Core に最適化されているようなので、とりあえず今回は .NET 5 をターゲットとしたアプリ開発という前提で進めさせていただきます。

なお、開発環境の構築は前回の記事で説明しておりますので、そちらで準備を整えておいてください。

 

下準備

VSCodeのプロジェクトの単位は基本「フォルダ」になりますので、まず適当な作業フォルダを新規作成してください。今回は「net5test」というフォルダで作業する前提で話を進めます。

VSCodeを起動し、メニューの「ファイル」→「フォルダーを開く」で、あらかじめ作成しておいた「net5test」フォルダを開きます。

次に、メニューの「ターミナル」→「新しいターミナル」で、右下にターミナルの欄を出しておきます。この欄にコマンドを入れていろいろします。

 

ケルトン生成

ターミナルにdotnet new wpfと入力し、Enterしてください。ファイルの生成に少し時間がかかりますので、しばし待ちます。

f:id:cubeundcube:20210215132627p:plain

処理が終わった時点で、上記のような画面になると思います。
左側はエクスプローラーですが、ここにnet5testフォルダの内容が表示されています。(もし左側がこの状態になっていなければ、左に縦に並んでいるアイコンのうち、書類が2つ重なったようなマークのもの(エクスプローラー)をクリックしてください。)
いくつかファイル(フォルダ)が自動的に生成されていますが、この状態で「中に何も無いウインドウを表示する」というところまでのコードが完成しています。

早速、ターミナルにdotnet run」と入れてEnterしてください。

f:id:cubeundcube:20210215135009p:plain

真っ白なウインドウが表示されたでしょうか。

 

デバッグ

左の方に縦に並んでいるアイコンのうち、三角に虫が付いたようなマークのものがデバッグの設定になります。ここをクリックすると、デバッグの設定が無い場合「実行とデバッグ」ボタンが現れますのでクリックします。すると「環境の選択」ということで入力欄が現れるので「.NET Core」を選択(クリック)します。

f:id:cubeundcube:20210215141007p:plain

この作業により、デバッグに必要な設定の入ったファイルが自動的に生成されます。
この時、生成されたファイルのうち「launch.json」が開いた状態になります。(「"OS-COMMENT~」から始まる行は不要ですので、目ざわりであればこの機会に削除してしまっても構いません。)

ここでエクスプローラーを見ると、新たに「.vscode」フォルダー、さらにその中に「launch.json」「tasks.json」ファイルが生成されているのが分かります。

f:id:cubeundcube:20210215142700p:plain

「tasks.json」にはビルドの設定内容が、「launch.json」にはデバッグの設定内容が入っています。

 

「F5」キーを押すと、デバッグが実行されます。(メニューから「実行」→「デバッグの開始」でも良いです。)
この時、未保存のファイルがあった場合は自動的に上書き保存されます。
ブレークポイントの設定も出来ますし、停止させて変数を見たりなんかも可能です。

 

アプリの発行

アプリの発行は、dotnet publish」コマンドで行います。

 

…とその前に、デフォルトではリリースビルドにもデバッグ情報が埋め込まれてしまいます。これは不要なので、リリース時にはデバッグ情報が入らないように設定した方が良いでしょう。
プロジェクトファイル(拡張子が「.csproj」のもの、今回の例では「net5test.csproj」)を開き、「PropertyGroup」タグ内に下記の要素を追加してください。

<DebugType Condition="'$(Configuration)' == 'Release'">none</DebugType>

プロジェクトファイル全体としては下記のようになると思います。

<Project Sdk="Microsoft.NET.Sdk">
<PropertyGroup>
<OutputType>WinExe</OutputType>
<TargetFramework>net5.0-windows</TargetFramework>
<UseWPF>true</UseWPF>
<DebugType Condition="'$(Configuration)' == 'Release'">none</DebugType>
</PropertyGroup>
</Project>

 

さて、あらためて発行コマンドを実行してみましょう。
ターミナルに下記のコマンドを入力し、Enterしてください。

dotnet publish -c:Release -r:win10-x86 -p:PublishReadyToRun=true -p:PublishSingleFile=true --self-contained:false

いきなりオプションをたくさん付けてしまいましたが、それぞれの意味は下記の通りです。

  • -c:Release … リリースビルドする
  • -r:win10-x86 … ターゲットをWindows 10 32bitにする(64bitアプリを作る場合は「x64」)
  • -p:PublishReadyToRun=true … 事前コンパイル方式にする、つまり初回から起動が速くなる
  • -p:PublishSingleFile=true … 出力ファイルを1つのexeファイルにまとめる
  • --self-contained:false … ランタイムを含めない

上記コマンドにより、 net5test¥bin¥Release¥net5.0-windows¥win10-x86¥publish の場所に「net5test.exe」が生成されます。

ここでお気付きの方もおられるかもしれませんが、発行コマンドの最後のオプションを「--self-contained:true」にすると、exeに .NET 5 のランタイムも含まれるようになります。(ただ、その場合「-p:IncludeNativeLibrariesForSelfExtract=true」オプションも付けないと1つのexeにならないので注意。)
そうして出来た実行ファイルは、.NET 5 ランタイムを入れていない環境に持っていっても実行することが出来ます。ただし当然のごとく実行ファイルのサイズは異常に膨れ上がります(例:ランタイム無し→120kB、ランタイム込み→130MB、1,000倍超?)ので、一長一短というか、特別な理由でも無い限りは実用的ではないかと…。

 

ところでこの発行コマンド、デバッグの時に自動生成された「tasks.json」に登録しておけば、毎回ターミナルからコマンドを入れなくてもメニューから実行することができるようになります。
「tasks.json」を開き、適当な場所に、下記の内容を追記してください。

{
	"version": "2.0.0",
	"tasks": [
		(中略)
		(以下追記)
		{
			"label": "発行(x86)",
			"command": "dotnet",
			"type": "process",
			"args": [
				"publish",
				"-c:Release",
				"-r:win10-x86",
				"-p:PublishReadyToRun=true",
				"-p:PublishSingleFile=true",
				"--self-contained:false",
			],
			"problemMatcher": "$msCompile"
		},
		(追記ここまで)
		(中略)
	]
}

ターミナルで実行する発行コマンドの内容をほぼそのまま反映させている感じです。
(各項目の詳細は分かりません!元々存在してた「publish」タスクを真似して作っただけです。)

上記の設定を追加すると、タスクに「発行(x86)」が加わります。メニューの「ターミナル」→「タスクの実行」として「発行(x86)」を選択すると、登録した内容で発行処理が実行されます。