.NET MAUI チュートリアル - C# での最初のマルチプラットフォームアプリ

はじめに

目的

開発環境をセットアップし、最初の .NET Multi-platform App UI (.NET MAUI) アプリをビルドします。

前提条件

Visual Studio 2022 のシステム要件を確認します。

完了までの時間

10分 + ダウンロード/インストール時間

シナリオ

Hello, World! メッセージを表示する、Windows または Android で実行されるモバイルおよびデスクトップアプリ。

ダウンロードしてインストール

Visual Studio 2022 をダウンロードしてインストールします。

Visual Studio 2022 のダウンロード

インストール中に、.NET Multi-Platform App UI の開発ワークロードを選択する必要があります。上記のリンクを使用すると、次の画像に示されているように、すべての前提条件が正しく事前選択されるはずです。

Visual Studio 2022 を既にお使いですか?

このチュートリアルは、Visual Studio の最新バージョン向けに最適化されています。Visual Studio 2022 が既にある場合は、最新であることと、必要なワークロードがインストールされていることを確認してください。

コンピューター上の Visual Studio Installer を見つけます。

Windows スタートメニューで "installer" を検索し、検索結果から Visual Studio Installer を選択します。
プロンプトが表示された場合は、インストーラーが自分自身を更新することを許可します。
Visual Studio 2022 の更新プログラムが利用可能な場合は、[更新] ボタンが表示されます。インストールを変更する前に、それを選択して更新してください。このチュートリアルは、Visual Studio 2022 17.12 以降のバージョンでのみ機能します。
Visual Studio 2022 のインストールを見つけて、[変更] を選択します。
[.NET Multi-Platform App UI の開発] を選択します。
[変更] ボタンを選択します。

.NET SDK をダウンロードしてインストールします。ダウンロードが完了したら、ダウンロードを起動してインストールを開始します。

.NET 9 SDK x64 (Intel) のダウンロード
 .NET 9 SDK Arm64 (Apple Silicon) のダウンロード

Apple M1 または M2 チップを搭載した Mac をお使いの場合は、Arm64 バージョンの SDK をインストールする必要があります。
VS Code をダウンロードしてインストールします:

VS Code のダウンロード
VS Code を開き、左側にある VS Code のアクティビティバーにある 拡張機能ボタンを選択します。検索バーに MAUI と入力し、.NET MAUIを選択し、.NET MAUI 拡張機能ページの Install ボタンを選択します。

この拡張機能には、C# 開発キットと C# 拡張機能が付属しています。これは、.NET MAUI 拡張機能を実行するために必要です。
次のコマンドを実行して、新しいターミナルを開き、 .NET MAUI ワークロードをインストールします:
Terminal
```
sudo dotnet workload install maui
```
インストールが成功した場合、次のような出力が表示されます:
Terminal
```
Successfully installed workload maui
```

すべてが正しくインストールされていることを確認する

環境を設定したら、新しい VS Code ターミナルを開きます。ツールバーで ターミナル を選択し、それから 新しいターミナル を選択します。

ターミナルで、次のコマンドを実行してインストールを確認します。

Terminal

dotnet workload list

インストールが成功した場合、次のような出力が表示されます:

Terminal

Installed Workload Id      Manifest Version      Installation Source
--------------------------------------------------------------------
maui                       8.0.82/8.0.100        SDK 8.0.400

Use `dotnet workload search` to find additional workloads to install.

エラーが発生しましたか?

'dotnet' は内部コマンドまたは外部コマンドとして認識されていません というエラーを受信した場合は、新しい VS Code ターミナルを開いたことを確認してください。VS Code を再起動したりコンピューターを再起動したりしても問題が解決しない場合は、[問題が発生しました] ボタンを使用して、問題を解決するためのヘルプを入手してください。

Xcode のインストール

.NET MAUI アプリをビルドするには、次の項目も必要です:

Xcode の最新バージョン

.NET MAUI と互換性のある最新バージョンの Xcode を見つけるには、このリリースバージョンリファレンスをご確認ください。"Apple Tools" 列に移動して、互換性のある最新バージョンの Xcode を見つけます。
Apple ID:

Apple ID をまだお持ちでない場合は、https://appleid.apple.com で新しい ID を作成できます。Xcode をインストールしてサインインするには、Apple ID が必要です。
Xcode をインストールした後、Xcode を開き、ライセンス契約に同意し、ダイアログが表示された場合は、オプションのコンポーネントをインストールする必要があります。
開発するプラットフォームを尋ねられたら、macOS と iOS のプラットフォームを選択しダウンロードとインストールを選択します。
新しいターミナルを開き、次のコマンドを実行して Xcode コマンドライン開発者ツールをインストールします:
Terminal
```
xcode-select --install
```
Xcode コマンドライン開発者ツールのインストールを求められたら、インストール を選択します。最後に、ライセンス契約に同意します。

問題がなければ、下の [続行] を選択して次の手順に進みます。

アプリを作成する

新しい.NET MAUI アプリの作成:

Visual Studio 2022 を開きます。
[新しいプロジェクトの作成] を選択します。
[新しいプロジェクトの作成] ウィンドウで、検索バーに「MAUI アプリ」」と入力します。[.NET MAUI アプリ] テンプレートを選択し、[次へ] ボタンをクリックします。
[新しいプロジェクトの構成] ダイアログで、プロジェクト名として「BlazorApp」と入力し、[次へ] ボタンをクリックします。
まだ選択していない場合は、追加情報ウィンドウで Framework ドロップダウンから [.NET 9.0] を選択し、[作成] ボタンをクリックします。

Visual Studio で新しいプロジェクトを作成します。ファイアウォールによって一部の機能がブロックされていることを警告する Windows セキュリティアラートが表示される場合は、[アクセスを許可] ボタンを選択します。

NuGet パッケージの復元プロセスを待機する

NuGet は、新しいアプリの依存関係を取り込んだパッケージマネージャーです。

パッケージの復元処理が自動的に開始されます。復元済み または 準備完了 のメッセージが画面左下のステータスバーに表示されるまでお待ちください。

アプリケーションを実行する

このチュートリアルでは、最初にローカル Windows コンピューターに .NET MAUIアプリケーションを展開する方法について詳しく説明します。その後で、Android デバイスまたはエミュレーターを設定できます。

[Visual Studio] ツールバーには、既定でWindows マシンがデバッグターゲットとして表示されます。[Windows マシン] ボタンを押して、アプリを構築して実行します:

実行中のアプリで、[ここをクリック] ボタンを数回選択し、ボタンのクリック数が増加していることを確認します:

おめでとうございます。最初の .NET MAUI アプリを構築して実行しました。アプリをそのまま実行して、チュートリアルを続行します。

コードを編集する

.NET MAUI を使用してアプリケーションを開発している場合、アプリケーションをデバッグするときに XAML ホットリロードを使用できます。これは、アプリケーションの実行中に XAML ユーザーインターフェイス (UI) を変更できることを意味し、UI は自動的に更新されます。

Visual Studio に戻り、アプリを実行したままにしておきます。ソリューションエクスプローラーで、MyFirstMauiApp プロジェクトの下にある MainPage.xaml ファイルをダブルクリックします。"ソリューションエクスプローラー" ウィンドウが表示されない場合は、メインメニューから [ビュー] > [ソリューションエクスプローラー] を選択します (または Ctrl + Alt + L キーを押します)。

現在、２番目の Label の Text の 17 行目は、次のコードに示されているように Hello, World! と表示される設定になっています。:

MainPage.xaml

<Label
    Text="Hello, World!" 
    Style="{StaticResource Headline}"
    SemanticProperties.HeadingLevel="Level1"  />

テキストを更新して、Hello, .NET MAUI! と表示します。

MainPage.xaml

<Label
    Text="Hello, .NET MAUI!" 
    Style="{StaticResource Headline}"
    SemanticProperties.HeadingLevel="Level1"  />

変更すると、アプリの UI が自動的に更新されます。

.NET MAUI を使用してアプリケーションを開発している場合は、.NET ホットリロードを使用して C# コードを再読み込みすることもできます。アプリケーションのロジックを変更して、カウントを 1 ずつではなく 10 ずつ増やしてみましょう。

MainPage.xaml.cs を開きます (このファイルは MainPage.xaml の下に入れ子になっています。右クリックしてメニューから [コードの表示] を選択することもできます)。

そのファイルの OnCounterClicked メソッドには、現在次のコードが含まれています:

MainPage.xaml.cs

private void OnCounterClicked(object sender, EventArgs e)
{
    count++;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

count++; を count += 10; に更新して、10 ずつ増分するようにします。

MainPage.xaml.cs

private void OnCounterClicked(object sender, EventArgs e)
{
    count += 10;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

コードの変更を適用するには、ファイルを保存し、Visual Studio で [ホットリロード] ボタンを選択するか、Alt キーと F10 キーを同時に押します。

[ここをクリック] ボタンを選択すると、10 ずつ増加して表示されます。完了しました。実行中のアプリを今すぐ閉じることができます。

モバイルデバイスで実行する

開発環境に基づいて、1 つ以上のプラットフォームに配置できます。アプリを実行して Windows に展開しました。次に、Android デバイスまたはエミュレーターを設定しましょう。

Hyper-V のアクティブ化

Windows Search バーに「Windows 機能」と入力し、[Windows 機能をオンまたはオフにする] を選択します。

[Hyper-V] ボックスがオンになっていることを確認し、[OK] を選択します。

変更を有効にするには、この時点でコンピューターを再起動する必要があります。

Android SDK のインストール

Visual Studio と MyFirstMauiApp ソリューションを開きます。デバッグターゲットのドロップダウンメニューから、[フレームワーク] の下の [net8.0-android] を選択します。

プロジェクトをビルドするには、Android SDK の特定のバージョンが必要です。Android SDK ライセンスに同意していない場合は、[エラー一覧] ウィンドウに次のエラーメッセージが表示されます。

メッセージをダブルクリックして、ライセンスへの同意プロセスを開始します。表示された各ライセンスに対して[同意する]をクリックすると、自動インストールが開始されます。

Android Emulator の設定

展開先の Android デバイスがない場合は、次のステップに従って Android エミュレーターを設定できます。既にこれを行っているか、独自の Android デバイスを使用する場合は、このステップをスキップできます。

.NET MAUI アプリケーションを初めてビルドする場合は、デバッグターゲットのドロップダウンメニューで Android Emulator が表示されます。クリックして作成プロセスを開始します。ライセンス受け入れダイアログが表示されたら、同意するを選択します。

"新しいデバイス" ウィンドウが表示されます。[作成] ボタンを選択して、既定の設定でエミュレーターを作成します。これにより、エミュレーターイメージがダウンロードされ、Visual Studio で使用するエミュレーターの作成が完了します。このステップには時間がかかる場合があります。

表示される API レベルが画像と異なる場合でも、心配はいりません。API レベルが 33 以上になる場合もあります。

エミュレーターが作成されると、スタート というボタンが表示されます。それをクリックします。

Windows ハイパーバイザープラットフォームを有効にするように求めるメッセージが表示される場合があります。ドキュメントに従って、パフォーマンスを向上させるために高速化を有効にします (エミュレーターを起動して実行するために必要です)。[[実行] を選択します。

Android エミュレーターが起動し、Android デバイスマネージャーに停止機能が表示されると、エミュレーターが完全に終了します。これには時間がかかる場合があります。

ビルドが完全に終了すると、Visual Studio の [デバッグ] メニューに表示されます。

Android emulator が作成され、使用できるようになりました。次回 Visual Studio を実行するときに、エミュレーターはデバッグターゲットウィンドウに直接表示され、選択すると開始します。エミュレーターの使用中に問題が発生した場合やパフォーマンスの問題が発生した場合は、完全なセットアップドキュメントをお読みください。