sgcHTMLに4つの新コンポーネント、5つの新しいライブデモ | eSeGeCe ブログ

sgcHTMLに4つの新コンポーネント、5つの新しいライブデモ

· コンポーネント

sgcWebSockets 2026.9.0では、4つの新しいsgcHTMLコンポーネントが追加されました。それらを単体で紹介するのではなく、実際に使って5つの完全なアプリケーションを構築しました。倉庫管理システム、POSレジ、レポートと分析ポータル、マルチテナントSaaS管理コンソール、そしてフィールドサービスのディスパッチアプリです。この5つはすべて、すでに公開されているERP、Admin CRUD、Live Monitor、Customer Portal、Helpdeskの各デモと並んで、eSeGeCeのデモサーバー上で今日からライブで動作しています。

新しいコンポーネントは、CameraScanner(ブラウザ自身のカメラを使ったライブのバーコード・QRコードスキャン、ライブラリの追加は不要)、NumPad(POS向けに作られたタッチ式のテンキー)、CommandPalette(自分のアプリケーションに組み込めるCtrl+Kのクイックランチャーパターン)、EmptyState(グリッドや検索結果に表示するものが何もないときに表示するパネル)の4つです。この記事では、まずこれらを一つずつ紹介し、その後それらを実際に使った5つのデモを紹介します。

CameraScanner — バーコードとQRコードのスキャン、ライブラリの追加は不要

TsgcHTMLComponent_CameraScannerは、ブラウザのカメラを開き、ブラウザ自身が備えるネイティブのBarcodeDetector APIを使ってバーコードとQRコードをデコードします。バンドルされたデコーダーはなく、CDNから取得するものも一切ありません。BarcodeDetectorが利用できない環境では、パネルがその旨を表示したうえで、もともとそれに依存していなかった手動入力と写真キャプチャによる動作を続けます。カメラは、あらゆる終了経路(タブが非表示になる、ページから離れる、戻るボタン)で確実に停止されるため、カメラのインジケーターランプは必ず消えます。

uses
  sgcHTML_Component_CameraScanner;

var
  oScanner: TsgcHTMLComponent_CameraScanner;
begin
  oScanner := TsgcHTMLComponent_CameraScanner.Create(nil);
  try
    oScanner.ScannerID := 'receiving_scan';
    oScanner.Mode := smBoth;               // scan barcodes AND capture a photo
    oScanner.Formats := 'qr_code,ean_13,code_128';
    oScanner.FieldName := 'sku';
    oScanner.ContinuousScan := True;
    oScanner.BeepOnScan := True;

    WebModule.Response := oScanner.HTML;   // camera panel + hidden fields + inline script
  finally
    oScanner.Free;
  end;
end;

NumPad — 誤った小数点区切りを送信しないキーパッド

TsgcHTMLComponent_NumPadは、POSでの入力用に作られたタッチ式の数値・通貨キーパッドです。エンジニアリング上の注目点は、このコンポーネントがマークアップにも自身のスクリプトにも書き込むすべての数値が、ブラウザの地域設定を尊重するルーチンを一切経由せず、常にロケールに依存しないフォーマッターを通ることです。送信される隠しフィールドには常に12.50のような数値が入り、12,50になることはありません。そのため、同じフォームがスペイン語、ドイツ語、英語いずれのブラウザからでも同じバイト列を送信します。

uses
  sgcHTML_Component_NumPad;

var
  oPad: TsgcHTMLComponent_NumPad;
begin
  oPad := TsgcHTMLComponent_NumPad.Create(nil);
  try
    oPad.PadID := 'till_amount';
    oPad.FieldName := 'amount';
    oPad.Mode := npCurrency;
    oPad.CurrencySymbol := '$';
    oPad.DecimalPlaces := 2;
    oPad.QuickAmounts.CommaText := '5,10,20,50';   // tender shortcut buttons

    WebModule.Response := oPad.HTML;   // display + calculator-style keys + quick amounts
  finally
    oPad.Free;
  end;
end;

CommandPalette — 自分のアプリケーション向けのCtrl+K

TsgcHTMLComponent_CommandPaletteは、VS Code、Slack、Linearでおなじみの、Ctrl+K / Cmd+Kで開くオーバーレイ型ランチャーです。ホットキーが押されるまでは非表示で、Escキーまたは背景のクリックで閉じます。入力するたびに、部分一致による絞り込みに続けてあいまいなサブシーケンス一致による絞り込みが行われるため、nuと入力しても“New User”が見つかります。項目はJSONとしてブラウザへ送ってクライアント側でフィルタリングするのではなく、サーバー側でマークアップとしてレンダリングされるため、すべてのキャプションはちょうど一度だけHTMLエンコードされます。

uses
  sgcHTML_Component_CommandPalette;

var
  oPalette: TsgcHTMLComponent_CommandPalette;
begin
  oPalette := TsgcHTMLComponent_CommandPalette.Create(nil);
  try
    oPalette.PaletteID := 'app_commands';

    oPalette.AddItem('New Invoice', '/invoices/new', 'invoice:new', 'Create', 'Ctrl+N');
    oPalette.AddItem('Customer Search', '/customers', '', 'Navigate');
    with oPalette.Items.Add do
    begin
      Caption := 'Export Report';
      Icon := 'bi bi-download';
      DataAction := 'report:export';
      Category := 'Actions';
    end;

    WebModule.Response := oPalette.HTML;   // hidden overlay + inline script
  finally
    oPalette.Free;
  end;
end;

EmptyState — 「まだ何もない」ことを正しく伝える方法

TsgcHTMLComponent_EmptyStateは、グリッド、リスト、検索結果に行が一つもないときに表示するパネルで、アイコンまたは画像、タイトル、説明文、そして最大2つのボタンで構成されます。スクリプトを一切出力しないため、ページが必要とする回数だけout-of-bandフラグメントとして送っても安全です。もう一つ触れておくべきセキュリティ上の注意点として、IconにはCSSアイコンクラスかインラインSVGマークアップのいずれかを指定できますが、インラインマークアップは狭い範囲の安全性チェックを経てそのまま出力されるため、エンドユーザーの入力を直接バインドすべきではありません。信頼できないテキストは、常にHTMLエンコードされるTitleとDescriptionのほうにバインドしてください。

uses
  sgcHTML_Enums, sgcHTML_Component_EmptyState;

var
  oEmpty: TsgcHTMLComponent_EmptyState;
begin
  oEmpty := TsgcHTMLComponent_EmptyState.Create(nil);
  try
    oEmpty.Icon := 'bi bi-inbox';
    oEmpty.Title := 'No results';
    oEmpty.Description := 'Try a different search, or clear your filters.';
    oEmpty.ActionCaption := 'Clear filters';
    oEmpty.ActionHref := '/orders';
    oEmpty.ActionStyle := bsPrimary;

    WebModule.Response := oEmpty.HTML;
  finally
    oEmpty.Free;
  end;
end;

// Or the one-line static helper for the simple case:
WebModule.Response := TsgcHTMLComponent_EmptyState.Build('No results', 'Try a different search.');

この4つを使った5つの新しいデモ

コードサンプルだけでは、コンポーネントが何のためにあるのかを示すには限界があります。そこで、この4つの新しいコンポーネントに加えて、それぞれ独自のサインイン、実際のSQLiteデータベース、印刷可能なレポートを備えた5つの完全なアプリケーションを、すべてsgcHTMLだけで構築しました。この5つは、現在eSeGeCeのデモサーバー上ですべてライブで動作しています。

倉庫管理 (WMS) — 入荷、ピッキング、梱包、出荷、棚卸しに加えて、CameraScannerを使ってバーコードをそのままピックリストへスキャンできるハンディ端末。ライブデモを開く →

POSレジ — NumPadを中心に構築された小売店のレジで、商品、プロモーション、顧客、シフトの締め処理、売上レポートを扱います。ライブデモを開く →

レポートと分析 — 売上、粗利、業務のダッシュボード、ピボットビルダー、保存済みビュー、スケジュールされたエクスポートジョブを備え、約25,000件の注文明細を投入済みなので、画面上の数値は実データです。ライブデモを開く →

マルチテナント SaaS — テナントのオンボーディング、課金、チームとロールの管理(同じRolesPermissionsコンポーネントを基盤とし、WebSocketチャネルに加えて通常のフォーム送信オプションも新たに備えています)、そしてプランと機能フラグを管理するプラットフォーム管理コンソール。ライブデモを開く →

フィールドサービス — 作業ディスパッチ、技術者のライブマップ、Ganttスケジューリング、顧客、資産、部品の管理に加え、ここでもCameraScannerを使って部品をそのまま作業へスキャンできます。ライブデモを開く →

実際に試す

上記の5つを含む10個のライブデモすべてに、上部ナビゲーションのsgcHTML › Online Demosからアクセスできます。CameraScanner、NumPad、CommandPalette、EmptyStateの完全なプロパティ・メソッド・イベントリファレンスはオンラインヘルプにあります。

ご質問、ご感想、または特定のデモシナリオの追加をご希望の方はお問い合わせください。実際にコードを書いたメンバーから返信いたします。