Blazor管理UI

実用的な管理画面にTablerForNet Blazor UIパターンを使う

NuGet TablerForNet · latest

TablerForNetはBlazorチーム向けに、ナビゲーション・カード・フォーム・アイコン・レイアウトなどTablerベースの管理インターフェースを提供します。アプリがユーザー操作用のツールで、独自ビジュアルが不要な場合に適しています。

このガイドは実践的な手順に絞っています：NuGetパッケージのインストール、サービス登録、Bootstrap資産の置き換え、レイアウト移行、SEOはUIコンポーネントではなくメタデータとルーティングで管理します。

インストール開始 適合性を確認 Blazorハブを開く

簡単な回答

Blazorアプリがバックオフィス的な用途ならTablerForNetが有効

Tabler系コンポーネントライブラリは、ナビゲーションやカード、フォーム、テーブル、フィルター、ダッシュボード画面が多い場合に役立ちます。主に記事やランディングページ、独自デザインが必要な場合はあまり向きません。

管理レイアウト 再利用フォーム Tablerアイコン Bootstrap移行

適合確認

繰り返し使うツール画面が課題のときだけ管理UIフレームワークを使う

多くの画面でナビゲーションやフォーム、間隔、アイコン、ステータス部品を共用する場合は時間短縮になります。各ページが独自ブランドやカスタム操作を求める場合は逆に手間が増えることもあります。

適している

内部ツール・ダッシュボード

グリッド・フィルター・詳細・設定・ワークフロー重視の管理画面でユーザーが長く操作する場合にTablerForNetが適しています。

適している

一貫したCRUD画面

フォーム・テーブル・カード・バッジ・空状態・ツールバー操作が多くのページで繰り返される場合、共通コンポーネントスタイルが役立ちます。

過剰導入

小規模な公開コンテンツページ

記事やランディングページ、ドキュメント、ブランド重視のページにはフル管理UIフレームワークは不要な場合が多いです。

注意点

BootstrapとTablerスタイル混在

明確な移行計画がない限り、二つのビジュアル基盤を同時に使わないでください。小さなCSS競合が後で大きなデバッグコストになります。

目次

インストール

パッケージをインストールし、サービス登録後にデフォルト資産を意図的に置き換える

統合は小さなコミットやチェックポイントで進めてください。TablerForNetはアプリのレイアウトを変更するため、パッケージ設定・インポート・静的アセット・ナビゲーション・レイアウト変更を分けておくとレビューしやすくなります。

NuGetパッケージ追加

パッケージマネージャーまたは.NET CLIで追加し、レイアウト変更前に dotnet restore を実行してください。

Shellターミナル
dotnet add package TablerForNet

TablerForNet登録

サービス登録はBlazorアプリのセットアップ付近にまとめておくと、今後のアップグレード時に見つけやすくなります。

C#Program.cs
using TablerForNet;

builder.Services.AddTablerForNet();

名前空間インポート

実際に使う名前空間だけを追加してください。他ライブラリとコンポーネント名が重なる場合の型競合を防げます。

Razor_Imports.razor
@using TablerForNet
@using TablerForNet.Components
@using TablerForNet.Flags

TablerForNet資産読み込み

CSSとJavaScriptバンドルは、アプリで使うホストドキュメントやレイアウトパスに一度だけ追加してください。

HTMLホストドキュメント
<link href="_content/TablerForNet/css/tablerForNet.min.css" rel="stylesheet" />
<script src="_content/TablerForNet/js/tablerForNet.min.js"></script>

移行

ページの所有レイアウトが分かってからBootstrapデフォルトを置き換える

BlazorのデフォルトテンプレートはBootstrapやNavMenu、シンプルなページコンテナを使っています。TablerForNetで置き換える場合は、重複CSSや混在アイコン、競合するページタイトル部品が残らないよう注意して進めてください。

01

現在のレイアウトを調査

ナビゲーションやページコンテナ、アイコン、Bootstrap参照、ページタイトルを管理するテンプレートファイルをリストアップしてください。

02

一層ずつ置き換え

まず資産とインポートから始め、NavMenu・MainLayout・シンプルなページを移行し、その後に複雑な画面へ進みます。

03

コンポーネント名競合の解決

PageTitleなどが複数名前空間にある場合は明示的に指定し、usingリストは最小限にしてください。

04

レスポンシブ動作確認

移行完了前にデスクトップとモバイル両方で表示を確認してください。管理ナビゲーションは小画面で崩れやすいです。

デフォルトBootstrap参照削除

ビジュアル基盤は一つに統一しましょう。テンプレートCSSが残ると後で予期せぬレイアウトバグの原因になります。

HTMLホストドキュメントから削除
<!-- Remove these default template references when TablerForNet owns the visual layout. -->
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/open-iconic/font/css/open-iconic-bootstrap.min.css" rel="stylesheet" />

PageTitle競合の処理

PageTitleコンポーネントが複数ライブラリで重複する場合は、明示的に指定するか競合するusingを削除してください。

Razor明示的コンポーネント参照
<TablerForNet.Components.PageTitle>
    Dashboard
</TablerForNet.Components.PageTitle>

レイアウト

画面調整前にナビゲーションや枠組みをレイアウトにまとめる

クリーンなレイアウトを用意すると、後のページ作業が予測しやすくなります。ナビゲーション、コンテンツコンテナ、アイコンシステム、ページ操作の場所を統一してから個別ページのスタイル調整に進みましょう。

ナビゲーション例

RazorNavMenu.razor
<Navbar Background="NavbarBackground.Dark" Direction="NavbarDirection.Horizontal">
    <NavbarMenu>
        <NavbarMenuItem Href="/" Text="Home">
            <MenuItemIcon>
                <Icon class="icon" IconType="@TablerIcons.Home" />
            </MenuItemIcon>
        </NavbarMenuItem>

        <NavbarMenuItem Href="/reports" Text="Reports">
            <MenuItemIcon>
                <Icon class="icon" IconType="@TablerIcons.Chart_bar" />
            </MenuItemIcon>
        </NavbarMenuItem>
    </NavbarMenu>
</Navbar>

レイアウト例

RazorMainLayout.razor
@inherits LayoutComponentBase

<NavMenu />

<div class="page">
    <main class="container-xl py-3">
        @Body
    </main>
</div>

SEOの現実

TablerForNetはUIの一貫性を高めますが、検索メタデータ自体は生成しません

管理UIを整えると使いやすさやアクセシビリティ、品質の印象は向上しますが、canonical URLやhreflang、Open Graph、JSON-LDは自動生成されません。これらはメタデータやルーティングで別途管理してください。

関連実装

UIフレームワークをページメタデータ・ロケール対応リンクと組み合わせる

TablerForNetアプリに管理画面以外の公開ページやローカライズルート、記事、クロール可能なドキュメントがある場合は、これらのガイドも参照してください。

メタデータガイド ロケールリンクガイド

検証

パッケージインストールだけでなく実際のアプリ表示も確認

ページがコンパイルできたら、ブラウザでUIを実際に確認してください。ナビゲーションやレスポンシブ、フォーカス状態、重複CSS、メタデータ出力はパッケージマネージャーの出力より画面で見た方が分かりやすいです。

  • アプリを実行し、新しいレイアウトのページを開いてください。
  • BootstrapとTablerForNetの資産が競合していないか確認してください。
  • ナビゲーション・フォーカス状態・アイコン・レスポンシブブレークポイントをチェックしてください。
  • 公開ページのタイトル・H1・メタディスクリプション・canonical URL・JSON-LD出力を確認してください。
  • パッケージ設定・レイアウト移行・SEOメタデータの変更は個別にレビューできるようにしてください。

よくある質問

TablerForNetはBlazorアプリに何を追加しますか？

管理系アプリ向けにTablerベースのBlazor UI部品（ナビゲーション・カード・フォーム・アイコン・レイアウト・ダッシュボード構造など）を提供します。

TablerForNet使用時にBootstrapは削除すべきですか？

通常は削除します。TablerForNetはTablerビジュアルシステム上に構築されているため、Bootstrap資産が残ると間隔やボタン、アイコン、レイアウトのルールが重複します。

TablerForNetはすべてのBlazorサイトに適していますか？

いいえ。管理画面・内部ツール・ダッシュボード・データ重視アプリに向いています。記事やランディングページ、ブランド重視の公開サイトには小規模なカスタムデザインの方が適しています。

TablerForNetはBlazorのSEOを解決しますか？

いいえ。UIをクリーンにできますが、SEOはレンダリングされた内容・タイトル・説明・canonical URL・hreflang・Open Graph・JSON-LDなど可視ページに合った情報が必要です。

TablerForNetはBlazor WebAssemblyで使えますか？

はい。ただしフロントエンドのルールは同じです。バンドルは適切なサイズにし、資産は一度だけ読み込み、SEOが重要な場合は公開コンテンツをHTMLとして提供してください。

PageTitleの競合はどう処理すべきですか？

意図するコンポーネントの名前空間を明示的に指定するか、競合するusingを削除してください。コンパイラ任せより明確です。