もっと詳しく

【2021年11月11日追記】
Preview 10 が出たので、新しい記事のほうが参考になると思います。

blog.takunology.jp

Microsoft Build のイベントにて .NET 6 preview 4 と MAUI について紹介されており、気になっていました。特にMAUIを試してみたいなぁと思ったので、導入してサンプルアプリを動かしてみたいと思います。

実行環境

セットアップの途中でアップデートされます。

目標

  • .NET 6.0.0-preview.4 を導入する
  • MAUI アプリを作成して動かしてみる

1. .NET 6 – pre4 のインストール

まずはここからダウンロードします。

dotnet.microsoft.com

f:id:takunology:20210529020459p:plain

インストール方法やチュートリアルについては、遷移したダウンロード先のページに書いてありますので、読みましょう。

f:id:takunology:20210529020753p:plain

ちなみに、.NET 6 – pre4 の詳細については .NET Blog に書かれているので、気になる方は読んでみてください。

devblogs.microsoft.com

インストールが完了したらバージョン確認を行います。

> dotnet --version
6.0.100-preview.4.21255.9

これで準備完了です。

2. Visual Studio 16.11 preview 1 のインストール

MAUI を使用するには 16.11 である必要があります。Visual Studio インストーラーでは 16.10 が最新版であり、これ以上バージョンアップできません。なので、下記リンクの下の方からダウンロードします。

devblogs.microsoft.com

f:id:takunology:20210529023829p:plain

あとは使用しているエディションを選択してインストールを行います。

f:id:takunology:20210529023936p:plain

プレビュー版の Visual Studio は既存のものとは別物なので、容量に注意してください。(上書きされるのではなく、共存します。)

preview 版と最新版の2つがあれば Visual Studio の準備は完了です。

3. 拡張機能 MAUI の導入

MAUI は別でセットアップする必要があります。まずは、下記のページに書いてあるように .NET MAUI Check Tool の導入が必要です。

github.com

power shell を開き、下記のコマンドを実行します。

dotnet tool install -g redth.net.maui.check

次に、maui-check を実行してツールを使用します。

maui-check

f:id:takunology:20210529030947p:plain

ツールが開き、現在の環境で問題があると

! Attempt to fix? [y/n] (y):

と何度も聞かれると思うので、y と入力して修正していきます。

f:id:takunology:20210529031122p:plain

なんか色々とダウンロードするので結構容量食われるかもしれません。(しかも強制的に C ドライブへ…)

そしてなぜか

! There were one or more problems detected.
Please review the errors and correct them and run maui-check again.

と表示されてしまいました。とりあえずもう一度 maui-check を実行してみますが…

≫ Attempting to fix: Android Emulator
Exception in thread "main" java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema
        at com.android.repository.api.SchemaModule$SchemaModuleVersion.<init>(SchemaModule.java:156)
        at com.android.repository.api.SchemaModule.<init>(SchemaModule.java:75)
        at com.android.sdklib.repository.AndroidSdkHandler.<clinit>(AndroidSdkHandler.java:81)
        at com.android.sdklib.tool.AvdManagerCli.run(AvdManagerCli.java:213)
        at com.android.sdklib.tool.AvdManagerCli.main(AvdManagerCli.java:200)
Caused by: java.lang.ClassNotFoundException: javax.xml.bind.annotation.XmlSchema
        at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:581)
        at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:178)
        at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:522)
        ... 5 more
Fix applied.  Checking again...

? Android Emulator Checkup...
  × Android Emulator - x86 - API30 - Google API's not created.

というエラーが表示されます。どうやら Android エミュレータに関するエラーのようなのですが、先程 Visual Studio セットアップの際にエミュレータを導入していませんでした。なので、これらにチェックをいれて機能を追加します。

f:id:takunology:20210529042230p:plain

これでもう一度 maui-check を実行すると、

? Congratulations, everything looks great!

と表示され、無事にインストールが完了したようです。

4. MAUI プロジェクトの作成

Visual Studiopreview 版のほうを開きます。

f:id:takunology:20210529025957p:plain

プロジェクトの作成にて、検索欄に MAUI と入力すると表示されます。

f:id:takunology:20210529032132p:plain

.NET MAUI App を選択して次へ進み、適当な名前をつけてプロジェクトを作成します。ファイアーウォール許可や開発者モードの設定が出てくると思うので、それぞれ許可してください。

f:id:takunology:20210529032502p:plain

すごい数のプラットフォームですね…。最初から WSL2 をターゲットにできるようです。

なんかエラーがめっちゃ出ているのですが…。しかも NuGet パッケージ足りないって…。

f:id:takunology:20210529043044p:plain

5. エラーの修正と実行

色々調べてみたら解決方法が載っていました。(MAUI やってみた記事が既にあった…。しかも試すのめっちゃ早い…。)

zenn.dev

この記事のリンク先に NuGet の修正方法が載っているので、これを見ながら修正していきます。

github.com

画面上部の「表示」タブから「ターミナル」を開きます。

f:id:takunology:20210529035718p:plain

あとは参考リンクにあるコマンドを順番に実行していきます。

dotnet new nugetconfig
dotnet nuget add source -n maui-preview https://aka.ms/maui-preview/index.json
dotnet restore

このような感じに復元が完了すれば、エラーも消えていると思います。

f:id:takunology:20210529043212p:plain

次に、動かしたいプラットフォームを指定してビルドします。今回は Android を使用しますが、ビルドする前に Android エミュレータ (API30) を起動しておきます。起動が完了したら下記のコマンドを実行してみてください。

 dotnet build -t:Run -f net6.0-android

40秒くらいすると Android エミュレーター上でアプリが起動します。

f:id:takunology:20210529233257p:plain

アプリのボタンをクリックするとカウンターが増えるので、一応動作はしているみたいです。WinUI3 でも動かせるはずなのですが、自分の環境では動かせなかったので原因を探っていきたいと思います。

まだプレビュー版なので、今後が楽しみです。

イベントのお知らせ

2021年5月31日(月) の 20:00 ~ 21:00 に MS Tech Camp #7 を開催します!

Custom Vision Service で画像分類 AI を構築するハンズオンを行います。AI に興味がある方、Custom Vision Service を使ってみたい方はぜひご応募ください。まだまだ募集中です!

mspjp.connpass.com

Microsoft の学生コミュニティに興味がある学生さんへ

日本では約10名が活動している Microsoft Learn Student Ambassadors は、Microsoft 製品や技術を広める活動を行っています。興味がある方は下記リンクを覗いてみてください。応募方法や特典など、役立つ情報をまとめてみました!

blog.takunology.jp

学生の皆さまの参加をお待ちしております!