Delphi、C++ Builder、.NET から直接、モダンで完全な Web UI を構築できます。sgcHTML はサーバーサイドのコンポーネントフレームワークで、チャート、グリッド、フォーム、ダッシュボード、チャットなど 89 種類の既製のデータアウェアなウィジェット — を備えています。これらは TDataSet に直接バインドし、Bootstrap 5 マークアップとしてレンダリングされ、htmx を通じてインタラクティブな状態を保ちます。あなたが Object Pascal や C# を書けば、sgcHTML が HTML、CSS、JavaScript を生成します。
sgcHTML は、既存の Delphi、C++ Builder、.NET バックエンドを Web アプリケーションサーバーへと変えます。各コンポーネントは Bootstrap 5 の HTML を出力するネイティブなクラスです。htmx により、手書きの JavaScript を 1 行も書くことなく、ページはインタラクティブでライブな状態を保ちます。
すべてのウィジェットはクラスです — TsgcHTMLComponent_Chart、TsgcHTMLComponent_Grid、TsgcHTMLComponent_Form など 86 種類。プロパティを設定し、HTML プロパティを読み取れば、配信できる状態のクリーンな Bootstrap 5 マークアップが得られます。
TsgcHTMLEngine_Server を配置する(または既存の TsgcWebSocketHTTPServer に HTML を接続する)だけです。リクエストは OnCommandGet ハンドラーに届き、コンポーネントから組み立てたページで応答します。外部の Web スタックは不要です。
sgcHTML は sgcWebSockets サーバーに縛られていません。コンポーネントで構築した同じページを、TsgcHTMX_Engine_Server_WebBroker を介して任意の Embarcadero WebBroker アプリケーションから配信したり、REST エンドポイントと同じポート上でライブな WebSocket プッシュを備えた DataSnap サーバーから配信したりできます。
TsgcHTMX_Engine_Server を追加すれば、クリック、フォーム送信、ライブ更新が Pascal/C# のイベントハンドラーとの間で往復します。サーバーが HTML フラグメントをその場で差し替えます — SPA のような操作感を、JavaScript のビルドチェーンなしで実現します。
htmx は sgcWebSockets サーバー上で動作するため、接続中のすべてのブラウザーにライブな HTML をプッシュできます。ダッシュボード、モニター、チャットウィンドウは、データが変化した瞬間に更新されます — サーバー駆動で、ポーリングは不要です。
TsgcHTMLTemplate_Bootstrap はコンテンツを完全なレスポンシブドキュメントでラップします。TsgcHTMLThemeController と TsgcHTMLThemeBuilder はライト/ダークのテーマと共有スタイルシートを提供します。Bootstrap 5.3 と htmx は組み込みで同梱されます — 実行時に CDN は不要です。
Grid、DataTable、Chart、Select、TreeView、Scheduler、Timeline、Form は、LoadFromDataSet / DataSource を介して TDataSet に直接バインドできます。コンポーネントをクエリに向ければ、その行がレンダリングされます。
sgcHTML は、17 言語の組み込み UI テキスト(ボタン、ラベル、バリデーションメッセージ)を同梱しています。対応言語は、英語、スペイン語、フランス語、ドイツ語、ポルトガル語、イタリア語、オランダ語、スウェーデン語、ノルウェー語、ポーランド語、チェコ語、トルコ語、ロシア語、中国語、日本語、韓国語、アラビア語です。sgcHTMLSetLanguage で 1 つを選べば、コンポーネントは訪問者の言語で、CJK、キリル文字、アラビア文字を含む正しいネイティブ文字を使ってレンダリングされます。
すべてのコンポーネントは、動的なテキスト、属性、インライン JavaScript、URL を、自動的な HTML・属性・JavaScript・URL エンコードと URL サニタイズ(sgcHTMLEncode、sgcHTMLAttrEncode、sgcJSEncode、sgcHTMLSanitizeURL)を通して処理します。そのため、ユーザーデータがそのコンテキストから抜け出してスクリプトを注入することはできません。XSS とインジェクションからの保護が、追加の作業なしで有効になります。
ナビゲーション要素からデータグリッド、チャート、フォーム、オーバーレイ、AI チャットまで — Bootstrap 5 の全語彙をネイティブコンポーネントとして提供します。それぞれが Delphi、C++ Builder、.NET の例を備えた専用ページにリンクしています。
NavBar、Sidebar、Breadcrumb、Tabs、Pagination、Toolbar、TreeView、Stepper、Dropdown、ButtonGroup、ListGroup、DashboardLayout、Splitter。
コンポーネントを見る →Grid、DataTable、TreeGrid、PivotTable、Calendar、Scheduler、Timeline、ActivityFeed、KanbanBoard、Gantt — 並べ替え、フィルター、エクスポートが可能で、データセットにバインドできます。
コンポーネントを見る →Chart(Chart.js)、CandlestickChart、Gauge、Heatmap、Sparkline、TreeMap、Diagram(SVG フロー)、Map(Leaflet)、QRCode、Barcode — あなた自身のデータセットから生成するデータ駆動のビジュアルです。
コンポーネントを見る →Form、Edit、Memo、CheckBox、RadioGroup、Select、MultiSelect、InputGroup、AutoComplete、DatePicker、TimePicker、ColorPicker、Slider、FileUpload、RichEditor、Rating、SignaturePad、Transfer。
コンポーネントを見る →Panel、StatCard、Accordion、Carousel、Image、Avatar、Video、Badge、PDFViewer — ダッシュボード向けのカード、メディア、KPI タイルです。
コンポーネントを見る →Modal、Offcanvas、Popover、Toast、Snackbar、Notification、Spinner、Placeholder、ContextMenu、ProgressBar、JobProgress、LogViewer — ダイアログとステータス表示です。
コンポーネントを見る →ChatBox、Chat(WhatsApp スタイル)、プロバイダー選択・トークンストリーミング・RAG ソース引用に対応した AIChat、ライブのオンラインステータスを示す Presence。
コンポーネントを見る →Login、SocialLogin(OAuth)、OAuthCallback、WebAuthnLogin(パスキー)、UserManagement、RolesPermissions — 既製のサインインフローと管理画面です。
コンポーネントを見る →EngineServer、HTMXEngine、PageBuilder、TemplateBootstrap、ThemeController、ThemeBuilder、HTMXFragment、HTMXRouter — ページを配信し、ライブな状態を保つ非ビジュアルな要素です。
コンポーネントを見る →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 行で配置したいときは既製のコンポーネントを使い、マークアップを完全に制御したいときはノードレイヤーまで掘り下げます。
89 種類の TsgcHTMLComponent_* ウィジェット。プロパティを設定し、必要に応じてデータセットをバインドし、HTML を読み取ります。多くのコンポーネントは、1 行のインライン利用向けに静的な Build(...) ヘルパーも公開しています。
TsgcHTMLContainer(自己終了タグ用の Void フラグ付き)、TsgcHTMLCard、TsgcHTMLForm、TsgcHTMLField、TsgcHTMLButton、TsgcHTMLTable といったプリミティブを組み合わせて任意のレイアウトを構成し、TsgcHTMLTemplate_Bootstrap でレンダリングします。ノードセットには、TsgcHTMLModal、TsgcHTMLOffcanvas、TsgcHTMLAccordion、TsgcHTMLCarousel、TsgcHTMLToast、TsgcHTMLProgress、TsgcHTMLSpinner、TsgcHTMLListGroupNode、TsgcHTMLInputGroup、TsgcHTMLButtonGroupNode、TsgcHTMLRadio、TsgcHTMLBreadcrumb、TsgcHTMLNavbarNode、TsgcHTMLImage といった Bootstrap の構成要素も含まれます。
TsgcHTMLPageBuilder はデザイン時エディターを備え、IDE 上でページを組み立てられます。一方、TsgcHTMLThemeController はアプリ全体のライト/ダークテーマを管理します。
sgcCustomization HTML では、必要なアプリケーションを説明していただくと、eSeGeCe チームが sgcHTML + sgcWebSockets のコンポーネントでそれを構築します。€149 からの 3 つの一回限りのパッケージがあり、ライセンスされたコンポーネントでコンパイル、拡張、再スタイルできる完全なプロジェクトを受け取れます。
sgcHTML を、Delphi、C++ Builder、.NET 向けの他のコンポーネントライブラリと組み合わせましょう。
エンタープライズ向けの WebSocket、HTTP/2、MQTT、AMQP、WebRTC、AI/LLM コンポーネント。sgcHTML は同じ高性能 HTTP/WebSocket サーバー上で配信されます。
詳しく見る →Delphi、C++ Builder、.NET 向けの QUIC および HTTP/3 クライアント・サーバーコンポーネントです。sgcHTML がレンダリングする UI を HTTP/3 で配信し、不安定なネットワークでもページの読み込みを低遅延化できます。
詳しく見る →エンタープライズ向けデジタル署名 — XAdES、PAdES、CAdES、ASiC に対応し、10 種類のキープロバイダーと EU 21 か国のプロファイルを備えています。
詳しく見る →Delphi と C++ Builder 向けの、ネイティブな Windows Hello、指紋認証、Windows Biometric Framework コンポーネント。
詳しく見る →