.NET MAUI Blazorを使って、AI画像生成アプリのプロジェクトを作成する

マルチターゲットアプリ開発の新しいアプローチ～.NET 9 新テンプレートの基本～ 第2回

　本連載では、.NET 9で登場した新しいソリューションテンプレートである「.NET MAUI Blazor HybridアプリとWebアプリ」について解説します。前回は、クロスプラットフォーム開発の基本と、.NET 9で新しく追加された「.NET MAUI Blazor HybridアプリとWebアプリ」テンプレートについて解説しました。第2回となる今回は、このテンプレートを使って実際にプロジェクトを作成し、プロジェクト内に共有UIコンポーネントを実装して、各プロジェクトでの表示を確認します。

新規プロジェクトの作成

　本連載では、新しいテンプレートをベースに、プロンプト（テキスト）を入力して画像を生成するAI画像生成アプリを開発します。今回と次回は、Webブラウザー上で動作するWebアプリと、Windowsで動作するネイティブアプリの両方で、共通のUIとロジックが機能することを確認します。

　今回は、以下のアプリを作成します。

ブラウザで実行されたWebの画面

　まずは、Visual Studioを使って新しいプロジェクトを作成してみましょう。

　VisualStudio 2022を起動し、「新しいプロジェクトの作成」を選択します。検索ボックスにmauiと入力すると、利用可能なMAUIプロジェクトテンプレートが表示されます。その中から「.NET MAUI Blazor HybridアプリとWebアプリ」を選択します。

　プロジェクト名をImageGeneratorとし、作成ボタンをクリックします。続いて表示される追加情報の画面で、「対話型レンダリングモード」は「サーバー」を選択します。

　これはUIの処理をどこで行うかを設定する項目です。「サーバー」はサーバー側で処理するため初回表示が速く、「WebAssembly」はブラウザ側で処理するためオフラインでも動作します。「自動」は両者を組み合わせたモードです。

　今回はシンプルな「サーバー」モードを使用します。また、「サンプルページを含める」と「最上位レベルのステートメントを使用しない」にチェックを入れておきます。

新規プロジェクトの追加情報

　生成が完了すると、次の三つのプロジェクトがソリューションエクスプローラーに表示されます。

（1）ImageGenerator（.NET MAUIプロジェクト）

• Windows、Android、iOS、macOSなどで動作するネイティブアプリ
• MainPage.xamlには、BlazorWebViewコントロールが含まれる
• プラットフォーム固有のコードは、Platformsフォルダに格納
• MAUIに関する設定は、MauiProgram.csで管理

（2）ImageGenerator.Shared（共通コードを含むRazorクラスライブラリ）

• MAUIとWebの両方で共有するコードを格納
• Layout、PagesフォルダにRazorコンポーネントを配置
• wwwrootフォルダに、CSSなどの静的ファイルを格納
• このプロジェクトを介して、UIとロジックを共有化

（3）ImageGenerator.Web（Blazor Webアプリプロジェクト）

• Webブラウザで動作するアプリケーション
• Program.csでWebアプリの設定を行い、App.razorがエントリーポイント
• Sharedプロジェクトのコンポーネントを参照して表示

　ImageGeneratorとImageGenerator.Webの両方が、ImageGenerator.Sharedを参照しています。これにより、Sharedプロジェクト内のコンポーネントやサービスを両方のアプリで使用できます。

3つの初期プロジェクト