Photino.Blazor - ルーティング

概要

Photino.NETは、デスクトップアプリケーションのための軽量なフレームワークであり、そのルーティングシステムもシンプルながら効果的な設計となっている。

基本的なルーティングの仕組みとして、Photino.NETではシングルページアプリケーション (SPA) のような形式でルーティングを実装する。
メインウインドウにおいて、JavaScriptを使用してコンテンツの切り替えを行う。

一般的に、ルーティングの実装方法として、以下に示すようなアプローチを取る。

1. まず、PhotinoWindowクラスのインスタンスを生成して、初期URLを設定する。
   これは、アプリケーションのエントリーポイントとなる。

   var window = new PhotinoWindow()
       .Load("wwwroot/index.html");
   

2. フロントエンド側では、JavaScriptのルーティングライブラリ (例: Navigo) を使用してルーティングを管理する。
   これにより、シングルページアプリケーションを提供することが可能となる。

重要な点では、Photino.NETではバックエンド (C#) とフロントエンド (JavaScript) 間の通信が可能である。
これを利用して、ルーティングに関連する処理をバックエンド側で実装することもできる。

 window.WebMessageReceived += (sender, message) => {
    if (message.Contains("navigate:")) {
       var route = message.Replace("navigate:", "");
       // ルーティング処理の実装
    }
 };

また、Photino.NETのルーティングシステムは、デフォルトで外部URLへのナビゲーションを制限している。
これは意図しないナビゲーションを防ぐための重要な機能である。

ディープリンクの実装も可能であり、これによりデスクトップアプリケーションでありながら、Webアプリケーションのような柔軟なナビゲーションを提供することができる。

また、ルーティングに関連するエラーハンドリングでは、404エラーや不正なルートへのアクセスに対して、適切なエラーページやフォールバックを実装することが推奨される。

カスタムスキームの実装も可能であり、これにより、アプリケーション固有のURLスキームを定義して特別なルーティング要件に対応することができる。

ルーティングの設定

Photinoアプリケーションのルーティングの基本設定を行い、以下に示す機能を提供する。
これはBlazorの標準的なルーティング設定であり、SPAアプリケーションのナビゲーション機能を実現するために必要な基本的な設定となっている。

• 正しいURLの場合は対応するページを表示する。
• 存在しないページにアクセスした場合は、エラーページを表示する。
• 全てのページに共通のレイアウトを適用する。

以下の例では、Blazor向けのルーティング設定を行っている。

 <!-- App.razorファイル -->
 <!-- Blazor向けのルーティング設定を行うコンポーネント -->
 
 @using PhotinoSample.Shared  <!-- SharedディレクトリにMainLayout.razorファイルがあるものとする -->
 
 <Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
       <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
       <FocusOnNavigate RouteData="@routeData" Selector="body" />
    </Found>
    <NotFound>
       <PageTitle>Not found</PageTitle>
       <LayoutView Layout="@typeof(MainLayout)">
          <p role="alert">Sorry, there's nothing at this address.</p>
       </LayoutView>
    </NotFound>
 </Router>

• <Router>タグ

  Blazorアプリケーションのルーティングを制御する主要なコンポーネントである。

  AppAssembly属性は、ルーティング情報を含むアセンブリを指定する。

  上記の例は、Appクラスを含むアセンブリ

  
  

• <Found>タグ

  ルートが見つかった場合の処理を定義する。

  • <RouteView>タグ

    実際のページコンテンツを表示する。

    上記の例において、DefaultLayout属性は、MainLayoutをデフォルトレイアウトとして指定している。

  • <FocusOnNavigate>タグ

    ナビゲーション後にフォーカスを設定する機能を提供する。

  
  

• <NotFound>タグ

  URLが見つからない場合 (404エラー) において、表示内容を定義する。

  <PageTitle>タグは、ページタイトルを設定する。一般的には、エラーメッセージを表示する。

また、上記の例において、@using PhotinoSample.SharedはBlazorのusingディレクティブのシンタックスであり、PhotinoSample.Shared名前空間をインポートする宣言である。

• @

  BlazorのRazor構文であることを示すシンボルである。

• using

  C#のusingステートメントと同じ働きをする。

• PhotinoSample.Shared

  インポートする名前空間

  上記の例では、この名前空間には、MainLayout.razorファイル等の共有コンポーネントが含まれている。

  
  

  Sharedフォルダ / 名前空間には、アプリケーション全体で共有されるコンポーネントやレイアウトが配置されるのが一般的である。

この宣言により、PhotinoSample.Sharedに含まれるコンポーネントを完全修飾名 (PhotinoSample.Shared.MainLayout等) を使用せずに直接参照できる。

 <!-- 例: -->
 
 <!-- @using宣言がない場合 -->
 @typeof(PhotinoSample.Shared.MainLayout)
 
 <!-- @using宣言がある場合 -->
 @typeof(MainLayout)  // より簡潔に記述できる