sgcHTML は Object Pascal を HTML に変換します。ページをコンポーネントツリーとして構築し、文字列プロパティを 1 つ読み取り、その文字列を HTTP レスポンスに書き込みます。このページではまさにそれを行い、その後に必要になるフォーム、グリッド、チャート、htmx へと案内します。
VCL フォームに 4 種類のコンポーネントを置き、オブジェクトインスペクターでプロパティを設定して実行するだけです。ページはフォームから組み立てられるため、書く HTML はなく、コードは 1 行だけです。sgcWebSockets 2026.10 以降が必要です。
| コンポーネント | 設定する項目 |
|---|---|
TsgcWebSocketHTTPServer |
Port（例：8081）。ブラウザーが接続するサーバーです。 |
TsgcHTMLDesignServer |
Server は HTTP サーバー、Surface はデザインサーフェスを指し、PagePath はページのアドレス（例：/）です。 |
TsgcHTMLDesignSurface |
ページの Title と、ユーザーがクリックまたは送信したときに Delphi コードを実行する Actions。 |
| sgcHTML コンポーネント | ページの内容です。例えば、Title と Body を持つ TsgcHTMLComponent_Panel。 |
コードの 1 行とは、フォームの OnCreate イベントに書く WSServer.Active := True です。
procedure TfrmHelloWorld.FormCreate(Sender: TObject);
begin
{ Start listening. From now on http://127.0.0.1:8081/ shows the page. }
WSServer.Active := True;
end;フォームからページを組み立て、Bootstrap、htmx、Chart.js を実行ファイルから配信し、サーバースレッド間で安全にレンダリングし、未知のパスには 404 を返します。
サーフェスにアクションを追加し、オブジェクトインスペクターで Source と Target を設定して、OnExecute をダブルクリックします。これがサーバー側の OnClick です。Target はページを再読み込みせずにその場で更新されます。
Demos\60.HTML\00.QuickStart に収録されています。01.HelloWorld、02.Components、03.Events、04.Forms、05.Database、06.Pages です。上のコードは 01.HelloWorld のものです。
コードでページを組み立てたい場合は、このページの残りの部分で、フォームを使わずにコンソールプログラムから同じことを行います。
自分自身を文字列にレンダリングするページコンポーネントと、その文字列をブラウザーに渡す HTTP サーバーです。オブジェクトは 2 つだけです。
TsgcHTMLComponent_Site は sgcHTML_Component_Site.pas で宣言され、SGC HTML パレットページに登録されています。ナビゲーション、サイドバー、テーマ、コンテンツを含むシェル全体をレンダリングします。
HTML は TsgcHTMLComponent から継承されます。読み取り専用で、読み取ると現在のコンポーネントツリーが完全な HTML ドキュメントとしてレンダリングされます。
HTTP レスポンスに文字列を書き込めるものであれば何でも使えます。同梱のデモは、Professional ビルドが利用できる場合は sgcWebSocket_Server.pas の TsgcWSHTTPServer を使用し、そうでない場合は TIdHTTPServer にフォールバックします。
デスクトップとサーバーのみです。SGC_HTML は {$IFNDEF ANDROID} と {$IFNDEF IOS} の内側で定義されるため、モバイルではすべての sgcHTML ユニットが空にコンパイルされます。Windows、macOS、Linux はいずれも問題ありません。
エディションの列は、コードを制御する define と、それが Source/sgcVer.inc の何行目にあるかを示しています。
| 項目 | 内容 |
|---|---|
| IDE | Delphi 7 から RAD Studio 13、および C++Builder 2007 から 13。Lazarus にも対応しており、Linux で実行済みの ERP デモが同梱されています。 |
| uses 句 | ページシェルには sgcHTML_Component_Site、さらに実際に使用するノードユニットを指定します。たとえば sgcHTML_Nodes、sgcHTML_Nodes_Bootstrap、sgcHTML_Nodes_Table、sgcHTML_Nodes_Forms、sgcHTML_Nodes_Charts です。 |
| パックの define | SGC_PACK_HTML は 871 行目、870 行目から 874 行目までの {$IFDEF SGC_EDT_ALL} ブロック内で定義されています。sgcWebSockets のソースツリーでは、All-Access エディションで有効になります。sgcHTML は、独自のインストーラーと独自のライセンスを持つ単独の製品としても販売されています。 |
| 機能の define | 882 行目から 892 行目の {$IFDEF SGC_PACK_HTML} ブロック内にあります。SGC_HTML は 885 行目、SGC_HTMX は 886 行目で、どちらも 883 行目の {$IFNDEF ANDROID} と 884 行目の {$IFNDEF IOS} の内側です。デザイン時のビジュアルサーフェスである SGC_HTML_CONTROL は、887 行目の {$IFDEF MSWINDOWS} 内の 888 行目にあります。 |
| モバイルでの意味 | sgcHTML のすべてのユニットはインターフェースを {$IFDEF SGC_HTML} で囲んでいるため、Android や iOS のビルドでは空のユニットとしてコンパイルされます。これはサーバーサイドのライブラリであり、それが狙いです。スマートフォンが受け取るのは Pascal ではなく HTML です。 |
| 登録 | パレットページは、SGC_PACK_HTML と SGC_HTML の両方が定義されている場合にのみ登録されます。 |
どのようなコンポーネントがあるのでしょうか。グリッドやスケジューラーから、チャート、リッチエディター、QR コード、カメラスキャナーまで、約 80 種類あります。機能マトリックスで分野ごとに分類されており、それぞれにコンポーネントの個別ページがあります。
sgcHTML は単独のパッケージとして提供され、sgcWebSockets の All-Access ビルドにも含まれています。インストールの手順は同じです。
ダウンロードしたファイルをフォルダーに展開します。以下ではこのフォルダーを {$DIR} と呼びます。
ツール、オプション、ライブラリの順に開きます。{$DIR}\source と、お使いの IDE 用の lib フォルダー（たとえば {$DIR}\libD13\$(Platform)）を追加します。
{$DIR}\Packages\ の下で、お使いの IDE バージョン用のパッケージグループを開きます。最初に実行時の .dpk をコンパイルし、次にデザイン時の dcl をインストールします。Lazarus では代わりに .lpk を使用します。
SGC HTML というページが表示され、約 80 のコンポーネントが含まれています。Android や iOS ターゲットで表示されない場合は想定どおりです。そこでは SGC_HTML が除外されているためです。
{$DIR}\Demos\60.HTML\01.RunTime\07.Site を開いてビルドし、実行してください。コンソールサーバーで、自身の URL を出力します。以下のコードはここから抜粋したものです。
ページを構築し、HTML プロパティを読み取り、レスポンスに書き込みます。1 つ目のタブがページ、2 つ目がサーバー、3 つ目がコンソールプログラム全体です。
uses
SysUtils, Classes,
// sgc
sgcHTML_Component_Site;
class function TsgcSiteDemoPages.BuildPage: string;
var
oSite: TsgcHTMLComponent_Site;
begin
oSite := TsgcHTMLComponent_Site.Create(nil);
try
oSite.Title := 'sgcHTML Site Layouts';
oSite.Layout := slSidebarLeft;
oSite.AddMenu('Dashboard', '/');
oSite.AddMenu('Customers', '/?page=customers');
oSite.AddSection('Welcome', '<p>Served from Delphi.</p>');
// reading HTML is what runs the render
Result := oSite.HTML;
finally
oSite.Free;
end;
end;Layout には TsgcHTMLSiteLayout を指定します。slSidebarLeft、slSidebarRight、slTopNav、slTopNavSidebarLeft、slIconRail、slOffcanvas のいずれかです。既定値は slTopNavSidebarLeft なので、上の行は切り替え方を示すためだけにあります。
uses
SysUtils, Classes,
// sgc
sgcWebSocket_Server,
{$IFDEF SGC_INDY}
sgcIdContext, sgcIdCustomHTTPServer;
{$ELSE}
IdContext, IdCustomHTTPServer;
{$ENDIF}
constructor TsgcSiteDemoServer.Create;
begin
inherited Create;
FPort := 8092;
FHTTP := TsgcWSHTTPServer.Create(nil);
FHTTP.Port := FPort;
FHTTP.OnCommandGet := HandleCommandGet;
end;
procedure TsgcSiteDemoServer.Start;
begin
FHTTP.Active := True;
end;
procedure TsgcSiteDemoServer.SendHTML(AResponseInfo: TIdHTTPResponseInfo;
const aHTML: string);
begin
AResponseInfo.ResponseNo := 200;
AResponseInfo.ContentType := 'text/html; charset=utf-8';
AResponseInfo.ContentText := aHTML;
end;カスタム Indy ライブラリを使用するビルドでは sgcIdContext と sgcIdCustomHTTPServer、標準の Indy を使用するビルドでは IdContext と IdCustomHTTPServer として認識されるため、Indy のユニットは条件付きになっています。同梱のデモにもまったく同じ条件分岐があります。文字列を書き込めるサーバーであれば何でも使えます。同梱のデモは、Professional ビルドが利用できる場合は TsgcWSHTTPServer を選び、そうでない場合は TIdHTTPServer にフォールバックします。デモにはそこに条件分岐があり、この抜粋にはないのはそのためです。
program sgcSiteDemoServer;
{$APPTYPE CONSOLE}
uses
SysUtils,
sgcSiteDemo_Server in 'sgcSiteDemo_Server.pas',
sgcSiteDemo_Pages in 'sgcSiteDemo_Pages.pas';
var
oServer: TsgcSiteDemoServer;
begin
oServer := TsgcSiteDemoServer.Create;
try
oServer.Start;
WriteLn('sgcHTML Site Layouts Demo - http://localhost:' +
IntToStr(oServer.Port));
WriteLn('Press Enter to stop.');
ReadLn;
oServer.Stop;
finally
oServer.Free;
end;
end.コンソールアプリケーションなので、フォームも VCL の設定も不要です。これが sgcHTML プログラムとして最短の形であり、同梱のデモの実際の姿でもあります。
3 つのタブはすべて、同梱のデモ Demos\60.HTML\01.RunTime\07.Site から重要な部分だけを抜粋したものです。完全なプロジェクトでは、クエリ文字列からレイアウト、テーマ、配色も切り替えます。最初のページがレンダリングされたら、一度読んでみる価値があります。
プログラムは待ち受けている URL を出力します。それを開いて、切り替えを試してみてください。
プログラムは起動時にコンソールへ http://localhost:8092 を書き込みます。それを開いてください。ナビゲーション、サイドバー、コンテンツを備えたページが表示されれば、レンダリングとサーバーの両方が動作しています。
ActiveFHTTP.Active := True は成功するか例外を発生させます。すでに別のものがポート 8092 を使用している場合は、ここで分かります。
ブラウザーがページではなく生のマークアップを表示する場合、レスポンスが text/html なしで送信されています。ContentText を代入する前に ContentType を設定してください。
同梱のデモはクエリ文字列から layout、theme、mode を読み取るため、?layout=topnav&mode=dark で同じページが別の見た目で再レンダリングされます。コンポーネントの動作を確認する最速の方法です。
レンダリングされない最初の試行のほとんどは、6 つの問題のいずれかが原因です。
登録には SGC_PACK_HTML と SGC_HTML の両方が必要です。1 つ目は All-Access ブロック内の 871 行目、2 つ目はパックブロック内の 885 行目で定義されます。Android や iOS ターゲットでは、2 つ目は意図的に定義されません。
ツリーは構築したものの、HTML を一度も読み取っていません。このプロパティがレンダリングを実行します。読み取ることがレンダリング処理のすべてであり、フラグメントではなく完全なドキュメントが返されます。
デモはリクエストごとに新しい TsgcHTMLComponent_Site を構築し、その後に解放します。オブジェクトをキャッシュして再利用する場合は、再構築の前に ClearContent で内容をクリアしてください。
レスポンスのコンテンツタイプが設定されていません。デモはボディを書き込む前に ContentType := 'text/html; charset=utf-8' を設定しており、これがないと一部のクライアントは HTML をテキストとして表示します。
その必要はありません。Bootstrap のレイアウト、テーブル、フォーム、チャート用のノードユニットがあり、マークアップを連結する代わりにそれらを組み合わせることがライブラリの本来の目的です。
デモは 8092 で待ち受けます。別のものがそのポートを使用していると、サーバーは起動しません。より深い問題を探す前に、ポートを変更してみてください。
4 つの方向があり、いずれも同じパッケージの中にあります。
フォームのノードユニットは、入力、選択、検証、レイアウトを構築し、htmx がページをリロードせずに送信します。文字列ではなくノードで構築すれば、エスケープは自動的に処理されます。
ERP ダッシュボード、POS、ヘルプデスク、倉庫、フィールドサービスアプリなど、15 個を超える実行時デモが同梱されています。実際の規模でライブラリを確認する最速の方法です。
WebBroker と DataSnap 用のコンポーネントがあるため、既存の Delphi Web アプリケーションを書き直すことなく sgcHTML ページをレンダリングできます。
カタログにはすべてのコンポーネントがプレビュー付きで掲載されています。デモプロジェクトはダウンロードに含まれており、Demos\60.HTML の下にあります。
| TsgcHTMLComponent_Site ページ このクイックスタートで使用しているページシェルを、プロパティごとに説明します。 | 開く | |
| 機能マトリックス レイアウト、フォーム、データ、チャート、認証、チャットなどを分野ごとに分類しています。 | 開く | |
| デモギャラリー 同梱の実行時デモを、それぞれ短い動画付きで紹介します。 | 開く | |
| WebBroker と DataSnap 既存の Delphi Web 層から sgcHTML ページをレンダリングします。 | 開く | |
| 体験版のダウンロード 製品版と同じインストーラーで、期間限定です。 | 開く | |
| オンラインヘルプ 自動生成されたリファレンスで、常に最新リリースに対応しています。 | 開く | |
| Getting Started ガイド PDF（英語）。6 つの QuickStart デモの考え方を、ひとつながりの文章で解説します。 | 開く |
関連資料：Site コンポーネント、Delphi の Web UI コンポーネント、よりスマートなフォーム、データテーブル。各製品にはそれぞれクイックスタートがあり、はじめにのページに一覧があります。
sgcHTML_Component_Site.pas ユニットの TsgcHTMLComponent_Site です。ページシェル全体をレンダリングするため、ナビゲーション、サイドバー、テーマ、コンテンツ領域を自分で組み立てる必要がありません。構築して、AddMenu と AddContent または AddSection を呼び出し、HTML プロパティを読み取ります。同梱の Site デモがまさにそれを行っています。
HTML は単なる string プロパティなので、どのサーバーでも使えます。同梱のデモは、Professional ビルドでは TsgcWSHTTPServer、それ以外では TIdHTTPServer にフォールバックして使用し、ResponseNo := 200 と ContentType := 'text/html; charset=utf-8' を設定して、文字列を ContentText に代入します。
sgcVer.inc の 871 行目で定義されている SGC_PACK_HTML で、870 行目から 874 行目までの {$IFDEF SGC_EDT_ALL} ブロック内にあります。そのソースツリーでは All-Access エディションがこれを定義します。sgcHTML は独自のインストーラーを持つ単独の製品としても販売されているため、define から推測するのではなく、現在のライセンスについては sgcHTML の価格ページをご確認ください。
SGC_HTML は 883 行目の {$IFNDEF ANDROID} と 884 行目の {$IFNDEF IOS} の内側の 885 行目で定義されているため、それらのターゲットではすべての sgcHTML ユニットが空のユニットとしてコンパイルされます。サーバーサイドのライブラリであり、スマートフォンはネットワーク経由で HTML を受け取るため、モバイルターゲットにレンダラーは不要です。Windows、macOS、Linux はすべてサポートされています。
CustomHead と BodyEndHTML を通じて独自のスクリプトを追加することもできます。
Layout には TsgcHTMLSiteLayout を指定し、メンバーは slSidebarLeft、slSidebarRight、slTopNav、slTopNavSidebarLeft、slIconRail、slOffcanvas で、既定値は slTopNavSidebarLeft です。Preset には TsgcHTMLSitePreset を指定し、メンバーには spAdmin、spDashboard、spPortal、spDocs、spLanding、spApp などがあります。配色やライト／ダークモードは Theme オブジェクトにあります。
AddContent に渡すような場合です。ユーザーデータを扱うものには、ノードユニットを使用してください。
Demos\60.HTML\01.RunTime の下に 15 個を超える実行時デモが同梱されています。ERP ダッシュボード、ヘルプデスク、POS、倉庫、レポートアプリ、フィールドサービスアプリなどです。ギャラリーに、それぞれの短い動画があります。