新登場: sgcCustomization HTML。お客様の Web アプリケーションを私たちが構築します。 必要なアプリケーションを説明していただければ、私たちのチームが sgcHTML + sgcWebSockets で構築します。パッケージは €149 からです。
sgcCustomization HTML を見る

sgcHTML

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

93 UI コンポーネント
データアウェア / TDataSet
Bootstrap 5 + htmx
Delphi / C++ Builder / .NET
JavaScript は不要
Delphi 向け sgcHTML で構築した ERP ダッシュボードをブラウザーウィンドウに表示。KPI カード、売上の棒グラフ、最近の請求書のグリッド。

はじめに →

sgcHTML を 2 分で見る

サーバーサイドコンポーネント、Bootstrap 5 のマークアップ、htmx を使って、Delphi から完全な Web UI を構築できます。JavaScript のビルド工程は必要ありません。

今まさに動いている、9 つの実アプリケーション

以下の画面はすべて、sgcHTML を通じて自らの HTML を配信する Delphi アプリケーションです。JavaScript のビルド工程も、別のフロントエンドプロジェクトも必要ありません。各ログインページにあらかじめ入力された認証情報でサインインしてください。

ERP: sgcHTML で構築した Delphi の Web アプリケーションが、ブラウザーで動作している様子。

ERP

顧客、商品、仕入先、請求の管理に加え、ダッシュボードのチャート、ロールベースの管理機能、passkey サインインを備えています。

ライブデモを開く →
レポート & BI: sgcHTML で構築した Delphi の Web アプリケーションが、ブラウザーで動作している様子。

レポート & BI

ダッシュボード、レポートカタログ、アドホックなピボットビルダー、27,000 件の受注明細を対象とした探索ビュー。すべてインプロセスで問い合わせます。

ライブデモを開く →
POS レジ: sgcHTML で構築した Delphi の Web アプリケーションが、ブラウザーで動作している様子。

POS レジ

カテゴリー、プロモーション、会計保留、シフト管理、リアルタイムのカスタマーディスプレイを備えたタッチ操作のレジです。

ライブデモを開く →
倉庫管理(WMS): sgcHTML で構築した Delphi の Web アプリケーションが、ブラウザーで動作している様子。

倉庫管理(WMS)

入庫、出庫、在庫、移動、循環棚卸に加え、スキャナー向けのハンディターミナル用レイアウトも備えています。

ライブデモを開く →
フィールドサービス: sgcHTML で構築した Delphi の Web アプリケーションが、ブラウザーで動作している様子。

フィールドサービス

技術者と作業を割り当てるためのディスパッチボード、Gantt プランナー、技術者のリアルタイム地図。

ライブデモを開く →
管理コンソール: sgcHTML で構築した Delphi の Web アプリケーションが、ブラウザーで動作している様子。

管理コンソール

インクリメンタル検索、インラインでの追加・編集・削除。すべて htmx のフラグメントとして差し替えられ、ページの再読み込みはありません。

ライブデモを開く →
ライブモニター: sgcHTML で構築した Delphi の Web アプリケーションが、ブラウザーで動作している様子。

ライブモニター

サーバーのメトリクスを WebSocket で out-of-band な htmx フラグメントへ送り、KPI カードとチャートをリアルタイムに更新します。

ライブデモを開く →
カスタマーポータル: sgcHTML で構築した Delphi の Web アプリケーションが、ブラウザーで動作している様子。

カスタマーポータル

ログインの内側で、顧客が自分の注文、プロフィール、サポートチケットを確認できるセルフサービス領域です。

ライブデモを開く →
マルチテナント SaaS: sgcHTML で構築した Delphi の Web アプリケーションが、ブラウザーで動作している様子。

マルチテナント SaaS

公開のマーケティングサイト、料金ページ、サインアップの流れの背後に、テナントごとに分離されたコントロールプレーンを備えています。

ライブデモを開く →
Gantt、チャート、地図をサーバーサイドで描画: sgcHTML で構築した Delphi の Web アプリケーションが、ブラウザーで動作している様子。

Gantt、チャート、地図をサーバーサイドで描画

Gantt プランナー、Chart.js のシリーズ、ゲージ、スパークライン、ツリーマップ、ヒートマップは、すべてあなたの Pascal または C# のコードから生成されます。データを指定すれば、sgcHTML がマークアップとクライアント側の処理を出力します。

ライブなデータセットに対するアドホックなピボットビルダー: sgcHTML で構築した Delphi の Web アプリケーションが、ブラウザーで動作している様子。

ライブなデータセットに対するアドホックなピボットビルダー

ユーザーがディメンション、メジャー、集計方法を選ぶと、クロス集計が TFDQuery から再構築されます。間に REST 層はなく、ページがインプロセスでデータベースを直接読み取ります。

同じコンポーネントを、ハンディスキャナーでも: sgcHTML で構築した Delphi の Web アプリケーションが、ブラウザーで動作している様子。

同じコンポーネントを、ハンディスキャナーでも

すべてのコンポーネントはレスポンシブな Bootstrap 5 マークアップを出力します。倉庫端末のレイアウトも、モバイル専用の別コードベースではなく、同じコンポーネントライブラリをスマートフォンの幅で表示したものです。

17 本のショート動画、スライドは一切なし

どのクリップも、これらのアプリケーションが実際に動作している画面を録画したもので、ナレーションと字幕が付いています。再生ボタンを押すまで、動画は一切ダウンロードされません。

1 つの exe で動く完全な ERP

7.7 MB の Delphi 実行ファイルだけで、DLL を一切使わずに、SQLite 上の完全な Web ERP を提供します。

コンポーネントカタログ

グリッドやチャートから Kanban ボード、署名パッドまで、93 種類のコンポーネントを一巡します。

グリッドを 9 つの動作で掘り下げる

並べ替え、フィルター、ページング、インライン編集、選択、データセット連携を、すべて Pascal から操作します。

htmx を手短に

フラグメントの差し替えがページ再読み込みをどう置き換えるのか、Delphi のコードではどう書くのかを紹介します。

WebSocket でリアルタイム更新

サーバーのメトリクスを out-of-band フラグメントとして送り込み、カードとチャートを変化に合わせて更新します。

REST 層を持たないレジ

POS デモがデータベースをインプロセスで読み取り、間に JSON API を挟みません。

データから直接レポート

ダッシュボード、ピボットビルダー、27,000 件の注文明細を対象にしたエクスプローラービューです。

1 つのアプリに 50 のコンポーネント

倉庫管理デモで、画面ごとに使用しているコンポーネントを数え上げていきます。

配車担当と技術者を並べて

同じアプリケーションをデスクトップのボードとスマートフォンで動かし、状態を同期させます。

マルチテナント分離を実証

1 つのバイナリ、1 つのデータベースで、テナントごとの厳密な分離を主張ではなく実際に示します。

顧客ポータル

ログインの内側で、注文、プロフィール、サポートチケットをセルフサービスで扱えます。

再読み込みなしのライブ CRUD

入力に応じた検索、インラインでの追加と編集、削除を、htmx フラグメントとして差し替えます。

チケット運用付きのヘルプデスク

ユーザー登録、チケットのやり取り、ステータス変更まで、すべてサーバー側でレンダリングします。

自社データに基づく AI アシスタント

ショップアシスタントが、答えをでっち上げるのではなく商品カタログをもとに回答します。

サイト全体のレイアウト

ナビゲーション、サイドバー、ページ構成を Site コンポーネントで組み立てます。

WebBroker への組み込み

既存の Delphi WebBroker アプリケーションに sgcHTML の出力を追加します。

WebBroker と DataSnap の組み合わせ

すでにあるサービス層から、最新のフロントエンドを配信します。

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

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

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

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

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

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

WebBroker と DataSnap でのホスティング

sgcHTML は sgcWebSockets サーバーに縛られていません。コンポーネントで構築した同じページを、TsgcHTMX_Engine_Server_WebBroker を介して任意の Embarcadero WebBroker アプリケーションから配信したり、REST エンドポイントと同じポート上でライブな WebSocket プッシュを備えた DataSnap サーバーから配信したりできます。

WebBroker と DataSnap でのホスティング →

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 に直接バインドできます。コンポーネントをクエリに向ければ、その行がレンダリングされます。

17 言語対応のローカライズ UI

sgcHTML は、17 言語の組み込み UI テキスト(ボタン、ラベル、バリデーションメッセージ)を同梱しています。対応言語は、英語、スペイン語、フランス語、ドイツ語、ポルトガル語、イタリア語、オランダ語、スウェーデン語、ノルウェー語、ポーランド語、チェコ語、トルコ語、ロシア語、中国語、日本語、韓国語、アラビア語です。sgcHTMLSetLanguage で 1 つを選べば、コンポーネントは訪問者の言語で、CJK、キリル文字、アラビア文字を含む正しいネイティブ文字を使ってレンダリングされます。

デフォルトで安全な出力

すべてのコンポーネントは、動的なテキスト、属性、インライン JavaScript、URL を、自動的な HTML・属性・JavaScript・URL エンコードと URL サニタイズ(sgcHTMLEncodesgcHTMLAttrEncodesgcJSEncodesgcHTMLSanitizeURL)を通して処理します。そのため、ユーザーデータがそのコンテキストから抜け出してスクリプトを注入することはできません。XSS とインジェクションからの保護が、追加の作業なしで有効になります。

93 種類のコンポーネント、9 つのファミリー

ナビゲーション要素からデータグリッド、チャート、フォーム、オーバーレイ、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 — ダイアログとステータス表示です。

コンポーネントを見る →

チャット & AI

ChatBox、Chat(WhatsApp スタイル)、プロバイダー選択・トークンストリーミング・RAG ソース引用に対応した AIChat、ライブのオンラインステータスを示す Presence。

コンポーネントを見る →

認証

Login、SocialLogin(OAuth)、OAuthCallback、WebAuthnLogin(パスキー)、UserManagement、RolesPermissions — 既製のサインインフローと管理画面です。

コンポーネントを見る →

インフラ & エンジン

EngineServer、HTMXEngine、PageBuilder、TemplateBootstrap、ThemeController、ThemeBuilder、HTMXFragment、HTMXRouter — ページを配信し、ライブな状態を保つ非ビジュアルな要素です。

コンポーネントを見る →

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

数行で作る 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 行で配置したいときは既製のコンポーネントを使い、マークアップを完全に制御したいときはノードレイヤーまで掘り下げます。

コンポーネントレイヤー

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

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

TsgcHTMLContainer(自己終了タグ用の Void フラグ付き)、TsgcHTMLCardTsgcHTMLFormTsgcHTMLFieldTsgcHTMLButtonTsgcHTMLTable といったプリミティブを組み合わせて任意のレイアウトを構成し、TsgcHTMLTemplate_Bootstrap でレンダリングします。ノードセットには、TsgcHTMLModalTsgcHTMLOffcanvasTsgcHTMLAccordionTsgcHTMLCarouselTsgcHTMLToastTsgcHTMLProgressTsgcHTMLSpinnerTsgcHTMLListGroupNodeTsgcHTMLInputGroupTsgcHTMLButtonGroupNodeTsgcHTMLRadioTsgcHTMLBreadcrumbTsgcHTMLNavbarNodeTsgcHTMLImage といった Bootstrap の構成要素も含まれます。

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

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

ご自身で構築したくないですか?

sgcCustomization HTML では、必要なアプリケーションを説明していただくと、eSeGeCe チームが sgcHTML + sgcWebSockets のコンポーネントでそれを構築します。€149 からの 3 つの一回限りのパッケージがあり、ライセンスされたコンポーネントでコンパイル、拡張、再スタイルできる完全なプロジェクトを受け取れます。

別の Web フレームワークからの移行ですか?

IntraWeb、uniGUI、TMS WEB Core、Elevate Web Builder、D2Bridge で構築した Web アプリケーションをすでにお持ちですか?ステップバイステップのガイドが、各フレームワークのコンセプトマッピングとともに、sgcHTML への移行を案内します。私たちのチームに移行の計画や実施を手伝ってほしい場合のための、移行支援フォームもあります。

3,000+開発者
20+
761+コンポーネント
30+API 連携
5プラットフォーム
30日間返金保証ご満足いただけない場合は、ご購入から30日以内に全額返金をリクエストできます。 返金ポリシーを見る

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

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

eSeGeCe のその他の製品

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

sgcWebSockets

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

詳しく見る →

sgcQUIC

Delphi、C++ Builder、.NET 向けの QUIC および HTTP/3 クライアント・サーバーコンポーネントです。sgcHTML がレンダリングする UI を HTTP/3 で配信し、不安定なネットワークでもページの読み込みを低遅延化できます。

詳しく見る →

sgcSign

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

詳しく見る →

sgcOpenAPI

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

詳しく見る →

sgcBiometrics

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

詳しく見る →

sgcIndy

モダンな TLS、IPv6、HTTP/2 に対応した更新版 Indy TCP/IP コンポーネント。Delphi 7 から 13 まで対応します。

詳しく見る →

sgcWebRTC

Delphi と C++ Builder 向けのフル機能 WebRTC メディアエンジンです。音声・動画通話、データチャネル、画面共有に対応し、STUN/TURN/ICE を内蔵しています。sgcWebSockets Enterprise のアドオンです。

詳しく見る →

sgcAI

Delphi と C++ Builder 向けの 15 種類の AI / LLM / MCP コンポーネント。1 つのチャットコンポーネントから OpenAI、Anthropic、Gemini、DeepSeek、Ollama、Grok、Mistral を利用できます。単体で動作し、sgcWebSockets Core のランタイムを同梱しています。

詳しく見る →

sgcMQ

Delphi と C++ Builder 向けの MQTT 3.1.1 / 5.0、AMQP 0.9.1、AMQP 1.0、Apache Kafka、STOMP クライアントコンポーネント。単体で動作し、sgcWebSockets Core のランタイムを同梱しています。

詳しく見る →

sgcCrypto

Delphi と C++ Builder 向けの汎用暗号ライブラリです。対称・非対称暗号、ハッシュ、鍵管理に対応します。sgcWebSockets Standard 以上に無料で同梱、または単体でも利用できます。

詳しく見る →

sgcSocial

WhatsApp Business Cloud API と Telegram TDLib のクライアント。単体で動作し、sgcWebSockets Core のランタイムを同梱しています。

詳しく見る →