sgcHTML 新フォーム入力コンポーネント6種: MultiSelect、ColorPicker、Slider、TimePicker、SignaturePad、Transfer

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

sgcHTML の新コンポーネント25個を紹介するシリーズの第3弾です。今回はフォームです。これまで手作業で作らざるを得なかったほぼすべての管理画面に登場する6つの入力項目、タグピッカー、カラースウォッチ、レンジスライダー、時刻入力、署名キャプチャ、そしてデュアルリストのロール割り当てを取り上げます。いずれも通常の Delphi/C++Builder/.NET コンポーネントです。プロパティを設定して HTML を読み取れば、他のフォームフィールドと同じリクエストサイクルでポストバックされます。

MultiSelect — チップ表示のタグピッカー

TsgcHTMLComponent_MultiSelect は、訪問者が複数の値を選択できる検索可能なドロップダウンです。選択した値は削除可能なチップとして表示され、MaxSelections で上限数を設定することもできます。オプションを1つずつ追加することも、データセットを直接バインドすることもできます。

uses
  sgcHTML_Component_MultiSelect;

var
  oMulti: TsgcHTMLComponent_MultiSelect;
begin
  oMulti := TsgcHTMLComponent_MultiSelect.Create(nil);
  try
    oMulti.FieldName := 'tags';
    oMulti.Placeholder := 'Select tags';
    oMulti.MaxSelections := 3;
    oMulti.Size := mssLarge;

    oMulti.AddOption('js', 'JavaScript', True);
    oMulti.AddOption('py', 'Python');
    oMulti.AddOption('pas', 'Pascal');

    WebModule.Response := oMulti.HTML;   // dropdown + chips + hidden inputs
  finally
    oMulti.Free;
  end;
end;

// Or fill it straight from a dataset:
oMulti.LoadFromDataSet(qryTags, 'Code', 'Name', 'IsSelected');

ColorPicker — ネイティブ入力とワンクリックプリセット

TsgcHTMLComponent_ColorPicker は、ネイティブの HTML5 カラー入力を、任意の16進数テキストフィールドとワンクリックで選べるスウォッチプリセットの行でラップします — ブランドカラーの設定からカレンダーイベントのタグカラーまで、さまざまな用途に使えます。

uses
  sgcHTML_Component_ColorPicker;

var
  oColor: TsgcHTMLComponent_ColorPicker;
begin
  oColor := TsgcHTMLComponent_ColorPicker.Create(nil);
  try
    oColor.FieldName := 'brand_color';
    oColor.LabelText := 'Brand color';
    oColor.Value := '#0d6efd';
    oColor.ShowValueInput := True;

    oColor.Swatches.Add('#0d6efd');
    oColor.Swatches.Add('#198754');
    oColor.Swatches.Add('#dc3545');

    WebModule.Response := oColor.HTML;   // color input + hex field + swatches
  finally
    oColor.Free;
  end;
end;

// Or the static one-liner (field name, value, label):
Result := TsgcHTMLComponent_ColorPicker.Build('brand_color', '#0d6efd', 'Brand color');

Slider — ライブ値バッジ付きのレンジ入力

TsgcHTMLComponent_Slider は、最小値・最大値のラベルと、ドラッグ中の現在値を追跡するバッジを備えた Bootstrap のレンジスライダーです。バッジの色はテーマに合わせて変更できます。

uses
  sgcHTML_Enums, sgcHTML_Component_Slider;

var
  oSlider: TsgcHTMLComponent_Slider;
begin
  oSlider := TsgcHTMLComponent_Slider.Create(nil);
  try
    oSlider.FieldName := 'volume';
    oSlider.LabelText := 'Volume';
    oSlider.Min := 0;
    oSlider.Max := 100;
    oSlider.Step := 5;
    oSlider.Value := 50;
    oSlider.ShowMinMax := True;
    oSlider.ColorStyle := hcSuccess;

    WebModule.Response := oSlider.HTML;   // form-range + live value badge
  finally
    oSlider.Free;
  end;
end;

TimePicker — 範囲制限付きの時刻入力

TsgcHTMLComponent_TimePicker は、MinTime/MaxTime で範囲を設定できるネイティブの時刻入力です — 予約受付、営業時間、シフト管理などに使うフィールドです。静的な Build ヘルパーも用意されています。

uses
  sgcHTML_Component_TimePicker;

var
  oTime: TsgcHTMLComponent_TimePicker;
begin
  oTime := TsgcHTMLComponent_TimePicker.Create(nil);
  try
    oTime.FieldName := 'appointment_time';
    oTime.LabelText := 'Appointment time';
    oTime.MinTime := '08:00';
    oTime.MaxTime := '18:00';
    oTime.Required := True;

    WebModule.Response := oTime.HTML;   // <input type="time">
  finally
    oTime.Free;
  end;
end;

// Or the static one-liner (field name, label, value):
Result := TsgcHTMLComponent_TimePicker.Build('appointment_time', 'Appointment time');

SignaturePad — キャンバスによる署名キャプチャ

TsgcHTMLComponent_SignaturePad は、Clear・Undo・Save ボタンを備えたポインターイベント対応のキャンバスを描画します。ペンの色や太さを設定でき、キャプチャした画像は UploadURL にポストされます。配送承認、契約締結、免責同意書など — かつて手書きの署名が必要だった場面が、画面タップひとつで済むようになります。

uses
  sgcHTML_Component_SignaturePad;

var
  oPad: TsgcHTMLComponent_SignaturePad;
begin
  oPad := TsgcHTMLComponent_SignaturePad.Create(nil);
  try
    oPad.FieldName := 'signature';
    oPad.Width := 500;
    oPad.Height := 220;
    oPad.PenColor := '#1a1a2e';
    oPad.PenWidth := 3;
    oPad.UploadURL := '/api/signatures/upload';

    WebModule.Response := oPad.HTML;   // <canvas> + Clear/Undo/Save buttons
  finally
    oPad.Free;
  end;
end;

Transfer — デュアルリストのロール割り当て

TsgcHTMLComponent_Transfer は、「利用可能」と「割り当て済み」の間で項目を移動させる、おなじみの2パネル型ウィジェットです — 権限、ロール、グループメンバーシップなどに使えます。ShowFilter を設定すると各パネルに検索ボックスが追加され、FieldName を設定すると割り当て済み側が隠しフィールドとしてポストバックされるため、フォーム送信がそのまま機能します。

uses
  sgcHTML_Component_Transfer;

var
  oTransfer: TsgcHTMLComponent_Transfer;
begin
  oTransfer := TsgcHTMLComponent_Transfer.Create(nil);
  try
    oTransfer.TransferID := 'roles';
    oTransfer.FieldName := 'roles';
    oTransfer.TitleSource := 'Available roles';
    oTransfer.TitleTarget := 'Assigned roles';
    oTransfer.ShowFilter := True;
    oTransfer.Height := '260px';

    oTransfer.AddItem('admin', 'Administrator');
    oTransfer.AddItem('editor', 'Editor', True);
    oTransfer.AddItem('viewer', 'Viewer');

    WebModule.Response := oTransfer.HTML;   // dual panels + buttons + script
  finally
    oTransfer.Free;
  end;
end;

// Or bind it straight to a dataset:
oTransfer.LoadFromDataSet(qryRoles, 'RoleId', 'RoleName', 'IsAssigned');

試してみる

完全なドキュメント、主要プロパティのリファレンス、Delphi/C++Builder/.NET のコードサンプルは、それぞれのコンポーネントの専用ページに用意されています。MultiSelect、ColorPicker、Slider、TimePicker、SignaturePad、Transfer。次回はバッジ、PDF表示、そして忙しい画面をレスポンシブに感じさせるコンポーネントを取り上げます。

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