窓を作っては壊していた人のブログ

この謎のブログタイトルの由来を知るものはもういないだろう

MAUIのようなMulti TargetingなC#のプロジェクトをVSCodeで開発する際、Targetを切り替えやすくする拡張を作った話

まず最初に成果物のリンクを。

marketplace.visualstudio.com

VSCodeとMulti Targetingなプロジェクトの今

VSCodeMulti Targeting な Project を開くと、基本的には <TargetFrameworks></TargetFrameworks> に囲まれた先頭のTargetがコード補完などに使用するTargetに設定されます。

そのため、例えばmacOSで先頭が.NET Frameworkなプロジェクトを開くとコードが補完されない、もしくはOmniSharpが正常に動作しないといったことが起こります。 そのため取り入れられている解決手段としてTargetFrameworksの先頭に.netstandardなTargetを持ってくるといったものがあります。

例えばこんなPR

Improve Visual Studio Code support by pellared · Pull Request #2015 · open-telemetry/opentelemetry-dotnet · GitHub

この様にまずはプロジェクトを開くことが出来るようにしようというのは全とっかえで済むことがわかっています。

では、そんな中なぜこの拡張を作ったのか、その理由などを次に述べます。

Targetを切り替えたくなるプロジェクト

最近クロスプラットフォーム開発フレームワークMAUIPreviewですがリリースされました。 MAUIについては詳しくは述べませんが、一つのプロジェクトでiOS, Android, macOS, Windows向けのアプリケーションが作れるものと認識してもらえれば。

このMAUIを採用するアプリケーションもMulti Targetingなプロジェクトとして作られるのですが、前述したように基本的には <TargetFrameworks></TargetFrameworks> に囲まれた先頭のTargetがコード補完などに使用されます。 これが何を意味するかと言うと、Platform非依存のInterfaceを定義して、Platform依存の実装を書く際にTargetFrameworksの先頭に対象のPlatformのTargetが書かれていないとコードの補完が行われず、PlatformのAPIエスパーして書かなければならないということです。 流石にエスパーして書くわけにはいかないので、対象PlatformのTargetを先頭に持ってきたりするわけですが、そういった書き換えを自分で行うのは非常に手間がかかります。

そのためその書き換えに近いことを行うことを支援する拡張として TargetFrameworksSwitcher for C# が生まれました。

拡張機能が提供する機能

拡張機能名前そのままですが、TargetFrameworkを切り替えてくれます。

動作の様子は以下のGifを。

f:id:yamachu_co:20210725202805g:plain
Switch target framework by using extension

この様に拡張機能を使って定義されているTargetを指定すると、そのTargetのAPIなどが補完されるようになります。 上記のGifではMAUIのプロジェクトで利用したものですが、例えば

jwt/JWT.csproj at c871e2428c1587c237069c509a530635076d53bf · jwt-dotnet/jwt · GitHub

<TargetFrameworks>net35;net40;net46;netstandard1.3;netstandard2.0;net50</TargetFrameworks>

のように、先頭に.NET Frameworkが含まれるプロジェクトでも同様に動作します。

macOSLinuxでこういったプロジェクトを開発する方にとっては割と便利な拡張なのでは?と思うので、是非とも使ってみてください。

以下どういう仕組なのか知りたい人向け

どの様に実現しているか

拡張機能リポジトリ

GitHub - yamachu/TargetFrameworksSwitcherForOmniSharp

実際のコアライブラリ

GitHub - yamachu/NodeCsprojModifier

上記のコアライブラリを見てもらえるとなんとなくわかると思うのでさらっと解説。

MSBuildのtargetファイルに明示的に<TargetFramework></TargetFramework>のプロパティを挿入し、そのtargetファイルをcsprojから読むようにして実現しています。

TargetFrameworkSwitcher.targets

<Project>
    <!-- NOTE: DO NOT EDIT YOURSELF
        You should add this file to gitignore
    -->
    <PropertyGroup>
        <TargetFramework>net6.0-maccatalyst</TargetFramework>
    </PropertyGroup>
</Project>

Some.csproj

<Project Sdk="Microsoft.NET.Sdk.Razor">
+   <!-- NOTE: TargetFrameworkSwitcher inserts it, DO NOT EDIT YOURSELF and IT REQUIRES TOP-LEVEL EVALUATION BEFORE USING "TargetFramework" VARIABLE -->
+   <Import Project="$(MSBuildProjectDirectory)\TargetFrameworkSwitcher.targets" Condition="Exists('$(MSBuildProjectDirectory)\TargetFrameworkSwitcher.targets')" />
+

これはMAUIプロジェクトで拡張機能を使って net6.0-maccatalyst をTargetFrameworkに指定した例です。 プロジェクトの先頭でtargetsをImportしTargetFrameworksの構成を変更せずTargetFrameworkを指定する、と言った方法で切り替えを実現しています。

NOTEとして書いているように、targetsファイルはあってもなくてもビルドは出来るというものにすることで、Visual Studioで開発している人とVSCodeで開発している人、拡張機能を入れている人と入れていない人でも問題ないようにしています(そのためどちらかと言うとlocalファイルないしuserファイルに近いのでignoreすべきと書いています)。

OmniSharp-Roslyn自体を拡張するのは非常に大変ですが、VSCode拡張機能で監視されているcsproj自体に作用してしまえば解決できると思ったこの課題、手法としては悪手ではなかったと思うので自分では満足しています。 使っていく中で見つけた更なる課題や、使ってくださった方からIssueが上がったらまた解消していこうと思います。

maui-blazorテンプレートでアプリを作ってハマった場所とかのメモ Preview4 to Preview5のmigration関係

Microsoft Buildで取り上げられたMAUIを試してみた系のメモです。

完全にPreviewPreviewってレベルで、本当にバグでもなんでも来いの人が試すといいと思います。

Buildを見てすぐに試した人はPreview4のはずです。Preview4と5の話を色々していくので、適宜これは4の話です、5の話ですを書いていこうかなと。 6月11日にPreview5が利用出来るようになったので(アナウンスはまだなされていません)基本的にはPreview5を使ったほうがいいです(理由は後述)。

試行錯誤しているリポジトリ

github.com

こちらです、興味のある方はごらんください。

最初にやること

Getting Started · dotnet/maui Wiki · GitHub

これに沿って進めましょう。 今回はStep.1 でmauiプロジェクトではなくて、maui-blazorプロジェクトを作ります。

テンプレートやパッケージの更新

現在利用しているtemplateがどれかを確認します。

$ dotnet new -u
Currently installed items:
  Microsoft.Maui.Templates
    Version: 6.0.100-preview.4.634
    Details:
      Author: Microsoft
    Templates:
      .NET MAUI Blazor App (maui-blazor) C#
      .NET MAUI App (maui) C#
    Uninstall Command:
      dotnet new -u Microsoft.Maui.Templates

こんな感じの表示が出たらPreview4のテンプレートです。

これをまずはアップデートしましょう。

$ dotnet new -u Microsoft.Maui.Templates
Success: Microsoft.Maui.Templates::6.0.100-preview.4.634 was uninstalled.

$ dotnet new -i Microsoft.Maui.Templates
The following template packages will be installed:
  Microsoft.Maui.Templates

Success: Microsoft.Maui.Templates::6.0.100-preview.5.760 installed the following templates:
Template Name         Short Name   Language  Tags
--------------------  -----------  --------  ------------------------------------------------
.NET MAUI App         maui         [C#]      MAUI/Android/iOS/macOS/Mac Catalyst/WinUI
.NET MAUI Blazor App  maui-blazor  [C#]      MAUI/Android/iOS/macOS/Mac Catalyst/WinUI/Blazor

こうすると最新のPreview5のテンプレートが降ってくるのでこれを使いましょう。

よりも、maui-checkをアップデートする方が自分の中では正解だなになったので、こっちをやっていきます。

$ dotnet tool update -g Redth.Net.Maui.Check
ツール 'redth.net.maui.check' がバージョン '0.5.0' からバージョン '0.5.5' に正常に更新されました。
$ maui-check --preview
(以下略)

で今日時点ではPreview5が降ってくるようになります。 テンプレートやWorkloadが同時にアップデートされるのでこれが推奨されるやり方でしょう。

ですが、これでPreview5関連パッケージ落としてきてもまだrestore出来ません。

 dotnet restore
  復元対象のプロジェクトを決定しています...
/Users/yamachu/Projects/github.com/yamachu/MAUICameraSetting/tmp/tmp/tmp.csproj : error NU1102: バージョン (= 6.0.0-preview.5.21301.5) のパッケージ Microsoft.NETCore.App.Runtime.Mono.iossimulator-x64 が見つかりません
/Users/yamachu/Projects/github.com/yamachu/MAUICameraSetting/tmp/tmp/tmp.csproj : error NU1102:   - 1 バージョンが nuget に見つかりました。 [ 最も近いバージョン: 6.0.0-preview.4.21253.7 ]
/Users/yamachu/Projects/github.com/yamachu/MAUICameraSetting/tmp/tmp/tmp.csproj : error NU1102:   - 0 バージョンが maui-preview に見つかりました
/Users/yamachu/Projects/github.com/yamachu/MAUICameraSetting/tmp/tmp/tmp.csproj : error NU1102: バージョン (= 6.0.0-preview.5.21301.5) のパッケージ Microsoft.NETCore.App.Runtime.Mono.android-arm64 が見つかりません
/Users/yamachu/Projects/github.com/yamachu/MAUICameraSetting/tmp/tmp/tmp.csproj : error NU1102:   - 1 バージョンが nuget に見つかりました。 [ 最も近いバージョン: 6.0.0-preview.4.21253.7 ]
/Users/yamachu/Projects/github.com/yamachu/MAUICameraSetting/tmp/tmp/tmp.csproj : error NU1102:   - 0 バージョンが maui-preview に見つかりました
/Users/yamachu/Projects/github.com/yamachu/MAUICameraSetting/tmp/tmp/tmp.csproj : error NU1102: バージョン (= 6.0.0-preview.5.21301.5) のパッケージ Microsoft.NETCore.App.Runtime.Mono.android-x86 が見つかりません
/Users/yamachu/Projects/github.com/yamachu/MAUICameraSetting/tmp/tmp/tmp.csproj : error NU1102:   - 1 バージョンが nuget に見つかりました。 [ 最も近いバージョン: 6.0.0-preview.4.21253.7 ]
/Users/yamachu/Projects/github.com/yamachu/MAUICameraSetting/tmp/tmp/tmp.csproj : error NU1102:   - 0 バージョンが maui-preview に見つかりました
/Users/yamachu/Projects/github.com/yamachu/MAUICameraSetting/tmp/tmp/tmp.csproj : error NU1102: バージョン (= 6.0.0-preview.5.21301.5) のパッケージ Microsoft.NETCore.App.Host.linux-arm64 が見つかりません
/Users/yamachu/Projects/github.com/yamachu/MAUICameraSetting/tmp/tmp/tmp.csproj : error NU1102:   - 52 バージョンが nuget に見つかりました。 [ 最も近いバージョン: 6.0.0-preview.4.21253.7 ]
/Users/yamachu/Projects/github.com/yamachu/MAUICameraSetting/tmp/tmp/tmp.csproj : error NU1102:   - 0 バージョンが maui-preview に見つかりました
/Users/yamachu/Projects/github.com/yamachu/MAUICameraSetting/tmp/tmp/tmp.csproj : error NU1102: バージョン (= 6.0.0-preview.5.21301.17) のパッケージ Microsoft.AspNetCore.App.Runtime.linux-arm64 が見つかりません
/Users/yamachu/Projects/github.com/yamachu/MAUICameraSetting/tmp/tmp/tmp.csproj : error NU1102:   - 52 バージョンが nuget に見つかりました。 [ 最も近いバージョン: 6.0.0-preview.4.21253.5 ]
/Users/yamachu/Projects/github.com/yamachu/MAUICameraSetting/tmp/tmp/tmp.csproj : error NU1102:   - 0 バージョンが maui-preview に見つかりました
/Users/yamachu/Projects/github.com/yamachu/MAUICameraSetting/tmp/tmp/tmp.csproj : error NU1102: バージョン (= 6.0.0-preview.5.21301.5) のパッケージ Microsoft.NETCore.App.Runtime.Mono.maccatalyst-x64 が見つかりません
/Users/yamachu/Projects/github.com/yamachu/MAUICameraSetting/tmp/tmp/tmp.csproj : error NU1102:   - 1 バージョンが nuget に見つかりました。 [ 最も近いバージョン: 6.0.0-preview.4.21253.7 ]
/Users/yamachu/Projects/github.com/yamachu/MAUICameraSetting/tmp/tmp/tmp.csproj : error NU1102:   - 0 バージョンが maui-preview に見つかりました
  /Users/yamachu/Projects/github.com/yamachu/MAUICameraSetting/tmp/tmp/tmp.csproj を復元できませんでした (1.92 sec)。

こんな感じで Microsoft.NETCore.App.Runtime.Mono.* 系統がrestore出来ないので、dotnet runtimeのnightlyを落とせるようにしましょう。

runtime/dogfooding.md at main · dotnet/runtime · GitHub

$ dotnet nuget add source -n dotnet6 https://dnceng.pkgs.visualstudio.com/public/_packaging/dotnet6/nuget/v3/index.json

これでrestore出来るようになります、スタートまでが遠い。

適宜パッケージのみのアップデートを行いたい場合は dotnet-outdatedを使うとかで上げるのがいいんじゃないかな。

コードの変更

Preview5のtemplateで作った場合ならここは無視してよいです。

Preview4でtemplateを作った場合はbinやobjディレクトリを消し去って、csprojを

- <PackageReference Include="Microsoft.AspNetCore.Components.WebView.Maui" Version="6.0.100-preview.4.*" />
+ <PackageReference Include="Microsoft.AspNetCore.Components.WebView.Maui" Version="6.0.100-preview.5.*" />
- <PackageReference Include="Microsoft.Maui" Version="6.0.100-preview.4.*" />
+ <PackageReference Include="Microsoft.Maui" Version="6.0.100-preview.5.*" />

こんな風にpreview5を使うようにします。

その状態でrestoreしてビルドすると

/Users/yamachu/Projects/github.com/yamachu/MAUICameraSetting/MAUICameraSetting/Startup.cs(19,6): error CS1061: 'IAppHostBuilder' に 'UseMauiApp' の定義が含まれておらず、型 'IAppHostBuilder' の最初の引数を受け付けるアクセス可能な拡張メソッド 'UseMauiApp' が見つかりませんでした。using ディレクティブまたはアセンブリ参照が不足していないことを確認してください [/Users/yamachu/Projects/github.com/yamachu/MAUICameraSetting/MAUICameraSetting/MAUICameraSetting.csproj]

こんな感じでパッケージ内部のnamespaceの変更に巻き込まれるので、Startup.csに

using Microsoft.Maui.Controls.Hosting;

を追加します。

これでビルドが通るようになります。

Windows向けのプロジェクトの修正

後で頑張って書く………

Preview4は

├── MAUICameraSetting.WinUI3
├── MAUICameraSetting.WinUI3\ (Package)

こんな感じで

Preview5だと

├── MAUICameraSetting.WinUI

になって色々変わってるんですよね…これはなんとかしないと。

あとPreview4だと

こんな感じで罠があったけれども、Preview5だとそれが解消されたので楽です。

Crash on startup of WinUI3 C# Project - Basic App Instructions - COMException: Class not registered (0x80040154 (REGDB_E_CLASSNOTREG)) · Issue #848 · microsoft/ProjectReunion · GitHub

わかったきっかけとしてはこれ、難しすぎる。

まとめ

Migration面倒だから、とりあえずPreview5使っておいたほうがいい。

また、これはPreviewの更にPreviewってレベルのやつなので、ちゃんと公式がアナウンスしてから試したほうがいい。はい

他の記事で書くこと

  • VSCodeでNativeAPIの補完を効かせながら開発をするHack
  • Macアプリのデバッグ方法(アタッチは出来ないんだけど…)
  • そもそもiOSMacアプリは.NET 6 preview 6までまともに開発できないかもしれないの話

の3本です、はい