Photino.Blazor - プロジェクト構成

概要

Photino Blazorのプロジェクト構成は、標準的なBlazorプロジェクトの構成に似ている。
しかし、Photinoを使用してデスクトップアプリケーションとして実行される点が特徴である。

プロジェクト構成

基本的なプロジェクト構成を、以下に示す。

PhotinoBlazorApp/
│
├── wwwroot/              # 静的ファイル (CSS, JavaScript, 画像等)
│   ├── css/
│   ├── js/
│   └── images/
├── Pages/                # Blazorのページコンポーネント
├── Shared/               # 共有コンポーネント
├── Data/                 # データサービス
├── Properties/           # プロジェクト設定
├── _Imports.razor        # 共通インポート
├── App.razor             # アプリケーションのルート
├── Program.cs            # アプリケーションのエントリーポイント
└── appsettings.json      # アプリケーション設定

各ディレクトリ / ファイルの役割

Photino Blazorアプリケーションでは、Program.csが重要であり、PhotinoウィンドウとBlazorの統合が設定される場所である。
PhotinoはネイティブUIレイヤーを提供し、BlazorのWebViewとして機能する。

wwwroot/

静的ファイルを格納するディレクトリである。
CSS、JavaScript、画像等が含まれる。

Pages/

Blazorのページコンポーネントを格納する。
各ページは通常、.razor拡張子を持つ。

Shared/

複数のページで共有されるコンポーネント (ナビゲーションメニュー、レイアウト等) を格納する。

Data/

データモデルやサービスクラスを格納する。

Properties/

プロジェクト設定ファイルを格納する。

_Imports.razor

プロジェクト全体のRazorファイルで共通して使用する名前空間をインポートする。

主な役割

• 共通の名前空間をプロジェクト全体で使用可能にする。
• 各Razorファイルで毎回同じ名前空間を記述する手間を省く。
• <プロジェクトの名前空間>の部分は、実際のプロジェクト名に置き換える。

 @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

App.razor

Blazorアプリケーションのルートコンポーネントであり、ルーティングの設定等が含まれている。

主な役割

• Router

  ルーティング設定の定義

• Found

  有効なルートが見つかった場合の表示

• NotFound

  無効なルートの場合の表示

  一般的には、MainLayoutをデフォルトレイアウトとして設定

 <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>

Program.cs

アプリケーションのエントリーポイントであり、Photinoウィンドウの初期化とBlazorの統合を行う。

主な役割

• アプリケーションのエントリーポイント
• DI (依存性注入) コンテナの設定
• Photinoウィンドウの初期化と構成
• Blazorフレームワークとの統合
• アプリケーション全体の設定とライフサイクル管理

 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();
       }
    }
 }

appBuilder.RootComponents.Add<App>("app");において、
この仕組みにより、BlazorコンポーネントとHTMLの橋渡しが行われる。

Blazorフレームワークは指定されたセレクタをDOMから探して、そこにコンポーネントツリーを配置する。
Appコンポーネントは、一般的にルーティングや全体のレイアウト等のアプリケーションの基本構造を定義する。

また、複数のルートコンポーネントを別々のセレクタに登録することも可能である。

この仕組みはBlazorのクライアントサイドレンダリングモデルの中核部分で、SPA (シングルページアプリケーション) としての機能を可能にしている。

appsettings.json

アプリケーションの設定を格納するJSONファイルである。

主な設定項目

• Logging

  ログ出力の詳細レベル設定

• AllowedHosts

  アプリケーションにアクセスできるホスト

• ApplicationSettings

  Photinoウィンドウの設定 (タイトル、サイズ等)

 {
   "Logging": {
     "LogLevel": {
       "Default": "Information",
       "Microsoft": "Warning",
       "Microsoft.Hosting.Lifetime": "Information"
     }
   },
   "AllowedHosts": "*",
   "ApplicationSettings": {
     "WindowTitle": "Photino.Blazor App",
     "WindowWidth": 800,
     "WindowHeight": 600
   }
 }