syncfusion-aspnetcore-notifications

Syncfusion ASP.NET Core 通知の実装

トースト

トーストコンポーネントは、画面上に短時間表示され、自動的に消える通知メッセージを表示します。位置、アニメーション、アクションボタン、プログレスバー、テンプレート、タイムアウト制御、アクセシビリティに対応しており、シンプルなアラートから多機能な通知 UI まで幅広く利用できます。

ユーザーが次の内容に言及した場合、このスキルを省略しないでください： 通知、アラート、スナックバー、短いメッセージ、ポップアップの閉じ方、トーストユーティリティ、進捗通知、アクションボタン付きポップアップ。

---

コンポーネントの概要

主な機能

機能	説明
タイプ / cssClass	定義済みのスタイル：e-toast-success、e-toast-info、e-toast-warning、e-toast-danger
位置	X：左／中央／右、Y：上／下、またはピクセル／パーセント単位で指定
タイムアウト	timeOut による自動消去、ホバー時の遅延には extendedTimeout を使用、0 で固定表示
プログレスバー	showProgressBar による視覚的なカウントダウンバー、方向は progressDirection で指定
アクションボタン	buttons / e-toast-buttonmodelprops を使い、クリックハンドラー付きのボタンモデルを追加
テンプレート	template プロパティまたは <e-content-template> タグを使った完全なカスタム HTML
アニメーション	animation 設定による表示／非表示時のカスタムアニメーション効果
閉じるボタン	showCloseButton による手動での閉じる操作
複数のトースト	位置ごとに個別のトーストインスタンスを使用し、newestOnTop で表示順を指定
トーストユーティリティ	マークアップなしで素早くトーストを表示する ToastUtility.show()
アクセシビリティ	WAI-ARIA の role="alert"、WCAG 2.2 AA、Section 508、RTL に対応

NuGet パッケージ

Install-Package Syncfusion.EJ2.AspNet.Core

セットアップ（一度のみ）

~/Pages/_ViewImports.cshtml

@addTagHelper *, Syncfusion.EJ2

~/Pages/Shared/_Layout.cshtml — <head> 内：

<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>

また、</body> の前：

<ejs-scripts></ejs-scripts>

---

ドキュメントとナビゲーションガイド

📖 はじめに

📄 参照： references/getting-started.md

• インストールと NuGet のセットアップ
• タグヘルパーの登録
• タイトルとコンテンツを含む基本的なトースト
• JavaScript の show() メソッドによるトーストの表示
• 最初に動作するサンプル

📖 設定とオプション

📄 参照： references/configuration.md

• タイトルとコンテンツの設定
• カスタムのターゲットコンテナー
• 閉じるボタン（showCloseButton）
• プログレスバー（showProgressBar、progressDirection）
• 新しい項目を上に表示する順序（newestOnTop）
• 幅と高さのカスタマイズ
• HTML サニタイザー（enableHtmlSanitizer）

📖 位置とレイアウト

📄 参照： references/position.md

• 定義済みの X/Y 位置（左、中央、右／上、下）
• ピクセルまたはパーセントによる位置の指定
• 異なる位置に複数のトーストを表示
• width="100%" による全幅トースト

📖 タイムアウトとライフサイクル

📄 参照： references/timeout.md

• timeOut（ミリ秒）による自動消去
• ホバー時の延長タイムアウト（extendedTimeout）
• timeOut="0" による固定（永続）トースト
• クリック／タップでトーストを閉じる
• 表示するトーストの最大数を制限
• 重複するトーストを防止

📖 アクションボタン

📄 参照： references/action-buttons.md

• e-toast-buttonmodelprops によるボタンの追加
• ボタンのクリックハンドラー
• ボタンのクリックでトーストを閉じる

📖 テンプレートとアニメーション

📄 参照： references/templates-animation.md

• template プロパティによる静的 HTML テンプレート
• <e-content-template> による動的コンテンツテンプレート
• show() 時にテンプレートを動的に変更
• 表示／非表示時のカスタムアニメーション効果
• トーストを開く前に音声を再生

📖 トーストのタイプとスタイル設定

📄 参照： references/types-and-styling.md

• cssClass を使った定義済みタイプ（success、info、warning、danger）
• タイトル、コンテンツ、アイコン、背景の CSS カスタマイズ
• 定義済みタイプを指定した ToastUtility.show()
• ToastModel 全体を指定した ToastUtility.show()
• モバイルでのスワイプによる閉じる操作を防止

📖 アクセシビリティ

📄 読む： references/accessibility.md

• WAI-ARIA role="alert"
• WCAG 2.2 AA 準拠
• Section 508 サポート
• RTL レンダリング（enableRtl）
• スクリーンリーダーとの互換性

📖 API リファレンス

📄 読む： references/api.md

• 型とデフォルト値を含むすべてのプロパティ
• すべてのイベント（BeforeOpen、Open、Close、BeforeClose、Click、Created、Destroyed、BeforeSanitizeHtml）
• サブコンポーネントの型（ToastPosition、ToastAnimationSettings、ToastButtonModelProp）

---

クイックスタートの例

@* ~/Pages/Index.cshtml *@
<ejs-toast id="toast_default"
           title="Friend Request"
           content="Matt sent you a friend request."
           showCloseButton="true"
           showProgressBar="true"
           timeOut="5000">
    <e-toast-position X="Right" Y="Bottom"></e-toast-position>
</ejs-toast>

<ejs-button id="showBtn" content="Show Toast" cssClass="e-btn"></ejs-button>

<script>
    setTimeout(function () {
        var toast = document.getElementById('toast_default').ej2_instances[0];
        toast.target = document.body;
        toast.show();
    }, 500);

    document.getElementById('showBtn').addEventListener('click', function () {
        var toast = document.getElementById('toast_default').ej2_instances[0];
        toast.show();
    });
</script>

---

よくあるパターン

パターン 1：型付き通知の表示（成功／エラー／警告／情報）

<ejs-toast id="typed_toast">
    <e-toast-position X="Right" Y="Top"></e-toast-position>
</ejs-toast>

<script>
    var toasts = [
        { title: 'Success !', content: 'Record saved successfully.', cssClass: 'e-toast-success' },
        { title: 'Error !',   content: 'Failed to save record.',    cssClass: 'e-toast-danger'  },
        { title: 'Warning !', content: 'Unsaved changes present.',  cssClass: 'e-toast-warning' },
        { title: 'Info !',    content: 'Session expires in 5 min.', cssClass: 'e-toast-info'    }
    ];
    function showToast(index) {
        var toast = document.getElementById('typed_toast').ej2_instances[0];
        toast.target = document.body;
        toast.show(toasts[index]);
    }
</script>

パターン 2：トーストユーティリティ（マークアップ不要）

// Predefined type — no container element needed
ejs.notifications.ToastUtility.show('Record saved successfully', 'Success', 5000);

// With full model
ejs.notifications.ToastUtility.show({
    title: 'Upload Complete',
    content: 'Your file has been uploaded.',
    timeOut: 5000,
    position: { X: 'Right', Y: 'Bottom' },
    showCloseButton: true
});

パターン 3：閉じるハンドラー付きアクションボタン

<ejs-toast id="action_toast" title="New Message" timeOut="0">
    <e-toast-position X="Right" Y="Bottom"></e-toast-position>
    <e-toast-buttonmodelprops>
        <e-toast-buttonmodelprop model="ViewBag.AcceptBtn" click="onAccept"></e-toast-buttonmodelprop>
        <e-toast-buttonmodelprop model="ViewBag.DismissBtn"></e-toast-buttonmodelprop>
    </e-toast-buttonmodelprops>
</ejs-toast>

<script>
    function onAccept(e) {
        var toastEle = ej.base.closest(e.target, '.e-toast');
        document.getElementById('action_toast').ej2_instances[0].hide(toastEle);
    }
</script>

// Controller
ViewBag.AcceptBtn  = new { content = "Accept" };
ViewBag.DismissBtn = new { content = "Dismiss" };

パターン 4：重複するトーストの防止

<ejs-toast id="dup_toast" beforeOpen="onBeforeOpen" close="onClose"
           title="Alert" content="Network issue detected.">
    <e-toast-position X="Center" Y="Top"></e-toast-position>
</ejs-toast>

<script>
    var isOpen = false;
    function onBeforeOpen(e) {
        if (isOpen) { e.cancel = true; }
        else { isOpen = true; }
    }
    function onClose() { isOpen = false; }
</script>

パターン 5：トーストの最大数を制限

<ejs-toast id="max_toast" beforeOpen="onBeforeOpen"
           title="Notification" content="New item added.">
    <e-toast-position X="Center" Y="Top"></e-toast-position>
</ejs-toast>

<script>
    var maxCount = 3;
    function onBeforeOpen(e) {
        var toast = document.getElementById('max_toast').ej2_instances[0];
        if (toast.element.childElementCount >= maxCount) {
            e.cancel = true;
        }
    }
</script>

---

Message

Syncfusion の Message コンポーネントは、アイコンや色などの視覚的な重大度インジケーターを備えたコンテキストメッセージを表示し、エンドユーザーに重要度や状況を伝えます。5 段階の重大度、3 種類の表示バリアント、閉じるアイコンによる非表示、コンテンツテンプレートをサポートし、アクセシビリティに完全準拠しています。

ドキュメントとナビゲーションガイド

はじめに

📄 読む： references/message-getting-started.md

• Syncfusion.EJ2.AspNet.Core の NuGet インストール
• _ViewImports.cshtml でのタグヘルパーの登録
• _Layout.cshtml でのスタイルシートとスクリプトの登録
• 最初の <ejs-message> タグヘルパーの追加
• content 属性または内部コンテンツによるコンテンツの指定
• 最初に動作する例

重大度レベル

📄 読む： references/message-severities.md

• 5 段階の重大度：Normal、Success、Info、Warning、Error
• severity 属性の使用方法と有効な値
• 視覚的な違い（重大度ごとのアイコンと色）
• ユースケースに合った重大度の選択
• モデル値に基づく動的な重大度

表示バリアント

📄 読む： references/message-variants.md

• 3 種類のバリアント：Text（デフォルト）、Outlined、Filled
• variant 属性の使用方法
• バリアントと重大度の組み合わせ
• 視覚的なトレードオフと各バリアントの使いどころ

アイコンと閉じるアイコン

📄 読む： references/message-icons-and-close.md

• 重大度アイコンの表示：showIcon 属性（デフォルトは true）
• 重大度アイコンの無効化
• cssClass による CSS の上書きで重大度アイコンをカスタマイズ
• 閉じるアイコン：showCloseIcon 属性（デフォルトは false）
• 非表示時のコールバック用 closed イベントハンドラー
• visible 属性による表示／非表示の切り替え

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

📄 読む： references/message-customization.md

• コンテンツの配置：左（デフォルト）、中央（e-content-center）、右（e-content-right）
• cssClass による外観のカスタマイズ
• CSS のみでのメッセージ表示（JS 不要、HTML と CSS のみ）
• コンテンツテンプレート：子要素の <e-content-template>
• enableRtl による RTL サポート
• enablePersistence による状態の保持

アクセシビリティ

📄 読む： references/message-accessibility.md

• WCAG 2.2、Section 508、ADA に準拠
• WAI-ARIA 属性（role="alert"、aria-label）
• キーボードナビゲーション（Tab、Enter／Space）
• スクリーンリーダーのサポート

API リファレンス

📄 読む： references/message-api.md

• 型、デフォルト値、タグ属性名を含むすべてのプロパティ
• イベント：closed、created、destroyed
• Severity と Variant の列挙値
• タグヘルパー構文のリファレンス

---

クイックスタート

@* ~/Pages/Index.cshtml *@
<ejs-message id="msg_default" content="Please read the comments carefully"></ejs-message>

---

よくあるパターン

重大度メッセージ

<ejs-message id="msg_normal"  content="Editing is restricted"></ejs-message>
<ejs-message id="msg_success" content="Operation completed"  severity="Success"></ejs-message>
<ejs-message id="msg_info"    content="Read these notes"     severity="Info"></ejs-message>
<ejs-message id="msg_warning" content="Check your connection" severity="Warning"></ejs-message>
<ejs-message id="msg_error"   content="Submission failed"    severity="Error"></ejs-message>

バリアントと重大度の組み合わせ

<ejs-message id="msg_ft" content="Editing is restricted" variant="Filled"></ejs-message>
<ejs-message id="msg_os" content="Operation completed"  severity="Success" variant="Outlined"></ejs-message>
<ejs-message id="msg_fe" content="Submission failed"    severity="Error"   variant="Filled"></ejs-message>

閉じることができるメッセージ

<ejs-message id="msg_dismiss"
             content="Your session will expire soon"
             severity="Warning"
             showCloseIcon="true"
             visible="true"
             closed="onMessageClosed">
</ejs-message>

<script>
    function onMessageClosed() {
        var msg = document.getElementById('msg_dismiss').ej2_instances[0];
        msg.visible = false;
    }
</script>

コンテンツテンプレート

<ejs-message id="msg_template" severity="Success" showCloseIcon="true" closed="onTemplateClosed">
    <e-content-template>
        <div>
            <h4>Build succeeded</h4>
            <p>All 42 tests passed.</p>
        </div>
    </e-content-template>
</ejs-message>

<script>
    function onTemplateClosed() {
        document.getElementById('msg_template').ej2_instances[0].visible = false;
    }
</script>

---

Skeleton

Syncfusion の Skeleton コンポーネントは、読み込み中のコンテンツのレイアウトを模した、アニメーション付きのプレースホルダー図形を表示します。設定可能な図形、シマーアニメーション、充実したアクセシビリティ対応により、体感的な読み込み時間を短縮し、ユーザーに進行状況を伝えます。

ドキュメントとナビゲーションガイド

はじめに

📄 参照: references/skeleton-getting-started.md

• Syncfusion.EJ2.AspNet.Core の NuGet インストール
• _ViewImports.cshtml でのタグヘルパー登録
• _Layout.cshtml でのスタイルシートとスクリプトの登録
• height と width を指定した最小限の <ejs-skeleton> の設定
• 4 種類すべての図形（Circle、Square、Text、Rectangle）

図形

📄 参照: references/skeleton-shapes.md

• shape 属性: "Circle"、"Square"、"Rectangle"、"Text"（デフォルト）
• 寸法のルール: Circle/Square には幅が必須、Rectangle/Text には幅と高さが必須
• 複数の図形を使ったカードスケルトンレイアウトの作成
• アバター、画像、テキスト、アイコンのプレースホルダーに適した図形の選び方

シマー効果

📄 参照: references/skeleton-shimmer-effect.md

• shimmerEffect 属性: "Wave"（デフォルト）、"Pulse"、"Fade"
• 各効果タイプの視覚的な動作
• Pulse 効果を使ったリストスケルトンの例
• UI の用途に合った効果の選択

スタイルと表示状態

📄 参照: references/skeleton-styles.md

• カスタム CSS による上書き（ウェーブの色、背景、アニメーション速度）に使う cssClass 属性
• 読み込み状態に応じてスケルトンの表示を切り替える visible 属性
• スケルトンから実際のコンテンツへ切り替えるパターン
• CSS 変数のカスタマイズ

アクセシビリティ

📄 参照: references/skeleton-accessibility.md

• WCAG 2.2、Section 508、ADA への準拠
• WAI-ARIA 属性: role="status"、aria-label、aria-live、aria-busy
• アクセシブルなスケルトン名を指定する label 属性
• enableRtl による RTL サポート
• prefers-reduced-motion への対応

API リファレンス

📄 参照: references/skeleton-api.md

• 型、デフォルト値、タグ属性名を含むすべてのプロパティ
• SkeletonType と ShimmerEffect の列挙値
• タグヘルパー構文のリファレンス

---

クイックスタート

@* ~/Pages/Index.cshtml *@
<ejs-skeleton id="sk_default" height="15px" width="100%"></ejs-skeleton>

---

よく使われるパターン

プロフィールカードのスケルトン

<div style="display: flex; align-items: center; gap: 12px; padding: 16px;">
    @* Avatar placeholder *@
    <ejs-skeleton id="sk_avatar" shape="Circle" width="48px"></ejs-skeleton>
    @* Name and subtitle placeholders *@
    <div style="flex: 1;">
        <ejs-skeleton id="sk_name" width="60%" height="15px"></ejs-skeleton>
        <br />
        <ejs-skeleton id="sk_sub"  width="40%" height="12px"></ejs-skeleton>
    </div>
</div>

データ読み込み時のスケルトン表示切り替え

@{
    var loading = true;
    var content = "Data loaded successfully";
}
<div>
    @if (loading)
    {
        <ejs-skeleton id="sk_loader" width="80%" height="20px"></ejs-skeleton>
    }
    else
    {
        <p>@content</p>
    }
</div>

Pulse 効果付きシマーリスト

<ul style="list-style: none; padding: 0;">
    @for (var i = 1; i <= 3; i++)
    {
        <li style="display: flex; gap: 10px; margin-bottom: 12px;">
            <ejs-skeleton id="@($"sk_av_{i}")" shape="Circle" width="40px" shimmerEffect="Pulse"></ejs-skeleton>
            <div style="flex: 1;">
                <ejs-skeleton id="@($"sk_t1_{i}")" width="70%" height="14px" shimmerEffect="Pulse"></ejs-skeleton>
                <br />
                <ejs-skeleton id="@($"sk_t2_{i}")" width="45%" height="12px" shimmerEffect="Pulse"></ejs-skeleton>
            </div>
        </li>
    }
</ul>

---

主なプロパティ一覧

属性	型	デフォルト	用途
shape	SkeletonType	Text	スケルトンの図形バリエーション
width	string	""	幅。Circle/Square では必須
height	string	""	高さ。Rectangle/Text で使用
shimmerEffect	ShimmerEffect	Wave	アニメーションスタイル
visible	bool	true	スケルトンの表示／非表示
css-class	string	""	カスタム CSS クラス
label	string	"Loading..."	アクセシビリティ用の ARIA ラベル
enable-rtl	bool	false	右から左への描画
enable-persistence	bool	false	再読み込み後も状態を保持