More Related Content Similar to Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library.pdf (20) More from Shotaro Suzuki (20) Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library.pdf1. .NET 6 Radzen Blazor
コンポーネントライブラリを使ってみよう
鈴⽊ 章太郎
Elastic テクニカルプロダクトマーケティングマネージャー/エバンジェリスト
デジタル庁 省庁業務グループ ソリューションアーキテクト
3. l Blazor WebAssembly プロジェクト作成
l Radzen Component インストールと設定
l DataGrid
l Line Chart
l Image
l まとめ
アジェンダ
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 (デバッグなしで実⾏)
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 ファイルを
開き、以下を追加
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>
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>
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>
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
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 〜