「Photino.Blazor - プロジェクト構成」の版間の差分

📢 Webサイト閉鎖と移転のお知らせ

このWebサイトは2026年9月に閉鎖いたします。

移転先はhttps://mochiu.net/index.php?title=Photino.Blazor - プロジェクト構成です。

新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）

← 古い編集

ビジュアルウィキテキスト

@@ 2行目: / 2行目: @@
 Photino Blazorのプロジェクト構成は、標準的なBlazorプロジェクトの構成に似ている。<br>
 しかし、Photinoを使用してデスクトップアプリケーションとして実行される点が特徴である。<br>
+<br><br>
+== 必要なライブラリのインストール ==
+Photinoを実行するために必要なライブラリをインストールする。<br>
+<br>
+==== Winodws ====
+必要なライブラリはない。<br>
+<br>
+==== Linux ====
+Photino.Blazorは、BlazorのWebベースのUIをデスクトップアプリケーションとして動かすフレームワークである。<br>
+<br>
+Linux上では、アプリケーションウインドウを作成するためにGTK 3 (GNOMEの標準的なUIツールキット) を使用し、<br>
+その中でBlazorのHTML / CSS / JavaScriptをレンダリングするためにWebKit2GTK (Linuxのネイティブブラウザエンジン) を使用する。<br>
+<br>
+したがって、GTK3がアプリケーションの窓枠を作り、WebKit2GTKがその中で"Webページとして描かれたBlazor UI"を表示する役割を担っている。<br>
+これにより、Electronのような重量級フレームワークを使わずに、軽量なデスクトップアプリケーションを実現することができる。<br>
+<br>
+ # RHEL
+ sudo dnf install gtk3-devel webkitgtk4-devel
+ # SUSE
+ sudo zypper install gtk3-devel webkit2gtk3 webkit2gtk3-devel
 <br><br>
@@ 15行目: / 37行目: @@
   ├── Pages/                # Blazorのページコンポーネント
   ├── Shared/               # 共有コンポーネント
- ├── Data/                 # データサービス
   ├── Properties/           # プロジェクト設定
   ├── _Imports.razor        # 共通インポート
@@ 38行目: / 59行目: @@
 複数のページで共有されるコンポーネント (ナビゲーションメニュー、レイアウト等) を格納する。<br>
 <br>
-==== Data/ ====
+==== Properties/ ====
-データモデルやサービスクラスを格納する。<br>
+アプリケーションのプロパティやビルド設定が含まれる。<br>
+<br>
+Properties/ディレクトリはASP.NET CoreのWebアプリケーションで使用され、開発環境での起動設定 (ポート番号、環境変数等) を定義する。<br>
 <br>
-==== Properties/ ====
+Photino.Blazorはデスクトップアプリケーションであるため、Webサーバ設定 (ポート番号やURL等) は不要である。<br>
-プロジェクト設定ファイルを格納する。<br>
+そのため、Properties/ディレクトリが無くても問題なく動作する。<br>
+<br>
+Photino.Blazorでは、appsettings.jsonファイルやProgram.cs内での設定により、必要な構成を行うことができる。<br>
 <br>
 ==== _Imports.razor ====
-プロジェクト全体で使用される共通のimport文を定義する。<br>
+プロジェクト全体のRazorファイルで共通して使用する名前空間をインポートする。<br>
+<br>
+主な役割<br>
+* 共通の名前空間をプロジェクト全体で使用可能にする。
+* 各Razorファイルで毎回同じ名前空間を記述する手間を省く。
+* <code><プロジェクトの名前空間></code>の部分は、実際のプロジェクト名に置き換える。
+<br>
+ <syntaxhighlight lang="xml">
+ @using System.Net.Http
+ @using Microsoft.AspNetCore.Components.Forms
+ @using Microsoft.AspNetCore.Components.Routing
+ @using Microsoft.AspNetCore.Components.Web
+ @using Microsoft.JSInterop
+ @using <プロジェクトの名前空間>.Shared
+ @using <プロジェクトの名前空間>.Models
+ @using <プロジェクトの名前空間>.Services
+ </syntaxhighlight>
 <br>
 ==== App.razor ====
-アプリケーションのルートコンポーネントである。<br>
+Blazorアプリケーションのルートコンポーネントであり、ルーティングの設定等が含まれている。<br>
-ルーティングの設定等が含まれている。<br>
+<br>
+主な役割<br>
+* Router
+*: ルーティング設定の定義
+* Found
+*: 有効なルートが見つかった場合の表示
+* NotFound
+*: 無効なルートの場合の表示
+*: 一般的には、MainLayoutをデフォルトレイアウトとして設定
+<br>
+ <syntaxhighlight lang="xml">
+ <Router AppAssembly="@typeof(Program).Assembly">
+    <Found Context="routeData">
+       <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+    </Found>
+    <NotFound>
+       <LayoutView Layout="@typeof(MainLayout)">
+          <p>Sorry, there's nothing at this address.</p>
+       </LayoutView>
+    </NotFound>
+ </Router>
+ </syntaxhighlight>
 <br>
 ==== Program.cs ====
-アプリケーションのエントリーポイントである。<br>
+アプリケーションのエントリーポイントであり、Photinoウィンドウの初期化とBlazorの統合を行う。<br>
-Photinoの初期化と設定が行われる。<br>
 <br>
+主な役割<br>
+* アプリケーションのエントリーポイント
+* DI (依存性注入) コンテナの設定
+* Photinoウィンドウの初期化と構成
+* Blazorフレームワークとの統合
+* アプリケーション全体の設定とライフサイクル管理
+<br>
+ <syntaxhighlight lang="c#">
+ using System;
+ using System.Threading.Tasks;
+ using Microsoft.Extensions.DependencyInjection;
+ using Microsoft.Extensions.Logging;
+ using Microsoft.Extensions.DependencyInjection;
+ using Microsoft.Extensions.Configuration;
+ using Photino.Blazor;
+ using <プロジェクトの名前空間>.Data;
+ namespace <プロジェクトの名前空間>
+ {
+    class Program
+    {
+       /// <summary>
+       /// アプリケーションのエントリーポイント
+       /// STAThreadは単一スレッドのアパートメントモデルを指定
+       /// </summary>
+       /// <param name="args">コマンドライン引数</param>
+       [STAThread]
+       private static void Main(string[] args)
+       {
+          // デフォルト設定でPhotinoBlazorアプリケーションビルダーを作成
+          var appBuilder = PhotinoBlazorAppBuilder.CreateDefault(args);
+          // 設定ファイル (appsettings.json) を読み込む
+          // optional : trueは、ファイルが存在しない場合もエラーにしない設定
+          appBuilder.Configuration.AddJsonFile("appsettings.json", optional: true);
+          // DIコンテナにサービスを登録
+          appBuilder.Services
+                    .AddLogging()                             // ロギングサービスの登録
+                    .AddSingleton<WeatherForecastService>();  // アプリケーション固有のサービスを登録
+          // Blazorアプリケーションのルートコンポーネント (最上位のコンポーネント) とセレクタの登録
+          // <App>は、App.razorファイルで定義されたコンポーネントを参照する
+          // "app"は、HTML内のセレクタを指定する
+          // HTMLファイル (一般的には、wwwroot/index.html) 内にある<app></app>または<div id="app"></div>のような要素に対して、
+          // Blazorのルートコンポーネントを配置するよう指示する
+          //
+          // Appコンポーネントが"app"というセレクタに割り当てられる
+          appBuilder.RootComponents.Add<App>("app");
+          // アプリケーションのビルド
+          var app = appBuilder.Build();
+          // appsettings.jsonから設定を取得
+          var appSettings = app.Configuration.GetSection("ApplicationSettings");
+          var windowTitle = appSettings["WindowTitle"] ?? "Photino.Blazor App";
+          // ウィンドウのカスタマイズ
+          app.MainWindow
+             .SetIconFile("favicon.ico")  // アイコンファイルの設定
+             .SetTitle(windowTitle)       // ウィンドウタイトルの設定
+             .SetSize(                    // ウィンドウサイズの設定
+                int.Parse(appSettings["WindowWidth"] ?? "800"),
+                int.Parse(appSettings["WindowHeight"] ?? "600")
+             )
+             .Center();                   // ウィンドウを中央に配置
+          // JavaScript -> C#の通信用のメッセージハンドラを登録
+          app.MainWindow.RegisterWebMessageReceivedHandler((s, e) =>
+          {
+             Console.WriteLine($"Message received: {e}");
+          });
+          // 未処理の例外をグローバルにハンドリング
+          AppDomain.CurrentDomain.UnhandledException += (sender, error) =>
+          {
+             // エラーが発生した場合、メッセージボックスで表示
+             app.MainWindow.ShowMessage("エラー", error.ExceptionObject.ToString());
+          };
+          // アプリケーションの実行
+          // ウィンドウの表示と終了までのイベントループを管理
+          app.Run();
+       }
+    }
+ }
+ </syntaxhighlight>
+<br>
+<code>appBuilder.RootComponents.Add<App>("app");</code>において、<br>
+この仕組みにより、BlazorコンポーネントとHTMLの橋渡しが行われる。<br>
+<br>
+Blazorフレームワークは指定されたセレクタをDOMから探して、そこにコンポーネントツリーを配置する。<br>
+Appコンポーネントは、一般的にルーティングや全体のレイアウト等のアプリケーションの基本構造を定義する。<br>
+<br>
+また、複数のルートコンポーネントを別々のセレクタに登録することも可能である。<br>
+<br>
+この仕組みはBlazorの<u>クライアントサイドレンダリングモデル</u>の中核部分で、SPA (シングルページアプリケーション) としての機能を可能にしている。<br>
+<br>
 ==== appsettings.json ====
 アプリケーションの設定を格納するJSONファイルである。<br>