sgcHTML 新フィードバックコンポーネント6種: Badge、PDFViewer、ContextMenu、ProgressBar、JobProgress、LogViewer

2026年7月20日 · コンポーネント

sgcHTML の新コンポーネント25個を紹介するシリーズの第4弾です。今回は、訪問者に今何が起きているかを伝える機能を取り上げます。ベルアイコンの上に表示される件数、インラインで開くドキュメント、右クリックメニュー、そして進行中の作業を示す3通りの方法、単一のバー、バックグラウンドジョブの一覧、そしてスクロールするログです。6つすべてがサーバーレンダリングの Delphi/C++Builder/.NET コンポーネントであり、自分で組み込む必要のあるクライアント側のチャートライブラリや PDF ライブラリは一切不要です。

Badge — ラベル、ピル、通知ドット

TsgcHTMLComponent_Badge は、単一の Bootstrap 5 <span class="badge"> を描画します。Positioned を設定すると、それを包む position-relative 要素に対して絶対位置指定される通知ドットになります。ベルアイコンの上に件数を表示する、おなじみのパターンです。

uses
  sgcHTML_Enums, sgcHTML_Component_Badge;

var
  oBadge: TsgcHTMLComponent_Badge;
begin
  oBadge := TsgcHTMLComponent_Badge.Create(nil);
  try
    oBadge.Text := '3';
    oBadge.Color := bgDanger;
    oBadge.Pill := True;
    oBadge.Positioned := True;

    WebModule.Response := oBadge.HTML;   // <span class="badge bg-danger rounded-pill ...">
  finally
    oBadge.Free;
  end;
end;

// Or the one-line static helper for a simple inline badge:
WebModule.Response := TsgcHTMLComponent_Badge.Build('New', bgSuccess, True);

PDFViewer — プラグイン不要のページ内ドキュメント表示

TsgcHTMLComponent_PDFViewer は、pdf.js を基盤としたツールバーとキャンバスを描画し、ページ送り、ズーム、検索、ダウンロード、印刷を標準で備えています。PDFURL にドキュメントを指定するか、Base64Data でバイト列を直接埋め込めば、描画はすべてクライアント側で完結します。

uses
  sgcHTML_Component_PDFViewer;

var
  oViewer: TsgcHTMLComponent_PDFViewer;
begin
  oViewer := TsgcHTMLComponent_PDFViewer.Create(nil);
  try
    oViewer.ViewerID := 'invoice';
    oViewer.PDFURL := '/invoices/INV-2026-0042.pdf';
    oViewer.Height := '700px';
    oViewer.InitialPage := 1;
    oViewer.Zoom := 'page-width';
    oViewer.Theme := pvLight;
    oViewer.DownloadFileName := 'invoice-0042.pdf';

    WebModule.Response := oViewer.HTML;   // toolbar + canvas + pdf.js init script
  finally
    oViewer.Free;
  end;
end;

ContextMenu — セレクタに紐づく右クリックメニュー

TsgcHTMLComponent_ContextMenu は、右クリックで開く Bootstrap のドロップダウンを描画します。表示対象は TargetSelector に一致する要素に限定されます。DataAction を持つ項目は、フォームですでに使っているのと同じチャネルでポストされ、フックできる DOM イベントを発火します。

uses
  sgcHTML_Component_ContextMenu;

var
  oMenu: TsgcHTMLComponent_ContextMenu;
  oItem: TsgcHTMLContextMenuItem;
begin
  oMenu := TsgcHTMLComponent_ContextMenu.Create(nil);
  try
    oMenu.MenuID := 'grid_menu';
    oMenu.TargetSelector := '.grid-row';

    oItem := oMenu.Items.Add;
    oItem.Caption := 'Edit';
    oItem.Icon := 'bi bi-pencil';
    oItem.DataAction := 'row:edit';

    oItem := oMenu.Items.Add;
    oItem.Caption := 'Delete';
    oItem.Icon := 'bi bi-trash';
    oItem.DataAction := 'row:delete';

    oItem := oMenu.Items.Add;
    oItem.Divider := True;

    oItem := oMenu.Items.Add;
    oItem.Caption := 'Open in new tab';
    oItem.Href := '/grid/open';

    WebModule.Response := oMenu.HTML;   // hidden <ul> + right-click binding script
  finally
    oMenu.Free;
  end;
end;

ProgressBar — 単一バーまたは積み重ねセグメント

TsgcHTMLComponent_ProgressBar は、単一の Value/Max によるストライプ付きアニメーションの単純なケースと、積み重ねるケースの両方に対応します。Bars に項目を追加すると、単一バーがマルチセグメントのバーに置き換わり、各セグメントに個別の色とラベルを設定できます。

uses
  sgcHTML_Enums, sgcHTML_Component_ProgressBar;

var
  oBar: TsgcHTMLComponent_ProgressBar;
begin
  oBar := TsgcHTMLComponent_ProgressBar.Create(nil);
  try
    oBar.ProgressBarID := 'upload';
    oBar.Value := 72;
    oBar.Max := 100;
    oBar.ColorStyle := hcSuccess;
    oBar.Striped := True;
    oBar.Animated := True;
    oBar.ShowLabel := True;
    oBar.LabelFormat := '%d%% complete';

    WebModule.Response := oBar.HTML;   // Bootstrap progress bar
  finally
    oBar.Free;
  end;
end;

// Or a stacked, multi-segment bar:
with oBar.Bars.Add do
begin
  Value := 40;
  ColorStyle := hcPrimary;
  Label_ := 'Done';
end;
with oBar.Bars.Add do
begin
  Value := 20;
  ColorStyle := hcWarning;
  Label_ := 'In progress';
end;

JobProgress — バックグラウンドジョブのライブ一覧

TsgcHTMLComponent_JobProgress は、複数のものを同時に追跡するようになった ProgressBar の発展形です。すべてのバックグラウンドジョブを一覧表示するカードで、各ジョブには専用のステータスバッジとプログレスバーが付きます。AddJob でジョブを登録し、UpdateJob で進捗を進め、GetJobFragmentHTML はリスト全体を再描画する代わりに、その1行だけを接続中のクライアントに送信します。

uses
  sgcHTML_Enums, sgcHTML_Component_JobProgress;

var
  oJobs: TsgcHTMLComponent_JobProgress;
begin
  oJobs := TsgcHTMLComponent_JobProgress.Create(nil);
  try
    oJobs.JobsID := 'exports';
    oJobs.Title := 'Background Exports';
    oJobs.ShowCompleted := False;

    oJobs.AddJob('exp-42', 'Export customers.csv', 'Generating CSV export');

    WebModule.Response := oJobs.HTML;   // card + progress rows + cancel-form script
  finally
    oJobs.Free;
  end;
end;

// On a later progress tick, push just that row over the WebSocket:
oJobs.UpdateJob('exp-42', 65, jsRunning);
Engine.BroadcastFragment(oJobs.GetJobFragmentHTML('exp-42'));

LogViewer — レベルフィルタ付きのストリーミングターミナル

TsgcHTMLComponent_LogViewer は、検索ボックスとレベルフィルタを備えたダークまたはライトのターミナル風パネルを描画します。上限付きのリングバッファ(MaxLines)を使うため、無制限に肥大化することはありません。AddLine はタイムスタンプ付きで色分けされたエントリを追加し、GetLastLineFragmentHTML は全体を再描画せずに、開いているすべてのクライアントへ新しい行をストリーム配信します。

uses
  sgcHTML_Component_LogViewer;

var
  oLog: TsgcHTMLComponent_LogViewer;
begin
  oLog := TsgcHTMLComponent_LogViewer.Create(nil);
  try
    oLog.LogID := 'applog';
    oLog.Theme := ltDark;
    oLog.MaxLines := 500;
    oLog.Height := '400px';

    oLog.AddLine(llInfo, 'Service started', 'app');
    oLog.AddLine(llWarning, 'Low disk space', 'monitor');
    oLog.AddLine(llError, 'Connection refused', 'db');

    WebModule.Response := oLog.HTML;   // toolbar + log body + inline script
  finally
    oLog.Free;
  end;
end;

// Push one more line to every connected client, no full re-render:
oLog.AddLine(llInfo, 'New order received', 'orders');
TsgcHTMX_Engine_Server.BroadcastFragment(oLog.GetLastLineFragmentHTML);

試してみる

完全なドキュメント、主要プロパティのリファレンス、Delphi/C++Builder/.NET のコードサンプルは、それぞれのコンポーネントの専用ページに用意されています。Badge、PDFViewer、ContextMenu、ProgressBar、JobProgress、LogViewer。このシリーズの前回の記事はプレゼンス、ロール、ユーザー管理でした。

ご質問、ご意見、移行に関するサポートが必要な場合はお問い合わせください — コードを書いた本人から返信が届きます。