Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。最後に参考文献インストールと最初のプロジェクトこの連載では、主にWindowsOSでのインスト-ル、開発方法を解説します。正式リリース時には、変更される点があることはご了承ください。4をインストールします。Studioインストーラーで最新版に更新します。インストール途中のワークロードの選択では、「.NETによるモバイル開発」も選択しておきます。エミュレーターについては、別途インストールする必要はありません。Studio上から必要に応じてインストールすることができます。SDKなどがインストールされている状態であれば、その情報をひきついで利用することができます。最初のプロジェクト作成それでは、プロジェクトを作成してみましょう。新しいプロジェクトの作成プロジェクト名や場所などは適宜変更してください。新規作成されたプロジェクトのファイル/フォルダー構成は、次のようになっています。アプリのエントリポイントマルチプラットフォームに対応したアプリながら、1つのプロジェクトで各環境に対応できるようになっているため、プロジェクトの構造としてはシンプルな形になっています。Platformsフォルダー以下に各環境固有の処理がまとめられ、それ以外のフォルダー/ファイルは、共通で使用するものです。Platformsフォルダー以下には、さらに各環境の名前のフォルダーがあります。アプリ起動時の処理や各環境に合わせたアプリの設定を記述します。アプリをビルドする際は、環境に応じてPlatforms以下のフォルダー1つだけが参照されます。生成されたアプリでは、Microsoft.Maui.Controls.Applicationクラスを継承したAppクラスが定義されています。Appクラスがアプリ全体を定義するものとなります。MAUIでは、.Net汎用ホストというクラスを用いて、このAppクラスをインスタンス化するようになっています。汎用ホストとは、ログの記録などの汎用的な処理やアプリの設定を管理するクラスです。MauiProgram.csから、フォントの設定を除くと、次のようなコードとなります。}}CreateMauiApp()メソッドが実行されることで、Appクラスがインスタンス化されます。このCreateMauiApp()メソッドがどこから実行されるのかですが、それはPlatforms以下にある各環境のアプリ起動処理から呼び出されます。Windowsであれば、Platforms\WindowsフォルダにあるApp.xaml.csのCreateMauiApp()メソッドが、MauiProgramクラスのCreateMauiApp()メソッドを呼び出します。MauiProgram.CreateMauiApp();}なお、ここで定義されているAppクラスはアプリ自体を示すAppクラスではありません。Windows環境固有で使用されるクラスです。Appクラスマルチプラットフォームに対応するため、複雑な起動処理になっていますが、通常のアプリを作成するのであればあまり意識する必要はないでしょう。次に、アプリ全体を示すAppクラスを見てみましょう。こちらは、各環境で共通のクラスとなります。Appクラスは、XAMLファイル(App.xaml)で定義されています。Foundation)やXamarinを使ったプロジェクトに触れたことがあれば、XAMLはおなじみでしょう。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コントロールが定義されています。/>Textプロパティでは表示するテキスト、FontSizeプロパティではフォントのサイズの指定になります。MainPageの構造MainPage.xamlから各コントロールの属性を省略すると、次のような構造になっています。MAUIでのアプリは、1つ以上のページクラスで構成されます。ページには通常、1つ以上のレイアウトコントロールが含まれます。ContentPageコントールのなかにScrollViewコントールがあり、そのなかでVerticalStackLayoutコントールを定義して、Labelコントロ-ルとImageコントロールを配置しています。ContentPageコントールは、1つのビュー(またはレイアウト)を表示する、最も一般的なページコントロールです。レイアウトは、ユーザーインターフェースの構造(位置、サイズ)を定義するものです。レイアウトには通常、複数の子コントロールが含まれています。Labelコントロ-ルは、文字の表示、Buttonコントロールは、ボタン表示、Imageコントロ-ルは、画像を表示するUIコントロールです。MainPage.xaml.csには、イベント処理が記述されています。このファイルについては、後述することにします。Windowsアプリまず、Windowsデスクトップアプリとして動作するか、試してみましょう。Machineに変更してから、緑の▶をクリックするか、メインメニューのデバッグからデバッグの開始を選択します。実行環境の変更すると、次のようなアプリが起動します。アプリの背景色は、Windowsのカラーモード設定に応じて、黒または白になります。meと書かれたボタンをクリックすると、ボタンの上に表示された数値が1つずつ増加します。Studio内に表示されたプレビューもリアルタイムに同期して変更されます。アプリでの開発でも、ホットリロード機能が利用できます。ホットリロードとは、アプリケーションを実行したままでコードの変更がリアルタイムに反映される仕組みです。試しに、MainPage.xamlに定義されたLabelプロパティの文字列を変更してみましょう「World!」を「MAUI」に書き換えると、すぐにアプリとプレビュー内の文字が変更されるはずです。ホットリロードAndroidアプリ今度は、Androidアプリとして実行してみましょう。Manager]を選択します。Managerでは、Android開発に必要なSDK一式のインストール、更新が可能です。Studioのインストーラーで自動的にインストールされているはずです。更新情報がある場合は[変更の適用]ボタンを押すと、ファイルがダウンロードされて更新されます。Manager]を選択します。ここでは、Windows上で動作するAndroidエミュレーターを作成します。Androidのアプリ開発では、Androidスマートフォンなどの実機をPCに接続して開発することも可能です。最終的には、実機での動作確認が必要となってきますが、開発の段階では実機ではなく、一般にAndroidエミュレーターを利用します。Androidデバイスには、Androidのバージョンや画面サイズ、解像度などさまざまなデバイスがあります。Androidエミュレーターでは、Androidデバイスを仮想的に作成することができるため、いろいろなデバイスでの動作を確認することができます。4aというスマートフォンのエミュレーターを作成しています。ManagerNewボタンで新規作成、Editで設定の変更が可能です。Editを選択した場合は、次のような画面が表示されます。CPUの設定やセンサーのエミュレート有無など、主にハードウェアに関する設定が可能です。エミュレーターこのあたりの設定は、Androidアプリ開発経験者であれば、おなじみのものでしょう。Studioの実行環境をAndroidエミュレーターにして、デバッグを開始します。エミュレーターの選択しばらくすると、Androidエミュレーターが起動してアプリが実行されます。エミュレーターで実行もちろんAndoridエミュレーターでも、ホットリロード機能が使えます。モバイル(Andorid)開発では、エミュレーターの起動やアプリの実行にやや時間がかかるので、ホットリロードは特に便利な機能と言えるでしょう(なお、RC1バージョンのテンプレトートアプリの設定では、文字が切れる場合があります。その場合は、MainPage.xamlにあるLabelコントロールのFontSizeプロパティを小さい値に変更します)。MAUIのインストールと、自動生成されるテンプレートプロジェクトを解説しました。次回は、このテンプレートのプロジェクトに新規画面を追加してアプリを作成してみることにします。