sgcUI リアルタイム UI パック：Delphi、C++Builder、.NET のためのプレゼンス、通知、アクティビティ、ライブログ

運用コンソール、ヘルプデスク、管理パネル、トレーディング画面はどれも、データが動き続ける中で同じ問いに答えなければなりません。今オンラインなのは誰か、何に対応すべきか、誰が何を変更したか、そして今何が失敗しているか。sgcUI リアルタイム UI パックは、それぞれにモデルとネイティブコントロールのセットで答え、1 種類の JSON メッセージですべてをライブフィードに接続します。

1 分でわかる Realtime UI パック：プレゼンス、通知、アクティビティ、ライブログを 1 種類の JSON メッセージで更新。 YouTubeでも公開中.

リアルタイム UI パックは独立した製品ではありません。各パーツは、拡張対象の sgcUI 製品である sgcUICore、sgcNavigation、sgcToolbar、sgcDashboard、sgcGrid に含まれ、すでにお使いのユニット、パッケージ、NuGet パッケージの中にあり、その製品のエディションに従います。Delphi と C++Builder では VCL と FireMonkey、.NET では WinForms、WPF、Avalonia で動作し、ライト、ダーク、ハイコントラストのテーマ、右から左へのレイアウト、12 言語に対応します。

プレゼンス：誰がオンラインか

TsgcUIPresenceModel は、アプリケーションのユーザーを、名前、イニシャル、色、アバター画像、ステータス（オンライン、退席中、取り込み中、オフライン）、ステータステキスト、最終確認時刻とともに保持します。コントロールはモデルを読み取り、ステータスが変わると自動的に再描画されます。

• アバター（TsgcVCLAvatar）：イニシャルまたは画像と、ステータスドット。
• アバターグループ（TsgcVCLAvatarGroup）：チームの重なり合うアバターで、MaxVisible を超えると “+N” チップにまとめられます。
• プレゼンスインジケーター（TsgcVCLPresenceIndicator）：メンバー一覧やリスト向けの、テキスト付きステータスドット。
• sgcChat のユーザーもプレゼンスのユーザーになったので、チャットとチームのメンバー一覧が同じ人たちを共有します。

uses
  sgcUICore_Presence, sgcUICore_Presence_VCL;

procedure TfrmMain.LoadTeam;
begin
  // usually set in the Object Inspector
  sgcVCLAvatarGroup1.Model := FPresence;
  sgcVCLAvatarGroup1.MaxVisible := 5;

  FPresence.AddOrUpdate('u1', 'Alex Morgan');
  FPresence.AddOrUpdate('u2', 'Bianca Ruiz', uprAway, 'Back at 3');
  // later, when the status changes
  FPresence.SetStatus('u1', uprBusy, 'In a meeting');
end;

通知：トースト、受信トレイ、ベルのバッジ

TsgcNotificationModel は、現在のユーザーの通知を、タイトル、本文、重大度、時刻、既読状態、アクション、グループとともに保持し、未読数を管理します。4 つのパーツがそれを表示します。

• トースト（TsgcVCLToastManager）：フォームまたは画面の隅に積み重なり、フォーカスを奪わず、自動的に消え、マウスを重ねると一時停止し、アクションボタンを備えます。重大度の色はテーマから取得されます。
• 受信トレイ（TsgcVCLNotificationInbox）：日ごとにグループ化された仮想化リストで、すべてと未読のフィルター、すべて既読にする、非表示、アクションを備えます。
• 通知の設定（TsgcVCLNotificationPrefsEditor）：カテゴリとチャンネル（アプリ内、トースト、メール、プッシュ）のグリッド。トーストマネージャーは、ユーザーが希望したものだけを表示します。
• ベルのバッジ（TsgcToolbarBadgeLink）：未読数をツールバー項目のバッジとして表示し、99 を超えると “99+” になります。登録版ではリボン項目にも使えます。

uses
  sgcNavigation_Notification, sgcNavigation_Toast_VCL,
  sgcNavigation_Inbox_VCL, sgcToolbar_BadgeLink;

procedure TfrmMain.SetupNotifications;
begin
  sgcVCLToastManager1.Model := FNotifications;
  sgcVCLToastManager1.Preferences := FPreferences;
  sgcVCLNotificationInbox1.Model := FNotifications;
  // the unread count as the badge of the first toolbar item
  sgcToolbarBadgeLink1.Source := FNotifications;
  sgcToolbarBadgeLink1.Target := sgcVCLToolbar1;
  sgcToolbarBadgeLink1.ItemIndex := 0;

  FNotifications.Add('Deployed billing', 'Version 1.8 is live in 3 regions',
    nsvSuccess, 'deploy');
end;

アクティビティフィードと監査証跡：誰が何をしたか

TsgcDashboardActivityModel は、誰がいつ何をしたかを記録します。実行者、動詞、対象、結果、そして監査のために、変更された各フィールドの変更前と変更後の値です。実行者の名前、色、アバターはプレゼンスモデルから取得されるため、フィードとメンバー一覧は常に一致します。

• アクティビティフィード（TsgcVCLActivityFeed）：日ごとにグループ化されたタイムラインで、12 言語の相対時刻、実行者、動詞、対象の種類、テキストによるフィルター、古い項目を読み込むページングを備えます。
• 監査証跡（TsgcVCLAuditTrail）：同じ項目を行として表示し、展開すると変更された各フィールドの古い値と新しい値が表示されます。
• ダッシュボードのタイル：sgcDashboard 用のアクティビティフィードと監査証跡のタイル。検索ボックス付きで、ダッシュボードのレイアウトに保存されます。

uses
  sgcDashboard_Activity, sgcDashboard_Activity_VCL;

procedure TfrmMain.RecordApproval;
var
  oItem: TsgcDashboardActivity;
begin
  FActivity.Presence := FPresence; // actor names, colours and avatars
  sgcVCLActivityFeed1.Model := FActivity;
  sgcVCLAuditTrail1.Model := FActivity;

  oItem := TsgcDashboardActivity.Create;
  oItem.Id := 'a18';
  oItem.Time := FActivity.NowUTC;
  oItem.ActorId := 'u2';
  oItem.Verb := 'approved';
  oItem.ObjectName := 'Change request 102';
  oItem.Outcome := 'success';
  oItem.Changes.Add('status', 'pending', 'approved');
  // the model owns the item and inserts it by Time
  FActivity.AddActivity(oItem);
end;

ライブログビューアー：今、何が失敗しているか

TsgcGridLogModel は、ログ行のスレッドセーフなリングバッファーで、trace から fatal までのレベル、ソース、メッセージ、プロパティを持ち、レベル、ソース、テキストによるフィルターと、テキスト、JSON、CSV へのエクスポートに対応します。どのスレッドからでも追加でき、変更はまとめて画面に反映されます。TsgcGridLogLink は、任意の sgcGrid をログビューアーに変えます。

• レベルの色はテーマから取得され、テキストや正規表現によるハイライトも使えます。
• Follow tail は最新の行を表示し続け、ユーザーが上にスクロールして読み始めると自動的に止まります。
• Pause と Resume、そして選択した行をコピーする Copy lines。
• 新しい行が届き、最も古い行がリングから押し出されても、表示中の行はその場に留まります。

uses
  sgcGrid_Log, sgcGrid_LogLink;

procedure TfrmMain.SetupLog;
begin
  FLog.Capacity := 100000;
  sgcGridLogLink1.Model := FLog;
  sgcGridLogLink1.Grid := sgcVCLGrid1;
  sgcGridLogLink1.FollowTail := True;
  sgcGridLogLink1.Active := True;
end;

// from any thread
FLog.Append(gllWarning, 'gateway', 'slow query 668 ms');

ライブデータ：すべてのフィードに 1 つのメッセージ

4 つのモデルは同じ種類の JSON メッセージを読み取るため、1 つの接続ですべてを運べます。各メッセージは type と op を示し、各モデルは自分宛てのものだけを受け取ります。

{"type":"presence","op":"upsert","user":{"id":"u7","presence":"away","statusText":"Lunch"}}
{"type":"notification","op":"add","notification":{"id":"n2","title":"Build 812 passed","severity":"success"}}
{"type":"activity","op":"add","item":{"id":"a20","actorId":"u7","verb":"updated","objectName":"Invoice INV-17"}}
{"type":"log","op":"append","entry":{"level":"warning","source":"api","message":"Slow query"}}

3 つのライブソースが、sgcWebSockets を通じてモデルをサーバーに接続します。TsgcUILiveSource_WebSocket、TsgcUILiveSource_MQTT、TsgcUILiveSource_SSE です。各ソースは、URL、資格情報、TLS、再接続を設定済みのクライアントにフックし、すべてのメッセージをバインディングに渡します。ワーカースレッドで届いたメッセージはメインスレッドで 1 回のバッチとして適用されるため、1000 行のログが一気に届いてもユーザーインターフェイスへの処理は 1 回で済みます。バインディングでは、MQTT トピック、SSE イベント名、フィルター、アプリケーションエンベロープ内のパスを指定することもできます。

uses
  sgcWebSocket, sgcUICoreWS_Live, sgcUICoreWS_Live_WebSocket;

procedure TfrmMain.ConnectLive;
var
  oSource: TsgcUILiveSource_WebSocket;
begin
  oSource := TsgcUILiveSource_WebSocket.Create(Self);
  oSource.Client := sgcWebSocketClient1;
  // every message carries its type, so each model takes only its own
  oSource.Bindings.Add.Target := FPresence;
  oSource.Bindings.Add.Target := FNotifications;
  oSource.Bindings.Add.Target := FActivity;
  oSource.Bindings.Add.Target := FLog;
end;

ライブソースは登録版で、sgcUI のすべての sgcWebSockets ブリッジと同様に sgcWebSockets が必要です。サーバーがない場合や Community ビルドでは、アプリケーションが代わりにモデルの API を呼び出します。AddOrUpdate と SetStatus、Add または Post、AddActivity、Append です。

すべてのプラットフォームで、ライトもダークも

同じモデルと同じ JSON が、すべてのプラットフォームで動作します。.NET のコントロールは、esegece.sgcUICore、esegece.sgcNavigation、esegece.sgcToolbar、esegece.sgcDashboard、esegece.sgcGrid パッケージにある、同じ名前のネイティブな WinForms、WPF、Avalonia コントロールで、ダークとハイコントラストを含むスイートのすべてのテーマが新しいコントロールにも適用されます。

リアルタイム運用デモ

リアルタイム運用デモは、すべてのパーツを 1 つの画面にまとめています。チームのメンバー一覧、受信トレイと設定付きのトースト、ベルのバッジ、アクティビティフィードと監査証跡、そしてライブログです。すべて内蔵のシミュレーターで動作するため、サーバーなしで実行できます。Delphi のスイートデモでは VCL、FireMonkey、C++Builder 向けに、.NET のスイートデモでは WinForms、WPF、Avalonia 向けに同梱されており、シミュレーターはどのプラットフォームでも同じシーケンスを生成します。2 つ目の VCL デモ RealtimeLive は、同じメッセージをプロセス内の WebSocket サーバーと TsgcUILiveSource_WebSocket を通じて送信し、URL ボックスから自分のサーバーに接続することもできます。

エディション

各パーツは、それを含む製品のエディションに従います。sgcUICore のプレゼンスのパーツと sgcGrid のログのパーツは Community を含むすべてのエディションに含まれ、プレゼンスのメッセージも同様です。通知とバッジのパーツには sgcUI Standard 以上の sgcNavigation と sgcToolbar が、アクティビティのパーツには sgcUI Professional 以上の sgcDashboard が必要です。無償の .NET Community パッケージにも含まれますが、Delphi の Community エディションに含まれるのは sgcGrid のみです。通知、アクティビティ、ログのライブメッセージ、バッジの対象としてのリボン、3 つのライブソースは登録版です。製品ごとの詳細は、リアルタイム UI パックのページとリアルタイム UI パックのヘルプをご覧ください。

ご質問やご意見はありますか？お問い合わせください。コードを書いた本人たちから返信が届きます。