https://dotnetlab.connpass.com/event/250223/ .NET 6 Radzen Blazor コンポーネントライブラリを使ってみよう Radzen Blazor Component Library は、Blazor WebAssembly と Server 用のフリーかつオープンソースのコンポーネントライブラリです。 今回は、概要、インストール方法、いくつかのコントロールの利用について、ご紹介します。

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

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

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

4. Blazor WebAssembly プロジェクト作成

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

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

7. Blazor Server と Blazor WebAssembly の
開発モデルの違い
Blazor Server Blazor WebAssembly
DOM
Blazor
WebAssembly
.NET
Razor Components
Blazor
.NET
Razor Components
DOM
SignalR
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 (デバッグなしで実⾏）

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

9. Radzen Component インストールと設定

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

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

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

13. Radzen Blazor Component Library インストール – 3
- Dialog、Notification、Context Menu、および Tooltip コンポーネントを使⽤ -
https://blazor.radzen.com/get-started
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();
}
<RadzenDialog/>
<RadzenNotification/>
<RadzenContextMenu/>
<RadzenTooltip/>
• MainLayout.razor ファイルを
開き、以下を追加

14. DataGrid

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

16. 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>

17. Line Chart

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

19. 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>

20. Image

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

22. 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/hero-
40b90af93c7bda2d44608c74e2b8eeb6785e273e02340ec44583d097b5dfb896.png"
Style="width: 100%;">
</RadzenImage>
</div>
</div>
</RadzenExample>

23. まとめ

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

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

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

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

28. 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 を使った最新サンプルアプリのご紹介』

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

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

31. Thank you for your attention!