チャート & 可視化
Chart (Chart.js の折れ線、棒、円、ドーナツ、レーダー、極座標、バブル、散布図)、Gauge、インライン SVG の Diagram、Leaflet ベースの Map。
ファミリーを見る →
Web アプリ全体を Pascal で構築できます。サーバーサイド HTML コンポーネントが Bootstrap 5 のマークアップをレンダリングし、htmx がすべてのクリックを対話的に保ち、WebSocket が開いているページへライブ更新をプッシュします。npm も JavaScript のビルド工程も不要です。
uses
sgcHTML_Component_StatCard, sgcHTML_Component_Chart,
sgcHTML_Component_Grid, sgcHTMX_Engine_Server;
// 1. KPI row, three stat cards
FBody :=
TsgcHTMLComponent_StatCard.Build('Monthly Revenue', '$48,200',
scSuccess, stUp, '12.5%', 'kpiRevenue', sgBlueViolet) +
TsgcHTMLComponent_StatCard.Build('Orders Today', '1,284',
scSuccess, stUp, '4.1%', 'kpiOrders', sgBlueViolet) +
TsgcHTMLComponent_StatCard.Build('Live Users', '312',
scSuccess, stNeutral, 'live', 'kpiUsers', sgBlueViolet);
// 2. Chart
oChart.ChartType := ctBar;
oChart.AddLabel('Mon'); oChart.AddLabel('Tue'); oChart.AddLabel('Wed');
oChart.AddLabel('Thu'); oChart.AddLabel('Fri');
oChart.AddDataset('Orders', [42, 58, 51, 73, 66],
'#7C3AED', 'rgba(124,58,237,.25)', True);
FBody := FBody + oChart.HTML;
// 3. Grid, straight from a dataset
oGrid.ShowSort := True;
oGrid.ShowFilter := True;
oGrid.LoadFromDataSet(qryOrders);
FBody := FBody + oGrid.HTML;
oPage.BodyContent := FBody;
Response := oPage.GetHTML; // full Bootstrap page
// 4. Later, from any thread, push a live KPI
oHTMX.BroadcastFragment(
'<div id="kpiRevenue" hx-swap-oob="true">' +
CurrToStr(FRevenue) + '</div>');
左は Object Pascal、右はそのコードが配信するページで、ブラウザ上で実際に動作します。C++ Builder と C# でも同じコンポーネントを利用できます。
すべてのウィジェットはネイティブクラスです。プロパティを設定し、必要なら TDataSet にバインドして、HTML プロパティを読み取るだけ。Grid、DataTable、Chart、Select、TreeView、Scheduler、Timeline、Form はデータセットから直接読み込めます。
Chart (Chart.js の折れ線、棒、円、ドーナツ、レーダー、極座標、バブル、散布図)、Gauge、インライン SVG の Diagram、Leaflet ベースの Map。
ファミリーを見る →ソート、フィルター、CSV / PDF エクスポート、インライン編集、グループ化、仮想スクロールに対応した Grid。さらに DataTable、Calendar、Scheduler、Timeline、KanbanBoard、Gantt。
ファミリーを見る →バリデーション付きの Form、Edit、Memo、CheckBox、RadioGroup、Select、InputGroup、AutoComplete、DatePicker、FileUpload、RichEditor、Rating。
ファミリーを見る →NavBar、Sidebar、Breadcrumb、Tabs、Pagination、Toolbar、TreeView、Stepper、Dropdown、ButtonGroup、ListGroup、DashboardLayout、Site。
ファミリーを見る →Panel、トレンド矢印とグラデーションを備えた StatCard の KPI タイル、Accordion、Carousel、Image、Avatar、Video。
ファミリーを見る →Modal、Offcanvas、Popover、Toast、Snackbar、未読バッジ付きの通知センター、Spinner、Placeholder のスケルトン表示。
ファミリーを見る →ChatBox、テキスト / 画像 / ファイル / 音声 / 動画のメッセージに対応した Chat、プロバイダー選択、トークンストリーミング、RAG のソース引用を備えた AIChat。
ファミリーを見る →Login、Google / Facebook / Apple / GitHub / Microsoft 向けの OAuth ボタンを備えた SocialLogin、OAuthCallback、パスキー対応の WebAuthnLogin。
ファミリーを見る →TsgcHTMLEngine_Server がレンダリング済みのページを配信し、TsgcHTMX_Engine_Server が htmx リクエストを振り分けてフラグメントをプッシュします。PageBuilder、TemplateBootstrap、ThemeController、ThemeBuilder が、ドキュメントとライト / ダークのテーマを担当します。
Bootstrap 5.3 と htmx は組み込みで同梱されるため、実行時に CDN を呼び出すことはありません。組み込みの UI テキストは 17 言語に対応し、各コンポーネントは動的コンテンツを HTML、属性、JavaScript、URL の各文脈で既定でエスケープします。
クライアント側のアプリケーションが存在しないため、同期すべきクライアント側の状態もありません。ページを所有するのは Pascal または C# のコードです。最初のリクエストには HTML を返し、各操作にはフラグメントを返し、データが変わった瞬間に開いているすべてのブラウザへ新しいフラグメントをプッシュします。
Pascal または C# で TsgcHTMLComponent_* クラスからページを構築します。データセットにバインドして、行をそのままレンダリングさせることもできます。
TsgcHTMLEngine_Server が、自前の HTTP サーバーから完全な Bootstrap 5 ドキュメントと同梱アセットを返します。
htmx が操作を OnHTMXRequest に送ります。ハンドラーは変更されたフラグメントだけを返し、htmx がその場で差し替えます。
BroadcastFragment が、WebSocket 経由でアウトオブバンドのフラグメントを接続中のすべてのブラウザへ送信します。スレッドセーフなので、バックグラウンドのタイマーから直接呼び出せます。
ヘッダー、ナビゲーションメニュー、コンテンツ領域、フッターを、差し替え可能なレイアウトテンプレートにまとめます。レイアウト、テーマ、ブランドを設定し、メニューとコンテンツを追加して、HTML プロパティを読み取れば、完成したページを配信できます。
uses
sgcHTML_Enums, sgcHTML_Component_Site;
oSite := TsgcHTMLComponent_Site.Create(nil);
try
oSite.Layout := slTopNavSidebarLeft;
oSite.Theme.Preset := stpViolet;
oSite.Theme.Mode := stmLight;
oSite.Brand.Text := 'Acme';
oSite.AddMenu('Dashboard', '/', '📊').Active := True;
oSite.AddMenu('Reports', '/reports', '📈');
oSite.AddSection('Overview', '<p>Welcome back.</p>', 'overview');
oSite.AddContent('<div class="alert alert-info">All systems normal</div>');
oSite.Footer.Text := '© 2026 Acme';
Response := oSite.HTML; // the whole site, one component
finally
oSite.Free;
end;
using esegece.sgcWebSockets;
var site = new TsgcHTMLComponent_Site();
site.Layout = TsgcHTMLSiteLayout.slTopNavSidebarLeft;
site.Theme.Preset = TsgcHTMLSiteThemePreset.stpViolet;
site.Theme.Mode = TsgcHTMLSiteThemeMode.stmLight;
site.Brand.Text = "Acme";
site.AddMenu("Dashboard", "/", "📊").Active = true;
site.AddMenu("Reports", "/reports", "📈");
site.AddSection("Overview", "<p>Welcome back.</p>", "overview");
site.AddContent("<div class=\"alert alert-info\">All systems normal</div>");
site.Footer.Text = "© 2026 Acme";
string html = site.GetHTML(); // the whole site, one component
sgcHTML には sgcWebSockets の Professional または Enterprise が必要で、All-Access バンドルにも含まれています。
sgcHTML のページにはデータが必要で、そのデータはたいてい API から来ます。sgcOpenAPI は Delphi と C++ Builder 向けの 1 つのバンドル製品で、OpenAPI 3.x パーサー、ネイティブ Pascal SDK ジェネレーター、OpenAPI サーバーコンポーネント、そしてすぐに使えるビルド済みクラウド SDK ライブラリを提供します。
JSON でも YAML でも、任意の OpenAPI 3.x ドキュメントを、コードからたどれる強く型付けされたオブジェクトモデルとして読み込めます。
パーサー →その仕様から、型付きのリクエスト / レスポンスクラスを備えた、そのままコンパイルできるネイティブ Delphi / C++ Builder クライアントを生成します。
ジェネレーターの機能 →自分のエンドポイントを openapi.json / openapi.yaml として公開し、仕様からエンドポイントを構築し、リクエストとレスポンスを仕様に照らして検証できます。
サーバー →Amazon AWS 280 以上、Microsoft Azure 650 以上、Google Cloud 250 以上、Microsoft Graph 15 以上のサービスを、すでに生成済みの状態で提供します。
API を見る →sgcHTML は UI 層です。ソケットから署名まで、スタックの残りがその下を支えます。
WebSocket、HTTP/2、HTTP/3、MQTT、AMQP、WebRTC、AI、そして 30 を超える API 統合。sgcHTML が動作する HTTP / WebSocket サーバーを提供します。
詳しく見る →Delphi、C++ Builder、.NET 向けのサーバーサイド HTML / UI コンポーネント。Bootstrap 5 のマークアップ、htmx による対話性、リアルタイム更新。
詳しく見る →OpenAPI 3.x パーサー、Pascal SDK ジェネレーター、OpenAPI サーバーコンポーネント、そして 1,195 以上のビルド済みクラウド SDK。
詳しく見る →ドキュメント署名 (XAdES、PAdES、CAdES、ASiC) とコード署名 (Authenticode、ClickOnce、NuGet、VSIX)。10 種類のキープロバイダーと 21 の EU 各国プロファイルに対応します。
詳しく見る →Windows Biometric Framework による Windows Hello、指紋センサー、顔認識。Delphi と C++ Builder に対応します。
詳しく見る →世界中でリアルタイムアプリケーションを構築する Delphi、C++ Builder、Lazarus、.NET 開発者から信頼されています。
sgcWebSockets ライブラリはとても便利でセットアップも簡単です。これからも頑張ってください!
sgcWebSockets は素晴らしく、サポートも最高です!
ご支援とサポートに本当に感謝しています。コンポーネントが大好きです。