嫌いな記事:いいねされない記事。
好きな記事:言い値される記事。
期限はだいたい1年ぐらいです。
5ストック以上でデザイナをVSCode上で表示させる方法を解禁します。
Linux上でAvaloniaUI+VSCodeを使用してdebugするまで のWindows版。
WindowsにしろLinuxにしろ、両者のOSをターゲットにクロスコンパイルすることが最終目標です。
まあどっちから作り始めてもいいだろうということで。
関連記事
チュートリアル:シンプルにつくる|Avalonia UI入門
VsCodeで開発する場合
正直言って開発体験はあまりよくないです。
まあ慣れてないせいなんだろうが
以前執筆した以下の記事
Linux上でAvaloniaUI+VSCodeを使用してdebugするまで
でいいが
どういうわけか
このCreate Avaronia Project
が出ないことがある。
→ 一応新規WindowのVSCodeなら出る
もし出ない場合はcommandで同じテンプレートが作成できます。
→ おそらくsetting.json
も関係している
入れた方が便利な拡張機能
-
Avalonia Document Outline
https://marketplace.visualstudio.com/items?itemName=LegendTheDeveloper.avalonia-document-outline
XAMLタグの認識とか
無くても動く。 -
Avalonia for VSCode
https://marketplace.visualstudio.com/items?itemName=AvaloniaTeam.vscode-avalonia
commandのガイドも載ってる。
.NET SDKをインストール
winget install Microsoft.DotNet.SDK.9
参考:Use WinGet to install and manage applications
Windowsで既にC#開発者の方は不要かもしれないです(わざわざ新規に入れてもけっこう時間食うので)
dotnet --version
かdotnet --list-sdks
に以下が含まれていればOK
参考:How to check that .NET is already installed
dotnet --list-sdks
9.0.301 [C:\Program Files\dotnet\sdk]
9.0.304 [C:\Program Files\dotnet\sdk]
つまり面倒なのでパス。
あとは チュートリアル:シンプルにつくる|Avalonia UI入門 を参照すればよいです(AIに聞くよりは早いと思います)。
クロスプラットフォーム用のテンプレートを出力
対象のディレクトリ上で
dotnet new avalonia.app -o SampleApp
SampleApp
ファルダが出力される。
Dotnet Build
する必要がある。
defaultでクロスプラットフォーム対応とのこと。
参考:Supported Platforms(Avalonia UIドキュメント)
厨:参考URLAvalonia UI 超入門に載ってる
dotnet new avalonia.xplat -o SampleXPlatApp
はモバイル・Webアプリ開発向けだそうです。
トラブルシューティング
VSCodeで対象のフォルダを開いた直後はビルドが通るのに、特定のファイルを選択状態にするとビルドに失敗する
ということが起きて難儀しました。
※以下はAI談です。
なぜ「フォルダーを選んだときは動く」のか?
VS Code のデバッグは launch.json に従いますが、
もし launch.json が無い場合や設定が曖昧な場合、VS Code は 「現在アクティブなファイル」を基準に実行構成を推測します。
フォルダーを開いた状態 → プロジェクトルート (VoiseLanchuorApp.csproj) を見つけて「アプリ起動」と推測
個別のファイル (例: ViewModel.cs) を選択 → 「単なる C# ファイルを実行しようとして」失敗
つまり「VS Code がどのファイルを エントリポイント と見なしているか」が違っているんです。
....だそうです。
対処法:.vscode/launch.jsonで明示的に指定する
テンプレート作成時はlaunch.jsonが作成されません
→ 何と自分で新規作成して書く必要がある(!)
Dllや.sln
もdotnet Build
しないと作成されません。
Avaloniaテンプレートとして生成されたものです。(Visual Studioでも開く事が出来る)
※自分でフォルダを作成してください。
以下の様に指定しました。
例によってお手軽AI生成ですが、必ず裏付けを取りますのでご安心を。
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Avalonia App",
"type": "coreclr",
"request": "launch",
+ "program": "${workspaceFolder}/bin/Debug/net9.0/VoiseLanchuorApp.dll",
"cwd": "${workspaceFolder}",
"stopAtEntry": false,
"console": "integratedTerminal"
}
]
}
- ポイント
"program" を csproj ビルド後の dll に固定 → ファイル選択の影響を受けない
"cwd" を "${workspaceFolder}" に設定 → 常にプロジェクトルートから開始
VSCodeでマウスカーソル当てたら出てきたドキュメント
起動するアプリケーション dll または.NET Core ホスト実行可能ファイルへのパス。このプロパティは通常、次の形式にな
w#d: ${workspaceFolder}/bin/Debug/(target-framework) /(project-name. dll)
:${workspaceFolder}/bin/Debug/netcoreapp1.1/MyProject.dll
場所:(target-framework)は、デバッグ対象のプロジェクトがビルドされているフレームワークです。これは通常、
TargetFramework プロパティとしてプロジェクト ファイルで見つかります。
(project-name.d1l)は、デバッグ対象プロジェクトのビルド出力dll の名前です。これは通常、プロジェクト ファイ
ル名と同じですが、拡張子は .dll'です。
'program": "${workspaceFolder}/bin/Debug/net9.0/VoiseLanchuor
d". "$sworksnaceFolder}"
dot net Buildする
dotnet Build
これでDllと.sln
が作成される(VSCodeとVisual Studio両方に対応)。
※.vscode\launch.jsonが作成されない。
プレーンテキスト をデバッグするための拡張機能がありません。Marketplace にプレーンテキストの拡張機能
があるかどうかを検索しますか?
ってビルド時にmessageが出るけど、お知らせ機能みたいなものだそうなので無視しても良い(入れた方が便利らしい)
.vscode/launch.jsonを作成した時点で出なくなる。
デザイナについて
VSCode上でもデザイナ(Designer)を出すことが出来る。
が、条件がややこしい。わざわざ教えたくない
のでストック5以上で解禁にしましょう💡
Visual Studioで拡張機能を入れた方が簡単です。
- AvanGarude
https://github.com/kuiperzone/AvantGarde
AXAMLのプレビュー用ツールなんだけど
1.直接編集が出来ない
2.表示がビルド時に反映される(リアルタイムじゃない)
3.エラーが出ると表示されない(普通か)
というカンジで割と不便です。ないよりはマシなのかもしれないけど、無くてもあんま変わらないのではないか
動作は軽快ですが。
Build Failures
日本語訳で「ビルドに失敗しました」
c:¥TestCode¥VoiseLanchuorApp¥VoiseLanchuorApp.csproj' failed to build. Would you like to
continue and run the last successful build?
が結構よく出る。
→ ビルド前にエラーとして表示してくれない。
VSCode上で拡張機能 Avalonia for Visual Studio Code を入れれば出ます。
入れないと出ないようなので注意。
それでもビルドしてからじゃないと出ないが。
→ エラーメッセージはVSCodeを日本語に設定すれば日本語で出る
プロジェクトファイル(.sln)がLinux上のVSCodeで動くかどうか実験。
これが本題のようなものなので。
わざわざUSB等にぶち込むのも面倒なのでGitに上げましょう💡 プロジェクトは提示しませんが、報告だけ。
成功はしたけど、Githubに上ゲてLinux側に落とすのが難儀で(Privateリポジトリだから)
Linux側も微妙に環境の差異の問題でなかなか上手く行きませんでした。後日まとめようと思います。
どうしてこういつもいつも厄介なのか
あとがき
スライドモードを試したのですが、思った以上に読みやすいですね。今後もコレで書いてもいいな。