Photino.Blazor - ルーティング - 版の履歴

Wiki: /* 概要 */

2024-12-31T10:35:46Z

概要

← 古い版		2024年12月31日 (火) 19:35時点における版
1行目:		1行目:
	== 概要 ==		== 概要 ==
	Photino.NETは、デスクトップアプリケーションのための軽量なフレームワークであり、そのルーティングシステムもシンプルながら効果的な設計となっている。<br>		Photino.Blazorにおけるルーティングの基本的な仕組みは、通常のBlazorアプリケーションと同様、コンポーネントベースのルーティングを採用している。<br>
			ルーティングシステムは、URLパスとコンポーネントを紐付け、ユーザの画面遷移を管理する。<br>
	<br>		<br>
	~~基本的なルーティングの仕組みとして、Photino.NETではシングルページアプリケーション (SPA) のような形式でルーティングを実装する。~~<br>		実装方法として、<code>@page</code>ディレクティブを使用する。<br>
	~~メインウインドウにおいて、JavaScriptを使用してコンテンツの切り替えを行う。~~<br>		これは、Razorコンポーネントファイルの先頭に記述して、そのコンポーネントがどのURLパスで表示されるかを定義する。<br>
	<br>		<br>
	~~一般的に、ルーティングの実装方法として、以下に示すようなアプローチを取る。~~<br>		<syntaxhighlight lang="c#">
	~~# まず、PhotinoWindowクラスのインスタンスを生成して、初期URLを設定する。~~<br>~~これは、アプリケーションのエントリーポイントとなる。~~		@page "/counter"
	#: <syntaxhighlight lang="c#">
	~~var window = new PhotinoWindow()~~		<h1>Counter</h1>
	~~.Load(~~"~~wwwroot~~/~~index.html~~");
	</syntaxhighlight>		// コンポーネントの実装
	~~# フロントエンド側では、JavaScriptのルーティングライブラリ (例: Navigo) を使用してルーティングを管理する。~~<br>~~これにより、シングルページアプリケーションを提供することが可能となる。~~		// ...略
			</syntaxhighlight>
			<br>
			パラメータを含むルートも設定可能である。<br>
			例えば、ユーザIDに基づいた動的なルーティングは次のように実装することができる。<br>
			<syntaxhighlight lang="c#">
			@page "/user/{Id}"

			@code {
			[Parameter]
			public string Id { get; set; }
			}
			</syntaxhighlight>
			<br>
			ナビゲーションについては、プログラムによる遷移と宣言的な遷移の両方をサポートしている。<br>
			プログラムによる遷移には<code>NavigationManager</code>を使用して、宣言的な遷移には<code><NavLink></code>コンポーネントを使用する。<br>
	<br>		<br>
	~~重要な点では、Photino.NETではバックエンド (C#) とフロントエンド (JavaScript) 間の通信が可能である。<br>~~
	~~これを利用して、ルーティングに関連する処理をバックエンド側で実装することもできる。<br>~~
	<syntaxhighlight lang="c#">		<syntaxhighlight lang="c#">
	~~window.WebMessageReceived += (sender, message) =>~~ {		// プログラムによる遷移
	if (~~message.Contains("navigate:")~~) {		@inject NavigationManager NavigationManager
	~~var route = message~~.~~Replace~~("~~navigate:", "~~");
	~~// ルーティング処理の実装~~		@code {
			private void NavigateToCounter()
			{
			NavigationManager.NavigateTo("/counter");
	}		}
	};		}

			// 宣言的な遷移
			<NavLink class="nav-link" href="counter">
			<span>Counter</span>
			</NavLink>
	</syntaxhighlight>		</syntaxhighlight>
	<br>		<br>
	~~また、Photino.NETのルーティングシステムは、デフォルトで外部URLへのナビゲーションを制限している。~~<br>		ルートパラメータのバリデーションやカスタム制約も実装可能である。<br>
	~~これは意図しないナビゲーションを防ぐための重要な機能である。~~<br>		これにより、特定のパターンに一致するパラメータのみを受け付けるようなルーティングを設定することができる。<br>
	<br>		<br>
	ディープリンクの実装も可能であり、これによりデスクトップアプリケーションでありながら、Webアプリケーションのような柔軟なナビゲーションを提供することができる。<br>		さらに、入れ子のルーティングも実装可能である。<br>
			これは、@pageディレクティブに複数のルートテンプレートを指定することで実現することができる。<br>
			<syntaxhighlight lang="c#">
			@page "/products"
			@page "/products/{category}"

			@code {
			[Parameter]
			public string Category { get; set; }
			}
			</syntaxhighlight>
	<br>		<br>
	また、ルーティングに関連するエラーハンドリングでは、404エラーや不正なルートへのアクセスに対して、適切なエラーページやフォールバックを実装することが推奨される。<br>		エラーハンドリングについて、存在しないルートへのアクセスや無効なパラメータに対して、カスタムの404ページや適切なエラーページを表示するように設定できる。<br>
			これは、アプリケーションのルートコンポーネントでRouterコンポーネントを設定することで実現できる。<br>
	<br>		<br>
	カスタムスキームの実装も可能であり、これにより、アプリケーション固有のURLスキームを定義して特別なルーティング要件に対応することができる。<br>		また、Blazorの認証システムと組み合わせることにより、特定のルートへのアクセスを認証・認可により制限することも可能である。<br>
	<br><br>		<br><br>

Wiki: Wiki がページ「Photino.NET - ルーティング」を「Photino.Blazor - ルーティング」に、リダイレクトを残さずに移動しました

2024-12-31T10:09:17Z

Wiki がページ「Photino.NET - ルーティング」を「Photino.Blazor - ルーティング」に、リダイレクトを残さずに移動しました

← 古い版	2024年12月31日 (火) 19:09時点における版
(相違点なし)

Wiki: /* 概要 */

2024-12-31T09:46:06Z

概要

@@ 1行目: / 1行目: @@
 == 概要 ==
+Photino.NETは、デスクトップアプリケーションのための軽量なフレームワークであり、そのルーティングシステムもシンプルながら効果的な設計となっている。<br>
 <br><br>

Wiki: /* ルーティングの設定 */

2024-12-31T09:38:15Z

ルーティングの設定

← 古い版		2024年12月31日 (火) 18:38時点における版
50行目:		50行目:
	*: <PageTitle>タグは、ページタイトルを設定する。一般的には、エラーメッセージを表示する。		*: <PageTitle>タグは、ページタイトルを設定する。一般的には、エラーメッセージを表示する。
	<br>		<br>
	@using ~~Photino1~~.~~Sharedは、Blazorのusingディレクティブのシンタックスであり、Photino1~~.Shared名前空間をインポートする宣言である。<br>		また、上記の例において、<u>@using PhotinoSample.Shared</u>はBlazorのusingディレクティブのシンタックスであり、PhotinoSample.Shared名前空間をインポートする宣言である。<br>
	<br>		<br>
	* @		* @
56行目:		56行目:
	* using		* using
	*: C#のusingステートメントと同じ働きをする。		*: C#のusingステートメントと同じ働きをする。
	* ~~Photino1~~.Shared		* PhotinoSample.Shared
	*: インポートする名前空間		*: インポートする名前空間
	*: 上記の例では、この名前空間には、MainLayout.razorファイル等の共有コンポーネントが含まれている。		*: 上記の例では、この名前空間には、MainLayout.razorファイル等の共有コンポーネントが含まれている。
	* ~~Shared~~		*: <br>
	*: Sharedフォルダ / 名前空間には、アプリケーション全体で共有されるコンポーネントやレイアウトが配置されるのが一般的である。		*: Sharedフォルダ / 名前空間には、アプリケーション全体で共有されるコンポーネントやレイアウトが配置されるのが一般的である。
	<br>		<br>
	~~この宣言により、Photino1~~.Sharedに含まれるコンポーネントを完全修飾名 (~~Photino1~~.Shared.MainLayout等) を使用せずに直接参照できる。		この宣言により、PhotinoSample.Sharedに含まれるコンポーネントを完全修飾名 (PhotinoSample.Shared.MainLayout等) を使用せずに直接参照できる。
	<syntaxhighlight lang="xml">		<syntaxhighlight lang="xml">
	<!-- 例: -->		<!-- 例: -->

	<!-- using宣言がない場合 -->		<!-- @using宣言がない場合 -->
	@typeof(~~Photino1~~.Shared.MainLayout)		@typeof(PhotinoSample.Shared.MainLayout)

	<!-- using宣言がある場合 -->		<!-- @using宣言がある場合 -->
	@typeof(MainLayout) // より簡潔に記述できる		@typeof(MainLayout) // より簡潔に記述できる
	</syntaxhighlight>		</syntaxhighlight>

Wiki: /* ルーティングの設定 */

2024-12-31T09:35:26Z

ルーティングの設定

@@ 49行目: / 49行目: @@
 *: URLが見つからない場合 (404エラー) において、表示内容を定義する。
 *: <PageTitle>タグは、ページタイトルを設定する。一般的には、エラーメッセージを表示する。
 <br><br>

Wiki: /* ルーティングの設定 */

2024-12-31T07:34:23Z

ルーティングの設定

← 古い版		2024年12月31日 (火) 16:34時点における版
17行目:		17行目:
	<!-- Blazor向けのルーティング設定を行うコンポーネント -->		<!-- Blazor向けのルーティング設定を行うコンポーネント -->

	@using PhotinoSample.Shared		@using PhotinoSample.Shared <!-- SharedディレクトリにMainLayout.razorファイルがあるものとする -->

	<Router AppAssembly="@typeof(App).Assembly">		<Router AppAssembly="@typeof(App).Assembly">

Wiki: /* ルーティングの設定 */

2024-12-31T07:33:21Z

ルーティングの設定

← 古い版		2024年12月31日 (火) 16:33時点における版
14行目:		14行目:
	<br>		<br>
	<syntaxhighlight lang="xml">		<syntaxhighlight lang="xml">
			<!-- App.razorファイル -->
	<!-- Blazor向けのルーティング設定を行うコンポーネント -->		<!-- Blazor向けのルーティング設定を行うコンポーネント -->

Wiki: ページの作成:「== 概要 ==

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

* 正しいURLの場合は対応するページを表示する。 * 存在しない…」

2024-12-31T07:32:14Z

ページの作成:「== 概要 == == ルーティングの設定 == Photinoアプリケーションのルーティングの基本設定を行い、以下に示す機能を提供する。 これはBlazorの標準的なルーティング設定であり、SPAアプリケーションのナビゲーション機能を実現するために必要な基本的な設定となっている。 * 正しいURLの場合は対応するページを表示する。 * 存在しない…」

新規ページ

== 概要 ==

 

== ルーティングの設定 ==
Photinoアプリケーションのルーティングの基本設定を行い、以下に示す機能を提供する。 
これはBlazorの標準的なルーティング設定であり、SPAアプリケーションのナビゲーション機能を実現するために必要な基本的な設定となっている。 
 
* 正しいURLの場合は対応するページを表示する。
* 存在しないページにアクセスした場合は、エラーページを表示する。
* 全てのページに共通のレイアウトを適用する。
 
以下の例では、Blazor向けのルーティング設定を行っている。 
 
<syntaxhighlight lang="xml">


@using PhotinoSample.Shared

<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)">
Sorry, there's nothing at this address.
</LayoutView>
</NotFound>
</Router>
</syntaxhighlight>
 
* <Router>タグ
*: Blazorアプリケーションのルーティングを制御する主要なコンポーネントである。
*: AppAssembly属性は、ルーティング情報を含むアセンブリを指定する。
*: 上記の例は、Appクラスを含むアセンブリ
*: 
* <Found>タグ
*: ルートが見つかった場合の処理を定義する。
** <RouteView>タグ
**: 実際のページコンテンツを表示する。
**: 上記の例において、DefaultLayout属性は、MainLayoutをデフォルトレイアウトとして指定している。
** <FocusOnNavigate>タグ
**: ナビゲーション後にフォーカスを設定する機能を提供する。
*: 
* <NotFound>タグ
*: URLが見つからない場合 (404エラー) において、表示内容を定義する。
*: <PageTitle>タグは、ページタイトルを設定する。一般的には、エラーメッセージを表示する。
 

{{#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]]