1 つのコンポーネントで Web ページ全体を: TsgcHTMLComponent_Site のご紹介

2026年7月6日 · コンポーネント

sgcHTML は、Bootstrap 5 のマークアップをレンダリングする 60 種類以上のサーバーサイドコンポーネントを、Delphi、C++ Builder、.NET の開発者にすでに提供しています — グリッド、チャート、フォーム、チャットなど、ページに配置するものすべてです。しかし、どのプロジェクトでも手作業で組み立てるものが 1 つ残っていました。ページそのものです。トップバー。サイドメニュー。フッター。すべての画面を縁取る部分です。本日、その定型コードが専用のコンポーネントを手に入れます。

TsgcHTMLComponent_Site は、ヘッダー、ナビゲーションメニュー、メインコンテンツ、フッターという Web ページ全体 を — 1 つのコンポーネントから構築します。ブランドを設定し、メニュー項目をいくつか追加し、コンテンツを配置して、HTML プロパティを読み取るだけです。そしてレイアウト全体が 1 つの Layout プロパティで駆動されるため、1 行を変更するだけで 6 種類の異なるページ構成を切り替えられます。

シェルこそが定型コードでした

実際の Web アプリケーションを見てみると、ピクセルの大半はクロム部分です。ロゴとユーザーメニューを備えたヘッダー、ナビゲーションリンクのサイドバー、コンテンツエリア、フッター。そのクロムはどのページでも同じで、これまではすべての sgcHTML プロジェクトがそれを作り直していました — ナビゲーションバー用に手書きした HTML 文字列、カスタム CSS で配置した TsgcHTMLComponent_Sidebar、最後に貼り付けたフッター。動きはしましたが、誰も二度と書きたくない部分でした。

TsgcHTMLComponent_Site は、そのシェルをファーストクラスのコンポーネントにしたものです。既存の TsgcHTMLComponent_NavBar と TsgcHTMLComponent_Sidebar を組み合わせ、Bootstrap テンプレートでラップし、その全体をわずかなプロパティを通じて公開します。以下は完全な 1 ページです:

uses
  sgcHTML_Component_Site;

var
  oSite: TsgcHTMLComponent_Site;
begin
  oSite := TsgcHTMLComponent_Site.Create(nil);
  try
    oSite.Title       := 'Acme Admin';
    oSite.Layout      := slTopNavSidebarLeft;
    oSite.Theme.Preset := stpBlue;

    oSite.Brand.Text  := 'Acme';
    oSite.Brand.Href  := '/';

    // one menu drives the sidebar (and the mobile off-canvas)
    oSite.AddMenu('Dashboard', '/',          'bi-speedometer2').Active := True;
    oSite.AddMenu('Customers', '/customers',  'bi-people');
    oSite.AddMenu('Invoices',  '/invoices',   'bi-receipt');

    oSite.AddContent('<h1 class="h3">Welcome back</h1>');
    oSite.Footer.Text := '(c) 2026 Acme';

    Response := oSite.HTML;   // a complete <!DOCTYPE html> page
  finally
    oSite.Free;
  end;
end;

これがページ全体です。ブランドを備えたトップナビゲーションバー、メニューから構築された左サイドバー、中央にあるコンテンツ、下部のフッター、読み込まれた Bootstrap 5、モバイルでのレスポンシブ対応。

6 つのレイアウト、1 つのプロパティ

シェルをコンポーネントにする理由は、シェルこそがコンテンツに手を触れずにスタイルを変えたいまさにその部分だからです。Layout を設定すると、同じブランド、メニュー、コンテンツがまったく異なるページへと組み替えられます:

slTopNavSidebarLeft — 定番の管理画面レイアウト: トップバーに固定の左サイドバーを組み合わせたものです。
slSidebarLeft / slSidebarRight — トップバーのない、ドキュメントやアプリ風のサイドバーを左右いずれかに配置します。
slTopNav — マーケティングやポータル向けのレイアウト: トップナビゲーション、中央寄せのコンテンツ、サイドバーなし。
slIconRail — アイコンのみの細いレールを備えたコンパクトなダッシュボードです。
slOffcanvas — モバイルファースト: メニューはハンバーガーの後ろに隠れ、スライドして現れます。

1 行を変更するだけで — oSite.Layout := slIconRail; — ヘッダー、メニュー、コンテンツが再配置されます。コード内のそれ以外は何も変わりません。

プリセットとテーマ

個々の設定を組み立てるよりも見た目を選びたい場合は、Preset プロパティが 1 回の代入でレイアウトとテーマをまとめて設定します — spAdmin、spDashboard、spPortal、spDocs、spLanding、または spApp。より細かく制御するには、Theme サブオブジェクトがカラープリセット（stpBlue、stpViolet、stpEmerald、stpSlate、stpDark）、light・dark・system の Mode、およびオプションのカスタムプライマリカラーを備えています。

oSite.Preset      := spDashboard;   // icon rail + violet + dark
oSite.Theme.Mode  := stmSystem;     // follow the OS colour scheme
oSite.Theme.Primary := '#0057B8';   // or override the accent directly

すべて同梱

ヘッダーには、どのアプリケーションでも再実装するパーツが備わっています。フラグでオンにすると、コンポーネントがマークアップ、CSS、そしてわずかな JavaScript を出力します:

小さな画面では自動的にオフキャンバスメニューへと折りたたまれる、レスポンシブなサイドバー。
Header.ShowThemeSwitcher と Header.ShowLanguageSwitcher のドロップダウン。
ユーザー名を表示する Header.ShowUser アバターと、Header.ShowLogout コントロール。
サイドバーとモバイルメニューの両方に情報を供給する単一の Menu コレクション。これによりナビゲーションは一度だけ定義されます。

コンテンツエリアは依然として純粋な sgcHTML です。AddContent は任意のマークアップを受け取り、AddSection はタイトル付きのカードでラップします — つまり、他の 60 種類以上のコンポーネント（グリッド、チャート、フォーム）のいずれもそのままページに配置できます。

Delphi、C++ Builder、.NET

sgcHTML の他の部分と同様に、このコンポーネントは 3 つの言語すべてで同一の API を提供します。Delphi 版と C++ Builder 版は継承した HTML プロパティを読み取り、.NET 版は GetHTML() を公開します。レンダリングされるページはバイト単位でまったく同じです。Bootstrap はデフォルトで CDN から読み込まれるため、追加でデプロイするものはありません。

入手方法

TsgcHTMLComponent_Site は sgcHTML の一部であり、専用のアイコンとともにコンポーネントパレットにインストールされます。詳しい解説はコンポーネントページを、完全なコンポーネント一覧は機能マトリックスを、完全なリファレンスはオンラインヘルプをご覧ください。すべては無料トライアルでお試しいただけます。

ご質問、フィードバック、あるいは別のレイアウトテンプレートのアイデアはありますか？お問い合わせください — コードを書いた本人から返信が届きます。