新規プロジェクトの作成
本連載では、新しいテンプレートをベースに、プロンプト（テキスト）を入力して画像を生成するAI画像生成アプリを開発します。今回と次回は、Webブラウザー上で動作するWebアプリと、Windowsで動作するネイティブアプリの両方で、共通のUIとロジックが機能することを確認します。
今回は、以下のアプリを作成します。
まずは、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プロジェクト内のコンポーネントやサービスを両方のアプリで使用できます。
