「C Sharpの基礎 - Blazorデスクトップ」の版間の差分

提供：MochiuWiki : SUSE, EC, PCB
ナビゲーションに移動 検索に移動
84行目: 84行目:
<br>
<br>
<center>
<center>
{| class="wikitable"
{| class="wikitable" | style="background-color:#fefefe; table-layout: fixed; width: 100%; table-layout: fixed; width: 60%; margin: 0 auto;"
! ライブラリ
! style="background-color:#66CCFF; width: 33%;" | ライブラリ
! 仕様
! style="background-color:#66CCFF; width: 33%;" | 仕様
! 公開日
! style="background-color:#66CCFF; width: 34%;" | 公開日
|-
|-
| [https://blazorise.com/ Blazorise]
| [https://blazorise.com/ Blazorise]

2024年12月28日 (土) 18:53時点における版

概要



クロスプラットフォーム .NET UIフレームワークの対応状況

Blazorは多くのプラットフォームで動作し、全てのプラットフォーム間で多くのソースコードを共有することが可能である。

フレームワーク 初公開 UI技術 Windows MacOS Linux Android iOS Web Assembly
(WASM)
.NET MAUI May 2022 XAML Yes Yes No Yes Yes No
Blazor Sep 2019 HTML + CSS Yes Yes Yes Yes Yes Yes
Avalonia Feb 2015 XAML Yes Yes Yes Yes Yes Experimental
Uno Platform Sep 2018 XAML Yes Yes Yes Yes Yes Yes
Xamarin.Forms May 2014 XAML Yes No No Yes Yes No


XamarinはMAUIに取って代わられており、MAUIはWebをサポートしていないため、Avalonia UI、Uno Platform、Blazorが選択肢に挙がる。

以前のBlazorは、WinForms / WPFのWebView2を使用したWASMとWindowsのみであった。
現在では、Maui Blazor Hybridがある。


Blazorプロジェクトの構造と分割パターン

  • 共有ライブラリ
  • コアクラス
    コアクラスを保持する<Project Sdk="Microsoft.NET.Sdk">型のOpenHabitTracker
  • Razoorファイル
    Razoorファイルを保持する<Project Sdk="Microsoft.NET.Sdk.Razor">型のOpenHabitTracker.Blazor


以下に示すように分割することにより、ロジックはUIから分離されて、Razorファイルには数行のC#コードが含まれるようになる。
C#のソースコードを.razor.csファイル (コードビハインドファイル) に記述するとエディタの動作が改善される。

また、C#のソースコードを別のライブラリに記述することもできる。

Razorコンポーネント / Razorページのみを共有ライブラリに配置して、
App.razor、_Imports.razor、MainLayout.razor、JsInterop.cs、jsInterop.js、app.cssは共有ライブラリに移動しない。

.csとindex.htmlを除く全てのファイルを共有ライブラリに移動することができる。
プラットフォーム固有の動作がある場合は、C#インターフェースで解決することができる。

全ての.cssと.jsファイルは共有ライブラリに格納することができ、
index.htmlの_content/OpenHabitTracker.Blazor/...のように、プラットフォーム固有のプロジェクトにインクルードすることができる。


フレームワークの選択

Windowsのみ

  • WinForms
  • WPF


Windows、Linux、MacOS

  • Photino Blazor
    コンパイルや起動が速い。
  • Electron.NET
    ElectronNET.APIで動作する。
    ただし、長いコンパイル時間、サイズの大きなビルドファイル、起動が遅い等のデメリットがある。
  • Chromely
    ただし、長いコンパイル時間、起動が遅い等のデメリットがある。
    また、2023年1月16日に開発停止している。


WASM、Windows、Linux、MacOS、iOS、Androidをサポートするには、少なくとも以下に示すものが必要となる。

  • Photino Blazor
  • Blazor WASM
  • Maui



ユーザインターフェース

Bootstrapを使用することにより、簡単にCSSを記述することができる。
テーマを実装する場合、BootswatchがBootstrap向けの26のテーマを提供している。

ライブラリ 仕様 公開日
Blazorise Bootstrap、Bulma、AntDesign、Materialに対応 2019/6
MudBlazor Material Designのコンポーネントを提供 2020/4
AntDesign Blazor Ant Designからインスピレーションを得たデザイン 2020/3
MatBlazor Material Designのコンポーネントを提供 2019/2
BlazorStrap Bootstrap 4 / 5をベースにした実装 2019/4
Blazor Bootstrap Bootstrap 5のコンポーネントを提供 2021/6


Blazoriseは、最も多くのコントロールがあり、C#の列挙型とクラスにCSSを抽象化している。
コミッタは、アイデアやリクエストにも応えてくれる。

Blazorプロジェクトでは、Font Awesomeアイコン、Google Fonts、埋め込みフォントファイル、Bootstrapアイコン等が使用できる。

全てのCSS、JS、フォントをプロジェクトに含めることにより、スループットは良くなる。
全てのリソースが含まれているため、アプリケーションのサイズが約2[MB]大きくなる。


「http://mochiuwiki.e2.valueserver.jp/index.php?title=C_Sharpの基礎_-_Blazorデスクトップ&oldid=12884」から取得