Delphi、C++ Builder、.NET から直接、モダンで完全な Web UI を構築できます。sgcHTML はサーバーサイドのコンポーネントフレームワークで、チャート、グリッド、フォーム、ダッシュボード、チャットなど 93 種類の既製のデータアウェアなウィジェット — を備えています。これらは TDataSet に直接バインドし、Bootstrap 5 マークアップとしてレンダリングされ、htmx を通じてインタラクティブな状態を保ちます。あなたが Object Pascal や C# を書けば、sgcHTML が HTML、CSS、JavaScript を生成します。
サーバーサイドコンポーネント、Bootstrap 5 のマークアップ、htmx を使って、Delphi から完全な Web UI を構築できます。JavaScript のビルド工程は必要ありません。
以下の画面はすべて、sgcHTML を通じて自らの HTML を配信する Delphi アプリケーションです。JavaScript のビルド工程も、別のフロントエンドプロジェクトも必要ありません。各ログインページにあらかじめ入力された認証情報でサインインしてください。
Gantt プランナー、Chart.js のシリーズ、ゲージ、スパークライン、ツリーマップ、ヒートマップは、すべてあなたの Pascal または C# のコードから生成されます。データを指定すれば、sgcHTML がマークアップとクライアント側の処理を出力します。
ユーザーがディメンション、メジャー、集計方法を選ぶと、クロス集計が TFDQuery から再構築されます。間に REST 層はなく、ページがインプロセスでデータベースを直接読み取ります。
すべてのコンポーネントはレスポンシブな Bootstrap 5 マークアップを出力します。倉庫端末のレイアウトも、モバイル専用の別コードベースではなく、同じコンポーネントライブラリをスマートフォンの幅で表示したものです。
どのクリップも、これらのアプリケーションが実際に動作している画面を録画したもので、ナレーションと字幕が付いています。再生ボタンを押すまで、動画は一切ダウンロードされません。
7.7 MB の Delphi 実行ファイルだけで、DLL を一切使わずに、SQLite 上の完全な Web ERP を提供します。
グリッドやチャートから Kanban ボード、署名パッドまで、93 種類のコンポーネントを一巡します。
並べ替え、フィルター、ページング、インライン編集、選択、データセット連携を、すべて Pascal から操作します。
フラグメントの差し替えがページ再読み込みをどう置き換えるのか、Delphi のコードではどう書くのかを紹介します。
サーバーのメトリクスを out-of-band フラグメントとして送り込み、カードとチャートを変化に合わせて更新します。
POS デモがデータベースをインプロセスで読み取り、間に JSON API を挟みません。
ダッシュボード、ピボットビルダー、27,000 件の注文明細を対象にしたエクスプローラービューです。
倉庫管理デモで、画面ごとに使用しているコンポーネントを数え上げていきます。
同じアプリケーションをデスクトップのボードとスマートフォンで動かし、状態を同期させます。
1 つのバイナリ、1 つのデータベースで、テナントごとの厳密な分離を主張ではなく実際に示します。
ログインの内側で、注文、プロフィール、サポートチケットをセルフサービスで扱えます。
入力に応じた検索、インラインでの追加と編集、削除を、htmx フラグメントとして差し替えます。
ユーザー登録、チケットのやり取り、ステータス変更まで、すべてサーバー側でレンダリングします。
ショップアシスタントが、答えをでっち上げるのではなく商品カタログをもとに回答します。
ナビゲーション、サイドバー、ページ構成を Site コンポーネントで組み立てます。
既存の Delphi WebBroker アプリケーションに sgcHTML の出力を追加します。
すでにあるサービス層から、最新のフロントエンドを配信します。
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 行で配置したいときは既製のコンポーネントを使い、マークアップを完全に制御したいときはノードレイヤーまで掘り下げます。
93 種類の 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 コンポーネント。
詳しく見る →Delphi と C++ Builder 向けのフル機能 WebRTC メディアエンジンです。音声・動画通話、データチャネル、画面共有に対応し、STUN/TURN/ICE を内蔵しています。sgcWebSockets Enterprise のアドオンです。
詳しく見る →Delphi と C++ Builder 向けの 15 種類の AI / LLM / MCP コンポーネント。1 つのチャットコンポーネントから OpenAI、Anthropic、Gemini、DeepSeek、Ollama、Grok、Mistral を利用できます。単体で動作し、sgcWebSockets Core のランタイムを同梱しています。
詳しく見る →Delphi と C++ Builder 向けの MQTT 3.1.1 / 5.0、AMQP 0.9.1、AMQP 1.0、Apache Kafka、STOMP クライアントコンポーネント。単体で動作し、sgcWebSockets Core のランタイムを同梱しています。
詳しく見る →Delphi と C++ Builder 向けの汎用暗号ライブラリです。対称・非対称暗号、ハッシュ、鍵管理に対応します。sgcWebSockets Standard 以上に無料で同梱、または単体でも利用できます。
詳しく見る →WhatsApp Business Cloud API と Telegram TDLib のクライアント。単体で動作し、sgcWebSockets Core のランタイムを同梱しています。
詳しく見る →