作業の開始: .NET MAUI を使用して Blazor Hybrid アプリを構築する
このトピックでは、Visual Studio 2022 を使用して Ignite UI for Blazor で .NET MAUI Blazor アプリケーションを作成するための手順を説明します。
Blazor Hybrid とは
Blazor Hybrid は、Blazor Server と Blazor Web Assembly の間のようなものです。デスクトップとモバイルのネイティブ クライアント フレームワークの機能を統合することで、開発、コード、およびプロセスが簡素化されます。このテクノロジを使用すると、ネイティブ クライアント アプリケーションを作成するときに C# および .NET のスキルを適用できます。
ただし、アプリで使用できるようにするには、.NET MAUI が必要です。
.NET MAUI とは
.NET MAUI (.NET Multi-platform App UI) は、単一の共有コードベースからネイティブ デスクトップおよびモバイル アプリを構築するための、オープンソースのクロス プラットフォーム フレームワークです。これにより、C# と XAML を使用して、Android、iOS、macOS、Windows など、さまざまなデバイスやオペレーティング システムで実行される Blazor アプリケーションをより簡単に開発できます。
前提条件
- .NET SDK 7 以降
- Visual Studio 2022 17.4 以降および次のワークロード:
- .NET によるモバイル開発
- ASP.NET と Web 開発
.NET MAUI と Ignite UI for Blazor を使用して Blazor Hybrid アプリを作成して実行する
以下の手順では、新しい .NET MAUI Blazor プロジェクトを作成する方法について説明します。Ignite UI for Blazor を既存のアプリケーションに追加する場合は、Ignite UI for Blazor パッケージをインストール セクションに移動します。
Visual Studio 2022 を起動し、開始ページで [新しいプロジェクトの作成] をクリックし、.NET MAUI Blazor アプリ テンプレートを選択して、[次へ] をクリックします。
プロジェクト名と場所を入力し、[作成] をクリックします。
Ignite UI for Blazor のインストール
Ignite UI for Blazor は、NuGet パッケージで提供されます。Blazor アプリケーションで Ignite UI for Blazor コンポーネントを使用するには、最初に適切な NuGet パッケージをインストールする必要があります。
Visual Studio で、[ツール] → [NuGet パッケージ マネージャー] → [ソリューションの NuGet パッケージの管理] を選択して、NuGet パッケージ マネージャーを開きます。IgniteUI.Blazor NuGet パッケージを検索してインストールします。
NuGet を使用した Ignite UI for Blazor のインストールの詳細については、Ignite UI for Blazor のインストール トピックを参照してください。
Ignite UI for Blazor の登録
1 - Program.cs ファイルを開き、builder.Services.AddIgniteUIBlazor() 関数を呼び出して Ignite UI for Blazor サービスを登録します。
2 - IgniteUI.Blazor.Controls 名前空間を _Imports.razor ファイルに追加します。
@using IgniteUI.Blazor.Controls
3 - wwwroot/index.html ファイルの <head> 要素にスタイル シートを追加します。
<head>
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
</head>
4 - スクリプト参照を wwwroot/index.html ファイルに追加します。
<script src="_content/IgniteUI.Blazor/app.bundle.js"></script>
<script src="_framework/blazor.webview.js" autostart="false"></script>
Ignite UI for Blazor コンポーネントの追加
Razor ページに Ignite UI for Blazor コンポーネントの追加:
<IgbCard style="width:350px">
<IgbCardMedia>
<img src="https://images.unsplash.com/photo-1541516160071-4bb0c5af65ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=350&q=80" />
</IgbCardMedia>
<IgbCardHeader>
<h4>Jane Doe</h4>
<h6>Professional Photographer</h6>
</IgbCardHeader>
<IgbCardContent>Hi! I'm Jane, photographer and filmmaker.
Photography is a way of feeling, of touching,
of loving. What you have caught on film is captured forever...
it remembers little things, long after you have
forgotten everything.</IgbCardContent>
<IgbCardActions>
<IgbButton>More Info</IgbButton>
</IgbCardActions>
</IgbCard>
Windows 用の .NET MAUI Blazor アプリをビルドして実行します。
[!Note] .NET MAUI を使用したクロス プラットフォーム アプリケーションの構築の詳細については、Microsoft のドキュメントを参照してください。