C# Tokyo コミュニティイベントでの発表資料。 Blazor の種類と概要。

1. / 32
7 つの Blazor
1
【メタバース】フリーテーマ LT 会 C# TOKYO イベント
石崎 充良

2. / 32
自己紹介
石崎 充良 ( @mishi_cs )
C# Tokyo コミュニティ管理メンバー
GitHub：
https://github.com/m-ishizaki
blog：
https://rksoftware.hatenablog.com/
2

3. / 32
Blazor とは
3

4. / 32
Web アプリ
Web アプリを作る開発フレームワークです。
・一般的な Web アプリ
・WebAssembly アプリ
・
・
4

5. / 32
Web アプリ
Web アプリを作る開発フレームワークです。
・一般的な Web アプリ
・WebAssembly アプリ
・(WebView によるクライアントアプリ)
・(モバイルアプリ(+macOS + Windows))
5

6. / 32
C# + Razor
主流の開発言語は C#、
UI の定義は Razor、
.NET で動作し、
.NET のクラスライブラリを使える。
6

7. / 32
Razor
7
HTML
C#

8. / 32
Web フォーム アプリからの移行先
Web フォームからの移行先として案内され
ています。
・ASP.NET MVC とは住み分け。
・MAUI や Uno Platform と競合？
8

9. / 32
Web アプリ
Web アプリを作る開発フレームワークです。
・一般的な Web アプリ
・WebAssembly アプリ
・(WebView によるクライアントアプリ)
・(モバイルアプリ(+macOS + Windows))
9

10. / 32
.NET のアプリフレーム
ワーク
10

11. / 32
.NET のアプリフレームワーク
将来 人気
コンソールアプリ Console ○ ○
Web ASP.NET Web フォーム × ◎ .NET 非対応。エンプラに人気
ASP.NET MVC ○ ○ 主流
ASP.NET Web ページ (Razor) ○ ×
Blazor Server ○ △ Web フォームの移行先とされる
Web Assembly Blazor WebAssembly ○ △ 主流にしたいっぽい
OpenSilver ？ ？ まだネタ枠
クロスプラットフォーム Xamarin (+Xamarin.Forms) × △ MAUI に移行
MAUI ○ △ まだ RC (go live)。注目度は高
Mobile Blazor Bindings ？ ？ まだこれから
Uno Platform ？ △ まだこれから
Windows UWP ○ △ holoLens・ストアアプリ
WPF ○ ○ デスクトップ主流
Windows フォーム △ ◎ エンプラに人気
11

12. / 32
7 つの Blazor
12

13. / 32
7 つの Blazor
13
name Side Windows Mac Android iOS Technology
Blazor Server Server ○ ○ ○ ○ Web
Blazor WebAssembly Client ○ ○ ○ ○ Web
Blazor Hybrid (.NET MAUI) Client ○ ○ ○ ○ Muiti
Blazor Hybrid (Windows フォーム) Client ○ － － － Desktop
Blazor Hybrid (WPF) Client ○ － － － Desktop
Mobile Blazor Bindings Client － － ○ ○ Muiti
Mobile Blazor Bindings (Hybrid) Client ○ ○ ○ ○ Multi

14. / 32
Blazor Server
14
name
Blazor Server
Blazor WebAssembly
Blazor Hybrid (.NET MAUI)
Blazor Hybrid (Windows フォーム)
Blazor Hybrid (WPF)
Mobile Blazor Bindings
Mobile Blazor Bindings (Hybrid)

15. / 32
Blazor Server
いわゆる Web アプリ。
15
> dotnet new blazorserver -o BlazorServerSample

16. / 32
Blazor WebAssembly
16
name
Blazor Server
Blazor WebAssembly
Blazor Hybrid (.NET MAUI)
Blazor Hybrid (Windows フォーム)
Blazor Hybrid (WPF)
Mobile Blazor Bindings
Mobile Blazor Bindings (Hybrid)

17. / 32
Blazor WebAssembly
いわゆる WebAssembly アプリ。
17
> dotnet new blazorwasm -o BlazorWasmSamle

18. / 32
Blazor WebAssembly
18
DLL (Assembly) がダウンロード
されている

19. / 32
Blazor Hybrid (.NET MAUI)
19
name
Blazor Server
Blazor WebAssembly
Blazor Hybrid (.NET MAUI)
Blazor Hybrid (Windows フォーム)
Blazor Hybrid (WPF)
Mobile Blazor Bindings
Mobile Blazor Bindings (Hybrid)

20. / 32
Blazor Hybrid (.NET MAUI)
MAUI 上の WebView 内で組み込まれた Blazor アプリが動作する。
20

21. / 32
Blazor Hybrid (.NET MAUI)
MAUI 上の WebView 内で組み込まれた Blazor アプリが動作する。
21

22. / 32
Blazor Hybrid
(Windows フォーム)
22
name
Blazor Server
Blazor WebAssembly
Blazor Hybrid (.NET MAUI)
Blazor Hybrid (Windows フォーム)
Blazor Hybrid (WPF)
Mobile Blazor Bindings
Mobile Blazor Bindings (Hybrid)

23. / 32
Blazor Hybrid (Windows フォーム)
23
> dotnet new winforms -o BlazorWinFormsSample
Windows フォーム 上の WebView 内で組み込まれた Blazor アプリが動作する。
.csproj ファイルの書き換え、 nuget パッケージのインストール、WebView の配置
Blazor ソースファイル
の追加

24. / 32
Blazor Hybrid (WPF)
24
name
Blazor Server
Blazor WebAssembly
Blazor Hybrid (.NET MAUI)
Blazor Hybrid (Windows フォーム)
Blazor Hybrid (WPF)
Mobile Blazor Bindings
Mobile Blazor Bindings (Hybrid)

25. / 32
Blazor Hybrid (WPF)
25
> dotnet new wpf -o BlazorWpfSample
WPF 上の WebView 内で組み込まれた Blazor アプリが動作する。
.csproj ファイルの書き換え、 nuget パッケージのインストール、WebView の配置
Blazor ソースファイル
の追加

26. / 32
Mobile Blazor Bindings
26
name
Blazor Server
Blazor WebAssembly
Blazor Hybrid (.NET MAUI)
Blazor Hybrid (Windows フォーム)
Blazor Hybrid (WPF)
Mobile Blazor Bindings
Mobile Blazor Bindings (Hybrid)

27. / 32
Mobile Blazor Bindings
27
> dotnet new mobileblazorbindings -o SampleMobileBlazorBindingsApp
Xamarin.Forms 上の WebView 内で組み込まれた Blazor アプリが動作する。

28. / 32
Mobile Blazor Bindings (Hybrid)
28
name
Blazor Server
Blazor WebAssembly
Blazor Hybrid (.NET MAUI)
Blazor Hybrid (Windows フォーム)
Blazor Hybrid (WPF)
Mobile Blazor Bindings
Mobile Blazor Bindings (Hybrid)

29. / 32
Mobile Blazor Bindings (Hybrid)
29
> dotnet new blazorhybrid -o SampleBlazorHybrid
Xamarin.Forms 上の WebVew 内で組み込まれた Blazor アプリが動作する。

30. / 32
Mobile Blazor Bindings (Hybrid)
30
Xamarin.Forms 上の WebVew 内で組み込まれた Blazor アプリが動作する。

31. / 32
まとめ
31

32. / 32
まとめ
32
name Side Windows Mac Android iOS Technology
Blazor Server Server ○ ○ ○ ○ Web
Blazor WebAssembly Client ○ ○ ○ ○ Web
Blazor Hybrid (.NET MAUI) Client ○ ○ ○ ○ Muiti
Blazor Hybrid (Windows フォーム) Client ○ － － － Desktop
Blazor Hybrid (WPF) Client ○ － － － Desktop
Mobile Blazor Bindings Client － － ○ ○ Muiti
Mobile Blazor Bindings (Hybrid) Client ○ ○ ○ ○ Multi

33. / 32
ありがとうございました。
33