Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library.pdf

.NET 6 Radzen Blazor コンポーネントライブラリを使ってみよう 鈴⽊ 章太郎 Elastic テクニカルプロダクトマーケティングマネージャー/エバンジェリスト デジタル庁 省庁業務グループ ソリューションアーキテクト

Shotaro Suzuki Twitter : @shosuz Elastic Technical Product Marketing Manager/Evangelist デジタル庁 省庁業務グループ ソリューションアーキテクト 元 Microsoft Technical Evangelist

l l アジェンダ l l l l Blazor WebAssembly プロジェクト作成 Radzen Component インストールと設定 DataGrid Line Chart Image まとめ

Blazor WebAssembly プロジェクト作成

Web Assembly（WASM） とは • Web ブラウザ上でバイナリコードを直接実⾏できる • 2019 年 12 ⽉ W3C 勧告、正式なウェブ標準に認定 • 様々な⾔語のバイナリコードを主要なブラウザのサンドボックス内で動作可能 • Web Assembly バイナリコードへのコンパイラなどのツールセットが必要 C++ WASM コンパイラ Edge C++ ソースコード Rust ソースコード Chrome Rust WASM コンパイラ C WASM コンパイラ SQLite ソースコード（C） Safari Web Assembly バイナリコード （W3C 標準技術） Firefox

Modern Web UI with .NET & Blazor HTML、CSS、.NET、C#... JavaScript の代わりに Open Web 標準でアプリ開発 Server WebAssembly どこにでもホストできる Hybrid

Blazor Server と Blazor WebAssembly の 開発モデルの違い Blazor WebAssembly Blazor Server Blazor Blazor DOM SignalR .NET Razor Components DOM .NET Razor Components WebAssembly Blazor Server • 開発モデルは C/S 型に近い • DOM（ブラウザ UI）と Blazor ランタイム（仮想 DOM） がやりとりし UI 描画（差分更新） • 画⾯の⼊出⼒部分のみをリモートデスクトップのようにブラウザ 側に持ってきているとみなせる • SignalR（Web ソケット通信） • DB に直接アクセス可能 • Web アプリケーションを Client - Server 型に近いモデルで 開発可能 • Web サーバとの常時接続が必要 • サーバ側でリソース効率の⾼いアプリの作り⽅が必要 • Hot Reload Blazor WebAssembly • サンドボックス制限 • DB アクセス不可 → Native File Reference による ローカル DBアクセス • Web API を介して DB アクセス • 静的な Web サーバにホスト • アプリ全体がダウンロード（⼤きくなりがち） • DOM（ブラウザ UI）と Blazor ランタイム（仮想 DOM）がやりとりしUI 描画（差分更新）、ランタイム が Blazor アプリ（UI ロジック）とやりとりする • Hot Reload (デバッグなしで実⾏）

Blazor WebAssembly プロジェクト⽣成 チェックを⼊れる︕

Radzen Component インストールと設定

Radzen Blazor Component Library https://blazor.radzen.com/

• https://blazor.radzen.com/

Radzen Blazor Component Library インストール - 1 https://blazor.radzen.com/get-started いずれかでインストール実施 • 下記コマンドラインからパッケージをインストール dotnet add package Radzen.Blazor • Visual Studio 2022 の Nuget Package Manager からプロジェクトを追加 • .csproj ファイルを⼿動で編集し、プロジェクト 参照を追加

• https://blazor.radzen.com/get-started

Radzen Blazor Component Library インストール - 2 https://blazor.radzen.com/get-started • 名前空間をインポート • Radzen 付属テーマを使⽤ Blazor アプリケーション の _Imports.razor ファイルを開き、これらの2⾏を追加 Bootstrap の重要な部分（主にレイアウト）を含むテーマ を使⽤するには、-base 接尾辞 のないファイルを含める @using Radzen @using Radzen.Blazor <link rel="stylesheet" href="_content/Radzen.Blazor/css/default.css"> • テーマを含める • Radzen.Blazor.js をインクルード Blazor Pages/_Layout.cshtml (Server) or wwwroot/index.html（WebAssembly） を開き、下記を追加してテーマ CSS ファイルを含める Blazor Pages /_Layout (Server) or wwwroot/index.html（WebAssembly） を開き、下記を含める <link rel="stylesheet" href="_content/Radzen.Blazor/css/defaultbase.css"> <script src="_content/Radzen.Blazor/Radzen.Blazor.js"> </script> オプションで、ブートストラップを含める

• https://blazor.radzen.com/get-started

Radzen Blazor Component Library インストール – 3
- Dialog、Notification、Context Menu、および Tooltip コンポーネントを使⽤ https://blazor.radzen.com/get-started
•

MainLayout.razor ファイルを
開き、以下を追加

<RadzenDialog/>
<RadzenNotification/>
<RadzenContextMenu/>
<RadzenTooltip/>

using Radzen;
...
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddTransient(sp => new HttpClient
{ BaseAddress = new
Uri(builder.HostEnvironment.BaseAddress) });
...
builder.Services.AddScoped<DialogService>();
builder.Services.AddScoped<NotificationService>();
builder.Services.AddScoped<TooltipService>();
builder.Services.AddScoped<ContextMenuService>();
...
await builder.Build().RunAsync();
}

• https://blazor.radzen.com/get-started

DataGrid

DataGrid https://blazor.radzen.com/datagrid

• https://blazor.radzen.com/datagrid

DataGrid https://blazor.radzen.com/datagrid <RadzenDataGrid Data="@forecasts" TItem="WeatherForecast" PageSize="10" AllowPaging="true" AllowFiltering="true" AllowColumnResize="true" AllowSorting="true"> <Columns> <RadzenDataGridColumn TItem="WeatherForecast" Property="Date" Title="Date"> <Template Context="forecast">@forecast.Date.ToShortDateString()</Template> </RadzenDataGridColumn> <RadzenDataGridColumn TItem="WeatherForecast" Property="TemperatureC" Title="Temp. (C)"/> <RadzenDataGridColumn TItem="WeatherForecast" Property="TemperatureF" Title="Temp. (F)"/> <RadzenDataGridColumn TItem="WeatherForecast" Property="Summary" Title="Summary"/> </Columns> </RadzenDataGrid>

• https://blazor.radzen.com/datagrid

Line Chart

Line Chart https://blazor.radzen.com/line-chart

• https://blazor.radzen.com/line-chart

Line Chart https://blazor.radzen.com/line-chart <RadzenChart> <RadzenLineSeries Smooth="true" Data="@forecasts" CategoryProperty="Date" Title="Temp. (C)" LineType="LineType.Solid" ValueProperty="TemperatureC"> <RadzenMarkers MarkerType="MarkerType.Circle" /> </RadzenLineSeries> <RadzenLineSeries Smooth="true" Data="@forecasts" CategoryProperty="Date" Title="Temp. (F)" LineType="LineType.Solid" ValueProperty="TemperatureF"> <RadzenMarkers MarkerType="MarkerType.Circle" /> </RadzenLineSeries> <RadzenValueAxis> <RadzenGridLines Visible="true" /> <RadzenAxisTitle Text="Temperature" /> </RadzenValueAxis> </RadzenChart>

• https://blazor.radzen.com/line-chart

Image

Image https://blazor.radzen.com/image

• https://blazor.radzen.com/image

Image
https://blazor.radzen.com/image

@page "/image"
<div class="row">
<div class="col-xl-6">
<h3 class="mt-3">Image from application assets</h3>
<RadzenImage Path="images/community.svg" Style="width: 60%; margin: 3rem;" />
</div>
<div class="col-xl-6">
<h3 class="mt-3">Image from url</h3>
<RadzenImage Path="https://www.radzen.com/assets/hero40b90af93c7bda2d44608c74e2b8eeb6785e273e02340ec44583d097b5dfb896.png"
Style="width: 100%;">
</RadzenImage>
</div>
</div>
</RadzenExample>

• https://blazor.radzen.com/image

まとめ

まとめ l l l l l Blazor WebAssembly プロジェクト作成 Radzen Component インストールと設定 DataGrid Line Chart Image

リソース • Go to https://blazor.net • Install the .NET SDK Visual Studio • Visual Studio for Mac Radzen Component Library https://blazor.radzen.com/ Visual Studio Code + C# extension

• https://blazor.net/
• https://blazor.radzen.com/

Elastic Maps の機能紹介 https://www.elastic.co/jp/virtual-events/intro-to-elastic-maps Elasticsearch の Elastic Maps を使えば位置データの地理空間分析を⼤規模、かつリアルタイムに実現できます。レイヤー、 ポイント、シェイプ、ダイナミッククライアントサイドスタイリング等を活⽤してデータを分析する事で、次のアクションにつなげられます。 最新の Elastic Maps の機能をデモを交えてご紹介します。

• https://www.elastic.co/jp/virtual-events/intro-to-elastic-maps

オブザーバビリティの最新トレンド: 未来への展望 (6/29) https://www.elastic.co/jp/virtual-events/observability-trends-2022 オブザーバビリティの最新トレンドについて、そしてこの領域に今後期待されることをお話しいたします。 多くの企業がハイブリッドクラウド環境に移⾏するにつれ、クラウドネイティブテクノロジーとその複雑性をオブザーバビリティで管理 することがますます重要になってきています。eBPF から機械学習、CI/CD パイプラインの可視化まで、我々が市場から⾒える こと、 顧客がそれにどのようにアプローチしているか、そして近い将来の可能性・展望についてお話しします。

• https://www.elastic.co/jp/virtual-events/observability-trends-2022

Elastic Meetup #48 (6/29 19:30-21:00) https://www.meetup.com/ja-JP/tokyo-elastic-fantastics/events/286154124/ ・株式会社 HAJ エンパワーメント 松浦康介さん 『マイクロサービス、外部と内部。GraphQL、つなぐ州 全部。Elasticsearch、隔てなくサーチ。』 ・Elastic Furukubo Takeo さん 『（仮）Lookup Runtime Field 〜Elasticsearch 8.2 新機能〜』 ・Elastic 鈴⽊章太郎 さん 『Building a search experience with Elastic – App Search/Elastic Cloud, Docker, Python, React Search UI を使った最新サンプルアプリのご紹介』

• https://www.meetup.com/ja-JP/tokyo-elastic-fantastics/events/286154124/

ElasticON Solution Seminar (7/21 10:00~12:00) https://www.elastic.co/elasticon/event/solution-seminar-japan-jp Elastic 社が主催する ElasticON は、世界の主要都市で開催されているユーザーさま向けのカンファレンス・セミナー形式の イベントです。今回のセミナーでは、Elastic 8.2 シリーズの最新情報と、ライブデモ、そして我々のお客さまがどのようにデータの 利活⽤をしているかの導⼊/活⽤事例をご紹介いたします。是⾮この無料バーチャルイベントにご参加ください。

• https://www.elastic.co/elasticon/event/solution-seminar-japan-jp

Elastic x mabl 共同セミナー (7/29 15:00~16:00) https://www.elastic.co/jp/virtual-events/elastic-mabl-webinar デジタルカスタマーエクスペリエンスの向上 〜 Elastic と mabl で実現する、ユーザー視点の アプリケーション Observability 〜

• https://www.elastic.co/jp/virtual-events/elastic-mabl-webinar

Thank you for your attention!