インストールと最初のプロジェクト
この連載では、主にWindowsOSでのインスト－ル、開発方法を解説します。なお、あくまでも現時点での情報です。正式リリース時には、変更される点があることはご了承ください。
Visual Studio 2022
まずは、Visual Studio 2022 version 17.2 Preview 4をインストールします。ダウンロードするか、Previewリリースがインストール済みならVisual Studioインストーラーで最新版に更新します。なお、インストール途中のワークロードの選択では、「.NETによるモバイル開発」も選択しておきます。
Android開発環境
Androidアプリ開発に必要な、Android SDKやAndroid エミュレーターについては、別途インストールする必要はありません。Visual Studio上から必要に応じてインストールすることができます。またすでにAndroid SDKなどがインストールされている状態であれば、その情報をひきついで利用することができます。
最初のプロジェクト作成
それでは、プロジェクトを作成してみましょう。Visual Studioで新しいプロジェクトの作成を選び、プロジェクトテンプレートに.NET MAUI アプリを選択します。
プロジェクト名や場所などは適宜変更してください。
プロジェクトのフォルダー構成
新規作成されたプロジェクトのファイル／フォルダー構成は、次のようになっています。
\Propties \launchSettings.json ----- 起動のためのプロファイル \Platforms ----- 各環境固有の処理をまとめたフォルダー \Android ----- Android用 \MainActivity.cs ----- Activityクラス \MainApplication.cs ----- エントリポイント \iOS ----- iOS用 \MacCatalyst ----- macOS用 \Windows ----- Windows用 \App.xaml \App.xaml.cs ----- エントリポイント \Resources ----- アプリで使用する画像やフォントなどのリソース \Style.xaml ----- アプリ内で使用する文字色や背景色の定義 App.xaml ----- Style定義の指定 App.xaml.cs ----- MainPageプロパティの設定 AppShell.xaml ----- Shellページの定義 MainPage.xaml ----- メイン画面となるページクラスの定義 MainPage.xaml.cs ----- メイン画面のイベント処理など MauiProgram.cs ----- アプリのエントリポイント
マルチプラットフォームに対応したアプリながら、1つのプロジェクトで各環境に対応できるようになっているため、プロジェクトの構造としてはシンプルな形になっています。Platformsフォルダー以下に各環境固有の処理がまとめられ、それ以外のフォルダー／ファイルは、共通で使用するものです。
Platformsフォルダー以下には、さらに各環境の名前のフォルダーがあります。主にアプリ起動時の処理や各環境に合わせたアプリの設定を記述します。アプリをビルドする際は、環境に応じてPlatforms以下のフォルダー1つだけが参照されます。
アプリのクラス構成と起動処理
生成されたアプリでは、Microsoft.Maui.Controls.Applicationクラスを継承したAppクラスが定義されています。Appクラスがアプリ全体を定義するものとなります。.NET MAUIでは、.Net汎用ホストというクラスを用いて、このAppクラスをインスタンス化するようになっています。汎用ホストとは、ログの記録などの汎用的な処理やアプリの設定を管理するクラスです。
MauiProgram.csから、フォントの設定を除くと、次のようなコードとなります。
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder.UseMauiApp<App>();
return builder.Build();
}
}
CreateMauiApp()メソッドが実行されることで、Appクラスがインスタンス化されます。では、このCreateMauiApp()メソッドがどこから実行されるのかですが、それはPlatforms以下にある各環境のアプリ起動処理から呼び出されます。Windowsであれば、Platforms\WindowsフォルダにあるApp.xaml.csのCreateMauiApp()メソッドが、MauiProgramクラスのCreateMauiApp()メソッドを呼び出します。
public partial class App : MauiWinUIApplication
{
public App()
{
this.InitializeComponent();
}
protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
}
なお、ここで定義されているAppクラスはアプリ自体を示すAppクラスではありません。Windows環境固有で使用されるクラスです。
Appクラス
マルチプラットフォームに対応するため、複雑な起動処理になっていますが、通常のアプリを作成するのであればあまり意識する必要はないでしょう。
次に、アプリ全体を示すAppクラスを見てみましょう。こちらは、各環境で共通のクラスとなります。Appクラスは、XAMLファイル（App.xaml）で定義されています。WPF（Windows Presentation Foundation）やXamarinを使ったプロジェクトに触れたことがあれば、XAMLはおなじみでしょう。
.NET MAUIでも、画面設計をXAMLで記述して、イベント処理やビジネスロジックなどはC#で記述します。XAMLでは、HTMLのような静的な要素の配置だけでなく、UIコントロールの制御といった動的な処理も記述することができます。C#コードの部分は、～.xaml.csというファイルとなります。App.xamlであればApp.xaml.csです。
なお、XAMLは、画面設計だけに用いられるものではありません。XAMLは、（CLR）オブジェクトを生成するための言語です。App.xamlファイルも、画面設計のファイルではなく、アプリで利用するStyle定義ファイルの指定と、ApplicationクラスのメンバーであるMainPageプロパティの設定になっています。MainPageプロパティは、その名前のとおりアプリのベースとなる画面（Page）クラスのインスタンスを指定するものです。
MainPageクラス
自動生成されたアプリでは、MainPageに（Shellページクラス継承した）AppShellクラスのインスタンスを指定しています。さらにAppShellクラスの定義で、アプリのメイン画面を定義したMainPageクラスを設定しています。MainPageクラスは、MainPage.xaml、MainPage.xaml.csで定義されています。
XAMLでは、XMLの記法の要領で、<UI要素>というタグで指定し、その属性でUI要素のプロパティを指定します。例えば、MainPage.xamlではLabelコントロールが定義されています。
<Label
Text="Current count: 0"
FontSize="18"
～略～
/>
Textプロパティでは表示するテキスト、FontSizeプロパティではフォントのサイズの指定になります。
MainPageの構造
MainPage.xamlから各コントロールの属性を省略すると、次のような構造になっています。
<ContentPage>
<ScrollView>
<VerticalStackLayout>
<Label />
<Button />
<Image />
</VerticalStackLayout>
</ScrollView>
</ContentPage>
.NET MAUIでのアプリは、1つ以上のページクラスで構成されます。またページには通常、1つ以上のレイアウトコントロールが含まれます。ContentPageコントールのなかにScrollViewコントールがあり、そのなかでVerticalStackLayoutコントールを定義して、Labelコントロ－ルとImageコントロールを配置しています。
ContentPageコントールは、1つのビュー（またはレイアウト）を表示する、最も一般的なページコントロールです。レイアウトは、ユーザーインターフェースの構造（位置、サイズ）を定義するものです。レイアウトには通常、複数の子コントロールが含まれています。
Labelコントロ－ルは、文字の表示、Buttonコントロールは、ボタン表示、Imageコントロ－ルは、画像を表示するUIコントロールです。MainPage.xaml.csには、イベント処理が記述されています。このファイルについては、後述することにします。
Windowsアプリ
まず、Windowsデスクトップアプリとして動作するか、試してみましょう。実行環境をWindows Machineに変更してから、緑の▶をクリックするか、メインメニューのデバッグからデバッグの開始を選択します。
すると、次のようなアプリが起動します。アプリの背景色は、Windowsのカラーモード設定に応じて、黒または白になります。
アプリのClick meと書かれたボタンをクリックすると、ボタンの上に表示された数値が1つずつ増加します。またその数値は、アプリだけでなく、Visual Studio内に表示されたプレビューもリアルタイムに同期して変更されます。
また、.NET MAUI アプリでの開発でも、ホットリロード機能が利用できます。ホットリロードとは、アプリケーションを実行したままでコードの変更がリアルタイムに反映される仕組みです。試しに、MainPage.xamlに定義されたLabelプロパティの文字列を変更してみましょう「World！」を「MAUI」に書き換えると、すぐにアプリとプレビュー内の文字が変更されるはずです。
Androidアプリ
今度は、Androidアプリとして実行してみましょう。最初に、Android SDKを確認します。Visual Studioのツールメニューから［Android］ー［Android SDK Manager］を選択します。Android SDK Managerでは、Android開発に必要なSDK一式のインストール、更新が可能です。SDKがまだインストールされていない環境では、Visual Studioのインストーラーで自動的にインストールされているはずです。更新情報がある場合は［変更の適用］ボタンを押すと、ファイルがダウンロードされて更新されます。
次に、ツールメニューの［Android］ー［Android Device Manager］を選択します。ここでは、Windows上で動作するAndroidエミュレーターを作成します。Androidのアプリ開発では、Androidスマートフォンなどの実機をPCに接続して開発することも可能です。最終的には、実機での動作確認が必要となってきますが、開発の段階では実機ではなく、一般にAndroidエミュレーターを利用します。
Androidデバイスには、Androidのバージョンや画面サイズ、解像度などさまざまなデバイスがあります。Androidエミュレーターでは、Androidデバイスを仮想的に作成することができるため、いろいろなデバイスでの動作を確認することができます。
今回は、Androidのバージョンが12で、Google Pixel 4aというスマートフォンのエミュレーターを作成しています。
Newボタンで新規作成、Editで設定の変更が可能です。Editを選択した場合は、次のような画面が表示されます。CPUの設定やセンサーのエミュレート有無など、主にハードウェアに関する設定が可能です。
このあたりの設定は、Androidアプリ開発経験者であれば、おなじみのものでしょう。
Androidエミュレーターでの実行
今度は、Visual Studioの実行環境をAndroidエミュレーターにして、デバッグを開始します。
しばらくすると、Androidエミュレーターが起動してアプリが実行されます。
もちろんAndoridエミュレーターでも、ホットリロード機能が使えます。モバイル（Andorid）開発では、エミュレーターの起動やアプリの実行にやや時間がかかるので、ホットリロードは特に便利な機能と言えるでしょう（なお、RC1バージョンのテンプレトートアプリの設定では、文字が切れる場合があります。その場合は、MainPage.xamlにあるLabelコントロールのFontSizeプロパティを小さい値に変更します）。
最後に
今回は、マルチプラットフォームに対応したUIフレームワークである、.NET MAUIのインストールと、自動生成されるテンプレートプロジェクトを解説しました。次回は、このテンプレートのプロジェクトに新規画面を追加してアプリを作成してみることにします。
