syncfusion-angular-kanban

Syncfusion Angular Kanban の実装

このスキルを使用する場面

次のような場合に、Syncfusion Angular Kanban コンポーネントが役立ちます。

• ワークフローを可視化する - タスクの段階（未着手 → 進行中 → テスト中 → 完了）を表示します
• タスク管理を可能にする - 複数の列にわたって作業を整理、追跡できるようにします
• ドラッグ＆ドロップを実装する - カードを列間で移動して、タスクのステータスを変更できるようにします
• タスクをグループ化する - スイムレーンを使って、担当者、優先度、カテゴリなどでカードを整理します
• 制約を設定する - 最小／最大カード数で WIP（進行中の作業）制限を適用します
• 外観をカスタマイズする - カードや列にテンプレート、テーマ、カスタムスタイルを適用します
• イベントを処理する - カードのクリック、ドラッグ操作、状態の変更を監視します
• 状態を永続化する - ボードの設定とカードの位置を保存します

コンポーネントの概要

Kanban ボードは、次の要素で構成される視覚的なワークフロー管理ツールです。

• カード - 個々のタスクを表します（cardSettings を介して dataSource にマッピングされます）
• 列 - ワークフローの段階を定義します（keyField と列の設定を使用してマッピングされます）
• スイムレーン - カテゴリ（従業員、優先度など）ごとにカードをグループ化します
• ドラッグ＆ドロップ - デフォルトで有効です（allowDragAndDrop: true）
• データバインディング - ローカル配列とリモート DataManager に対応します
• テンプレート - カード、列ヘッダー、スイムレーンヘッダー、ツールチップの表示をカスタマイズします
• レスポンシブ対応 - デスクトップやモバイルデバイスに合わせてレイアウトを調整します
• テーマ - Material、Bootstrap 3、Bootstrap 4、Fabric、High Contrast の5種類の組み込みテーマがあります

主な機能

✓ 複数列のワークフローとカスタマイズ可能なヘッダー
✓ 列間および列内でのスムーズなドラッグ＆ドロップ
✓ 任意のデータフィールドによるスイムレーンのグループ化
✓ WIP の検証（列／スイムレーンごとの最小／最大カード数）
✓ カード、列、スイムレーン、ダイアログ、ツールチップ用のテンプレート
✓ DataManager 統合によるローカルおよびリモートのデータバインディング
✓ キーボード操作と完全なアクセシビリティ対応
✓ ユーザー操作（クリック、ドラッグ、選択、ダイアログの開閉）に対応するイベント
✓ プログラム制御用のメソッド（カードの追加／削除、列の表示／非表示）
✓ 複数の選択モード（カードを単一または複数選択）
✓ 関連する列をグループ化する複数段ヘッダー
✓ CSS によるカスタマイズに対応した組み込みテーマ

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

はじめに

📄 参照: references/getting-started.md

• インストールと npm パッケージのセットアップ
• Angular モジュールのインポートと設定
• CSS のインポートとテーマの登録
• 最小限のサンプルを使った基本的な Kanban の初期化
• サンプルデータを使った最初の実行可能なボード

コア構造：列とスイムレーン

📄 参照: references/columns-and-swimlanes.md

• keyField マッピングによる列の設定
• 単一キーと複数キーの列マッピング
• 列ヘッダーと複数段ヘッダー
• フィールドによるスイムレーンのグループ化
• 列の動的な追加／削除／表示／非表示

カードとデータバインディング

📄 参照: references/cards-and-data-binding.md

• カードの構造：ヘッダーフィールド、コンテンツフィールド、グラバーフィールド
• カードテンプレートとカスタムレンダリング
• ローカル配列のデータバインディング
• DataManager によるリモートデータバインディング
• OData v4 のサポート
• カードの選択モード（単一／複数）

ドラッグ＆ドロップと操作

📄 参照: references/drag-and-drop.md

• ドラッグ＆ドロップ機能（デフォルトで有効）
• 列間でのカードの移動
• 列内での並べ替え
• 有効な遷移を制御する transitionColumns
• ドラッグイベント（beforeDragStart、dragStart、dragStop）
• WIP 制限：最小／最大カード数の適用
• キーボード操作のサポート

機能とカスタマイズ

📄 参照： references/features-and-customization.md

• カードの並べ替え、フィルタリング、検索
• 検証ルールとダイアログ
• モバイル向けレスポンシブモード
• カスタムダイアログテンプレート
• ツールチップのテンプレートと設定
• 優先度インジケーターとカラーピッカー
• 列の表示切り替えと折りたたみ

プロパティリファレンス

📄 参照： references/properties.md

• コアプロパティ：allowDragAndDrop、allowKeyboard、allowSelection
• カードの設定：cardSettings（headerField、contentField、template など）
• 列の設定：ColumnsModel を使用した columns 配列
• スイムレーンの設定：swimlaneSettings
• ダイアログとツールチップのテンプレート
• WIP 制限：列ごとの minCount、maxCount
• レスポンシブのブレークポイントと高さ

メソッドリファレンス

📄 参照： references/methods.md

• カード操作：addCard()、deleteCard()、updateCard()、getSelectedCards()
• 列の操作：addColumn()、removeColumn()、hideColumn()、showColumn()
• ボード操作：refresh()、getCardCount()
• スイムレーン操作：getSwimlaneData()
• ダイアログ制御：openDialog()、closeDialog()
• 検索／フィルター：search()、filter()、sortBy()

イベントリファレンス

📄 参照： references/events.md

• アクションイベント：actionBegin、actionComplete、actionFailure
• カードイベント：cardClick、cardDoubleClick、cardSelection
• ドラッグイベント：dragStart、dragStop、beforeDragStart
• ダイアログイベント：dialogOpen、dialogClose
• 列／スイムレーンイベント：columnClick、swimlaneClick
• イベント引数の型とデータ構造

データの永続化と状態

📄 参照： references/data-persistence.md

• ボードの状態をローカルストレージに永続化
• カードの位置と列の状態を保存
• ObservableCollection との連携
• ページ再読み込み後の状態復元
• 状態を手動で保存／復元するパターン

スタイル、テーマ、外観

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

• 組み込みテーマ（Material、Bootstrap 3/4、Fabric、High Contrast）
• CSS 変数のカスタマイズ
• カードと列のカスタムスタイル設定
• ダークモードのサポート
• RTL（右から左へ記述する）言語のサポート
• Theme Studio との連携

アクセシビリティと国際化

📄 参照： references/accessibility-and-localization.md

• WCAG 準拠とキーボード操作
• スクリーンリーダー向けの ARIA 属性
• フォーカス管理とキーボードショートカット
• 国際化（i18n）の設定
• 多言語サポート
• ロケールデータの設定

移行とベストプラクティス

📄 参照： references/migration-and-best-practices.md

• EJ1 から EJ2 への移行ガイド
• パフォーマンス最適化の戦略
• 大規模なデータセット向けの仮想スクロール
• 一般的なパターンとコード例
• よくある問題のトラブルシューティング
• FAQ と注意点

クイックスタートの例

1. パッケージをインストール

npm install @syncfusion/ej2-angular-kanban

2. コンポーネントをインポートして設定

import { Component } from '@angular/core';
import { KanbanModule } from '@syncfusion/ej2-angular-kanban';
import { CardSettingsModel } from '@syncfusion/ej2-angular-kanban';

@Component({
  selector: 'app-kanban-board',
  standalone: true,
  imports: [KanbanModule],
  template: `
    <ejs-kanban 
      keyField="Status" 
      [dataSource]="data"
      [cardSettings]="cardSettings">
      <e-columns>
        <e-column headerText="To Do" keyField="Open"></e-column>
        <e-column headerText="In Progress" keyField="InProgress"></e-column>
        <e-column headerText="Testing" keyField="Testing"></e-column>
        <e-column headerText="Done" keyField="Close"></e-column>
      </e-columns>
    </ejs-kanban>
  `
})
export class KanbanBoardComponent {
  data = [
    { Id: 1, Status: 'Open', Summary: 'Analyze the new requirements gathered from the customer.', Type: 'Epic' },
    { Id: 2, Status: 'InProgress', Summary: 'Improve application performance', Type: 'Epic' },
    { Id: 3, Status: 'Testing', Summary: 'Fix the issues reported in the IE browser', Type: 'Bug' },
    { Id: 4, Status: 'Close', Summary: 'Fix the issue reported by the customer.', Type: 'Bug' }
  ];

  cardSettings: CardSettingsModel = {
    headerField: 'Id',
    contentField: 'Summary'
  };
}

3. スタイルを追加

@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-kanban/styles/material3.css';

よく使われるパターン

パターン 1：担当者ごとにスイムレーンを有効化

割り当てられたチームメンバーごとにカードをグループ化します：

swimlaneSettings: { keyField: 'Assignee' }

パターン 2：WIP 制限を適用

列ごとのカードの最小数／最大数を設定します：

columns: [
  { headerText: 'To Do', keyField: 'Open', minCount: 1, maxCount: 5 },
  { headerText: 'In Progress', keyField: 'InProgress', minCount: 0, maxCount: 3 }
]

パターン 3：カードのクリックイベントを処理

カードの操作を監視します：

onCardClick(args: CardClickEventArgs): void {
  console.log('Card clicked:', args.data);
}

パターン 4：プログラムからカードを追加

メソッド API を使用します：

@ViewChild('kanban') kanban: KanbanComponent;

addNewCard(): void {
  this.kanban.addCard({
    Id: 5,
    Status: 'Open',
    Summary: 'New task'
  });
}

主要なプロパティのリファレンス

プロパティ	型	目的
keyField	string	フィールドの値に基づいてカードを列に割り当てます
dataSource	Object[] | DataManager	カードデータを含む配列または DataManager インスタンスです
cardSettings	CardSettingsModel	ヘッダー、コンテンツ、テンプレートのフィールドマッピングです
columns	ColumnsModel[]	ヘッダーとキー項目を含む列の定義です
swimlaneSettings	SwimlaneSettingsModel	フィールドによるスイムレーンのグループ化です
allowDragAndDrop	boolean	カードのドラッグ＆ドロップを有効にします（デフォルト：true）
allowKeyboard	boolean	キーボード操作を有効にします（デフォルト：true）
allowSelection	boolean	カードの選択を許可します
selectionType	'Single' | 'Multiple'	選択モードです
height	string	ボードの高さです
width	string	ボードの幅です

一般的な使用例

1. プロジェクト管理 - バックログから完了までタスクを追跡します
2. バグ追跡 - ステータス（Open、In Progress、Testing、Closed）ごとに課題を整理します
3. カスタマーサポート - 解決までのプロセスを通じてチケットを管理します
4. アジャイルスプリントボード - スプリントの各段階にわたってユーザーストーリーを表示します
5. セールスパイプライン - 見込み客から顧客になるまでを追跡します
6. コンテンツワークフロー - 記事を下書きから公開まで管理します
7. 採用活動 - 採用プロセスの各段階に沿って候補者を整理します
8. DevOps パイプライン - 環境ごとにデプロイを追跡します

---

次のステップ： 直近のニーズに応じて上記のナビゲーションガイドからリファレンスファイルを選択するか、Getting Started から始めて最初のカンバンボードをセットアップしてください。