sgcHTML 新管理コンポーネント3種: Presence、RolesPermissions、UserManagement

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

sgcHTML の新コンポーネント25個を紹介するシリーズの最終回です。今回は、どんな管理画面にもいずれ必要になる3つ、今誰がオンラインか、誰が何をしてよいか、そして実際にアカウントを管理するテーブルを取り上げます。この3つはいずれも、チャットやジョブ進捗画面ですでに使っているのと同じ WebSocket チャネルでライブ更新を配信するため、これまでの投稿のコンポーネントとそのまま組み合わせて使えます。

Presence — リアルタイムの在席状況ロースター

TsgcHTMLComponent_Presence は、重なり合ったアバタースタック、または名前とステータスのリストのいずれかを描画し、MaxVisible で上限を設定すると "+N" のオーバーフローチップが表示されます。AddUser はロースターへのエントリを追加または更新し、SetUserStatus はステータスドットだけを更新し、GetUserFragmentHTML はその1件の変更だけを接続中の全クライアントに送信します。

uses
  sgcHTML_Component_Presence;

var
  oPresence: TsgcHTMLComponent_Presence;
begin
  oPresence := TsgcHTMLComponent_Presence.Create(nil);
  try
    oPresence.PresenceID := 'roster';
    oPresence.Layout := plAvatars;
    oPresence.MaxVisible := 5;
    oPresence.Title := 'Online';

    oPresence.AddUser('u1', 'Ana Torres', psOnline);
    oPresence.AddUser('u2', 'Marc Bell', psAway, '', 'Back at 3pm');
    oPresence.AddUser('u3', 'Kenji Ito', psBusy);

    WebModule.Response := oPresence.HTML;   // avatar stack + scoped CSS
  finally
    oPresence.Free;
  end;
end;

// Push a status change to every connected client, no full re-render:
oPresence.SetUserStatus('u2', psOnline);
TsgcHTMX_Engine_Server.BroadcastFragment(oPresence.GetUserFragmentHTML('u2'));

RolesPermissions — チェックボックスだらけのフォームではなく、権限マトリクス

TsgcHTMLComponent_RolesPermissions は、ロールを列、権限を行(カテゴリごとにグループ化)として配置し、それぞれの交点にチェックボックスを表示します。AddRole と AddPermission で2つの軸を構築し、SetGrant で初期状態のセルにチェックを入れます。クライアント側でのトグル操作はすべて JSON ペイロードとしてサーバー側に届き、ハンドラは ProcessGrantChanged で適用する前に必ず認可を行う必要があります。

uses
  sgcHTML_Enums, sgcHTML_Component_RolesPermissions;

var
  oMatrix: TsgcHTMLComponent_RolesPermissions;
begin
  oMatrix := TsgcHTMLComponent_RolesPermissions.Create(nil);
  try
    oMatrix.MatrixID := 'acl';
    oMatrix.StickyHeader := True;

    oMatrix.AddRole('admin', 'Administrator').Color := hcDanger;
    oMatrix.AddRole('editor', 'Editor');
    oMatrix.AddRole('viewer', 'Viewer');

    oMatrix.AddPermission('users.edit', 'Edit users', 'Users');
    oMatrix.AddPermission('users.delete', 'Delete users', 'Users');
    oMatrix.AddPermission('billing.view', 'View invoices', 'Billing');

    oMatrix.SetGrant('admin', 'users.edit', True);
    oMatrix.SetGrant('admin', 'users.delete', True);
    oMatrix.SetGrant('editor', 'users.edit', True);

    WebModule.Response := oMatrix.HTML;   // matrix table + inline script
  finally
    oMatrix.Free;
  end;
end;

// Server-side handler for a checkbox toggle received over WebSockets.
// ALWAYS verify the acting user is authorized before applying the change:
oMatrix.ProcessGrantChanged('editor', 'users.delete', True);

UserManagement — アカウントテーブルそのもの

TsgcHTMLComponent_UserManagement は、それらのロールが割り当てられるテーブルそのものです。アバター、ステータスバッジ、ロールバッジ、最終ログイン、検索ボックス、そして行ごとのアクションドロップダウン(編集、無効化/有効化、パスワードリセット、オプトインすれば代理ログインと削除も)を備えています。AddUser は行を追加し、値を埋めるための TsgcHTMLUser を返します。ProcessUserAction は行のドロップダウンから返ってきた内容を処理しますが、こちらも必ず自前の認可チェックの後に行ってください。

uses
  sgcHTML_Component_UserManagement;

var
  oUsers: TsgcHTMLComponent_UserManagement;
  oUser: TsgcHTMLUser;
begin
  oUsers := TsgcHTMLComponent_UserManagement.Create(nil);
  try
    oUsers.TableID := 'users';
    oUsers.AllowImpersonate := True;
    oUsers.AllowDelete := True;

    oUser := oUsers.AddUser('u1', 'ana.torres', 'ana@example.com');
    oUser.DisplayName := 'Ana Torres';
    oUser.Roles := 'admin,editor';
    oUser.Status := usActive;
    oUser.LastLogin := '2026-07-15 09:12';

    oUsers.AddUser('u2', 'marc.bell', 'marc@example.com').Status := usInvited;

    WebModule.Response := oUsers.HTML;   // toolbar + table + inline script
  finally
    oUsers.Free;
  end;
end;

// Server-side handler for an action received over WebSockets.
// ALWAYS verify the acting user is authorized before applying it:
oUsers.ProcessUserAction('userDisable', 'u2');

RolesPermissions と UserManagement の両方で繰り返されているパターンに注目してください。コンポーネントが行うのは UI の描画とイベントの発行だけです。状態が変化するのは、操作しているユーザーにその変更が許可されているかを自前のサーバー側コードが判断し、明示的に ProcessGrantChanged または ProcessUserAction を呼び出したときだけです。コンポーネントはあなたに代わって何かを認可することは、設計上、一切ありません。

シリーズ完結

5回の投稿で25個のコンポーネントを紹介してきました。structured data(TreeGrid、PivotTable、ActivityFeed、Splitter)、charts and codes(Heatmap、Sparkline、CandlestickChart、TreeMap、QRCode、Barcode)、form inputs(MultiSelect、ColorPicker、Slider、TimePicker、SignaturePad、Transfer)、feedback and layout(Badge、PDFViewer、ContextMenu、ProgressBar、JobProgress、LogViewer)、そして今回の管理系コンポーネント3つです。full feature matrixには、現在9つのファミリーにわたる83個のコンポーネントが掲載されており、そのすべてが Delphi、C++Builder、.NET の QuickStart 付きで専用ページに文書化されています。Presence、RolesPermissions、UserManagementも含まれます。

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