syncfusion-blazor-inputs

Syncfusion Blazor FileUpload の実装

このスキルでは、Blazor アプリケーションでファイルを扱うための堅牢なソリューションである Syncfusion Blazor FileUpload コンポーネントについて説明します。単一ファイルおよび複数ファイルのアップロードの実装、検証ルールの設定、ドラッグ＆ドロップ操作の有効化、チャンクアップロードによる大容量ファイルの処理、包括的なイベントを活用したアップロードの完全な制御とユーザーフィードバックの提供方法を学びます。

---

FileUpload

Web アプリケーションとサーバーアプリケーションで、非同期／同期アップロード、検証、イベント、カスタマイズを備えた Syncfusion Blazor File Upload コンポーネントの実装方法を学びます。ドラッグ＆ドロップまたはフォームとの連携により、ファイルを常にすぐに処理できます。

ドキュメント

はじめに

📄 参照： references/file-upload-getting-started.md

• インストールと NuGet パッケージのセットアップ
• Visual Studio／Visual Studio Code のセットアップ手順
• Blazor WebAssembly と Server の設定
• 基本的な SfUploader コンポーネントのレンダリング
• CSS とスクリプトのインポート
• 最小限の動作するサンプル

コア設定

📄 参照： references/file-upload-configuration.md

• コンポーネント識別用の ID プロパティ
• ファイルの種類を制限する AllowedExtensions
• AllowMultiple と単一ファイルのアップロード
• AutoUpload の動作設定
• 順序どおりに処理する SequentialUpload
• DirectoryUpload 機能
• Enabled 状態とコンポーネントの制御

アップロード方法と動作

📄 参照： references/file-upload-file-upload-methods.md

• 同期アップロードと非同期アップロード
• Save URL と Remove URL の設定
• アップロードボタンのクリックハンドラー
• 自動アップロードと手動アップロードの開始
• アップロード進行状況の追跡方法
• バックエンド API の要件

イベントとハンドラー

📄 参照： references/file-upload-events-and-handlers.md

• ファイルに直接アクセスする ValueChange イベント（Blazor Server のみ、AsyncSettings なしの場合）
• 検証前に使用する FileSelected イベント
• 初期化ロジック用の Created イベント
• ファイルの表示をカスタマイズする OnFileListRender
• OnUploadStart、Success、OnFailure イベント（AsyncSettings と併用）
• イベントハンドラーのパターンとベストプラクティス
• 重要： ValueChange と UploaderAsyncSettings は同時に使用できません

ファイルの検証

📄 参照： references/file-upload-validation.md

• ファイルの種類を検証する方法
• ファイルサイズの制限（MinFileSize、MaxFileSize）
• カスタム検証関数
• 無効なファイルのアップロード防止
• エラーメッセージとユーザーフィードバック
• EditForm 内での検証

高度な機能

📄 参照： references/file-upload-advanced-features.md

• 大容量ファイル向けのチャンクアップロード
• 一時停止と再開の機能
• イベントハンドラーでの Async／await パターン
• ディスク I/O を使用しない MemoryStream 処理
• 一括アップロード操作
• 再試行と復旧の仕組み

カスタマイズとスタイル設定

📄 参照： references/file-upload-customization.md

• カスタムファイルリストテンプレート
• CSS クラスのカスタマイズ
• Theme Studio との連携
• カスタムボタンのスタイル設定
• ダークモードのサポート
• レスポンシブデザインのパターン

ファイルソースのオプション

📄 参照： references/file-upload-file-source-options.md

• ドラッグ＆ドロップによるアップロードの実装
• フォーム連携のパターン
• ファイルピッカーとの直接的な連携
• ブラウザーのファイルダイアログの使用
• ディレクトリの選択とアップロード
• 複数の入力方法の組み合わせ
• アクセシビリティのベストプラクティス

ローカライズとアクセシビリティ

📄 参照： references/file-upload-localization-accessibility.md

• 多言語 UI のサポート
• ロケールの設定オプション
• カスタムテキストラベル
• WCAG 2.1 への準拠
• キーボードナビゲーションの実装
• スクリーンリーダーのサポート
• ARIA 属性

プラットフォーム固有のセットアップ

📄 参照： references/file-upload-platform-specific-setup.md

• Blazor WebAssembly アプリのセットアップ
• Blazor Server アプリのセットアップ
• Blazor Web App（.NET 8+）のセットアップ
• MAUI との統合
• 各種レンダリングモード
• プラットフォーム固有の考慮事項

クイックスタートの例

@using Syncfusion.Blazor.Inputs

<SfUploader AutoUpload="true" AllowedExtensions=".jpg,.jpeg,.png,.pdf">
    <UploaderAsyncSettings 
        SaveUrl="api/upload/save" 
        RemoveUrl="api/upload/remove">
    </UploaderAsyncSettings>
</SfUploader>

よく使われるパターン

パターン 1：検証付きの基本的なファイルアップロード（サーバーへのアップロード）

• 即時にアップロードするには、AutoUpload="true" を使用します
• SaveUrl／RemoveUrl を指定して UploaderAsyncSettings を設定します
• ファイルの種類を制限するには、AllowedExtensions を設定します
• 事前検証には、FileSelected イベントをリッスンします
• アップロードのフィードバックには、Success／OnFailure イベントを使用します

パターン 2：ファイルへの直接アクセス（Blazor Server のみ）

• ファイルの内容に直接アクセスするには、ValueChange イベントを使用します
• ValueChange と併せて UploaderAsyncSettings を使用しないでください
• ファイルをメモリ内で処理するか、ディレクトリに保存します
• ファイルのプレビュー、Base64 変換、または直接保存に最適です

パターン 3：複数ファイルの処理

• 一括アップロードを可能にするには、AllowMultiple="true" を設定します
• 順序どおりに処理するには、SequentialUpload を使用します
• アップロードイベントで進行状況を追跡します
• ファイルごとの進行状況インジケーター付きで、ファイル一覧を表示します

パターン 4：チャンク分割による大容量ファイルのアップロード

• UploaderAsyncSettings で ChunkSize を設定します
• チャンクアップロードで一時停止／再開を有効にします
• 失敗したチャンクの再試行ロジックを実装します
• チャンク単位の進行状況をユーザーに表示します

主要なプロパティ

プロパティ	デフォルト	使用する場面
AutoUpload	true	選択後すぐにファイルをアップロードする場合
AllowMultiple	true	ユーザーが複数のファイルをアップロードする必要がある場合
SequentialUpload	false	ファイルを一度に 1 つずつアップロードする必要がある場合
AllowedExtensions	""	特定の種類のファイルのみを許可する場合
DirectoryUpload	false	ユーザーがフォルダー全体を選択できるようにする場合
MaxFileSize	28.4 MB	アップロード可能なファイルサイズの上限を設定する場合
MinFileSize	0	ファイルサイズの最小要件を設定する場合
ChunkSize	0 (disabled)	大容量ファイルのチャンク分割アップロードを有効にする場合
ShowFileList	true	アップロード済みファイル一覧の表示を制御する場合
ShowProgressBar	true	アップロードの進行状況インジケーターを表示する場合
Enabled	true	アップローダーを有効または無効にする場合
DropArea	null	カスタムのドロップゾーン CSS セレクターを指定する場合
CssClass	""	カスタム CSS クラスを適用する場合
TabIndex	0	タブ移動の順序を設定する場合
EnablePersistence	false	ページ再読み込み後も状態を維持する場合
EnableRtl	false	右から左へのレイアウトを有効にする場合

よくある使用例

1. ドキュメントのアップロード：履歴書、PDF、資格証明ファイルのアップロード
2. 画像ギャラリー：ユーザープロフィール写真、写真コレクション
3. データのインポート：データ処理用の CSV／Excel ファイルのインポート
4. メディアライブラリ：動画、音声ファイルのアップロードと管理
5. バックアップのアップロード：データベースのバックアップ、設定ファイル
6. レポートの生成：月次レポート、分析データ
7. 請求書の処理：財務書類のアップロード
8. ユーザー添付ファイル：メールの添付ファイル、メッセージファイル

クイック判断ツリー

ユーザーがファイルアップロード機能を必要としている ├─ ファイルは 1 つのみですか？ → AllowMultiple="false" を設定し、基本的なセットアップを使用します ├─ 複数のファイルですか？ │ ├─ すべて一度にアップロードしますか？ → AllowMultiple="true" + SequentialUpload="false" │ └─ 1 つずつアップロードしますか？ → AllowMultiple="true" + SequentialUpload="true" └─ 大容量ファイル（>100MB）ですか？ ├─ チャンク分割を有効にする → ChunkSize プロパティを設定します └─ 一時停止／再開を追加する → Paused および OnResume イベントをリッスンします

---

TextArea

設定可能なサイズ変更モード、行数／列数、文字数制限、フローティングラベル、包括的な検証機能を備えた、複数行テキスト入力用の Syncfusion Blazor TextArea コンポーネントの実装方法を説明します。コメント、説明、メッセージなど、リアルタイムのフィードバックとフォーム連携を伴う、長文入力が必要なあらゆる場面に最適です。

ドキュメント

はじめに

📄 参照： references/textarea-getting-started.md

• インストールと NuGet パッケージのセットアップ
• SfTextArea コンポーネントの基本的なセットアップ
• 名前空間のインポートとサービスの登録
• CSS テーマの設定
• 最小限の実行可能な例
• コンポーネントの初期レンダリング

設定オプション

📄 参照： references/textarea-configuration.md

• サイズを設定する RowCount と ColumnCount
• ResizeMode（Vertical、Horizontal、Both、None）
• 文字数制限を設定する MaxLength プロパティ
• プレースホルダーテキストの設定
• FloatLabelType（Auto、Always、Never）
• 読み取り専用および無効の状態
• Width プロパティとレスポンシブなサイズ設定
• HTML 属性のカスタマイズ

イベントとデータバインディング

📄 参照： references/textarea-events-binding.md

• Value プロパティと双方向バインディング（@bind-Value）
• リアルタイム更新用の ValueChange イベント
• Focus イベントと Blur イベント（TextAreaFocusInEventArgs、TextAreaFocusOutEventArgs）
• キーストロークを追跡する Input イベント
• Created および Destroyed ライフサイクルイベント
• EditForm を使用したフォーム検証との統合
• 検証バインディング用の ValueExpression

カスタマイズとスタイル設定

📄 参照： references/textarea-customization.md

• カスタムスタイル設定用の CssClass
• テキストをすばやく削除する ShowClearButton
• InputAttributes と HtmlAttributes
• Theme Studio によるテーマのカスタマイズ
• レスポンシブデザインのパターン
• アクセシビリティ機能（ARIA、キーボードナビゲーション）
• EnableRtl による RTL（右から左）サポート

クイックスタートの例

@using Syncfusion.Blazor.Inputs

<SfTextArea @bind-Value="@description"
            Placeholder="Enter description..."
            RowCount="5"
            ColumnCount="50"
            MaxLength="500"
            FloatLabelType="FloatLabelType.Auto">
</SfTextArea>

@code {
    private string description = "";
}

よく使われるパターン

パターン 1：基本的な複数行入力

• RowCount を使用して表示する行数を設定します（デフォルト：2）
• Placeholder を設定してユーザーに入力を促します
• @bind-Value を有効にして双方向バインディングを行います
• MaxLength を適用して文字数を制限します

パターン 2：サイズ変更可能な TextArea と入力制限

• ユーザーによるサイズ変更を可能にするには、ResizeMode="Resize.Both" を設定します
• 初期サイズとして RowCount と ColumnCount を設定します
• 過剰な入力を防ぐには MaxLength を使用します
• 文字数をリアルタイムでカウントするには ValueChange を監視します

パターン 3：検証付きのフォーム連携

• モデルバインディングを使用して <EditForm> で囲みます
• ValueExpression とともに @bind-Value を使用します
• [Required] または [StringLength] 属性を適用します
• <ValidationMessage> を使用して検証メッセージを表示します
• CSS で無効な状態のスタイルを設定します

パターン 4：自動拡張する TextArea

• 垂直方向への拡張には ResizeMode="Resize.Vertical" を設定します
• 最小限の RowCount（例：3）で開始します
• 必要に応じてユーザーが拡張できるようにします
• 上限を設定するには MaxLength と組み合わせます

主なプロパティ

プロパティ	デフォルト	使用場面
Value	""	テキストエリアの内容をバインドする場合
RowCount	2	表示する行数を設定する場合
ColumnCount	20	表示する列数を設定する場合
MaxLength	null	最大文字数を制限する場合
ResizeMode	Resize.Both	ユーザーによるサイズ変更の動作を制御する場合
Placeholder	""	空のときにヒントテキストを表示する場合
FloatLabelType	FloatLabelType.Never	フローティングラベルのアニメーションを有効にする場合
ShowClearButton	false	すばやくクリアする機能を追加する場合
ReadOnly	false	内容を表示したままユーザーによる編集を防ぐ場合
Disabled	false	コンポーネント全体を無効にする場合
Width	"100%"	コンポーネントの幅を設定する場合
CssClass	""	カスタム CSS クラスを適用する場合
EnableRtl	false	右から左へのテキスト方向を有効にする場合

よくあるユースケース

1. コメントセクション：ユーザーフィードバック、レビューコメント、ディスカッションスレッド
2. フォームの説明：製品の説明、自己紹介セクション、概要フィールド
3. メッセージ作成：メール本文、チャットメッセージ、メモの作成
4. コード／JSON 入力：設定ファイル、スクリプト入力、データ入力
5. 住所フィールド：番地、市区町村などを含む複数行の住所入力
6. 検索クエリ：複数の条件を指定する複雑な検索入力
7. カスタマーサポート：チケットの説明、問題の報告、ヘルプのリクエスト
8. コンテンツ管理：記事の下書き、ブログ投稿の編集、ドキュメント

簡単な判断ツリー

ユーザーが複数行のテキスト入力を必要としている ├─ サイズを固定しますか？ → ResizeMode="Resize.None" と特定の RowCount を設定します ├─ ユーザーによるサイズ変更を許可しますか？ │ ├─ 垂直方向のみですか？ → ResizeMode="Resize.Vertical" │ ├─ 水平方向のみですか？ → ResizeMode="Resize.Horizontal" │ └─ 縦横両方向ですか？ → ResizeMode="Resize.Both" ├─ 文字数制限が必要ですか？ → MaxLength プロパティを設定します └─ フォームの検証が必要ですか？ ├─ <EditForm> 内で使用します └─ 検証バインディングに ValueExpression を追加します

---

シグネチャ

Syncfusion Blazor Signature コンポーネントを実装して、デジタル署名を取得する方法を学びます。ストロークの幅や色、背景画像、複数の形式（PNG、JPEG、SVG）での保存／読み込み機能、包括的なイベント処理を設定できます。電子署名、ドキュメント承認ワークフロー、デジタル同意フォームなど、タッチとマウスに対応した手書き署名の取得が必要なあらゆるシナリオに最適です。

ドキュメント

はじめに

📄 参照： references/signature-getting-started.md

• インストールと NuGet パッケージの設定
• SfSignature コンポーネントの基本設定
• 名前空間のインポートとサービスの登録
• CSS テーマの設定
• キャンバスの描画と初期化
• タッチとマウスの入力への対応
• 最小限の動作例

描画の設定

📄 参照： references/signature-drawing-configuration.md

• ペンの太さを設定する MinStrokeWidth と MaxStrokeWidth
• インクの色をカスタマイズする StrokeColor
• キャンバスの背景を設定する BackgroundColor
• レターヘッド／透かし用の BackgroundImage
• ストロークを滑らかにする Velocity プロパティ
• 描画動作とレスポンシブ対応
• 筆圧感度のシミュレーション

署名の保存と読み込み

📄 参照： references/signature-save-load.md

• 形式オプション（PNG、JPEG、SVG）を指定する Save() メソッド
• SaveWithBackground プロパティの設定
• Base64 文字列を取得する GetSignature()
• 既存の署名を読み込む Load() メソッド
• 署名を削除する Clear() メソッド
• ファイル形式の選択と品質設定
• サーバー連携のパターン
• データベースへの保存方法

イベント処理

📄 参照： references/signature-events.md

• ストロークを追跡する Changed イベント
• 保存処理用の OnSave イベント
• 初期化時の Created イベント
• イベント引数の構造
• 署名のリアルタイム検証
• 署名が空か記入済みかの検出
• イベント駆動型のワークフロー

カスタマイズとスタイル設定

📄 参照： references/signature-customization.md

• Disabled と IsReadOnly の状態
• カスタムスタイル設定用の HtmlAttributes
• キャンバスサイズのカスタマイズ
• テーマとの統合
• モバイル端末とタッチデバイス向けの最適化
• アクセシビリティに関する考慮事項
• レスポンシブデザインのパターン

クイックスタートの例

@using Syncfusion.Blazor.Inputs

<div class="signature-container">
    <label>Sign below:</label>
    <SfSignature @ref="signatureRef"
                 StrokeColor="#000000"
                 BackgroundColor="#FFFFFF"
                 MaxStrokeWidth="2.0"
                 MinStrokeWidth="0.5">
    </SfSignature>
    
    <div class="signature-actions">
        <button @onclick="SaveSignature">Save</button>
        <button @onclick="ClearSignature">Clear</button>
    </div>
</div>

@code {
    private SfSignature signatureRef;
    
    private async Task SaveSignature()
    {
        await signatureRef.SaveAsync(SignatureFileType.Png, "signature.png");
    }
    
    private async Task ClearSignature()
    {
        await signatureRef.ClearAsync();
    }
}

よくあるパターン

パターン 1：基本的な署名の取得

• 自然な手書き感を得るため、デフォルトのストローク設定を使用します
• 透明なキャンバスにするため、BackgroundColor="#FFFFFF" を設定します
• ユーザーが修正できるようにクリアボタンを用意します
• あらゆる環境で互換性のある PNG 形式で保存します
• 送信前に署名が空でないことを検証します

パターン 2：レターヘッドを使用した文書への署名

• BackgroundImage を使用して、会社のレターヘッドやフォームのテンプレートを設定します
• SaveWithBackground="true" を設定して、保存ファイルに背景を含めます
• 背景とのコントラストが高くなるように StrokeColor を設定します
• 背景を埋め込んだ PNG または JPEG として保存します
• 契約書、合意書、公式文書に最適です

パターン 3：モバイルに最適化された署名

• タッチ操作で見やすくなるように、線の幅を太くします
• 親指で描きやすいように、キャンバスのサイズを大きくします
• 署名モードが有効な場合にのみ、IsReadOnly="false" を設定します
• 署名の完了時に自動保存します
• タッチ操作に対して明確な視覚的フィードバックを提供します

パターン 4：複数署名フォーム

• 署名者ごとに複数の SfSignature コンポーネントを使用します
• 署名フィールドごとに完了状態を追跡します
• 各署名を一意の識別子で保存します
• 最終文書の生成時に署名を結合します
• フォームを送信する前に、必須の署名がすべて揃っていることを検証します

主なプロパティ

プロパティ	デフォルト	使用する場面
MinStrokeWidth	0.5	ペンの最小の太さを設定するとき
MaxStrokeWidth	2.0	ペンの最大の太さを設定するとき
StrokeColor	"#000000"	インクの色を変更するとき
BackgroundColor	"#FFFFFF"	キャンバスの背景色を設定するとき
BackgroundImage	null	レターヘッドや透かし画像を追加するとき
Velocity	0.7	線の滑らかさを調整するとき（0～1）
SaveWithBackground	true	保存する署名に背景を含めるとき
Disabled	false	署名の取得を完全に無効にするとき
IsReadOnly	false	既存の署名を表示したまま、変更を防ぐとき
EnablePersistence	false	ページの再読み込み後も署名を保持するとき
HtmlAttributes	null	ラッパーにカスタム HTML 属性を追加するとき

一般的なユースケース

1. 電子署名の取得：デジタル文書への署名、契約の承認、同意フォーム
2. 金融サービス：ローン申請、口座開設、取引の承認
3. 医療：患者同意フォーム、HIPAA 契約書、医療記録
4. 法的文書：契約書、NDA、法的合意書、裁判所文書
5. 人事プロセス：雇用契約書、オンボーディング文書、ポリシー確認書
6. 配達確認：荷物の配達署名、サービス完了の確認
7. チェックインシステム：来訪者記録、出席管理、登録フォーム
8. 教育：試験監督、フォームの提出、保護者の同意

すばやく選べる判断ツリー

ユーザーが署名の取得を必要としている ├─ 基本的な署名の場合 │ └─ デフォルト設定を使用して、PNG として保存します ├─ レターヘッド付きの文書の場合 │ ├─ BackgroundImage プロパティを設定します │ └─ SaveWithBackground="true" を有効にします ├─ モバイル／タッチ操作が中心の場合 │ ├─ MaxStrokeWidth を 3.0 以上にします │ └─ キャンバスのサイズを大きくします ├─ 複数の署名者がいる場合 │ ├─ 複数の SfSignature コンポーネントを使用します │ ├─ 各署名の状態を個別に追跡します │ └─ 一意の識別子を付けて保存します └─ 特定の形式が必要な場合 ├─ PNG → 幅広い対応、透過をサポート ├─ JPEG → ファイルサイズが小さい、透過には非対応 └─ SVG → ベクター形式、拡大縮小が可能

---

RangeSlider

Syncfusion Blazor Range Slider コンポーネントを実装して、範囲選択用の 2 つのハンドル、目盛り、ツールチップ、色範囲、移動制限を利用する方法を学びます。価格フィルター、日付範囲、温度ゾーンなど、視覚的なフィードバックと検証を伴う範囲入力が必要なあらゆるシナリオで、2 つの値を即座に選択できます。

ドキュメント

はじめに

📄 参照： references/rangeslider-getting-started.md

• インストールと NuGet パッケージのセットアップ
• Type="SliderType.Range" を指定した基本的な SfSlider
• 2 つのハンドルに対応する配列を使った値のバインド
• CSS のインポートとテーマの設定
• 名前空間のインポートとサービスの登録
• 範囲選択ができる最小限の実用例

範囲の設定

📄 参照： references/rangeslider-range-configuration.md

• 範囲の境界を設定する Min、Max、Step プロパティ
• Type プロパティ（SliderType.Range と Default）
• 配列を使用した双方向の値バインディング（@bind-Value）
• CustomValues を使用した数値以外のカスタム値
• リアルタイム更新のための IsImmediateValue
• 値配列の構造とデータ型

目盛りとツールチップ

📄 参照： references/rangeslider-ticks-and-tooltip.md

• SliderTicks コンポーネントの設定
• 間隔マーカーを設定する LargeStep と SmallStep
• 目盛りの配置オプション（Before、After、Both）
• 細かな表示を設定する ShowSmallTicks プロパティ
• 目盛りラベルをカスタマイズする Format プロパティ
• SliderTooltip コンポーネントの設定
• ツールチップの表示モード（Focus、Hover、Always、Auto）
• ツールチップの配置と書式のカスタマイズ
• カスタムツールチップテンプレート

カラー範囲と視覚的な表示

📄 参照： references/rangeslider-color-ranges-visual.md

• 視覚的なフィードバックを提供する SliderColorRanges
• Start、End、Color を指定する ColorRange コンポーネント
• 値のゾーンに応じた複数のカラーセグメント
• 使用例（温度ゾーン、価格帯、評価）
• 色のカスタマイズとスタイル設定
• 色の選択に関するアクセシビリティの考慮事項

制限と制約

📄 参照： references/rangeslider-limits-and-constraints.md

• 移動制限を設定する SliderLimits
• MinStart、MinEnd、MaxStart、MaxEnd プロパティ
• 制限を有効にする Enabled プロパティ
• ハンドルを固定する StartHandleFixed と EndHandleFixed
• 境界内にハンドルの移動を制限する方法
• 使用例（予約日の範囲、予算の制約）
• 制限を使った検証パターン

向きとカスタマイズ

📄 参照： references/rangeslider-orientation-and-customization.md

• Orientation プロパティ（Horizontal と Vertical）
• 増減コントロールを設定する ShowButtons
• レスポンシブなサイズ設定の Width プロパティ
• 滑らかな遷移を有効にする EnableAnimation
• カスタムスタイルを設定する CssClass
• 右から左に記述する言語に対応する EnableRtl
• ReadOnly と Enabled の状態
• Theme Studio によるテーマのカスタマイズ

イベントとデータバインディング

📄 参照： references/rangeslider-events-and-binding.md

• SliderEvents コンポーネントの設定
• 範囲の更新を受け取る ValueChange イベントコールバック
• OnChange と Changed のイベント発生タイミング
• 初期化ロジックに使用する Created イベント
• レンダリング後の処理に使用する Rendered イベント
• ツールチップの内容を動的に変更する OnTooltipChange
• 目盛りラベルをカスタムレンダリングする OnTicksRender
• EditForm とのフォーム連携
• EditContext とデータ注釈による検証

クイックスタートの例

@using Syncfusion.Blazor.Inputs

<div class="range-slider-container">
    <label>Select Price Range: $@priceRange[0] - $@priceRange[1]</label>
    <SfSlider @bind-Value="@priceRange"
              Type="SliderType.Range"
              Min="0"
              Max="1000"
              Step="10">
        <SliderTicks Placement="Placement.After" LargeStep="200" SmallStep="50" ShowSmallTicks="true"></SliderTicks>
        <SliderTooltip IsVisible="true" ShowOn="TooltipShowOn.Always" Format="C0"></SliderTooltip>
    </SfSlider>
</div>

@code {
    private int[] priceRange = new int[] { 200, 800 };
}

よく使われるパターン

パターン 1：基本的な範囲選択

• デュアルハンドルを使用するには Type="SliderType.Range" を設定します
• 2 つの要素を持つ int[] または double[] 配列に値をバインドします
• Min、Max、Step プロパティを設定します
• ユーザーにフィードバックを提供するには、IsVisible="true" でツールチップを有効にします
• ValueChange イベントで範囲の更新を取得します

パターン 2：視覚的なカラーゾーンを持つ範囲

• SliderColorRanges コンポーネントを追加します
• 複数の ColorRange セグメント（例：寒色／暖色／高温）を定義します
• 視覚的に明確に区別できる色を設定します
• 温度、評価、リスクの表示に使用します
• 目盛りと組み合わせて値を正確に識別できるようにします

パターン 3：制約付きの範囲選択

• SliderLimits を使用してハンドルの移動を制限します
• 1 つ目のハンドルの境界には MinStart／MaxStart を設定します
• 2 つ目のハンドルの境界には MinEnd／MaxEnd を設定します
• いずれかのハンドルを固定する場合は、StartHandleFixed または EndHandleFixed を有効にします
• 予約システム、予算計画、スケジュール管理に最適です

パターン 4：カスタム値範囲の選択

• 数値以外の範囲には CustomValues 配列を使用します
• 例：string[] { "XS", "S", "M", "L", "XL", "XXL" }
• 値の配列では実際の値ではなく、インデックスを使用します
• 目盛りの書式設定でカスタムラベルを表示します
• サイズの選択、優先度レベル、スキル評価に最適です

主なプロパティ

プロパティ	デフォルト	使用する場面
Type	SliderType.Default	2 つのハンドルを使うには SliderType.Range に設定します
Value	new int[]{}	範囲の値をバインドするとき（2 要素の配列が必要です）
Min	0	選択可能な最小値を設定するとき
Max	100	選択可能な最大値を設定するとき
Step	1	増減値を定義するとき
CustomValues	null	数値以外の値（サイズ、ラベル）を使用するとき
IsImmediateValue	false	ドラッグ中にリアルタイムで更新するとき
ShowButtons	false	増減ボタンを追加するとき
Orientation	SliderOrientation.Horizontal	垂直レイアウトに変更するとき
Width	null	コンポーネントの幅を設定するとき
EnableAnimation	true	ハンドルのアニメーションを制御するとき
ReadOnly	false	値を表示したままユーザー操作を防ぐとき
Enabled	true	コンポーネント全体を有効化／無効化するとき

一般的なユースケース

1. Eコマースの価格フィルター：最低価格／最高価格の選択、予算範囲による絞り込み
2. 日付範囲ピッカー：チェックイン／チェックアウトの日付、イベント期間、スケジュール設定
3. 温度制御：HVAC システム、オーブンの設定、気候ゾーン
4. 年齢範囲の選択：人口統計、ターゲット層、年齢制限
5. 時間範囲の選択：勤務時間、利用可能な時間枠、時間帯
6. スコア／評価の範囲：成績による絞り込み、パフォーマンス指標、レビューのスコア
7. ファイナンシャルプランニング：予算配分、投資範囲、支出上限
8. リソースの割り当て：CPU／メモリの上限、帯域幅の調整、キャパシティプランニング

クイック判断ツリー

ユーザーが範囲選択（2 つの値）を必要としている ├─ 数値範囲ですか？ │ ├─ Type="SliderType.Range" に設定します │ ├─ Value に int[] または double[] を使用します │ └─ Min、Max、Step を設定します ├─ 数値以外の値（サイズ、ラベル）ですか？ │ ├─ CustomValues 配列を設定します │ ├─ 値の配列にはインデックスを格納します │ └─ ラベルには目盛りの書式設定を使用します ├─ 視覚的なゾーンが必要ですか？ │ ├─ SliderColorRanges コンポーネントを追加します │ └─ 複数の ColorRange セグメントを定義します ├─ 移動を制限しますか？ │ ├─ SliderLimits コンポーネントを使用します │ ├─ MinStart/MaxStart/MinEnd/MaxEnd を設定します │ └─ 必要に応じて StartHandleFixed または EndHandleFixed を有効にします ├─ 垂直レイアウトが必要ですか？ │ └─ Orientation="SliderOrientation.Vertical" に設定します └─ ドラッグ中にリアルタイムで更新しますか？ └─ IsImmediateValue="true" に設定します

---

OtpInput

長さ、入力タイプ（数値、テキスト、パスワード）、スタイルモード（アウトライン、下線、塗りつぶし）、自動フォーカス管理、包括的なイベント処理を設定できる Syncfusion Blazor OtpInput（一時パスワード）コンポーネントを実装し、安全に認証コードを入力する方法を学びます。2 要素認証、メール認証、SMS コード、PIN 入力など、キーボード操作とアクセシビリティに対応した、安全な複数桁コード入力が必要なあらゆる場面に最適です。

ドキュメント

はじめに

📄 参照： references/otpinput-getting-started.md

• インストールと NuGet パッケージのセットアップ
• SfOtpInput コンポーネントの基本的なセットアップ
• 名前空間のインポートとサービス登録
• CSS テーマの設定
• OTP の桁数を指定する Length プロパティ
• 値のバインドと取得
• 最小限の動作例

設定オプション

📄 参照： references/otpinput-configuration.md

• 桁数を指定する Length プロパティ（デフォルト：4）
• Type プロパティ（Number、Text、Password）
• 空の入力欄に表示するプレースホルダーの設定
• 視覚的にグループ化する区切り文字
• 入力をすぐに開始するための AutoFocus
• 無効状態の管理
• ID と HtmlAttributes のカスタマイズ

スタイル設定モード

📄 参照: references/otpinput-styling-modes.md

• StylingMode のオプション（Outlined、Underlined、Filled）
• TextTransform（None、Lowercase、Uppercase）
• カスタムスタイル設定用の CssClass
• Theme Studio によるテーマのカスタマイズ
• レスポンシブデザインのパターン
• 表示状態とフォーカスインジケーター

イベントとデータバインディング

📄 参照: references/otpinput-events-binding.md

• Value プロパティと双方向バインディング（@bind-Value）
• ValueChanged イベントコールバック（Value プロパティのみを使用し、@bind-Value は使用しないでください）
• OtpInputEventArgs を使った OnInput イベント
• OnFocus イベントと OnBlur イベント
• 作成時のライフサイクルイベント
• フォームバリデーションとの連携
• リアルタイム検証のパターン
• 入力完了時の自動送信

アクセシビリティ

📄 参照: references/otpinput-accessibility.md

• 各入力フィールドに設定する AriaLabels 配列
• キーボード操作（矢印キー、バックスペース、Delete）
• スクリーンリーダーのサポート
• WCAG 2.1 準拠
• フォーカス管理のベストプラクティス
• Password タイプのアクセシビリティに関する考慮事項
• モバイルデバイス向けの最適化

クイックスタートの例

@using Syncfusion.Blazor.Inputs

<div class="otp-container">
    <label>Enter verification code:</label>
    <SfOtpInput @bind-Value="@otpValue"
                Length="6"
                Type="OtpInputType.Number"
                StylingMode="OtpInputStyle.Outlined">
    </SfOtpInput>
    
    @if (!string.IsNullOrEmpty(message))
    {
        <div class="message">@message</div>
    }
</div>

@code {
    private string otpValue = "";
    private string message = "";
    
    protected override void OnParametersSet()
    {
        if (otpValue.Length == 6)
        {
            message = "Verifying code...";
            // Call verification API
        }
    }
}

よくあるパターン

パターン 1：基本的な OTP 認証（6 桁の数字）

• 標準的な OTP の長さとして Length="6" を設定します
• 数字のみの入力には Type="OtpInputType.Number" を使用します
• 即座に入力できるよう AutoFocus="true" を有効にします
• 双方向バインディングには @bind-Value を使用します（最も簡単な方法です）
• OTP をサーバーで検証します

パターン 2：メール／SMS 認証コード

• サービスに応じて Length="4" または Length="6" を設定します
• 数字コードには Type="OtpInputType.Number" を使用します
• すっきりとした外観にするには StylingMode="OtpInputStyle.Underlined" を設定します
• ページの読み込み時に最初の入力欄へ自動的にフォーカスします
• コードの有効期限を示すカウントダウンタイマーを表示します
• 「コードを再送信」機能を用意します

パターン 3：安全な PIN 入力

• 入力をマスクするには Type="OtpInputType.Password" を使用します
• PIN の桁数として Length="4" または Length="6" を設定します
• モダンな外観にするには StylingMode="OtpInputStyle.Filled" を適用します
• セキュリティのためにレート制限を実装します
• 認証に失敗した場合は入力内容をクリアします
• 検証結果を視覚的にフィードバックします

パターン 4：英数字の認証（区切り文字あり）

• 英字と数字を入力するには Type="OtpInputType.Text" を設定します
• 読みやすくするには TextTransform="TextTransform.Uppercase" を使用します
• 数字を視覚的にグループ化するには Separator="-" を設定します
• 例：ABC-123-XYZ のパターン
• 区切り位置を含めて Length="9" を設定します
• アクティベーションコードやライセンスキーに便利です

主要なプロパティ

プロパティ	デフォルト	使用する場面
Value	""	OTP 値のバインディング（@bind-Value による双方向バインディング）
Length	4	OTP 入力フィールドの数を設定するとき
Type	OtpInputType.Number	入力タイプ（Number、Text、Password）を指定するとき
StylingMode	OtpInputStyle.Outlined	表示スタイル（Outlined、Underlined、Filled）を選択するとき
Placeholder	""	空のフィールドにヒントテキストを表示するとき
Separator	""	グループ間に視覚的な区切り文字を追加するとき
TextTransform	TextTransform.None	テキストを変換するとき（None、Lowercase、Uppercase）
AutoFocus	false	読み込み時に最初の入力欄へ自動的にフォーカスするとき
Disabled	false	すべての入力フィールドを無効にするとき
CssClass	""	カスタム CSS クラスを適用するとき
AriaLabels	null	各入力にカスタム ARIA ラベルを設定するとき
HtmlAttributes	null	カスタム HTML 属性を追加するとき

一般的な使用例

1. 二要素認証（2FA）：ログインセキュリティ、アカウント認証、多要素認証
2. メール認証：アカウントの有効化、メールの確認、ニュースレターの登録
3. SMS 認証：電話番号の確認、モバイルアプリへのログイン、取引の確認
4. パスワードのリセット：安全なパスワードの再設定、アカウントアクセスの復旧
5. 取引の確認：銀行取引、支払いの確認、資金の送金
6. アクセス制御：建物への入館コード、セキュリティエリアへのアクセス、一時アクセスコード
7. デバイスのペアリング：Bluetooth のペアリングコード、スマートデバイスのセットアップ、IoT デバイスの接続
8. アクティベーションコード：ソフトウェアライセンス、製品のアクティベーション、サブスクリプションの検証

クイック決定ツリー

ユーザーが OTP／認証コードの入力を必要としている ├─ 数字のみですか？ │ ├─ Type="OtpInputType.Number" を設定します │ └─ Length="4" または Length="6" を使用します ├─ 入力内容を非表示にする必要がありますか（PIN）？ │ ├─ Type="OtpInputType.Password" を設定します │ └─ セキュリティのベストプラクティスを適用します ├─ 英数字のコードですか？ │ ├─ Type="OtpInputType.Text" を設定します │ ├─ TextTransform="TextTransform.Uppercase" を使用します │ └─ 読みやすさを考慮して Separator を検討します ├─ 入力完了時に自動送信しますか？ │ ├─ ValueChanged イベントをリッスンします │ ├─ value.Length == Length かどうかを確認します │ └─ 認証 API を自動的に呼び出します ├─ カスタムスタイルが必要ですか？ │ ├─ アウトライン → StylingMode="OtpInputStyle.Outlined"（デフォルト） │ ├─ 下線 → StylingMode="OtpInputStyle.Underlined" │ └─ 塗りつぶし → StylingMode="OtpInputStyle.Filled" └─ アクセシビリティが重要ですか？ ├─ スクリーンリーダー用に AriaLabels 配列を設定します └─ キーボードユーザー向けに AutoFocus を有効にします

---

Rating

精度モード（全体、半分、四分の一、厳密）、カスタムアイコンとテンプレート、ラベルとツールチップのサポート、包括的なイベント処理、アクセシビリティ機能を備えた Syncfusion Blazor Rating コンポーネントを実装し、直感的な評価とフィードバックの収集を行う方法を学びます。商品レビュー、スキル評価、満足度調査、品質評価など、キーボード操作やフォーム連携を備えた星評価やカスタムアイコンによるユーザーフィードバックが必要なあらゆる場面に最適です。

ドキュメント

はじめに

📄 参照： references/rating-getting-started.md

• インストールと NuGet パッケージのセットアップ
• SfRating コンポーネントの基本的なセットアップ
• 名前空間のインポートとサービスの登録
• CSS テーマの設定
• 評価スケール用の ItemsCount プロパティ
• 値のバインドと取得
• 最小限の動作例
• 基本的な 5 段階評価の実装

精度と値

📄 参照： references/rating-precision-and-values.md

• Precision プロパティ（Full、Half、Quarter、Exact）
• 整数のみを使用する Full 精度
• 0.5 刻みの Half 精度
• 0.25 刻みの Quarter 精度
• 小数値を使用する Exact 精度
• 最小評価値を指定する Min プロパティ
• 評価をクリアする AllowReset
• 単一項目モード用の EnableSingleSelection
• 値の計算と表示

ラベルとツールチップ

📄 参照： references/rating-labels-and-tooltips.md

• ラベル表示用の ShowLabel プロパティ
• LabelPosition（Top、Bottom、Left、Right）
• カスタムラベル書式用の LabelTemplate
• ホバー時のツールチップ用の ShowTooltip プロパティ
• カスタムツールチップコンテンツ用の TooltipTemplate
• 値に応じた動的なラベル更新
• 状況に応じたフィードバックパターン

テンプレートとカスタマイズ

📄 参照： references/rating-templates-customization.md

• 未選択項目用の EmptyTemplate
• 選択済み項目用の FullTemplate
• テンプレートデータ用の RatingItemContext
• カスタムアイコンの実装（ハート、親指、絵文字）
• SVG とアイコンフォントの連携
• カスタムスタイル用の CssClass
• EnableAnimation プロパティ
• テーマのカスタマイズとレスポンシブデザイン

イベントと状態

📄 参照： references/rating-events-and-states.md

• 評価の更新時に発生する ValueChanged イベント
• RatingHoverEventArgs を伴う OnItemHover イベント
• Created ライフサイクルイベント
• フォーム検証との連携
• 評価を表示専用にする ReadOnly 状態
• Disabled 状態の管理
• Visible プロパティの制御
• キーボードナビゲーションのサポート
• アクセシビリティ機能と ARIA 属性

クイックスタートの例

@using Syncfusion.Blazor.Inputs

<div class="rating-container">
    <label>Rate your experience:</label>
    <SfRating @bind-Value="@userRating"
              ItemsCount="5"
              Precision="PrecisionType.Full"
              ShowLabel="true">
    </SfRating>
    
    @if (userRating > 0)
    {
        <p>You rated: @userRating / 5 stars</p>
    }
</div>

@code {
    private double userRating = 0;
}

よくあるパターン

パターン 1：基本的な 5 段階の商品評価

• 標準的な評価には既定の ItemsCount="5" を使用します
• 星を整数単位にするには Precision="PrecisionType.Full" を設定します
• 双方向データバインディングを有効にするには @bind-Value を使用します
• 評価値を表示するには ShowLabel="true" を指定します
• LabelPosition="LabelPosition.Right" でラベルの位置を設定します
• 自動送信には ValueChanged イベントを使用します

パターン 2：ホバー時のフィードバック付き半星評価

• 0.5 単位の評価には Precision="PrecisionType.Half" を設定します
• ホバー時のフィードバックには ShowTooltip="true" を有効にします
• プレビューには OnItemHover イベントを使用します
• 平均評価は ReadOnly="true" で表示します
• カスタムラベルテンプレートに評価数を表示します
• リアルタイムのフィードバックメッセージを実装します

パターン 3：カスタムアイコンテンプレート（ハート、親指、絵文字）

• 未選択状態には EmptyTemplate を定義します
• 選択状態には FullTemplate を定義します
• アイテムごとのレンダリングには RatingItemContext を使用します
• カスタムアイコン（♥、👍、😊 など）を実装します
• カスタムの色とサイズには CssClass を適用します
• 滑らかな遷移には EnableAnimation="true" を有効にします

パターン 4：複数カテゴリーの評価フォーム

• 複数の SfRating コンポーネントを作成します
• 必要に応じてカテゴリーごとに異なる ItemsCount を設定します
• 検証には EditForm と組み合わせます
• 全体の評価の平均を計算します
• イベントハンドラーで入力の完了状況を追跡します
• すべての評価が入力された場合にのみ送信を有効にします

主なプロパティ

プロパティ	既定値	使用する場面
Value	0	評価値をバインドする場合（@bind-Value による双方向バインディング）
ItemsCount	5	評価アイテム（星）の数を設定する場合
Precision	PrecisionType.Full	評価の刻み幅（Full、Half、Quarter、Exact）を定義する場合
ShowLabel	false	評価値をテキストで表示する場合
LabelPosition	LabelPosition.Right	ラベルの位置（Top、Bottom、Left、Right）を設定する場合
ShowTooltip	false	ホバーツールチップを有効にする場合
AllowReset	true	ユーザーが評価をクリアできるようにする場合
EnableSingleSelection	false	単一アイテム選択モード（親指の上げ下げ）を使用する場合
Min	null	最小評価値を設定する場合
ReadOnly	false	評価を表示専用モードで表示する場合
Disabled	false	すべての操作を無効にする場合
EnableAnimation	true	滑らかな遷移を有効にする場合
Visible	true	コンポーネントの表示を制御する場合
EmptyTemplate	null	未選択アイテムのカスタムテンプレートを設定する場合
FullTemplate	null	選択済みアイテムのカスタムテンプレートを設定する場合
LabelTemplate	null	カスタムラベルの内容を設定する場合
TooltipTemplate	null	カスタムツールチップの内容を設定する場合
CssClass	""	カスタム CSS クラスを適用する場合

一般的なユースケース

1. 製品レビュー：EC サイトの評価、マーケットプレイスのフィードバック、顧客レビュー、製品品質の評価
2. サービス品質：レストランの評価、ホテルのレビュー、配送サービスへのフィードバック、サポートの満足度
3. スキル評価：従業員の評価、能力の評価、トレーニングへのフィードバック、習熟度
4. コンテンツ評価：記事へのフィードバック、動画の評価、コースのレビュー、ドキュメントの有用性
5. ユーザーエクスペリエンス：アプリストアの評価、機能への満足度、使いやすさのスコア、NPS アンケート
6. 業績評価：チームメンバーの評価、プロジェクトの評価、目標達成度、KPI の追跡
7. アンケート回答：満足度調査、世論調査、フィードバックフォーム、アンケート
8. 品質管理：検査評価、コンプライアンスのスコアリング、監査結果、品質指標
9. エンターテインメント：映画の評価、音楽レビュー、本の評価、ゲームのスコア
10. 感情分析：顧客の感情、ブランドの印象、気分の追跡、感情に関するフィードバック

クイック判定ツリー

ユーザーが評価／フィードバック機能を必要としている ├─ 既存の評価を表示する（読み取り専用）？ │ ├─ ReadOnly="true" を設定する │ ├─ 平均評価には Precision="PrecisionType.Exact" を使用する │ └─ レビュー数とともに ShowLabel="true" を表示する ├─ ユーザーから新しい評価を収集する？ │ ├─ 星全体のみ？ → Precision="PrecisionType.Full" │ ├─ 半分の星？ → Precision="PrecisionType.Half" │ ├─ 4 分の 1 の星？ → Precision="PrecisionType.Quarter" │ └─ 任意の小数？ → Precision="PrecisionType.Exact" ├─ カスタム評価尺度を使用する？ │ ├─ 3 段階評価 → ItemsCount="3" │ ├─ 7 段階評価 → ItemsCount="7" │ └─ 10 段階評価 → ItemsCount="10" ├─ 星の代わりにカスタムアイコンが必要？ │ ├─ ハート → ♥ を使って EmptyTemplate と FullTemplate を定義する │ ├─ 親指 → 👍／👎 アイコンを使用する │ ├─ 絵文字 → 😞😐🙂😊🤩 の段階を使用する │ └─ カスタム SVG → テンプレート内に SVG を描画する ├─ いいね／よくないねのみ？ │ ├─ EnableSingleSelection="true" を設定する │ ├─ ItemsCount="1" または ItemsCount="2" を使用する │ └─ 親指アイコンを使ったカスタムテンプレートを使用する ├─ フォームとの連携が必要？ │ ├─ <EditForm> 内で使用する │ ├─ 検証属性を追加する │ └─ 検証のために ValueChanged を監視する ├─ 評価に関するフィードバックを表示する？ │ ├─ 数値を表示するために ShowLabel="true" を有効にする │ ├─ カスタムメッセージには LabelTemplate を使用する │ ├─ ホバー時のフィードバックには ShowTooltip="true" を有効にする │ └─ 状況に応じたメッセージには TooltipTemplate を使用する └─ アクセシビリティ要件がある？ ├─ キーボード操作（矢印キー）が機能することを確認する ├─ スクリーンリーダーとの互換性をテストする └─ わかりやすい ARIA ラベルを指定する

---

InputMask

定義済みパターン、カスタムマスクルール、プロンプト文字を使った書式付きテキスト入力を実現する Syncfusion Blazor InputMask（MaskedTextBox）コンポーネントの実装方法を説明します。電話番号、SSN、クレジットカード、日付、ZIP コード、ナンバープレート、その他、書式検証、リテラルの保持、包括的なイベント処理を伴う構造化テキスト入力が必要なあらゆるシナリオで、マスク済みの入力をすぐに取得できます。

ドキュメント

はじめに

📄 参照： references/inputmask-getting-started.md

• インストールと NuGet パッケージの設定
• 基本的な SfMaskedTextBox コンポーネントの設定
• 名前空間のインポートとサービス登録
• CSS テーマの設定
• シンプルなマスクの例（電話番号、日付、SSN）
• 値バインディングの基本
• 最小限の動作する例

マスクパターンと設定

📄 参照： references/inputmask-mask-patterns.md

• 標準のマスク文字（0、9、L、?、A、&、C、#）
• 定義済みパターン（電話番号、SSN、ZIP、日付、時刻）
• Mask プロパティの設定
• マスク内のリテラル文字
• 任意入力と必須入力の位置
• 複雑なパターンの例
• 国際形式のパターン
• パターン検証ルール

カスタム文字と書式設定

📄 参照： references/inputmask-custom-characters.md

• CustomCharacters ディクショナリの使用方法
• カスタムマスクルールの作成
• 正規表現による文字の検証
• 高度なパターンのカスタマイズ
• 使用例（ナンバープレート、製品コードなど）
• カスタムマスクと標準マスクの組み合わせ
• カスタムルールのベストプラクティス

プロンプト文字の設定

📄 参照： references/inputmask-prompt-configuration.md

• PromptChar プロパティ（既定値：_）
• 表示用の PromptPlaceholder
• 値に含めるための EnableLiterals
• Placeholder と PromptChar の違い
• 視覚的なフィードバックの設定
• ユーザーエクスペリエンスに関する考慮事項
• 様々な設定例

イベントとデータバインディング

📄 参照： references/inputmask-events-binding.md

• Value プロパティと @bind-Value
• ValueChange イベント（MaskChangeEventArgs）
• ValueChanged イベントコールバック
• Focus および Blur イベント（MaskFocusEventArgs、MaskBlurEventArgs）
• OnChange、OnInput、ValueChange の発生タイミング
• EditContext を使用した EditForm との連携
• 検証用の ValueExpression
• リアルタイム検証パターン
• イベントハンドラーのベストプラクティス

スタイル設定とアクセシビリティ

📄 参照： references/inputmask-styling-accessibility.md

• FloatLabelType の設定
• ShowClearButton の機能
• カスタムスタイル用の CssClass
• 幅とレスポンシブなサイズ設定
• Enabled 状態と Readonly 状態
• Theme Studio によるテーマのカスタマイズ
• WCAG 2.1 への準拠
• キーボード操作
• ARIA 属性
• スクリーンリーダーのサポート
• RTL（EnableRtl）のサポート
• HtmlAttributes と InputAttributes
• アクセシビリティのベストプラクティス

クイックスタートの例

@using Syncfusion.Blazor.Inputs

<div class="input-mask-container">
    <label>Phone Number:</label>
    <SfMaskedTextBox @bind-Value="@phoneNumber"
                     Mask="(000) 000-0000"
                     Placeholder="Enter phone number"
                     FloatLabelType="FloatLabelType.Auto">
    </SfMaskedTextBox>
    
    <label>Social Security Number:</label>
    <SfMaskedTextBox @bind-Value="@ssn"
                     Mask="000-00-0000"
                     PromptChar="#"
                     Placeholder="Enter SSN">
    </SfMaskedTextBox>
</div>

@code {
    private string phoneNumber = "";
    private string ssn = "";
}

一般的なパターン

パターン 1：電話番号入力（米国形式）

• 米国の電話番号にはマスク "(000) 000-0000" を使用します
• 視覚的に分かりやすくするため、PromptChar="_" を設定します
• 双方向バインディングには @bind-Value を有効にします
• モダンな UX には FloatLabelType.Auto を使用します
• ユーザー向けの案内として Placeholder を設定します
• 括弧とハイフンを値から除外するには、EnableLiterals="false" を設定します

パターン 2：社会保障番号（SSN）

• SSN 形式にはマスク "000-00-0000" を使用します
• プライバシー保護のため、PromptChar="#" または PromptChar="*" を設定します
• 入力用には Readonly="false"、表示用には Readonly="true" を適用します
• すばやくリセットできるよう、ShowClearButton="true" を使用します
• ValueChange イベントで検証を実装します
• セキュリティのため、表示値のマスキングを検討します

パターン 3：区切り文字付きのクレジットカード番号

• 16 桁のカードにはマスク "0000 0000 0000 0000" を使用します
• 数字のみを取得するには、EnableLiterals="false" を設定します
• ValueChange を監視してカードの種類（Visa、MC、Amex）を判定します
• 先頭の数字に基づいてカードブランドのアイコンを表示します
• リアルタイムで Luhn アルゴリズムによる検証を適用します
• 空の位置を分かりやすくするため、PromptChar="X" を使用します

パターン 4：カスタム形式の日付入力

• MM/DD/YYYY 形式にはマスク "00/00/0000" を使用します
• または、DD-MM-YYYY 形式には "00-00-0000" を使用します
• 形式を案内するため、Placeholder="MM/DD/YYYY" を設定します
• 有効な日付かどうかをカスタム検証で確認します
• ValueChange を使用して日と月の範囲を検証します
• 複雑な日付選択には DatePicker コンポーネントの使用を検討します

パターン 5：カスタム製品コード形式

• 特殊なルールには CustomCharacters ディクショナリを定義します
• 例：@(new Dictionary<string, string> { { "P", "[A-Z]" }, { "N", "[0-9]" } })
• ABC-123-456 形式には "PPP-NNN-NNN" のようなマスクを使用します
• 標準文字とカスタム文字を組み合わせます
• 大文字への変換には TextTransform を適用します
• イベント内でビジネスルールに基づいて検証します

パターン 6：カスタム文字を使用した国際電話番号

• 国ごとのパターンには CustomCharacters を使用します
• 例：国番号を含む "+00 (000) 000-0000"
• • と書式を含めるには、EnableLiterals="true" を設定します
• 国番号に基づいて国旗を表示します
• 国ごとに動的にマスクを切り替えます
• 複数の国際形式に対応します

主なプロパティ

プロパティ	デフォルト	使用する場面
Mask	""	入力形式のパターンを定義する場合（必須）
Value	""	マスクされた入力値をバインドする場合
PromptChar	'_'	空の位置に表示するプレースホルダー文字を設定する場合
PromptPlaceholder	null	プレースホルダーモードでプロンプト文字を上書きする場合
EnableLiterals	true	値にリテラル文字を含める／除外する場合
CustomCharacters	null	正規表現でカスタムマスクルールを定義する場合
Placeholder	""	空のときにヒントテキストを表示する場合
FloatLabelType	FloatLabelType.Never	フローティングラベルのアニメーションを有効にする場合
ShowClearButton	false	すばやくクリアする機能を追加する場合
Readonly	false	マスクされた値を表示したまま編集を防ぐ場合
Enabled	true	コンポーネントを有効／無効にする場合
Width	""	コンポーネントの幅を設定する場合
CssClass	""	カスタム CSS クラスを適用する場合
EnableRtl	false	テキストの右から左への方向を有効にする場合
HtmlAttributes	null	ラッパーにカスタム HTML 属性を追加する場合
InputAttributes	null	入力要素にカスタム属性を追加する場合
TabIndex	0	タブ移動の順序を設定する場合

一般的なユースケース

1. 連絡先情報：電話番号、FAX 番号、国番号付きの携帯電話番号
2. 個人識別情報：SSN、納税者番号、国民 ID、パスポート番号、運転免許証番号
3. 金融データ：クレジットカード番号、銀行口座番号、ルーティング番号、CVV コード
4. 日付と時刻：カスタムの日付形式、時刻入力、特定のパターンを使用した日付範囲
5. 郵便番号：ZIP コード（米国）、郵便番号（国際）、書式付きの市外局番
6. 製品識別情報：SKU 番号、シリアル番号、製品コード、バーコード入力
7. ライセンス番号：車両ナンバープレート、ソフトウェアライセンス、パターン付きの登録番号
8. ネットワーク情報：IP アドレス、MAC アドレス、ドット表記のサブネットマスク
9. バージョン番号：ソフトウェアのバージョン（1.2.3）、カスタム形式のビルド番号
10. カスタムコード：バウチャーコード、プロモーションコード、特定のパターンを使用した追跡番号

クイック判断ツリー

ユーザーがパターンに沿った書式付きテキスト入力を必要としている ├─ 標準的な形式ですか？ │ ├─ 米国の電話番号 → Mask="(000) 000-0000" │ ├─ SSN → Mask="000-00-0000" │ ├─ ZIP コード → Mask="00000" または Mask="00000-0000" │ ├─ クレジットカード → Mask="0000 0000 0000 0000" │ ├─ 日付 → Mask="00/00/0000"（MM/DD/YYYY） │ └─ 時刻 → Mask="00:00"（HH:MM） ├─ 値には数字のみが必要ですか？ │ ├─ EnableLiterals="false" を設定します │ └─ マスクのリテラルは Value から除外されます ├─ 値に書式を含めますか？ │ ├─ EnableLiterals="true"（デフォルト）を設定します │ └─ 値には括弧、ハイフンなどが含まれます ├─ カスタムパターン（標準形式以外）が必要ですか？ │ ├─ CustomCharacters ディクショナリを使用します │ ├─ 各カスタム文字の正規表現を定義します │ ├─ 例：大文字の場合は { "P", "[A-Z]" } │ └─ マスク内で組み合わせます："PPP-000-NNN" ├─ プライバシーやセキュリティに関する懸念がありますか？ │ ├─ PromptChar="*" または PromptChar="#" を設定します │ ├─ マスク済みデータの表示のみを行う場合は Readonly="true" を使用します │ └─ 必要に応じて、表示時に追加のマスキングを実装します ├─ 国際形式への対応が必要ですか？ │ ├─ 柔軟なパターンには CustomCharacters を使用します │ ├─ ロケールに基づく動的なマスク切り替えを実装します │ └─ 国や地域の選択肢を検討します ├─ フォームの検証が必要ですか？ │ ├─ モデルバインディングを使い、<EditForm> 内で使用します │ ├─ 検証には ValueExpression を追加します │ ├─ データ注釈（[Required]、[StringLength]）を適用します │ ├─ リアルタイム検証には ValueChange を監視します │ └─ カスタム検証ロジック（Luhn、日付範囲）を実装します ├─ ユーザーエクスペリエンスを向上させますか？ │ ├─ FloatLabelType="FloatLabelType.Auto" を設定します │ ├─ すばやくリセットできるよう ShowClearButton="true" を有効にします │ ├─ わかりやすい Placeholder テキストを使用します │ └─ 検証結果を視覚的にフィードバックします └─ アクセシビリティが重要ですか？ ├─ キーボードナビゲーションが機能することを確認します ├─ HtmlAttributes で適切な ARIA ラベルを設定します ├─ スクリーンリーダーとの互換性をテストします └─ ラベルやプレースホルダーに明確な形式の説明を記載します

---

ColorPicker

Syncfusion Blazor ColorPicker コンポーネントを実装して、ピッカーモードとパレットモード、透明度の制御、プリセットカラーコレクション、インライン表示またはポップアップ表示、モードの切り替えを備えた直感的な色選択機能を実現する方法を学びます。テーマ、UI のカスタマイズ、デザインツール、データの可視化、ブランディングなど、16 進数値や rgba 値による色の選択、最近使用した色の追跡、包括的なイベント処理が必要なあらゆるシナリオで、Blazor アプリケーションにおける即時の色入力を実現できます。

ドキュメント

はじめに

📄 参照： references/colorpicker-getting-started.md

• インストールと NuGet パッケージのセットアップ
• SfColorPicker コンポーネントの基本的なセットアップ
• 名前空間のインポートとサービスの登録
• CSS テーマの設定
• 色形式を指定した値のバインディング
• モードの概要（Picker と Palette）
• 最小構成の動作例

モードと設定

📄 参照： references/colorpicker-modes-configuration.md

• ColorPickerMode（Picker と Palette）
• グラデーションによる色選択の Picker モード
• 定義済みの色グリッドを使う Palette モード
• インライン表示とポップアップ表示のオプション
• ユーザーがモードを選択できる ModeSwitcher
• パレットレイアウトの Columns 設定
• 適用／キャンセル操作の ShowButtons
• モード固有の動作とユースケース

プリセットカラーとパレット

📄 参照： references/colorpicker-presets-colors.md

• PresetColors ディクショナリの設定
• カスタムカラーパレットのグループ
• デフォルトのプリセットカラーコレクション
• ShowRecentColors 機能
• 「選択なし」を指定する NoColor オプション
• プリセットカテゴリの整理
• ビジネスおよびデザインのユースケース

不透明度と値の形式

📄 参照： references/colorpicker-opacity-values.md

• アルファチャンネルの制御に EnableOpacity を使用
• 不透明度スライダーの設定
• 値の形式（hex、rgba、hsva）
• 不透明度の値の取得と設定
• 透明色の処理
• ユースケース（オーバーレイ、ハイライト、透明度）

イベントとデータバインディング

📄 参照： references/colorpicker-events-binding.md

• Value プロパティと双方向バインディング（@bind-Value）
• ValueChanged イベントコールバック
• ColorPickerEventArgs を使用する Selected イベント
• ポップアップ制御用の OnOpen イベントと OnClose イベント
• ModeSwitched イベントの処理
• カスタムパレットタイル用の OnTileRender
• EditForm とのフォーム連携
• リアルタイムのカラー プレビューのパターン

カスタマイズとアクセシビリティ

📄 参照： references/colorpicker-customization-accessibility.md

• ShowButtons の設定
• カスタムスタイル設定用の CssClass
• Disabled と EnableRtl の状態
• HtmlAttributes のカスタマイズ
• キーボードナビゲーションのサポート
• アクセシビリティ用 ARIA 属性
• WCAG 2.1 への準拠
• Theme Studio によるテーマのカスタマイズ
• レスポンシブデザインのパターン

クイックスタートの例

@using Syncfusion.Blazor.Inputs

<div class="colorpicker-container">
    <label>Choose a color:</label>
    <SfColorPicker @bind-Value="@selectedColor"
                   Mode="ColorPickerMode.Palette"
                   ShowButtons="true">
    </SfColorPicker>
    
    <div class="color-preview" style="background-color: @selectedColor;">
        Selected: @selectedColor
    </div>
</div>

@code {
    private string selectedColor = "#008000";
}

一般的なパターン

パターン 1：基本的なパレットカラーピッカー

• 定義済みのカラ―グリッドには Mode="ColorPickerMode.Palette" を使用します
• 双方向バインディングには @bind-Value を有効にします
• 適用／キャンセル操作には ShowButtons="true" を設定します
• 既定の PresetColors を使用するか、カスタマイズします
• 16 進数値には文字列変数をバインドします
• 選択した色でプレビューを表示します

パターン 2：不透明度に対応した高度なグラデーションピッカー

• グラデーションセレクターには Mode="ColorPickerMode.Picker" を設定します
• アルファチャンネルには EnableOpacity="true" を有効にします
• モードの切り替えを可能にするには ModeSwitcher="true" を使用します
• 透明度を表す rgba 値を表示します
• デザインツールや画像編集ツールに最適です
• 不透明度を含むリアルタイムプレビューを表示します

パターン 3：インラインカラ―セレクター（ポップアップなし）

• ピッカーを常に表示するには Inline="true" を設定します
• 色のカスタマイズパネルに使用します
• ポップアップの起動なしで、すぐに表示します
• Picker モードと Palette モードの両方で動作します
• 即時選択には ShowButtons="false" と組み合わせます
• 設定パネルやテーマビルダーに最適です

パターン 4：カスタムプリセットパレット

• カスタムグループを含む PresetColors ディクショナリを定義します
• カテゴリ別に整理します（ブランドカラー、パステルカラーなど）
• グリッドレイアウトには Columns プロパティを設定します
• 履歴を表示するには ShowRecentColors="true" を使用します
• 「色なし」オプションには NoColor="true" を有効にします
• ブランドカラーシステムやデザインシステムに最適です

主なプロパティ

プロパティ	既定値	使用する場面
Value	""	選択した色（hex、rgba、hsva）をバインドする場合
Mode	ColorPickerMode.Picker	Picker（グラデーション）または Palette（グリッド）を選択する場合
Inline	false	ポップアップの代わりにピッカーをインライン表示する場合
ModeSwitcher	false	ユーザーが Picker と Palette を切り替えられるようにする場合
EnableOpacity	false	アルファチャンネル／透明度の制御を有効にする場合
ShowButtons	false	適用ボタンとキャンセルボタンを表示する場合（ポップアップモード）
ShowRecentColors	true	最近選択した色を表示する場合
PresetColors	null	カスタムプリセットカラーパレットのディクショナリを指定する場合
Columns	10	パレットモードでの列数
NoColor	false	「色なし」の選択オプションを許可する場合
Disabled	false	色の選択を完全に無効にする場合
EnableRtl	false	右から左へのレイアウトを有効にする場合
CssClass	""	カスタム CSS クラスを適用する場合
HtmlAttributes	null	カスタム HTML 属性を追加する場合

一般的なユースケース

1. UI テーマのカスタマイズ：ユーザーが選択できるテーマ、配色ビルダー、パーソナライズ
2. デザインツール：グラフィックエディター、描画アプリ、画像への注釈、マークアップツール
3. データの可視化：グラフの色選択、グラフのカスタマイズ、レポートのスタイル設定
4. ブランディング：ロゴの色、ブランドアイデンティティ、スタイルガイドの実装、コーポレートカラー
5. Web デザイン：CSS の色選択、背景色、テキストの色、枠線の色
6. 製品のカスタマイズ：製品のカラーバリエーション、オリジナルグッズ、パーソナライズ
7. ハイライトツール：テキストハイライター、注釈の色、強調マーカー
8. ダッシュボードのカスタマイズ：ウィジェットの色、ステータスインジケーター、カテゴリの色
9. フォームビルダー：フォームのカスタムスタイル、入力欄の色、検証時の色
10. カレンダー／スケジュール管理：イベントの色、カテゴリ別の色分け、優先度インジケーター

クイック決定ツリー

ユーザーが色選択機能を必要としている ├─ あらかじめ定義された色のみが必要ですか？ │ ├─ Mode="ColorPickerMode.Palette" を使用します │ ├─ カスタムパレットを PresetColors に設定します │ └─ グリッドレイアウト用に Columns を設定します ├─ グラデーションから任意の色を選択できるようにしますか？ │ ├─ Mode="ColorPickerMode.Picker"（デフォルト）を使用します │ └─ ユーザーは全色域から選択できます ├─ 両方のモードを利用できるようにしますか？ │ ├─ ModeSwitcher="true" を有効にします │ └─ ユーザーは Picker と Palette を切り替えられます ├─ 透明度／不透明度が必要ですか？ │ ├─ EnableOpacity="true" を設定します │ ├─ 値にはアルファ値が含まれます（rgba 形式） │ └─ ユーザーが調整できる不透明度スライダーを表示します ├─ 常に表示しますか（ポップアップなし）？ │ ├─ Inline="true" を設定します │ ├─ 設定パネルやサイドバーで使用します │ └─ 選択を即時に反映する場合は、ShowButtons="false" を検討します ├─ 確認用のポップアップが必要ですか？ │ ├─ Inline="false"（デフォルト）を使用します │ ├─ 適用／キャンセルボタンを表示するには、ShowButtons="true" を設定します │ └─ 選択を確定するには、Selected イベントをリッスンします ├─ 最近使用した色を記録しますか？ │ ├─ ShowRecentColors="true"（デフォルト）を有効にします │ └─ 最近使用した色は自動的に表示されます ├─ 「色なし」を選択できるようにしますか？ │ ├─ NoColor="true" を設定します │ └─ ユーザーは色の選択を解除できます ├─ カスタムカラーパレットが必要ですか？ │ ├─ PresetColors ディクショナリを定義します │ ├─ 色をカテゴリごとにグループ化します │ └─ 例：{ "Basic": ["#fff", "#000"], "Brand": ["#e74c3c", "#3498db"] } ├─ フォームとの連携が必要ですか？ │ ├─ <EditForm> 内で使用します │ ├─ 検証属性を適用します │ └─ 検証には ValueChanged をリッスンします └─ アクセシビリティが重要ですか？ ├─ キーボード操作（Tab、Enter、Escape）が機能することを確認します ├─ スクリーンリーダーとの互換性をテストします └─ HtmlAttributes を使って分かりやすいラベルを指定します