sgcWebSockets 2026.9.0 では、sgcHTML ページを構築する新しい方法としてデザイン画面が追加されました。これまで、すべてのページはコードで組み立てられていました — コンポーネントを作成し、プロパティを設定し、生成された HTML を読み取るという流れです。この方法は今も有効であり、引き続きページ構築の主要な手段です。新たに加わったのは、2つ目のビジュアルな経路です。同じコンポーネントを通常の VCL フォームに直接ドロップして配置し、オブジェクトインスペクタでプロパティを調整すれば、手書きで書いていたのと同一のページをレンダリングできます。
ページを構築する2つの方法
ランタイムでのアプローチは変わっていません。Pascal、C#、または .NET のコードでコンポーネントを作成または配置し、プロパティを設定してデータをバインドした後、コンポーネントの HTML プロパティを読み取ります。
uses
sgcHTML_Component_Grid;
var
oGrid: TsgcHTMLComponent_Grid;
begin
oGrid := TsgcHTMLComponent_Grid.Create(nil);
try
oGrid.Columns.Add.Title := 'Customer';
oGrid.Columns.Add.Title := 'Total';
oGrid.Clear;
oGrid.AddRow(['Acme Corp', '1,240.00']);
Response.Write(oGrid.HTML);
finally
oGrid.Free;
end;
end;デザイン画面は、同じコンポーネントに対して2つ目の選択肢を追加します。フォームにドロップし、ページの構造をコンストラクタ呼び出しではなくフォーム自体のレイアウトから導き出すという方法です。
デザイン画面
フォーム上でのコンポーネントの位置と幅から、その Bootstrap の行と列が推測され、公開プロパティはコードではなくオブジェクトインスペクタで調整します。フォームに追加した TsgcHTMLDesignSurface コンポーネントがそのレイアウトを読み取ります。通常は起動時に一度だけ sgcHTMLDesignBuildFromControls を呼び出すことで、フォーム上にドロップされたコンポーネントをデザイン画面のノードツリーへと変換し、その後 Surface.GetBodyHTML を読み取ることでレンダリングできます。
uses
sgcHTMLDesign_Surface;
procedure TfrmDashboard.Build;
begin
sgcHTMLDesignBuildFromControls(Surface, Self);
end;
function TfrmDashboard.BodyHTML: string;
begin
Surface.Invalidate;
Result := Surface.GetBodyHTML;
end;コンポーネントパレットでカバーされないマークアップについては、Surface.AddHTML を使うことで同じツリーに固定の HTML ノードを追加できます。ノードの Order プロパティで位置を指定するか、Slot := 'Body' を指定してドロップされたコンポーネント自身のボディ内に組み込むことができます。
同じコンポーネント、同じ出力
デザイン画面が変えるのは、ページの構造がどのように表現されるかだけであり、コンポーネント自体やその挙動は変わりません。デザインされたフォームにドロップされたコンポーネントは、通常のコンポーネントインスタンスです — Grid1.LoadFromDataSet(qry) は、完全にコードで構築したページとまったく同じように動作します。この2つの作成スタイルは同じページ上で自由に混在させることもでき、どちらも構築後にコンパイル・実行される結果は同一になります。
それぞれをいつ使うか
ページの構造自体が動的あるいはデータ駆動である場合 — ループで生成される行、条件付きのセクション、実行時にしかわからない状態に依存するコンテンツなど — や、IDE に依存せず Delphi 7–13 間で1つのソースを共有したい場合には、依然としてランタイムでの組み立てが最も適しています。デザイン画面が最も適しているのは、ほぼ静的なページ構造をビジュアルにレイアウトし、構築しながらページの形を確認し、コードではなくオブジェクトインスペクタでプロパティを調整したい場合です。どちらも実行時の機能に差はなく、どちらを選ぶかは純粋に作成時の好みの問題です。
現在も拡張中
デザイン画面のコンポーネントパレットは積極的に拡張が続けられていますが、現時点ではいくつかのギャップが残っています。TsgcHTMLComponent_Panel のカード外枠のように、一部のコンポーネント自身のラッパーマークアップには、まだそれを抑制するプロパティがありません。TsgcHTMLComponent_Form のフィールドは、手書きのマークアップのように列クラスやスパンを適用することは現状できません。すべてのプロパティが同系統のすべてのコンポーネントに存在するわけではありません — 例えば UseColorClass は Panel には存在しますが、Login や StatCard には存在しません。また TsgcHTMLComponent_Grid は、ソート可能な列ヘッダーをデザイン時のプロパティとしてはまだ公開していません。これらはいずれもランタイムの経路には影響せず、パレットはリリースを重ねるごとにこれらのギャップを埋め続けています。
実際の動作を見る
2つのアプローチを並べて確認する最も分かりやすい方法は、sgcWebSockets に同梱されている Demos\60.HTML フォルダです。01.RunTime には、コードで構築されたオリジナルのデモが収められています。02.DesignTime には、そのすべて — AdminCRUD、LiveMonitor、Portal、HTMX、Grid、Site、Components、Helpdesk、ShopAssistant、WebBroker、WebBrokerHTML に加え、このパターンの発端となった ERP デモ — が、デザイン画面を使ってフォーム上に完全に作り直された形で収められています。同じデモについて2つのフォルダを比較すれば、2つの異なる作成スタイルから生成された同一のページを確認できます。
アップグレード
デザイン画面は sgcWebSockets 2026.9.0 の sgcHTML パックの一部として提供され、既存のランタイムで構築されたページに移行作業は必要ありません。無料トライアル版を入手して試してみてください。また、コンポーネントハブで全コンポーネントを確認できます。
ご質問、ご意見、移行に関するサポートが必要な場合はお問い合わせください — コードを書いた本人から返信が届きます。