新登場: sgcCustomization HTML。お客様の Web アプリケーションを私たちが構築します。 必要なアプリケーションを説明していただければ、私たちのチームが sgcHTML + sgcWebSockets で構築します。パッケージは €149 からです。
sgcCustomization HTML を見る
Delphi 7 から 13、C++ Builder & .NET 110 種類のコンポーネント、10 のファミリー

sgcHTML: Delphi、C++ Builder、.NET 向け Web UI コンポーネント

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

DelphiC++ Builder.NETBootstrap 5 + htmxデータアウェア / TDataSetJavaScript 不要

ご自身で構築したくない場合は、私たちが代わりに構築します →

Delphi 向け sgcHTML で構築した ERP ダッシュボードをブラウザーウィンドウに表示。KPI カード、売上の棒グラフ、最近の請求書のグリッド。

はじめに →

sgcHTML だけで構築した 1 つのアプリケーション

顧客、商品、仕入先、請求の管理に加え、ダッシュボードのチャート、ロールベースの管理機能、パスキーによるサインインを備えています。7.7 MB の Delphi 実行ファイル 1 つだけで、DLL は不要。SQLite を使った完全な Web ERP を提供します。

1 つの exe で動く完全な ERP

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

顧客

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

請求書

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

レポート

110 種類のコンポーネント、10 のファミリー

ナビゲーションの外枠からデータグリッド、チャート、フォーム、オーバーレイ、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。すぐに使えるサインインの流れと管理画面です。

コンポーネントを見る →

計器 & SCADA

Gauge、LinearGauge、LED、LEDBar、SegmentDisplay、Odometer、AnalogClock、Compass、VUMeter、Knob、ToggleSwitch、PushButton、NumericStepper、StripChart、Oscilloscope、Annunciator、SCADAPanel。サーバーがライブに保つ制御室パネルで、MQTT バインディングに対応します。

コンポーネントを見る →

インフラ & エンジン

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

コンポーネントを見る →

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

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

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

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

すべてのウィジェットはクラスです。TsgcHTMLComponent_Chart、TsgcHTMLComponent_Grid、TsgcHTMLComponent_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 をプッシュできます。ダッシュボード、モニター、チャットウィンドウは、データが変わった瞬間に、サーバー主導でポーリングなしに更新されます。プロキシが WebSocket を遮断する環境では、同じページが代わりにサーバー送信イベントで更新を受け取れます。

テーマ & テンプレート

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

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

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

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

sgcHTML は、17 言語の組み込み UI テキスト(ボタン、ラベル、バリデーションメッセージ)を同梱しています。対応言語は、英語、スペイン語、フランス語、ドイツ語、ポルトガル語、イタリア語、オランダ語、スウェーデン語、ノルウェー語、ポーランド語、チェコ語、トルコ語、ロシア語、中国語、日本語、韓国語、アラビア語です。sgcHTMLSetLanguage で 1 つを選べば、コンポーネントは訪問者の言語で、CJK、キリル文字、アラビア文字を含む正しいネイティブ文字を使ってレンダリングされます。アラビア語やヘブライ語のような右から左の言語では、ページ全体が自動的に反転します。dir="rtl" でレンダリングされ、Bootstrap の RTL スタイルシートが読み込まれ、サイドバー、グリッド、ステッパー、チャットなどのコンポーネントがミラーされます。コードの変更は不要です。

デフォルトで安全な出力

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

右から左へ書く言語:アラビア語とヘブライ語

アラビア語とヘブライ語では、ページ全体が自動的に右から左へ切り替わります。dir="rtl"、Bootstrap の RTL スタイルシート、左右反転したコンポーネントが適用され、コードの変更は不要です。

右から左(RTL)

英語、アラビア語、ヘブライ語で表示できる 1 つのページです。アラビア語またはヘブライ語を選ぶと、サイドバーからグリッドまでレイアウト全体が右から左に切り替わります。コードの変更は不要で、言語を選ぶだけです。

組み込みの UI テキスト(ボタン、ラベル、検証メッセージ)は、英語、スペイン語、フランス語、ドイツ語、ポルトガル語、イタリア語、オランダ語、スウェーデン語、ノルウェー語、ポーランド語、チェコ語、トルコ語、ロシア語、中国語、日本語、韓国語、アラビア語に対応しています。sgcHTMLSetLanguage で 1 つ選べます。

ライブデモを開く →

ローカライズのヘルプトピックを読む

sgcHTML の新機能

追加された機能はすべて、使用するまでオフになっているため、使用しないページは以前とまったく同じようにレンダリングされます。完全な一覧は 機能マトリックス にあります。

ChatGPT と Claude の中に表示されるページ

MCP ツールがテキストではなくページで応答します。ページは、通常の Web ページに使うのと同じコンポーネントで構築され、ChatGPT、Claude、VS Code がレンダリングします。Enterprise または All-Access エディション、あるいは sgcAI パックが必要です。MCPApp を参照してください。

AI ページジェネレーター

ページを説明するか、スクリーンショットをデザイナーに渡すと、独自のコンポーネントでページが構築されます。レジストリから構築したスキーマに基づいて応答するため、提示していないクラスを指定することはできず、承認するまで何も適用されません。Enterprise または All-Access エディション、あるいは sgcAI パックの AI ユニットが必要です。ガイドを読む。

1 つのコンポーネントとしての CRUD

1 つのテーブルの一覧、検索、ページング、フォーム、削除、書き込み処理を、データセットまたは独自の SQL に対して 1 つのコンポーネントで提供します。IDE のウィザードで作成できます。CRUD を参照してください。

グリッドに質問する

自然言語の質問が、フィルター、並べ替え、グループ化、ハイライトになり、何かを適用する前に、独自の列に対して検証されます。組み込みのパーサーにより API キーなしで動作し、エディションに AI ユニットが含まれている場合は 7 つのプロバイダーで動作します。AIAssistant を参照してください。

閉じたブラウザーにも届ける

WebSocket をブロックするネットワーク向けの Server-Sent Events、起動していないブラウザー向けの Web Push、通知インボックス、設定テーブルです。Web Push には Enterprise または All-Access エディションが必要です。WebPush を参照してください。

セッション、ルーティング、テスト

Cookie セッション、CSRF トークン、ログインのレート制限、ロールによるルート保護。ルートのパスパラメーターとメソッドフィルター、ページテンプレートからのシングルページナビゲーション、生成したマークアップをテストするためのヘルパー。Auth を参照してください。

ASP.NET Core Razor Tag Helpers

TelerikやDevExpressのやり方でASP.NET Core MVCやRazor Pagesアプリケーションを構築する場合、sgcHTMLが同じ流儀で使えるようになりました。<sgc-grid>、<sgc-form>、<sgc-dialog>、<sgc-chart>などのTag Helperと、Html.Sgc()配下のそれに対応するfluent APIは、サーバー側でBootstrap 5のHTMLを描画し、htmxでコントローラーと通信します。習得が必要なJavaScriptフレームワークも、記述が必要なJSONデータソースもありません。Razorレイヤーはesegece.sgcHTML.AspNetCore NuGetパッケージに含まれ、Communityエディションにも同梱されています。

IQueryable上のグリッド

<sgc-grid> は、ページング、並べ替え、フィルター(テキストと範囲)、検索、XLSXとPDFへのエクスポートをサーバー側で行います。コントローラーは this.SgcGrid(request, query) を返すだけで、EF Coreがすべての操作をパラメーター化されたSQLに変換します。push-url はページ、並べ替え、フィルターをアドレスバーに保持するため、再読み込みや戻るボタンも正しく動作します。

asp-forでバインドするフォーム

<sgc-textbox>、<sgc-select>、<sgc-datepicker>、<sgc-checkbox>、<sgc-autocomplete> は asp-for でモデルにバインドされ、各入力の下に ModelState のエラーを表示します。<sgc-form hx="true"> はhtmxでPOSTし、this.SgcRedirect(url) は保存が成功した後に画面遷移します。

ダイアログで編集

sgc-dialog="name" を持つ要素は、そのURLを <sgc-dialog> に読み込みます。POSTが成功した後、this.SgcCloseDialog("edit-order", refresh: "orders") がダイアログを閉じてグリッドを再読み込みします。自前のスクリプトなしで実現できるポップアップ編集のパターンです。

SignalRなしでライブ更新されるチャート

<sgc-chart> は静的データの描画、refresh-every="5s" によるアクションのポーリング、または live="true" に対応します。バックグラウンドサービスが hub.BroadcastChartAsync(...) を呼び出すと、開いているすべてのブラウザーがsgcHTMLのWebSocket経由でチャートを再描画します。TelerikやDevExpressのチャートでサーバープッシュを行うにはSignalRの配線が必要ですが、sgcHTMLには標準で組み込まれています。

@* Views/Orders/Index.cshtml, page 1 renders inline from the model *@
@model IQueryable<OrderRow>

<sgc-grid name="orders" key="Id" items="Model"
          asp-action="Read" asp-export-action="Export" export="xlsx,pdf"
          page-size="15" sortable="true" filterable="true"
          searchable="true" push-url="true">
    <sgc-column field="Reference" searchable="true" />
    <sgc-column field="Customer" searchable="true" />
    <sgc-column field="OrderDate" title="Date" format="{0:yyyy-MM-dd}" filter="range" />
    <sgc-column field="Total" format="{0:N2}" align="right" filter="range" />
    <sgc-column field="Paid" />
</sgc-grid>
// Program.cs
builder.Services.AddControllersWithViews();
builder.Services.AddSgcHtml(o => o.ServeRootPage = false);  // the MVC app owns "/"
builder.Services.AddSgcHtmlRazor();   // SgcDataRequest binder, grid state, /sgcHTML.css
// ...
app.UseWebSockets();   // before UseSgcHtml, needed by live charts
app.UseSgcHtml();
app.MapDefaultControllerRoute();

// Controllers/OrdersController.cs
public class OrdersController : Controller
{
    private readonly ShopDb FDb;

    public OrdersController(ShopDb db) { FDb = db; }

    // An IQueryable projection: EF Core turns paging, sort and filters into SQL.
    private IQueryable<OrderRow> Rows() =>
        FDb.Orders.AsNoTracking().Select(o => new OrderRow
        {
            Id = o.Id, Reference = o.Reference, Customer = o.Customer.Name,
            OrderDate = o.OrderDate, Total = o.Total, Paid = o.Paid
        });

    public IActionResult Index() => View(Rows());

    // Every page, sort, filter and search click of the grid lands here.
    public IActionResult Read(SgcDataRequest request) => this.SgcGrid(request, Rows());

    // The toolbar export links: the filtered and sorted rows as XLSX or PDF.
    public IActionResult Export(SgcDataRequest request) =>
        this.SgcGridExport(request, Rows(), "orders");
}
@* The same grid with the fluent builder, the twin of Html.Kendo().Grid<T>() *@
@(Html.Sgc().Grid<OrderRow>("orders")
    .Key(o => o.Id)
    .Columns(c =>
    {
        c.Bound(o => o.Reference).Searchable();
        c.Bound(o => o.Customer).Searchable();
        c.Bound(o => o.OrderDate).Title("Date").Format("{0:yyyy-MM-dd}").Filter(SgcGridFilterKind.Range);
        c.Bound(o => o.Total).Format("{0:N2}").Align("right").Filter(SgcGridFilterKind.Range);
        c.Bound(o => o.Paid);
    })
    .Items(Model)
    .Read("Read")
    .Export(SgcExportFormat.Xlsx, SgcExportFormat.Pdf)
    .ExportAction("Export")
    .Pageable(15)
    .Sortable().Filterable().Searchable().PushUrl())
@* _Layout.cshtml: live="ws" opens the WebSocket that live charts listen to *@
<sgc-scripts live="ws" />

@* The view *@
<sgc-chart name="live-orders" type="line" height="260" live="true">
    <sgc-series name="Orders / s" data="new double[] { 0 }" color="#dc3545" />
</sgc-chart>
// builder.Services.AddHostedService<LiveSalesFeed>();
public sealed class LiveSalesFeed : BackgroundService
{
    private readonly ISgcHtmlHub FHub;
    private readonly Queue<string> FLabels = new Queue<string>();
    private readonly Queue<double> FValues = new Queue<double>();

    public LiveSalesFeed(ISgcHtmlHub hub) { FHub = hub; }

    protected override async Task ExecuteAsync(CancellationToken stoppingToken)
    {
        var oRandom = new Random();
        while (!stoppingToken.IsCancellationRequested)
        {
            await Task.Delay(1000, stoppingToken);
            FLabels.Enqueue(DateTime.Now.ToString("HH:mm:ss"));
            FValues.Enqueue(oRandom.Next(0, 20));
            if (FValues.Count > 20) { FLabels.Dequeue(); FValues.Dequeue(); }

            // One WebSocket message redraws the chart in every open browser.
            await FHub.BroadcastChartAsync("live-orders", FLabels.ToArray(),
                new SgcChartSeries("Orders / s", FValues.ToArray(), "#dc3545"));
        }
    }
}

Telerik UI for ASP.NET CoreやDevExpressからの移行ですか? [DataSourceRequest] は SgcDataRequest に、ToDataSourceResult は this.SgcGrid(request, query)(データだけが必要な場合は query.ToSgcDataResult(request))に、Html.Kendo().TextBoxFor(m => m.X) は Html.Sgc().TextBoxFor(m => m.X) になります。実行可能なMVCデモ 22.RazorMvc は、Telerikの注文サンプルをEF Core上でsgcHTMLを使って書き直したものです。

数行で作る 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
}

sgcHTML を 2 分で見る

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

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

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

コンポーネントレイヤー

110 種類の 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 はアプリ全体のライト/ダークテーマを管理します。

sgcHTML が動作する環境

ターゲット詳細
Delphi 7 から 13Delphi 7、2007、2009、2010、XE から XE8、10 Seattle から 10.4 Sydney、11 Alexandria、12 Athens、13 Florence。Windows、macOS、Linux のすべてに対応しています。
C++ BuilderC++ Builder(対応バージョン)
.NET.NET 8、.NET 9、.NET 10、.NET Standard 2.0。Windows、Linux、macOS のホスト上で動作し、ASP.NET Core Razor Tag Helpers も利用できます。
ホスティングsgcWebSockets の HTTP サーバー、任意の WebBroker アプリケーション、DataSnap サーバー、または ASP.NET Core。
ブラウザーBootstrap 5 と htmx のアセットを組み込み済みで、実行時に CDN は不要です。

sgcHTML はサーバーサイドのライブラリです。スマートフォンはネットワーク経由で HTML を受け取るため、Android と iOS はビルドの対象ではありません。

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

以下の画面はすべて、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 アプリケーションを、レイアウト全体を反転させたアラビア語で表示している様子。

右から左(RTL)

英語、アラビア語、ヘブライ語で表示できる 1 つのページです。アラビア語またはヘブライ語を選ぶと、サイドバーからグリッドまでレイアウト全体が右から左に切り替わります。コードの変更は不要で、言語を選ぶだけです。

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

カスタマーポータル

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

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

マルチテナント SaaS

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

ライブデモを開く →

その他のオンラインデモ: AI、計器、SCADA

AI データパック

データグリッド、ピボットテーブル、フォームを自然言語で操作できます。26,000 件の注文明細に対するフィルター、並べ替え、グルーピング、AI 列アシスタント、スマートペーストを備え、API キーなしで動作します。

ライブデモを開く →

ショップアシスタント

sgcHTML コンポーネントだけで構築されたオンラインストアで、商品カタログに基づいて回答するフローティングのチャットアシスタントを備えています。オンライン版は LLM の API キーなしで動作します。

ライブデモを開く →

MCP アプリ

ChatGPT、Claude、VS Code の内部でレンダリングされる Delphi アプリケーションです。MCP ツールが sgcHTML のページを返し、ホスト側で表示され、そこでもボタンは正しく機能し続けます。

ライブデモを開く →

計器

シミュレートされたボイラーループの制御室です。ゲージ、ディスプレイ、操作パネル、ストリップチャート、オシロスコープをサーバーがライブに保ち、ポーリングは行いません。

ライブデモを開く →

SCADA / IoT

タンク、バルブ、ポンプとアニメーションする流れを備えた冷却水プラントのミミック画面に加え、ゲージ、ストリップチャート、アラームをすべて MQTT で駆動します。オンライン版はシミュレートされたプラントを動かします。

ライブデモを開く →

すべてのオンラインデモを見る →

スライドなし、短い動画で

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

コンポーネントカタログ

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

グリッドを 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 の組み合わせ

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

ライセンスを選択

すべてのライセンスには、完全なソースコード、1 年間のアップデート、70% の更新割引が含まれます。

Delphi & C++ Builder

sgcWebSockets Core を含む

€299 / 開発者

1 年間のアップデート

  • 110 種類の HTML/UI コンポーネント
  • Delphi & C++ Builder
  • Bootstrap 5 + htmx エンジン
  • データアウェアな TDataSet バインディング
  • 完全なソースコード
  • バイナリの無料再配布
Single:€299 Team:€449 Site:€749

.NET

.NET Framework、.NET Core、.NET 5+ (NuGet)

€299 / 開発者

1 年間のアップデート

  • サーバーサイド HTML/UI コンポーネント
  • Bootstrap 5 + htmx エンジン
  • 完全なソースコード
  • バイナリの無料再配布
Single:€299 Team:€449 Site:€749

sgcCustomization HTML

お客様の Web アプリケーションを私たちが構築します。

€149

3 つの買い切りパッケージ

sgcCustomization HTML では、必要なアプリケーションを説明していただくだけで、eSeGeCe のチームが sgcHTML + sgcWebSockets コンポーネントでお客様のために構築します。

sgcCustomization HTML を見る

sgcHTML は単体で完結するコンポーネントパックです。上の価格には、その土台となる sgcWebSockets Core ランタイムがすでに含まれているため、注文に追加するものはありません。

今お使いの環境から始める

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

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

移行ガイドを開く →
フレームワーク比較 →

すでに WebBroker または DataSnap をお使いですか?

コンポーネントで構築した同じページを、任意の Embarcadero WebBroker アプリケーションから、または REST エンドポイントと同じポートで WebSocket のライブプッシュに対応する DataSnap サーバーから配信できます。

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

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

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

sgcCustomization HTML を見る →

sgcHTML を試す

sgcHTML は sgcWebSockets All-Access 体験版に同梱されています。1 つのインストーラーで、両方の製品が入ります。

RAD Studio / Delphi ダウンロード

トライアル版は 1 台のワークステーションで期間限定でご利用いただけます。すべての sgcHTML コンポーネントが含まれています。

体験版をダウンロード →

C++ Builder ダウンロード

C++ Builder(対応バージョン)

体験版をダウンロード →

NuGet パッケージ

すべての .NET ターゲット向けに nuget.org から直接インストール。

NuGet で見る →

デモ

sgcHTML for ASP.NET Core デモのソースコード(GitHub)。

GitHub で見る →

よくあるご質問

いいえ。ライブラリは Bootstrap 5 のマークアップと htmx の属性を出力し、ボタンがページをリロードせずに送信してページの一部を差し替えられるのは htmx のおかげです。操作を Pascal で記述すれば、属性は自動的に生成されます。必要な場合は、CustomHead と BodyEndHTML を通じて独自のスクリプトを追加することもできます。

HTTP レスポンスに自分で書き込みます。HTML は単なる string プロパティなので、どのサーバーでも使えます。同梱のデモは、Professional ビルドでは TsgcWSHTTPServer、それ以外では TIdHTTPServer にフォールバックして使用し、ResponseNo := 200 と ContentType := 'text/html; charset=utf-8' を設定して、文字列を ContentText に代入します。

sgcHTML_Component_Site.pas ユニットの TsgcHTMLComponent_Site です。ページシェル全体をレンダリングするため、ナビゲーション、サイドバー、テーマ、コンテンツ領域を自分で組み立てる必要がありません。構築して、AddMenu と AddContent または AddSection を呼び出し、HTML プロパティを読み取ります。同梱の Site デモがまさにそれを行っています。

ページをノードとして構築する場合は安全です。ノードがテキストを書き込み、エスケープするためです。リスクが生じるのは、ノードを使わずに自分でマークアップを連結した場合で、たとえばユーザー入力から作成した文字列を AddContent に渡すような場合です。ユーザーデータを扱うものには、ノードユニットを使用してください。

いいえ。これは意図的なものです。SGC_HTML は 883 行目の {$IFNDEF ANDROID} と 884 行目の {$IFNDEF IOS} の内側の 885 行目で定義されているため、それらのターゲットではすべての sgcHTML ユニットが空のユニットとしてコンパイルされます。サーバーサイドのライブラリであり、スマートフォンはネットワーク経由で HTML を受け取るため、モバイルターゲットにレンダラーは不要です。Windows、macOS、Linux はすべてサポートされています。

ダウンロードには、Demos\60.HTML\01.RunTime の下に 15 個を超える実行時デモが同梱されています。ERP ダッシュボード、ヘルプデスク、POS、倉庫、レポートアプリ、フィールドサービスアプリなどです。ギャラリーに、それぞれの短い動画があります。

ヘルプとリソース

オンラインヘルプ

すべてのコンポーネントを、Delphi、C++ Builder、.NET のサンプル付きで紹介します。

オンラインヘルプ →

はじめに

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

クイックスタート →

PDF ガイド

Getting Started ガイド:VCL フォームでページをデザインし、Surface のアクションから Delphi コードを実行し、6 つの QuickStart デモを順に学びます。

Getting Started ガイド(PDF、英語) →

機能マトリックス

110 種類のコンポーネント、10 のファミリー

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

ギャラリー

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

ギャラリー →
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 アプリケーションにリアルタイムメッセージングと完全なネットワークスタックを追加できます。

詳しく見る →

sgcQUIC

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

詳しく見る →

sgcWebRTC

Delphi と C++ Builder 向けの完全な WebRTC メディアエンジン。音声/ビデオ通話、データチャネル、画面共有に対応します。sgcWebSockets Enterprise のアドオンです。

詳しく見る →

sgcSign

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

詳しく見る →

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 まで対応します。

詳しく見る →

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 のランタイムを同梱しています。

詳しく見る →