C Sharpの基礎 - Blazorデスクトップのソースを表示

== 概要 ==
Photino.Blazorは、.NET開発者にとって有益なデスクトップアプリケーション開発プラットフォームである。<br>
このフレームワークの基本的な特徴として、OSネイティブのWebViewを使用して、Blazorの強力な機能をデスクトップアプリケーションに適用できる。<br>
従来のElectronと比較して、はるかに軽量なアプリケーションを開発することができる。<br>
<br>
開発環境のセットアップにおいて、Rider / Visual Studio等を使用して開発を進めることができる。<br>
開発者は主に、C#とRazor構文を使用してアプリケーションを構築する。<br>
これにより、WebフォームやWPFの経験がある.NET開発者にとって、学習曲線を緩やかにすることができる。<br>
<br>
アプリケーションのアーキテクチャに関して、Photino.Blazorは単一のプロセスモデルを採用しており、UIレイヤーとビジネスロジックが密接に統合されている。<br>
状態管理やデータバインディング等のBlazorの優れた機能をそのまま活用することができる。<br>
<br>
Photino.Blazorは標準的なデスクトップアプリケーションのセキュリティモデルに従う。<br>
例えば、ファイルシステムへのアクセスやネットワーク通信は、.NETのセキュリティ機能によって制御される。<br>
<br>
Photino.Blazorのパフォーマンスにおいて、メモリ使用量はElectronベースのアプリケーションと比較して大幅に少なく、起動時間も短縮されている。<br>
これは、ネイティブのWebViewを使用しているため、余分なランタイムを含まないからである。<br>
<br>
Windows、MacOS、Linuxで動作するデスクトップアプリケーションをほぼ同一のコードベースで開発することが可能である。<br>
プラットフォーム固有の機能へのアクセスも、.NETの標準APIを通じて実現可能である。<br>
<br>
デプロイメント手順も簡便であり、アプリケーションは単一の実行可能ファイルとして配布可能で、必要なランタイムコンポーネントも含めることができる。<br>
そのため、自己完結型の配布パッケージを作成することが可能である。<br>
<br>
.NETコミュニティの一部として、多くのリソースやライブラリが利用可能である。<br>
また、既存の.NETライブラリとの互換性も高く、既存のコードベースの再利用も容易である。<br>
<br><br>

== オールインワンアプローチ ==
Photino.BlazorやElectronでは、デスクトップアプリケーションのフレームワークとして、フロントエンドとバックエンドのコードを1つのパッケージにまとめる<u>"オールインワンアプローチ"</u>を取っている。<br>
<br>
Photino.Blazorの場合<br>
* .NET/Blazorのコードがバックエンド相当の処理を担当
* 軽量なネイティブWebViewをフロントエンドとして使用
* BlazorのWebAssemblyとC#コードが統合された形で動作
* やはり1つのパッケージとしてビルド・配布される
<br>
Electronの場合<br>
* Node.jsをバックエンドとして使用して、Chromiumブラウザをフロントエンドとして使用する。
* メインプロセス (Node.js) とレンダラプロセス (Chromium) が存在する。
* 両者はIPCを通じて通信する。
* 全てのコードは1つのアプリケーションパッケージとして配布する。
<br>
==== オールインワンアプローチのメリット ====
* 開発とデプロイメントが簡単である。
* フロントエンドとバックエンドの連携が取りやすい。
* オフライン動作が容易となる。
<br>
==== オールインワンアプローチのデメリット ====
* アプリケーションサイズが大きくなる。
* リソース消費が比較的多い。(特に、Electronの場合)
* スケーラビリティに制限がある。
<br><br>

== クロスプラットフォーム .NET UIフレームワークの対応状況 ==
Blazorは多くのプラットフォームで動作し、全てのプラットフォーム間で多くのソースコードを共有することが可能である。<br>
<br>
<center>
{| class="wikitable" | style="background-color:#fefefe; table-layout: fixed; width: 100%; table-layout: fixed; width: 75%; margin: 0 auto;"
|-
! style="background-color:#66CCFF; width: 11%;" | フレームワーク 
! style="background-color:#66CCFF; width: 11%;" | 初公開 
! style="background-color:#66CCFF; width: 11%;" | UI技術 
! style="background-color:#66CCFF; width: 11%;" | Windows 
! style="background-color:#66CCFF; width: 11%;" | MacOS 
! style="background-color:#66CCFF; width: 11%;" | Linux 
! style="background-color:#66CCFF; width: 11%;" | Android 
! style="background-color:#66CCFF; width: 11%;" | iOS
! style="background-color:#66CCFF; width: 12%;" | Web Assembly<br>(WASM)
|-
| style="text-align: center;" | .NET MAUI || style="text-align: center;" | May 2022 || style="text-align: center;" | XAML || style="text-align: center;" | Yes || style="text-align: center;" | Yes || style="text-align: center;" | No || style="text-align: center;" | Yes || style="text-align: center;" | Yes || style="text-align: center;" | No
|-
| style="text-align: center;" | Blazor || style="text-align: center;" | Sep 2019 || style="text-align: center;" | HTML + CSS || style="text-align: center;" | Yes || style="text-align: center;" | Yes || style="text-align: center;" | Yes || style="text-align: center;" | Yes || style="text-align: center;" | Yes || style="text-align: center;" | Yes
|-
| style="text-align: center;" | Avalonia || style="text-align: center;" | Feb 2015 || style="text-align: center;" | XAML || style="text-align: center;" | Yes || style="text-align: center;" | Yes || style="text-align: center;" | Yes || style="text-align: center;" | Yes || style="text-align: center;" | Yes || style="text-align: center;" | Experimental
|-
| style="text-align: center;" | Uno Platform || style="text-align: center;" | Sep 2018 || style="text-align: center;" | XAML || style="text-align: center;" | Yes || style="text-align: center;" | Yes || style="text-align: center;" | Yes || style="text-align: center;" | Yes || style="text-align: center;" | Yes || style="text-align: center;" | Yes
|-
| style="text-align: center;" | Xamarin.Forms || style="text-align: center;" | May 2014 || style="text-align: center;" | XAML || style="text-align: center;" | Yes || style="text-align: center;" | No || style="text-align: center;" | No || style="text-align: center;" | Yes || style="text-align: center;" | Yes || style="text-align: center;" | No
|}
</center>
<br>
XamarinはMAUIに取って代わられており、MAUIはWebをサポートしていないため、Avalonia UI、Uno Platform、Blazorが選択肢に挙がる。<br>
<br>
以前のBlazorは、WinForms / WPFのWebView2を使用したWASMとWindowsのみであった。<br>
現在では、Maui Blazor Hybridがある。<br>
<br><br>

== フレームワークの選択 ==
==== Windowsのみ ====
* WinForms
* WPF
<br>
==== Windows、Linux、MacOS ====
* Photino Blazor
*: コンパイルや起動が速い。
* Electron.NET
*: ElectronNET.APIで動作する。
*: ただし、長いコンパイル時間、サイズの大きなビルドファイル、起動が遅い等のデメリットがある。
* Chromely
*: ただし、長いコンパイル時間、起動が遅い等のデメリットがある。
*: また、2023年1月16日に開発停止している。
<br>
WASM、Windows、Linux、MacOS、iOS、Androidをサポートするには、少なくとも以下に示すものが必要となる。<br>
* Photino Blazor
* Blazor WASM
* Maui
<br><br>

== ユーザインターフェース ==
Bootstrapを使用することにより、簡単にCSSを記述することができる。<br>
テーマを実装する場合、BootswatchがBootstrap向けの26のテーマを提供している。<br>
<br>
<center>
{| class="wikitable" | style="background-color:#fefefe; table-layout: fixed; width: 100%; table-layout: fixed; width: 70%; margin: 0 auto;"
! style="background-color:#66CCFF; width: 20%;" | ライブラリ
! style="background-color:#66CCFF; width: 30%;" | 仕様
! style="background-color:#66CCFF; width: 20%;" | 公開日
! style="background-color:#66CCFF; width: 30%;" | 説明
|-
| style="text-align: center;" | [https://blazorise.com/ Blazorise]
| Bootstrap、Bulma、AntDesign、Materialに対応
| style="text-align: center;" | 2019/6
| Blazoriseは最も多くのコントロールがあり、C#の列挙型とクラスにCSSを抽象化している。<br>コミッタは、リクエストにも応えてくれやすい。
|-
| style="text-align: center;" | [https://mudblazor.com/ MudBlazor]
| Material Designのコンポーネントを提供
| style="text-align: center;" | 2020/4
| 
|-
| style="text-align: center;" | [https://antblazor.com/ AntDesign Blazor]
| Ant Designからインスピレーションを得たデザイン
| style="text-align: center;" | 2020/3
| 
|-
| style="text-align: center;" | [https://www.matblazor.com/ MatBlazor]
| Material Designのコンポーネントを提供
| style="text-align: center;" | 2019/2
| 
|-
| style="text-align: center;" | [https://blazorstrap.io/ BlazorStrap]
| Bootstrap 4 / 5をベースにした実装
| style="text-align: center;" | 2019/4
| 
|-
| style="text-align: center;" | [https://docs.blazorbootstrap.com/ Blazor Bootstrap]
| Bootstrap 5のコンポーネントを提供
| style="text-align: center;" | 2021/6
| 
|}
</center>
<br>
Blazorプロジェクトでは、使用頻度の高いアイコン群を以下に挙げる。<br>
* Font Awesomeアイコン
* Google Fonts
* 埋め込みフォントファイル
* Bootstrapアイコン
*: アイコンライブラリには、SVG、SVGスプライト、Webフォント等の2000種類以上のアイコンがある。
*: https://icons.getbootstrap.com/
*: インストールコマンド : <code>npm install bootstrap-icons</code>
<br>
全てのCSS、JS、フォントをプロジェクトに含めることにより、スループットは良くなる。<br>
全てのリソースが含まれているため、アプリケーションのサイズが約2[MB]大きくなる。<br>
<br><br>

== ディレクトリ構成 ==
==== Blazorプロジェクトの構造と分割パターン ====
* 共有ライブラリ
* コアクラス
*: コアクラスを保持する<code><Project Sdk="Microsoft.NET.Sdk"></code>型の<code>OpenHabitTracker</code>
* Razoorファイル
*: Razoorファイルを保持する<code><Project Sdk="Microsoft.NET.Sdk.Razor"></code>型の<code>OpenHabitTracker.Blazor</code>
<br>
以下に示すように分割することにより、ロジックはUIから分離されて、Razorファイルには数行のC#コードが含まれるようになる。<br>
C#のソースコードを.razor.csファイル (コードビハインドファイル) に記述するとエディタの動作が改善される。<br>
<br>
また、C#のソースコードを別のライブラリに記述することもできる。<br>
<br>
Razorコンポーネント / Razorページのみを共有ライブラリに配置して、<br>
App.razor、_Imports.razor、MainLayout.razor、JsInterop.cs、jsInterop.js、app.cssは共有ライブラリに移動しない。<br>
<br>
.csとindex.htmlを除く全てのファイルを共有ライブラリに移動することができる。<br>
プラットフォーム固有の動作がある場合は、C#インターフェースで解決することができる。<br>
<br>
全ての.cssと.jsファイルは共有ライブラリに格納することができ、<br>
index.htmlの_content/OpenHabitTracker.Blazor/...のように、プラットフォーム固有のプロジェクトにインクルードすることができる。<br>
<br>
==== ディレクトリとファイル構成 ====
* wwwrootディレクトリ
*: アプリケーションの静的ファイルを格納するディレクトリ
*: CSS、JavaScript、画像等のクライアントサイドリソースを格納する。
*: <br>
* Pagesディレクトリ
*: Blazorのページコンポーネントを配置するディレクトリ
*: 各ページは、.razor拡張子を持つ。
*: <br>
* Sharedディレクトリ
*: 複数のページで共有されるコンポーネントを配置するディレクトリ
*: レイアウトやナビゲーションメニュー等が含まれる。
*: <br>
* Dataディレクトリ
*: データモデルやサービスクラスを配置するディレクトリ
*: ビジネスロジック、データアクセスコードもここに含まれる。
*: <br>
* /ディレクトリ (プロジェクトのトップディレクトリ)
*: Program.cs : アプリケーションの起動処理を定義する。
*: Startup.cs : サービスの設定やミドルウェアの構成を行う。
*: .csproj : プロジェクトの設定やパッケージ参照を管理する。
<br>
上記のディレクトリ構成は標準的なものであるが、プロジェクトの要件に応じて適宜カスタマイズする。<br>
<br>
例えば、以下に示すようにディレクトリを構成することも一般的である。<br>
* Services
*: ビジネスロジックを分離する場合
* Models
*: データモデルを別途管理する場合
* Helpers
*: ユーティリティクラスを配置する場合
<br>
 # ディレクトリ構成例
 
 PhotinoProject/
 ├── wwwroot/                   # 静的ファイル用ディレクトリ
 │   ├── css/                   # CSSファイル
 │   ├── js/                    # JavaScriptファイル
 │   └── index.html             # メインのHTMLファイル
 │
 ├── Pages/                     # Blazorのページコンポーネント
 │   ├── _Host.cshtml           # アプリケーションのホストページ
 │   ├── Index.razor            # メインページ
 │   └── NextPage.razor         # 他ページ
 │
 ├── Shared/                    # 共有コンポーネント
 │   ├── MainLayout.razor       # メインレイアウト
 │   └── NavMenu.razor          # ナビゲーションメニュー
 │
 ├── Data/                      # データモデルとサービス
 │   └── Data.cs                # サンプルデータモデル
 │
 ├── Program.cs                 # アプリケーションのエントリーポイント
 ├── Startup.cs                 # アプリケーションの設定
 └── PhotinoProject.csproj      # プロジェクトファイル
<br><br>



{{#seo:
|title={{PAGENAME}} : Exploring Electronics and SUSE Linux | MochiuWiki
|keywords=MochiuWiki,Mochiu,Wiki,Mochiu Wiki,Electric Circuit,Electric,pcb,Mathematics,AVR,TI,STMicro,AVR,ATmega,MSP430,STM,Arduino,Xilinx,FPGA,Verilog,HDL,PinePhone,Pine Phone,Raspberry,Raspberry Pi,C,C++,C#,Qt,Qml,MFC,Shell,Bash,Zsh,Fish,SUSE,SLE,Suse Enterprise,Suse Linux,openSUSE,open SUSE,Leap,Linux,uCLnux,Podman,電気回路,電子回路,基板,プリント基板
|description={{PAGENAME}} - 電子回路とSUSE Linuxに関する情報 | This page is {{PAGENAME}} in our wiki about electronic circuits and SUSE Linux
|image=/resources/assets/MochiuLogo_Single_Blue.png
}}

__FORCETOC__
[[カテゴリ:C_Sharp]]