.NET MAUI を試してみた - 前編 -

.NET MAUI(Multi-platform App UI)は .NET 技術をベースとしてネイティブアプリ(Android、iOS、macOS、Windows、etc...)を開発するためのクロスプラットフォームフレームワークです。昨年コロナの接触通知アプリ COCOA で良くも悪くも有名になった Xamarin.Forms の後継に当たるものですね。 Xamarin は元々 .NET Framework 互換環境の Mono 上で動作する Android や iOS のネイティブアプリを開発するフレームワークを開発していた会社でして、 Xamarin でアプリを開発するには有料のライセンスが必要だった時代もあったそうです。その後 Microsoft に買収されて無料で Visual Studio に同封されるようになり、2022年には .NET 6 のメンバーとして生まれ変わります。長年? Xamarin を眺めてきた者としてちょっと感慨深いものがあります。

前置きはさておき、そんな MAUI のプロジェクトを作成し試してみました。記事は前編と後編に分かれており、前編はプロジェクトを作成して実行してみるところまで、後編は MAUI プロジェクトのソースコードを眺めてみた感想を記しています。この記事は前編となります。

この記事を執筆している2021年12月現在 MAUI はまだプレビューバージョンで、記事の内容はリリース版と異なる可能性がある点ご注意ください。

試した環境

  • Windows 11 21H2
  • Visual Studio 2022 Preview (17.1.0 Preview 1.1)
  • .NET SDK 6.0.100
  • .NET MAUI Preview 10

MAUI を試すための事前準備

先に記したとおり MAUI は未だプレビューバージョンです(※ロードマップによると2022年 Q1 に RC バージョンがリリースされ Q2 で GA 予定)。安定版の Visual Studio には MAUI のプロジェクトテンプレートは同封されていないため、 MAUI を試すにはプレビュー版の Visual Studio のインストールが必要です。インストール時に「 .NET によるモバイル開発」にチェックを入れると自動的に MAUI に関連するコンポーネントがインストールされます。

Visual Studio Installerで「.NET によるモバイル開発」にチェック

チェックを入れると自動で MAUI 系のコンポーネントが選択されている

MAUI プロジェクトを作成する

Visual Studio Preview のインストールが完了したら、実際に MAUI のプロジェクトを作成します。プロジェクトテンプレートの一覧では MAUI 系のテンプレートが3つ登録されていました。

MAUI 系プロジェクトテンプレートの一覧

一番上に表示されている「.NET MAUI App」プロジェクトは XAML を使用した MVVM 系の MAUI アプリを作成するためのもの、二番目の「.NET MAUI Blazor App」プロジェクトは Web クライアントを .NET で実装することが可能な Blazor を利用して UI を実装する MAUI アプリを作成するためのもの、三番目の「.NET MAUI Class Library」プロジェクトは MAUI アプリが動作するネイティブ環境に依存するライブラリーを作成するためのものです。

.NET MAUI App の作成と実行

まずは1つ目のプロジェクト「.NET MAUI App」を作成すると、以下のようなプロジェクトが作成されました。

.NET MAUI App のプロジェクト構造(右)と比較対象の Xamarin.Forms のプロジェクト構造(左)

比較対象として作成直後の Xamarin.Forms アプリのプロジェクト構造を左側に並べています。 Android や iOS といった各プラットフォームを同一プロジェクトに同居させることができる様になったようで、作成されたプロジェクトは1つととてもシンプルになりましたね。この構造は特にライブラリーを実装する上でとても便利に感じます。プロジェクトの中身は何も変更せず動作環境を Windows で実行したらエラー無くアプリが起動しました。

MAUI で動作する Windows アプリ

実行対象を Android に変更すればもちろん Android アプリが起動し。。。ませんでしたが、ソリューションを開き直すと起動しました。動きはするもののまだ不安定なところもありそうです。

MAUI で動作する Android アプリ

.NET MAUI Blazor App の作成と実行

続いて2番目のプロジェクトである 「.NET MAUI Blazor App」を作成してみます。

.NET MAUI Blazor App のプロジェクト構造

プロジェクト構造を眺めると基本的な構造は先の「.NET MAUI App」とほとんど同じですが、 Blazor を実行するための HTML や CSS や razor ファイルが含まれていることが分かります。こちらもプロジェクトの中身を変更せずにそのまま実行し、エラー無く Windows アプリと Android アプリが起動しました。こちらもターゲットの切り替えにソリューションの開き直しが必要でしたが。。

MAUI Blazor で動作する Windows アプリ

MAUI Blazor で動作する Android アプリ

執筆担当者プロフィール
中谷 大造

中谷 大造(日本ビジネスシステムズ株式会社)

情報システム部の中谷です。社内用スクラッチアプリの開発をしています。

担当記事一覧