sgcHTML: JavaScriptを書かずにDelphiからモダンなWeb UIを構築する

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

Delphi開発者は30年にわたってビジネスアプリケーションを構築してきました。バックエンドは堅牢です。データベースアクセス、ビジネスロジック、レポート生成、サービス連携など、すべてが揃っています。問題は常にフロントエンドにありました。顧客からブラウザベースのインターフェースを求められた瞬間、従来のDelphiアプローチは機能しなくなります。IntraWeb（強力ですが、ステートフルで老朽化しています）を選択するか、TMS WEB Core（PascalをJavaScriptにコンパイルしますが、クライアントサイドのデプロイメントモデルを強制します）を試みるか、あるいはフロントエンドをJavaScriptチームに委ね、まったく異なる2つのコードベースを維持するかのどれかになります。

sgcHTMLは異なるアプローチを採用しています。これは60以上のサーバーサイドコンポーネントのライブラリで、Delphi、C++ Builder、または.NETのコードから直接Bootstrap 5のHTMLを生成します。プロパティを設定し、HTMLプロパティを読み取り、その結果を配信するだけです。インタラクティブ性はhtmxから提供されます。htmxはクリックやフォーム送信に応じてサーバーがページフラグメントを入れ替えることを可能にする小さなJavaScriptライブラリです — 自分でJavaScriptを書く必要は一切ありません。結果として、Object PascalまたはC#だけで構築されたモダンでレスポンシブなWebアプリケーションが完成します。

sgcHTMLが解決する問題

標準的なDelphi VCLアーキテクチャは、フォーム、グリッド、ダイアログがWindowsで動作するシッククライアントを前提としています。このモデルは社内ツールには適しています。しかし、顧客があらゆるデバイスのブラウザからアクセスできるポータルを求めていたり、ITポリシーがデスクトップアプリケーションのインストールを禁じていたりする場合には通用しません。

sgcHTML以前の代替手段はすべて摩擦を伴っていました。

手書きのHTMLテンプレート: チームにHTML、CSS、Bootstrapを知っているメンバーがいる場合にのみ保守できます。デザインが変わるたびに、Delphiを知らない開発者がコードに触れることになります。
サードパーティのJavaScriptフレームワーク: React、Vue、Angularは成熟していますが、独立したビルドパイプライン、異なる言語、そして別のチームが必要です。20年分のDelphiの専門知識はフロントエンド側では無意味になります。
IntraWeb: 最も古いDelphi Webフレームワークで、ステートフルなサーバーサイドフォームを中心に構築されています。独自のHTMLとCSSを生成しますが、モダンな標準に合わせてテーマ設定することが難しく、現代のBootstrapレイアウトとの統合も困難です。

sgcHTMLはこのギャップを埋めます。ネイティブのDelphiコンポーネントライブラリでありながら、その出力はあらゆるブラウザが理解できる標準的なモダンなBootstrap 5のHTMLであり、htmxによって生き生きと動作し、単一のPascalまたはC#コードベースから完全に制御できます。

仕組み

アーキテクチャは3つの層で構成されています。

まず、コンポーネント（TsgcHTMLComponent_Chart、TsgcHTMLComponent_DataTable、TsgcHTMLComponent_StatCardなど）は、自分自身をBootstrap 5のHTMLとして表現する方法を知っています。通常の公開プロパティを通じて設定し、HTMLプロパティを呼び出してマークアップを取得します。

次に、ページビルダー（TsgcHTMLPageBuilder）がコンポーネントをレスポンシブグリッドに組み立てます。各コンポーネントにSection、SectionTitle、SectionOrder、ColumnWidth（Bootstrapの1–12カラムグリッド）を割り当てると、ページビルダーが自動的に配置します。

最後に、サーバーエンジン（TsgcHTMLEngine_Server）がすべてをsgcWebSocketsのTsgcWSHTTPServerに接続します。リクエストはOnCommandGetハンドラに届き、コンポーネントから構築された完全なHTMLページで応答します。Bootstrap CSSとJavaScriptはライブラリ内にバイナリリソースとして埋め込まれているため、バイナリと一緒に何かをデプロイする必要はありません。

uses
  sgcWebSocket_Server, sgcHTML_Engine_Server,
  sgcHTML_Template_Bootstrap, sgcHTML_Page,
  sgcHTML_Component_StatCard, sgcHTML_Component_Chart;

var
  oServer:   TsgcWSHTTPServer;
  oEngine:   TsgcHTMLEngine_Server;
  oTemplate: TsgcHTMLTemplate_Bootstrap;
  oPage:     TsgcHTMLPage;
  oStat:     TsgcHTMLComponent_StatCard;
  oChart:    TsgcHTMLComponent_Chart;
begin
  oServer := TsgcWSHTTPServer.Create(nil);
  oServer.Port := 8080;

  oEngine   := TsgcHTMLEngine_Server.Create(nil);
  oEngine.Server := oServer;

  oTemplate := TsgcHTMLTemplate_Bootstrap.Create(nil);
  oTemplate.Title := 'My Dashboard';

  oPage := TsgcHTMLPage.Create(nil);

  // KPI card: total revenue
  oStat := TsgcHTMLComponent_StatCard.Create(nil);
  oStat.PageBuilder := oPage.PageBuilder;
  oStat.Section := 'kpi';
  oStat.SectionOrder := 1;
  oStat.ColumnWidth := cw3;
  oStat.Title := 'Total Revenue';
  oStat.Value := '$128,450';
  oStat.Trend := stUp;
  oStat.TrendValue := '+12%';

  // Revenue trend chart
  oChart := TsgcHTMLComponent_Chart.Create(nil);
  oChart.PageBuilder := oPage.PageBuilder;
  oChart.Section := 'charts';
  oChart.SectionOrder := 1;
  oChart.ColumnWidth := cw8;
  oChart.ChartType := ctLine;
  oChart.Title := 'Monthly Revenue';
  oChart.AddLabel('Jan'); oChart.AddLabel('Feb'); oChart.AddLabel('Mar');
  oChart.AddDataset('2026', [42000, 58000, 64000], '#0d6efd', '', True);

  oServer.Active := True;
end;

60以上のすぐに使えるコンポーネント

sgcHTMLは、最も一般的なWeb UIパターンをカバーする幅広いコンポーネントパレットを同梱しています。各コンポーネントは、フォームに配置するかコードで作成できる標準的なDelphiクラスです。

データ表示: TsgcHTMLComponent_DataTable（ソート、ページネーション、検索対応）、TsgcHTMLComponent_Grid、TsgcHTMLComponent_TreeView、TsgcHTMLComponent_Timeline
チャート: TsgcHTMLComponent_Chart — 折れ線、棒、円、ドーナツ、レーダー、極域面積、バブル、散布図（Chart.jsによる）
KPIとダッシュボード: グラデーション塗りつぶし、トレンド矢印、スパークラインバッジ付きのTsgcHTMLComponent_StatCard、TsgcHTMLComponent_Gauge、TsgcHTMLComponent_DashboardLayout
フォーム: TsgcHTMLComponent_Form、TsgcHTMLComponent_Edit、TsgcHTMLComponent_Select、TsgcHTMLComponent_DatePicker、TsgcHTMLComponent_InputGroup、TsgcHTMLComponent_Rating
ナビゲーション: TsgcHTMLComponent_NavBar、TsgcHTMLComponent_Sidebar、TsgcHTMLComponent_Tabs、TsgcHTMLComponent_Breadcrumb、TsgcHTMLComponent_Pagination
ワークフロー: TsgcHTMLComponent_KanbanBoard、TsgcHTMLComponent_Scheduler、TsgcHTMLComponent_Gantt、TsgcHTMLComponent_Stepper
フィードバック: TsgcHTMLComponent_Modal、TsgcHTMLComponent_Toast、TsgcHTMLComponent_Snackbar、TsgcHTMLComponent_Notification、TsgcHTMLComponent_Spinner
メディアとコラボレーション: TsgcHTMLComponent_Chat、TsgcHTMLComponent_AIChat、TsgcHTMLComponent_Map、TsgcHTMLComponent_Video、TsgcHTMLComponent_RichEditor、TsgcHTMLComponent_Diagram
認証: TsgcHTMLComponent_Login、TsgcHTMLComponent_WebAuthnLogin、TsgcHTMLComponent_SocialLogin、TsgcHTMLComponent_OAuthCallback

DataSourceバインディング

すべてのsgcHTMLコンポーネントは、アプリケーション内の任意のTDataSourceにリンクするDataSourceプロパティをサポートしています。DataAutoRefresh := Trueを設定すると、基礎となるデータセットが変更されたときにコンポーネントが自動的に再レンダリングされます。より細かい制御が必要な場合は、LoadFromDataSetを直接呼び出してください。

uses
  sgcHTML_Component_DataTable;

// Populate a data table from a FireDAC query
oTable := TsgcHTMLComponent_DataTable.Create(nil);
oTable.PageBuilder := oPage.PageBuilder;
oTable.Section := 'invoices';
oTable.Title := 'Recent Invoices';
oTable.ShowSearch := True;
oTable.ShowExport := True;
oTable.LoadFromDataSet(FDQuery1, 20); // 20 rows per page

チャートコンポーネントには対応するLoadFromDataSetメソッドがあり、ラベルフィールド名と1つ以上の値フィールド名を受け付けます。これにより、月別売上クエリが3行で棒グラフになります。

oChart.LoadFromDataSet(fdqRevenue, 'month', ['revenue', 'cost']);

htmxによるインタラクティブ性 — JavaScriptは不要

静的なHTMLは役立ちます。しかし、インタラクティブなHTMLは必須です。sgcHTMLはhtmxを通じてインタラクティブ性を実現します。htmxはクリックやフォーム送信をインターセプトし、サーバーにHTTPリクエストを送信し、レスポンスHTMLをページに差し込む小さなライブラリ（gzip圧縮で14 KB）です。DelphiのOnCommandGetまたはOnCommandOtherハンドラがリクエストを受け取り、関連するコンポーネントを再構築してそのHTMLを返します。ページのリロードはなく、JavaScriptフレームワークも不要です。

// Server-side handler: update the chart fragment when the user changes the date range
procedure TMyServer.HandleChartFragment(aReq: TIdHTTPRequestInfo;
  aResp: TIdHTTPResponseInfo);
var
  oChart: TsgcHTMLComponent_Chart;
  vRange: string;
begin
  vRange := aReq.Params.Values['range']; // 'week', 'month', 'year'
  oChart := TsgcHTMLComponent_Chart.Create(nil);
  try
    oChart.ChartType := ctBar;
    LoadRevenueData(oChart, vRange); // your data-loading procedure
    aResp.ContentText := oChart.HTML;
    aResp.ContentType := 'text/html';
  finally
    oChart.Free;
  end;
end;

ブラウザ上のチャートはフラグメントエンドポイントを指すhx-get属性を持っています。ユーザーがドロップダウンで別の範囲を選択すると、htmxがチャートのdivをその場で入れ替えます — 周囲のページはリロードされません。

WebSocketによるリアルタイム更新

sgcHTMLはsgcWebSockets上に構築されているため、リアルタイムプッシュはファーストクラスの機能です。新しいデータが届いたとき — 新しい注文、価格の変動、センサーの読み取り値 — サーバーはWebSocket経由でHTMLフラグメントをプッシュし、htmxが正しいDOM要素に挿入します。クライアントはWebSocketエンドポイントにサブスクライブし、サーバーはSendMessageを呼び出します。ポーリングも、ロングポーリングも、外部メッセージブローカーも不要です。

// Push an updated stat card to all connected clients
procedure TDashboardServer.PushRevenueUpdate(aNewRevenue: Double);
var
  oCard: TsgcHTMLComponent_StatCard;
begin
  oCard := TsgcHTMLComponent_StatCard.Create(nil);
  try
    oCard.CardID := 'kpi-revenue';
    oCard.Title := 'Total Revenue';
    oCard.Value := FormatCurr('$#,##0', aNewRevenue);
    oCard.Trend := stUp;
    // Send the HTML fragment to all clients subscribed to this channel
    FWSServer.Broadcast(oCard.HTML);
  finally
    oCard.Free;
  end;
end;

JavaScriptビルドチェーン不要、npm不要、Node.js不要

sgcHTMLが必要とするすべてのJavaScriptおよびCSSアセット（Bootstrap 5、Chart.js、htmx）は、コンパイル済みのDelphi実行ファイル内にバイナリリソースとして埋め込まれています。デプロイメントは単一の.exeファイルです。node_modulesディレクトリも、webpackの設定も、Babelのパイプラインも、フロントエンドパッケージマネージャーとバックエンドのバージョン競合も一切ありません。sgcHTMLをDelphiパッケージとしてインストールし、コンパイルして、出荷するだけです。

はじめ方

sgcHTMLはsgcWebSockets EnterpriseおよびAll-Accessエディションの一部として提供されており、スタンドアロン購入も可能です。無料トライアルをダウンロードできます。トライアルはトライアル期間中、機能制限なしで60以上のコンポーネントすべてを含んでいます。

このライブラリはDelphi 10.2 TokyoからDelphi 13およびC++ Builder 10.2から13をサポートしており、.NETエディションは.NET 6以降を対象としています。すべての有償ティアにはフルソースコードが含まれています。

ご質問や購入前のお問い合わせは、こちらからお気軽にどうぞ。コードを書いた本人がご回答いたします。