初めてのアプリを構築する

このチュートリアルでは、Windows の Visual Studio 2022 または Windows、macOS、または Linux の Visual Studio Code で、初めての .NET マルチプラットフォーム アプリ UI (.NET MAUI) アプリを作成して実行する方法について説明します。 これは、開発環境が正しく設定されていることを確認するのに役立ちます。

Visual Studio

前提条件

• Visual Studio 2022 17.8 以降で、.NET Multi-platform App UI ワークロードがインストールされています。 詳細については、インストール を参照してください。

アプリを作成する

このチュートリアルでは、Visual Studio 2022 で初めての .NET MAUI アプリを作成し、Android エミュレーターで実行します。

Windows で iOS 用の .NET MAUI アプリを開発するには、Mac ビルド ホストが必要です。 特に iOS をターゲットにする必要がなく、Mac がない場合は、代わりに Android または Windows から開始することを検討してください。

このチュートリアルでは、Visual Studio で初めての .NET MAUI アプリを作成し、iOS シミュレーターで実行します。

このチュートリアルでは、Visual Studio 2022 で初めての .NET MAUI アプリを作成し、Windows で実行します。

1. Visual Studio 2022 を起動します。 [スタート] ウインドウで、[新しいプロジェクトの作成] をクリックして新しいプロジェクトを作成します。

   

2. [新しいプロジェクトの作成] ウィンドウの [すべてのプロジェクトの種類] ドロップダウンで [MAUI] を選択し、[.NET MAUI アプリ] テンプレートを選択し、[次へ] ボタンをクリックします。

   

3. [新しいプロジェクトの構成] ウィンドウで、プロジェクトの名前を指定し、適切な場所を選んで、[次へ] ボタンをクリックします。

   

4. [追加情報] ウィンドウで、対象とする .NET のバージョンを選択し、[作成] ボタンをクリックします。

   

5. プロジェクトが作成され、その依存関係が復元されるまで待ちます。

   

6. Visual Studio のツール バーで、[デバッグ ターゲット] ドロップダウンを使用して [Android エミュレーター] を選択し、[Android エミュレーター] エントリを選択します。

   

7. Visual Studio のツール バーで [Android エミュレーター] ボタンを押します。

   

   Visual Studio は、既定の Android SDK と Android エミュレーターのインストールを開始します。

8. [Android SDK - ライセンス契約] ウィンドウで、[同意する] ボタンを押します。

   

9. [Android SDK - ライセンス契約] ウィンドウで、[同意する] ボタンを押します。

   

10. [ユーザー アカウント制御] ダイアログで、[はい] ボタンを押します。

    

11. [ライセンスの同意] ウィンドウで、[同意する] ボタンを選びます。

    

    Visual Studio によって Android SDK と Android Emulator がダウンロードされるのを待ちます。

12. Visual Studio のツール バーで [Android エミュレーター] ボタンを押します。

    

    Visual Studio では、既定の Android エミュレーターの作成が開始されます。

13. [ユーザー アカウント制御] ダイアログで、[はい] ボタンを押します。

    

14. [新しいデバイス] ウィンドウで、[作成] ボタンを押します。

    

    Visual Studio によって Android エミュレーターがダウンロード、解凍、作成されるのを待ちます。

15. [Android Device Manager] ウィンドウを閉じます。

    

16. Visual Studio ツール バーで、Pixel 5 - API 34 (Android 14.0 - API 33) ボタンを押して、アプリをビルドして実行します。

    

    Visual Studio で Android エミュレーターが起動し、アプリがビルドされて、エミュレーターにデプロイされます。

    警告

    Android エミュレーターのパフォーマンスを最大化するには、ハードウェア アクセラレーションを有効にする必要があります。 これを行わないと、エミュレーターの実行速度が遅くなります。 詳細については、「Android エミュレーター (Hyper-V と AEHD) でハードウェア アクセラレーションを有効にする方法」を参照してください。

17. Android エミュレーターで実行中のアプリで、[ここをクリック] ボタンを数回押し、ボタンのクリック数が増加していることを確認します。

    

トラブルシューティング

アプリのコンパイルに失敗した場合は、「Troubleshooting known issues」をご覧ください。問題の解決策が見つかる可能性があります。 問題が Android エミュレーターに関連する場合は、「Android Emulator のトラブルシューティング」をご覧ください。

6. Visual Studio のツール バーで、[デバッグ ターゲット] ドロップダウンを使用して [フレームワーク] を選択し、次に net8.0-windows エントリを選択します。

   

7. Visual Studio ツール バーで、[Windows マシン] ボタンを押してアプリをビルドして実行します。

   

   開発者モードを有効にしていない場合は、Visual Studio で有効にするように求められます。 [Windows の開発者モードを有効にする] ダイアログで、[開発者向け設定] をクリックして設定アプリを開きます。

   

   設定アプリで [開発者モード] をオンにして、免責事項に同意します。

   

   設定アプリを閉じ、[Windows の開発者モードを有効にする] ダイアログを閉じます。

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

   

トラブルシューティング

アプリのコンパイルに失敗した場合は、「Troubleshooting known issues」をご覧ください。問題の解決策が見つかる可能性があります。

6. Visual Studio で、IDE を Mac ビルド ホストとペアリングします。 詳細については、「iOS 開発のために Mac とペアリングする」をご覧ください。

7. Visual Studio のツールバーで、[デバッグ ターゲット] ドロップダウンを使用して [iOS シミュレーター] を選択し、次に特定の iOS シミュレーターを選択します。

   

8. Visual Studio ツールバーで、選択した iOS シミュレーターの [開始] ボタンを押して、アプリをビルドして実行します。

   

   Visual Studio はアプリをビルドし、Windows 用のリモート iOS シミュレーターを起動し、リモート シミュレーターにアプリをデプロイします。 Windows 用のリモート iOS シミュレーターの詳細については、「Remote iOS Simulator for Windows」をご覧ください。

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

   

トラブルシューティング

アプリのコンパイルに失敗した場合は、「Troubleshooting known issues」をご覧ください。問題の解決策が見つかる可能性があります。

Mac Catalyst を対象とする .NET MAUI アプリは、Visual Studio 2022 for Mac でのみ起動とデバッグができます。

Visual Studio Code

前提条件

• .NET MAUI 拡張機能がインストールされた Visual Studio Code。 詳細については、インストール を参照してください。

アプリを作成する

.NET MAUI アプリを作成するには、次の手順を実行します。

1. Visual Studio Code を起動します。 Explorer で、Explorer で [.NET プロジェクトの作成] をクリックします。 または、Ctrl/CMD+Shift+P .NET を選択します:新しいプロジェクト...] を選択します。
2. [.NET MAUI アプリ] または [.NET MAUI Blazor アプリ] を選択します。
3. 空のフォルダーを選択します。 エクスプローラーが再び開いた場合、フォルダーは空ではありません。
4. プロジェクトに名前を付けます。
5. プロジェクトがソリューション エクスプローラーに正常に読み込まれたことを確認し、C# または XAML ファイルを開きます。

Note

Visual Studio Code の既存の .NET MAUI プロジェクトは、[ファイル] > [開く...] [メニュー] から開くこともできます。

これで、Visual Studio Code の C# 開発キットのソリューション エクスプローラーにアプリが表示されます。 .NET MAUI 拡張機能は C# 開発キットに依存するため、.NET MAUI 拡張機能と共にすべての機能を使用できます。

ターゲット デバイスを選択する

ターゲット デバイスを選択するには、Visual Studio Code の右下隅にある中かっこ記号 { } をクリックします。 このシンボルを使用して、スタートアップ プロジェクトを変更し、デバッグ ターゲットを開発マシンで有効なものに変更し、いずれかの設定を Visual Studio Code ステータス バーにピン留めすることができます:

CTRL/CMD+SHIFT+ P キーを使用して ".NET MAUI" を検索して、コマンド パレットでスタートアップ プロジェクトとデバッグ ターゲットを設定することもできます。

追加の手順を行わずに、ローカル開発マシン (Windows デスクトップまたは Xcode を使用した macOS) にデプロイできます。

Android をターゲットにする

Android エミュレーターを使用する場合は、次の手順に従ってエミュレーターをインストールして作成します:

1. ターミナルで <YOUR_ANDROID_SDK_DIRECTORY>/cmdline-tools/11.0/bin/ に移動します。

2. sdkmanager を使用してエミュレーターをインストールします。

   Windows のターミナルで次のコマンドを実行します。

   sdkmanager --install emulator
   sdkmanager --install "system-images;android-33;google_apis;x86_64"
   

   macOS のターミナルで次のコマンドを実行します。

   ./sdkmanager --install emulator
   ./sdkmanager --install "system-images;android-33;google_apis;x86_64"
   

   Note

   sdkmanager 個のコマンドライン引数の周りの引用符が重要です。

3. その後、Android の avdmanager を使用してコマンド ラインで新しいエミュレーターを作成できます。

   Windows のターミナルで次のコマンドを実行します。

   avdmanager create avd -n MyAndroidVirtualDevice-API33 -k "system-images;android-33;google_apis;x86_64"
   

   macOS のターミナルで次のコマンドを実行します。

   ./avdmanager create avd -n MyAndroidVirtualDevice-API33 -k "system-images;android-33;google_apis;x86_64"
   

   Note

   avdmanager 個のコマンドライン引数の周りの引用符が重要です。

物理的な Android デバイスでデバッグすることもできます。

iOS をターゲットにする

iOS シミュレーターは Xcode に組み込まれています。 シミュレーターをダウンロードするには、Xcode の初回起動時にシミュレーターをインストールするオプションが選択されていることを確認するか、[Xcode]>[設定]>[プラットフォーム] に移動して、インストールするシミュレーター ランタイムを選択します。

iOS デバイスでデバッグするには、デバッグを試みる前に次の手順に従います:

1. [Xcode] > [設定] > [アカウント] で、Apple ID を指定します。
2. Apple Developer Program に属している場合は、デバイスをチームに登録します。
3. 「デバイスでの開発者モードの有効化」の説明に従って、デバイスで開発者モードを有効にします。 アプリを初めて実行するときに、デバイスにポップアップが表示される場合があります。[許可] を選択してください。

アプリのデバッグ

アプリをデバッグするには、Visual Studio Code の [実行とデバッグ] メニューに移動し、[実行とデバッグ] ボタンを選択します。 または、F5 キーを使用してデバッグ セッションを開始することもできます。 Visual Studio Code でデバッガーの選択を求められた場合は、必ず C# を選択してください。

Note

拡張機能のプレビュー バージョンでは、デバッガーは .NET MAUI として一覧表示されていました。 安定版リリースでは、この構成は C# に置き換えられました。

デバッガーは、中かっこ { } メニューで設定したデバッグ ターゲットとスタートアップ プロジェクトを自動的に選択します。 何も選択していない場合は、デバッグ ターゲットを選択するように求められます。

アプリのデバッグが開始されたら、組み込みの Visual Studio Code デバッグ ツールを使用して、ブレークポイントの設定、コード全体のステップ実行とその他の操作を行うことができます。

詳細情報

拡張機能に関する問題が発生した場合は、「トラブルシューティングの手順」に従うか、「既知の問題」を確認するか、「フィードバック」を提供できます。

次のステップ

このチュートリアルでは、初めての .NET Multi-platform App UI (.NET MAUI) アプリを作成して実行する方法について説明しました。

.NET MAUI を使用してアプリを構築する際の基礎については、「.NET MAUI アプリを作成する」をご覧ください。 または、完全な .NET MAUI トレーニング コースについては、「.NET MAUI を使用してモバイルおよびデスクトップ アプリを構築する」をご覧ください。