ダウンロードしてインストール
Visual Studio 2022 をダウンロードしてインストールします。
Visual Studio 2022 のダウンロード
インストール中に、.NET マルチプラットフォーム アプリの UI 開発ワークロードを選択する必要があります。上記のリンクを使用すると、次の画像に示されているように、すべての前提条件が正しく事前選択されるはずです。
![.NET ワークロードが選択されたモバイル開発での Visual Studio インストーラー]()
Visual Studio 2022 を既にお使いですか?
Visual Studio 2022 を既にお持ちの場合は、インストールを更新して .NET MAUI サポートを追加できます:
- Windows キーを選択し、Visual Studio インストーラー と入力して、Enter キーを押します。
- プロンプトが表示された場合は、インストーラーが自分自身を更新することを許可します。
- Visual Studio 2022 の更新プログラムが利用可能な場合は、Update ボタンが表示されます。それを選択して、インストールを変更する前に更新します。
- Visual Studio 2022 のインストールを見つけて、[変更] を選択します。
- [.NET マルチプラットフォーム アプリの UI 開発] を選択します。
- [変更] ボタンを選択します。
Visual Studio 2022 for Mac をダウンロードしてインストールします。
Visual Studio 2022 for Mac のダウンロード
インストール中に、次のワークロードが選択されていることを確認します。
- .NET
- .NET MAUI
- Android
- iOS
最後の 2 つのワークロード (Android と iOS) は、.NET MAUI を選択すると自動的に選択されます。
Visual Studio の更新プログラムを確認する
このチュートリアルは、最新バージョンの Visual Studio for Mac 向けに最適化されています。既に Visual Studio 2022 for Mac をお持ちの場合は、更新プログラムを確認してください:
- Visual Studio for Mac を開きます。
- メニューバーで、[Visual Studio] > [更新の確認...] を選択します。
- 利用可能な更新プログラムが表示され、ダウンロードが完了したら、[再起動して更新プログラムをインストールする] を選択します。
Xcode のインストール
.NET MAUI アプリをビルドするには、次の項目も必要です:
Xcode をインストールした後、Xcode を開き、サービス使用条件に同意し、ダイアログが表示された場合は、オプションのコンポーネントをインストールする必要があります。
アプリケーションを実行する
このチュートリアルでは、最初にローカル Windows コンピューターに .NET MAUIアプリケーションを展開する方法について詳しく説明します。その後で、Android デバイスまたはエミュレーターを設定できます。
[Visual Studio] ツール バーには、既定でWindows マシンがデバッグ ターゲットとして表示されます。[Windows マシン] ボタンを押して、アプリを構築して実行します:
![既定でターゲット デプロイとして選択されている Windows マシン]()
開発者モードをまだ有効にしていない場合は、Visual Studio で有効にするように求められます。[Windows の開発者モードを有効にする] ダイアログで、開発者向け設定リンクをクリックして設定アプリを開きます。
![[Windows の開発者モードを有効にする] ダイアログを有効にします。]()
[開発者モード] のトグルをオンにします。
![有効化された Windows 開発者モード]()
[開発者向け機能を使う] ダイアログが表示されます。開発者モードを有効にすることを確認するには、[はい] を選択します。
![[はい] ボタンが強調表示された開発者向け機能ウィンドウを使用する]()
設定アプリを閉じてから、[Windows 用に開発者モードを有効にする] ダイアログを閉じます。アプリの実行を開始する必要があります。
実行中のアプリで、[ここをクリック] ボタンを数回選択し、ボタンのクリック数が増加していることを確認します:
![Windows で実行されている .NET MAUI アプリ。'Hello, World!' メッセージが表示されます。]()
このチュートリアルでは、最初にローカルの Mac コンピューターに .NET MAUIアプリケーションを展開する方法について詳しく説明します。その後で、Android デバイスまたはエミュレーターを設定できます。
Visual Studio ツール バーに、既定で、My Mac がデバッグ ターゲットとして表示されます。アプリを構築して実行するには、再生アイコン (▶) を押します。
![既定でターゲット展開として選択された My Mac]()
実行中のアプリで、[ここをクリック] ボタンを数回選択し、ボタンのクリック数が増加していることを確認します:
![Mac で実行されている .NET MAUI アプリ。'Hello, World!' メッセージが表示されます。]()
おめでとうございます。最初の .NET MAUI アプリを構築して実行しました。アプリをそのまま実行して、チュートリアルを続行します。
コードを編集する
.NET MAUI を使用してアプリケーションを開発している場合、アプリケーションをデバッグするときに XAML ホット リロードを使用できます。これは、アプリケーションの実行中に XAML ユーザー インターフェイス (UI) を変更できることを意味し、UI は自動的に更新されます。
Visual Studio に戻り、アプリを実行したままにしておきます。ソリューション エクスプローラーで、MyFirstMauiApp
プロジェクトの下にある MainPage.xaml
ファイルをダブルクリックします。"ソリューション エクスプローラー" ウィンドウが表示されない場合は、メイン メニューから [ビュー] > [ソリューション エクスプローラー] を選択します (または Ctrl + Alt + L キーを押します)。
![MainPage.xaml ファイルが強調表示された]()
Visual Studio に戻り、アプリを実行したままにしておきます。"ソリューション" ウィンドウで、MyFirstMauiApp
プロジェクトの下にある MainPage.xaml
ファイルをダブルクリックします。"ソリューション" ウィンドウが表示されない場合は、メイン メニューから [ビュー] > [ソリューション] を選択してください。
![MainPage.xaml ファイルが強調表示された]()
現在、最初の Label
の Text
は、次のコードに示されているように Hello, World!
と表示される設定になっています。:
MainPage.xaml
<Label
Text="Hello, World!"
SemanticProperties.HeadingLevel="Level1"
FontSize="32"
HorizontalOptions="Center" />
テキストを更新して、Hello, .NET MAUI!
と表示します。
MainPage.xaml
<Label
Text="Hello, .NET MAUI!"
SemanticProperties.HeadingLevel="Level1"
FontSize="32"
HorizontalOptions="Center" />
変更すると、アプリの UI が自動的に更新されます。
.NET MAUI を使用してアプリケーションを開発している場合は、.NET ホット リロードを使用して C# コードを再読み込みすることもできます。アプリケーションのロジックを変更して、カウントを 1 ずつではなく 10 ずつ増やしてみましょう。
MainPage.xaml.cs
を開きます (このファイルは MainPage.xaml の下に入れ子になっています。右クリックしてメニューから [コードの表示] を選択することもできます)。
![選択範囲をドロップダウンして、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] を選択します。
![選択範囲をドロップダウンして、MainPage.xaml の背後のコードを表示する]()
[ここをクリック] ボタンを選択すると、10 ずつ増加して表示されます。完了しました。実行中のアプリを今すぐ閉じることができます。
Android デバイスを構成する
開発環境に基づいて、1 つ以上のプラットフォームに配置できます。アプリを実行して Windows に展開しました。次に、Android デバイスまたはエミュレーターを設定しましょう。
Android SDK のインストール
デバッグ ターゲットのドロップダウン メニューから、[フレームワーク] で [net7.0-android] を選択します。
![デプロイ ターゲットとして Android を選択する]()
プロジェクトをビルドするには、Android SDK の特定のバージョンが必要です。Android SDK ライセンスに同意していない場合は、[エラー一覧] ウィンドウに次のエラー メッセージが表示されます。
![[エラー一覧] ウィンドウに、Android SDK ライセンスが同意されていないことを示すエラー メッセージが表示されます。]()
メッセージをダブルクリックして、ライセンスへの同意プロセスを開始します。表示された各ライセンスに対して[同意する]をクリックすると、自動インストールが開始されます。
![Android SDK プロンプトが表示され、ユーザーは特定の Android SDK バージョンをインストールしてプロジェクトをビルドするよう求められます。]()
Android Emulator の設定
展開先の Android デバイスがない場合は、次のステップに従って Android エミュレーターを設定できます。既にこれを行っているか、独自の Android デバイスを使用する場合は、このステップをスキップできます。
.NET MAUI アプリケーションを初めてビルドする場合は、デバッグ ターゲットのドロップダウン メニューで Android Emulator が表示されます。クリックして作成プロセスを開始します。ライセンス受け入れダイアログが表示されたら、同意するを選択します。
![Visual Studio 2022 ツールバー メニューには、デバッグ ターゲットとして]()
"新しいデバイス" ウィンドウが表示されます。[作成] ボタンを選択して、既定の設定でエミュレーターを作成します。これにより、エミュレーター イメージがダウンロードされ、Visual Studio で使用するエミュレーターの作成が完了します。このステップには時間がかかる場合があります。
![ダイアログが表示され、既定の設定が反映された新しい Android Emulator を作成します。]()
エミュレーターが作成されると、スタート というボタンが表示されます。それをクリックします。
![エミュレーターが作成され、実行する準備が整ったことを Android Emulator マネージャーが示しています。]()
Windows ハイパーバイザー プラットフォームを有効にするように求めるメッセージが表示されることがあります。ドキュメントにしたがって、高速化を有効にしてパフォーマンスを向上させてください (エミュレーターを起動して実行する必要です)。
![Windows ハイパーバイザー プラットフォームを有効にするように求めるメッセージを表示する]()
Android エミュレーターが起動します。起動が完全に完了するまで待つと、Visual Studio のデバッグ メニューに表示されます。これには時間がかかることがあります。
![新たに作成した Android Emulator をデバッグ ターゲットとして表示する Visual Studio 2022 ツールバー メニュー。]()
Android emulator が作成され、使用できるようになりました。次回 Visual Studio を実行するときに、エミュレーターはデバッグ ターゲット ウィンドウに直接表示され、選択すると開始します。エミュレーターの使用中に問題が発生した場合やパフォーマンスの問題が発生した場合は、完全なセットアップ ドキュメント をお読みください。
開発環境に基づいて、1 つ以上のプラットフォームに配置できます。アプリを実行して Mac に展開しました。次に、Android デバイスまたはエミュレーターを設定しましょう。
.NET MAUI アプリケーションを初めてビルドする場合は、新しい Android Emulator を作成する必要があります。デバッグ メニューに Android Emulator が表示されます。再生アイコン (▶) を押して作成プロセスを開始します。
![デバッグ ターゲットとして 'デバイスの選択' が表示されている Visual Studio for Mac のツール バー メニュー。]()
オプションは、ベース エミュレーターに対して自動的に設定されます。必要に応じて、オプションを変更し [作成] を選択します。
![ダイアログが表示され、既定の設定が反映された新しい Android Emulator を作成します。]()
この時点で、Android Emulator の使用許諾契約書に同意するよう促すメッセージが表示される場合があります。ご覧頂き、、同意 を選択してプロセスを続行します。これでエミュレーター画像がダウンロードされ、Visual Studio で使用するエミュレーターの作成が完了します。
エミュレーターが作成されると、[再生] というボタンが表示されます。それをクリックします。
![エミュレーターが作成され、実行する準備が整ったことを Android Emulator マネージャーが示しています。]()
Android エミュレーターが起動します。 起動が完全に完了するまで待つと、Visual Studio のデバッグメニューに表示されます。 ハードウェア アクセラレーションを使用していない場合、これには時間がかかることがあります。
![新たに作成した Android Emulator をデバッグ ターゲットとして表示する Visual Studio for Mac ツールバー メニュー。]()
Android emulator が作成され、使用できるようになりました。次回 Visual Studio を実行するときに、エミュレーターはデバッグ ターゲット ウィンドウに直接表示され、選択すると開始します。エミュレーターの使用中に問題が発生した場合やパフォーマンスの問題が発生した場合は、完全なセットアップ ドキュメント をお読みください。
Android デバイスの設定
Android デバイスを使用して開発するには、USB デバッグを有効にする必要があります。デバイスで以下の手順に従い、Visual Studio に接続します。Android デバイスをお持ちでない場合は、このセクションはスキップしても構いません。
開発者モードを有効にする
- [設定] 画面に移動します。
- 設定画面の上部にある検索を使用してビルド番号を検索するか、[携帯電話情報] で検索します。
- "開発者になりました!" と表示されるまで、ビルド番号 を 7 回から 10 回タップします。
![Android デバイスの設定画面で、携帯電話に関する画面にビルド番号が表示されています。]()
USB デバッグ状態の確認
- [設定] 画面に移動します。
- 設定画面の上部にある検索を使用して [USB デバッグ] を検索するか、[開発者向け] オプションで検索します。
- USB デバッグ が有効になっていない場合は、有効にします。
![Android デバイスの設定画面の開発者設定についての画面で、USB デバッグ オプションがオンになっています。]()
デバイスを信頼する
- デバイスをコンピューターに接続します。
- USB デバッグを許可するかどうか確認するメッセージが表示されます。
- このコンピューターで常に許可 であることを確認します。
- [許可] をクリックします。
![Android デバイス プロンプトで、コンピューターからデバイス上で USB デバッグできるようにします。]()
デバイスが構成され、配置ターゲットとして Visual Studio に表示されるようになりました。
問題はありませんか? ドキュメントを確認します。
これで、エミュレーターやデバイスが展開用に構成されているはずです。
Android で実行
デバイスまたはエミュレーターがデバッグ ターゲットとして選択されていることを確認します。
![5 Android エミュレーター ピクセル 5 はデバッグ ターゲットとして設定されています。]()
メニューから、[デバッグ] > [デバッグの開始]を選択します (またはF5 キーを押す)。このオプションが無効になっている場合は、エミュレーターまたはデバイスが選択されていることを確認してください。
![5 Android エミュレーター ピクセル 5 はデバッグ ターゲットとして設定されています。]()
メニューから、[デバッグ] > [デバッグの開始] を選択します。このオプションが無効になっている場合は、エミュレーターまたはデバイスが選択されていることを確認してください。
アプリケーションがビルドされ、選択された Android デバイスまたは Android Emulator に展開されて実行されます。
![.NET MAUI アプリを実行している Android Emulator。'Hello, World!' メッセージが表示されます。]()
次の手順
おめでとうございます。初めての .NET MAUI アプリをビルドして実行しました。
学習を続ける
基本を習得したので、Microsoft Learn のセルフガイド学習パスを使用して .NET MAUI アプリをビルドする方法を引き続き学習します。
.NET MAUI ラーニング パス
.NET MAUI for Beginners
James が .NET MAUI アプリのビルド方法を始めから終わりまで説明します。
あなたは下記にもご興味がおありかもしれません...