sgcHTML

Delphi、C++ Builder、.NET から直接、モダンで完全な Web UI を構築できます。sgcHTML はサーバーサイドのコンポーネントフレームワークで、チャート、グリッド、フォーム、ダッシュボード、チャットなど 60 種類以上の既製ウィジェット — を備えています。これらは Bootstrap 5 マークアップとしてレンダリングされ、htmx を通じてインタラクティブな状態を保ちます。あなたが Object Pascal や C# を書けば、sgcHTML が HTML、CSS、JavaScript を生成します。

60 種類以上の UI コンポーネント
Bootstrap 5 + htmx
Delphi / C++ Builder / .NET
JavaScript は不要

あなたは Pascal や C# を書く。フロントエンドは sgcHTML が書く。

sgcHTML は、既存の Delphi、C++ Builder、.NET バックエンドを Web アプリケーションサーバーへと変えます。各コンポーネントは Bootstrap 5 の HTML を出力するネイティブなクラスです。htmx により、手書きの JavaScript を 1 行も書くことなく、ページはインタラクティブでライブな状態を保ちます。

HTML をレンダリングするコンポーネント

すべてのウィジェットはクラスです — TsgcHTMLComponent_ChartTsgcHTMLComponent_GridTsgcHTMLComponent_Form など 60 種類以上。プロパティを設定し、HTML プロパティを読み取れば、配信できる状態のクリーンな Bootstrap 5 マークアップが得られます。

あなた自身のサーバーで配信

TsgcHTMLEngine_Server を配置する(または既存の TsgcWebSocketHTTPServer に HTML を接続する)だけです。リクエストは OnCommandGet ハンドラーに届き、コンポーネントから組み立てたページで応答します。外部の Web スタックは不要です。

htmx によるインタラクティブ性

TsgcHTMX_Engine_Server を追加すれば、クリック、フォーム送信、ライブ更新が Pascal/C# のイベントハンドラーとの間で往復します。サーバーが HTML フラグメントをその場で差し替えます — SPA のような操作感を、JavaScript のビルドチェーンなしで実現します。

WebSocket によるリアルタイム

htmx は sgcWebSockets サーバー上で動作するため、接続中のすべてのブラウザーにライブな HTML をプッシュできます。ダッシュボード、モニター、チャットウィンドウは、データが変化した瞬間に更新されます — サーバー駆動で、ポーリングは不要です。

テーマ & テンプレート

TsgcHTMLTemplate_Bootstrap はコンテンツを完全なレスポンシブドキュメントでラップします。TsgcHTMLThemeControllerTsgcHTMLThemeBuilder はライト/ダークのテーマと共有スタイルシートを提供します。Bootstrap 5.3 と htmx は組み込みで同梱されます — 実行時に CDN は不要です。

データベースへの直接バインド

Grid、DataTable、Chart、Select、TreeView、Scheduler、Timeline、Form は、LoadFromDataSet / DataSource を介して TDataSet に直接バインドできます。コンポーネントをクエリに向ければ、その行がレンダリングされます。

60 種類以上のコンポーネント、8 つのファミリー

ナビゲーション要素からデータグリッド、チャート、フォーム、オーバーレイ、AI チャットまで — Bootstrap 5 の全語彙をネイティブコンポーネントとして提供します。それぞれが Delphi、C++ Builder、.NET の例を備えた専用ページにリンクしています。

ナビゲーション & 構造

NavBar、Sidebar、Breadcrumb、Tabs、Pagination、Toolbar、TreeView、Stepper、Dropdown、ButtonGroup、ListGroup、DashboardLayout。

コンポーネントを見る →

データ & テーブル

Grid、DataTable、Calendar、Scheduler、Timeline、KanbanBoard、Gantt — 並べ替え、フィルター、エクスポートが可能で、データセットにバインドできます。

コンポーネントを見る →

チャート & 可視化

Chart(Chart.js)、Gauge、Diagram(SVG フロー)、Map(Leaflet)— あなた自身のデータセットから生成するデータ駆動のビジュアルです。

コンポーネントを見る →

フォーム & 入力

Form、Edit、Memo、CheckBox、RadioGroup、Select、InputGroup、AutoComplete、DatePicker、FileUpload、RichEditor、Rating。

コンポーネントを見る →

コンテンツ & レイアウト

Panel、StatCard、Accordion、Carousel、Image、Avatar、Video — ダッシュボード向けのカード、メディア、KPI タイルです。

コンポーネントを見る →

オーバーレイ & フィードバック

Modal、Offcanvas、Popover、Toast、Snackbar、Notification、Spinner、Placeholder — ダイアログとステータス表示です。

コンポーネントを見る →

チャット & AI

ChatBox、Chat(WhatsApp スタイル)、プロバイダー選択・トークンストリーミング・RAG ソース引用に対応した AIChat。

コンポーネントを見る →

認証

Login、SocialLogin(OAuth)、OAuthCallback、WebAuthnLogin(パスキー)— 既製のサインインフローです。

コンポーネントを見る →

完全な機能マトリックスを見る →

数行で作る Web ダッシュボード

HTTP サーバーを起動し、htmx エンジンを接続して、コンポーネントから組み立てたページでリクエストに応答します。Delphi、C++ Builder、.NET で同じ API です。

uses
  sgcWebSocket_Server, sgcHTMX_Engine_Server,
  sgcHTML_Template_Bootstrap, sgcHTML_Component_Chart;

// 1. Start a server and attach the htmx engine
FServer := TsgcWSHTTPServer.Create(nil);
FServer.Port := 8080;
FServer.OnCommandGet := HandleGet;

FHTMX := TsgcHTMX_Engine_Server.Create(nil);
FHTMX.Server := FServer;        // realtime htmx over WebSocket

FServer.Active := True;

// 2. Build the page from components
function TForm1.BuildDashboard: string;
var
  oChart: TsgcHTMLComponent_Chart;
  oPage: TsgcHTMLTemplate_Bootstrap;
begin
  oChart := TsgcHTMLComponent_Chart.Create(nil);
  oPage := TsgcHTMLTemplate_Bootstrap.Create(nil);
  try
    oChart.ChartType := ctBar;
    oChart.AddLabel('Q1'); oChart.AddLabel('Q2'); oChart.AddLabel('Q3');
    oChart.AddDataset('Revenue', [1200, 1900, 1500],
      '#7C3AED', 'rgba(124,58,237,.25)', True);

    oPage.Title := 'Dashboard';
    oPage.BodyContent := oChart.HTML;   // component -> HTML
    Result := oPage.GetHTML;            // full Bootstrap document
  finally
    oPage.Free;
    oChart.Free;
  end;
end;
// includes: sgcWebSocket_Server.hpp, sgcHTMX_Engine_Server.hpp,
//           sgcHTML_Template_Bootstrap.hpp, sgcHTML_Component_Chart.hpp

// 1. Start a server and attach the htmx engine
FServer = new TsgcWSHTTPServer(this);
FServer->Port = 8080;
FServer->OnCommandGet = HandleGet;

FHTMX = new TsgcHTMX_Engine_Server(this);
FHTMX->Server = FServer;          // realtime htmx over WebSocket

FServer->Active = true;

// 2. Build the page from components
String __fastcall TForm1::BuildDashboard()
{
  TsgcHTMLComponent_Chart *oChart = new TsgcHTMLComponent_Chart(NULL);
  TsgcHTMLTemplate_Bootstrap *oPage = new TsgcHTMLTemplate_Bootstrap(NULL);
  try
  {
    oChart->ChartType = ctBar;
    oChart->AddLabel("Q1"); oChart->AddLabel("Q2"); oChart->AddLabel("Q3");
    oChart->AddDataset("Revenue", OPENARRAY(double, (1200, 1900, 1500)),
      "#7C3AED", "rgba(124,58,237,.25)", true);

    oPage->Title = "Dashboard";
    oPage->BodyContent = oChart->HTML;   // component -> HTML
    return oPage->GetHTML();             // full Bootstrap document
  }
  __finally
  {
    delete oPage;
    delete oChart;
  }
}
using esegece.sgcWebSockets;

// 1. Start a server and attach the htmx engine
var server = new TsgcWebSocketHTTPServer();
server.Port = 8080;
server.OnCommandGet += HandleGet;

var htmx = new TsgcHTMX_Engine_Server();
htmx.Server = server;            // realtime htmx over WebSocket

server.Active = true;

// 2. Build the page from components
string BuildDashboard()
{
    var chart = new TsgcHTMLComponent_Chart();
    chart.ChartType = TsgcHTMLChartType.ctBar;
    chart.AddLabel("Q1"); chart.AddLabel("Q2"); chart.AddLabel("Q3");
    chart.AddDataset("Revenue", new double[] { 1200, 1900, 1500 },
        "#7C3AED", "rgba(124,58,237,.25)", true);

    var page = new TsgcHTMLTemplate_Bootstrap();
    page.Title = "Dashboard";
    page.BodyContent = chart.HTML;   // component -> HTML
    return page.GetHTML();            // full Bootstrap document
}

高レベルコンポーネント、または低レベルノード

ウィジェットを 1 行で配置したいときは既製のコンポーネントを使い、マークアップを完全に制御したいときはノードレイヤーまで掘り下げます。

コンポーネントレイヤー

60 種類以上の TsgcHTMLComponent_* ウィジェット。プロパティを設定し、必要に応じてデータセットをバインドし、HTML を読み取ります。多くのコンポーネントは、1 行のインライン利用向けに静的な Build(...) ヘルパーも公開しています。

ノード / コンポジションレイヤー

TsgcHTMLContainerTsgcHTMLCardTsgcHTMLFormTsgcHTMLFieldTsgcHTMLButtonTsgcHTMLTable といったプリミティブを組み合わせて任意のレイアウトを構成し、TsgcHTMLTemplate_Bootstrap でレンダリングします。

ビジュアルページビルダー

TsgcHTMLPageBuilder はデザイン時エディターを備え、IDE 上でページを組み立てられます。一方、TsgcHTMLThemeController はアプリ全体のライト/ダークテーマを管理します。

3,000+Developers
20+Years
761+Components
30+API Integrations
5Platforms
30日間返金保証ご満足いただけない場合は、ご購入から30日以内に全額返金をリクエストできます。 返金ポリシーを見る

IDE から離れずに Web UI を出荷

チャート、グリッド、フォーム、ダッシュボード、リアルタイムページを Delphi、C++ Builder、.NET アプリケーションに追加できます — すでに使い慣れた言語のままで。

eSeGeCe のその他の製品

sgcHTML を、Delphi、C++ Builder、.NET 向けの他のコンポーネントライブラリと組み合わせましょう。

sgcWebSockets

エンタープライズ向けの WebSocket、HTTP/2/3、MQTT、AMQP、WebRTC、AI/LLM コンポーネント。sgcHTML は同じ高性能 HTTP/WebSocket サーバー上で配信されます。

詳しく見る →

sgcSign

エンタープライズ向けデジタル署名 — XAdES、PAdES、CAdES、ASiC に対応し、10 種類のキープロバイダーと EU 21 か国のプロファイルを備えています。

詳しく見る →

sgcOpenAPI

OpenAPI 3.0 パーサーと SDK ジェネレーター。任意の OpenAPI 仕様を、数秒で厳密に型付けされた Delphi クライアントに変換します。

詳しく見る →

sgcBiometrics

Delphi と C++ Builder 向けの、ネイティブな Windows Hello、指紋認証、Windows Biometric Framework コンポーネント。

詳しく見る →