syncfusion-vue-kanban

Syncfusion Vue Kanban の実装

ステータスフィールドごとにカードをグループ化する列ベースのタスクボードです。ドラッグアンドドロップによる並べ替え、スイムレーンによる行のグループ化、列の検証（WIP 制限）、大規模なデータセット向けの仮想スクロールに対応しています。

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

• ステータス列（未着手、進行中、完了など）を備えたカンバン／スプリントボードが必要な場合
• 列間やスイムレーンの行間で、カードをドラッグアンドドロップで移動したい場合
• カンバンを REST API、OData、またはローカルの JSON データセットにバインドする必要がある場合
• 担当者、チーム、または任意のフィールドでカードをグループ化したい場合（スイムレーン）
• WIP 制限（列ごとのカード数の最小値／最大値）が必要な場合
• パフォーマンスの問題を発生させずに、1000 件以上のカードで仮想スクロールを使用したい場合
• テンプレートでカードのレイアウトをカスタマイズしたり、カスタム CSS を適用したりしたい場合

コンポーネントの概要

概念	機能
keyField	ボードレベルで、データレコードを列に対応付けるフィールドです（例："Status"）
cardSettings	headerField（一意の ID）と contentField（本文）を指定します
<e-columns>	ボードの各列を宣言します。列の keyField はデータ値と一致します
swimlaneSettings	データフィールドごとにカードを横方向の行にグループ化します
allowDragAndDrop	列間でのカードのドラッグを有効／無効にします（既定値：true）
enableVirtualization	大規模なデータセット向けに仮想スクロールを有効にします

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

コンポーネントの概要

📄 参照: references/overview.md

• ドラッグアンドドロップ、スイムレーン、WIP、仮想スクロールなど、機能の詳細な一覧
• ユーザーのニーズと機能を対応付ける「使用場面」の判断表
• パッケージのインストールと、必要な CSS のインポートすべて
• 最小限の動作するサンプル

アクセシビリティ

📄 参照: references/accessibility.md

• WCAG 2.2 および Section 508 への準拠状況の概要
• WAI-ARIA 属性の一覧（aria-label、aria-expanded、aria-selected、aria-grabbed など）
• キーボードショートカットの完全なリファレンス
• キーボード操作の無効化（allowKeyboard: false）
• スクリーンリーダーのサポートに関する詳細
• enableRtl を使用した RTL のアクセシビリティ
• axe-core およびアクセシビリティチェッカーツールを使用したテスト

はじめに

📄 参照: references/getting-started.md

• Vite + Vue 3 プロジェクトのセットアップ
• パッケージのインストール（@syncfusion/ej2-vue-kanban）
• CSS のインポート（tailwind3 テーマ）
• 列を備えた最小限のカンバン
• ローカルのデータ配列からカードを設定
• 初回のレンダリング時にスイムレーンを有効化

データバインディング

📄 参照: references/data-binding.md

• ローカルの JSON 配列のバインド
• DataManager + ODataAdaptor／ODataV4Adaptor によるリモートデータ
• WebApiAdaptor による Web API バインディング
• UrlAdaptor による CRUD 操作（insertUrl、updateUrl、removeUrl）
• ODataAdaptor を拡張したカスタムアダプター
• Query.addParams による追加のクエリパラメーターの送信
• Ajax による動的なデータ読み込み
• actionFailure による HTTP エラーの処理

カード

📄 参照: references/cards.md

• headerField（必須の一意な ID）と contentField
• showHeader: false によるカードヘッダーの非表示
• Vue コンポーネントテンプレートを使用したカードレイアウトのカスタマイズ
• カードの選択：なし／単一／複数（selectionType）
• Ctrl+クリック／Shift+クリックによる複数選択

列

📄 参照: references/columns.md

• 単一キーおよび複数キーによる列のマッピング
• 列ヘッダーのテキストとヘッダーテンプレート
• allowToggle による列の切り替え（展開／折りたたみ）
• 初期状態で列を折りたたんで表示（isExpanded: false）
• 複数の列をグループ化する段組みヘッダー
• 列単位のドラッグアンドドロップによる並べ替え（allowColumnDragAndDrop）

ダイアログ（カードの追加／編集／削除）

📄 参照: references/dialog.md

• デフォルトの組み込みダイアログ（ダブルクリックで開きます）
• dialogSettings.fields を使用したカスタムダイアログフィールド
• カスタムフィールドのラベルとフィールドタイプ
• validationRules を使用したフィールドの検証
• Vue コンポーネントを使用したダイアログテンプレート全体
• dialogOpen イベントによるダイアログの表示防止
• プログラムからの openDialog() と closeDialog()

寸法（高さと幅）

📄 参照: references/dimensions.md

• 高さ／幅の自動設定（デフォルト）
• ピクセル単位の寸法（height="550px"、:width="650"）
• パーセンテージ単位の寸法（width="100%"、height="100%"）
• 各モードの使い分け

イベント

📄 参照: references/events.md

• アクションイベント：actionBegin、actionComplete、actionFailure
• カードイベント：cardClick、cardDoubleClick、cardRendered
• 列のドラッグイベント：columnDragStart、columnDrag、columnDrop
• データイベント：dataBinding、dataBound、dataSourceChanged、dataStateChange
• ダイアログイベント：dialogOpen、dialogClose
• カードのドラッグイベント：dragStart、drag、dragStop
• ライフサイクル：created、queryCellInfo

スイムレーン

📄 参照: references/swimlane.md

• swimlaneSettings.keyField を使用したスイムレーン行の描画
• textField を使用した行ラベルテキストのカスタマイズ
• スイムレーンヘッダーのカスタムテンプレート
• 行の並べ替え（昇順／降順）
• 行をまたぐドラッグ＆ドロップ（swimlaneSettings の allowDragAndDrop: true）
• 空の行の表示（showEmptyRow）
• カード数バッジ（showItemCount）
• スクロール中にスイムレーンヘッダーを固定（enableFrozenRows）

ドラッグ＆ドロップ

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

• ドラッグ＆ドロップの全体的な無効化（allowDragAndDrop: false）
• 列ごとのドラッグ／ドロップ制御（allowDrag、allowDrop）
• スイムレーンをまたぐドラッグ＆ドロップ
• Kanban 間のドラッグ＆ドロップ（externalDropId、dragStop、addCard、deleteCard）
• Kanban から TreeView へのドラッグ＆ドロップ
• Kanban から Scheduler へのドラッグ＆ドロップ

ローカライズと RTL

📄 参照: references/localization.md

• すべてのロケールキーの参照テーブル
• L10n.load() による翻訳の読み込み
• ボードの locale プロパティの設定
• enableRtl による右から左（RTL）モード

パブリックメソッド

📄 参照: references/methods.md

• カードの CRUD：addCard、updateCard、deleteCard、getCardDetails
• 列のメソッド：addColumn、deleteColumn、showColumn、hideColumn、getColumnData
• ダイアログ：openDialog、closeDialog
• データ：getSwimlaneData
• 選択：getSelectedCards
• UI：refreshHeader、refreshUI、showSpinner、hideSpinner、destroy

状態の永続化

📄 参照: references/persistence.md

• enablePersistence を有効にして状態を localStorage に保存
• 永続化される状態：データソース、列の展開／折りたたみ、スイムレーンの展開／折りたたみ
• キーの衝突を避けるための一意な id の設定
• 永続化された状態の消去

優先度と並べ替えの設定

📄 参照: references/priority-and-sort.md

• 順位に基づくカードの配置に使用する cardSettings.priority
• sortSettings.sortBy：'Index'、'DataSourceOrder'、'Custom'
• フィールドに対応付けた並べ替えに使用する sortSettings.field
• sortSettings.direction：'Ascending'／'Descending'

レスポンシブモード

📄 参照: references/responsive-mode.md

• モバイルレイアウト：列のサイズ設定、スワイプ操作によるナビゲーション、長押しによるドラッグ
• モバイルでのスイムレーンのポップアップメニュー
• タッチデバイスでの単一カードおよび複数カードの選択

ツールチップ

📄 参照: references/tooltip.md

• デフォルトのカードツールチップの有効化（enableTooltip）
• カスタム要素のツールチップ用 e-tooltip-text クラス
• tooltipTemplate によるカスタムツールチップテンプレート

カスタマイズとトラブルシューティング

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

• CSS クラスのリファレンステーブル
• 固定／スティッキー列ヘッダー
• 列の WIP 検証（minCount、maxCount、constraintType）
• WAI-ARIA 属性
• キーボードショートカットの完全なリファレンス
• Theme Studio

仮想スクロール

📄 参照： references/virtual-scrolling.md

• 仮想化を有効にする（enableVirtualization: true）
• ピクセル単位で cardHeight を設定する
• 仮想スクロール用のリモートデータサービスの設定
• 既知の制限事項（スイムレーンと仮想化、カードの位置、% 高さ）

ハウツーレシピ

📄 参照： references/how-to.md

• 実行時に列のプロパティを動的に変更する
• 実行時にすべての列を置き換える
• Query でカードをフィルターする
• Query.search() でテキストからカードを検索する
• 列ヘッダーのダブルクリックを処理する

プロパティリファレンス

📄 参照： references/properties.md

• ルートレベルのプロパティテーブル全体（すべての型、既定値、説明）
• cardSettings のサブプロパティ（headerField、contentField、selectionType、priority など）
• columns のサブプロパティ（keyField、allowToggle、minCount、maxCount、transitionColumns など）
• dialogSettings と DialogFieldsModel のフィールド
• sortSettings、swimlaneSettings、stackedHeaders のインターフェイス
• すべての列挙値：SelectionType、ConstraintType、SortOrderBy、SortDirection

スタイルと CSS のカスタマイズ

📄 参照： references/style.md

• ヘッダーセルと WIP 制限インジケーターの CSS クラスをまとめたリファレンステーブル
• カード要素（ヘッダー、コンテンツ、フッター、タグ、カラーストライプ）の CSS クラス
• スイムレーンの行とセルの CSS セレクター
• コンパクトなテーブルスコープのセレクターバリエーション
• 固定／スティッキーなカンバンヘッダー（高さベースと position: sticky）
• カスタムテーマを生成する Theme Studio

検証（WIP 制限）

📄 参照： references/validation.md

• minCount — 列／セルごとに必要なカードの最小数
• maxCount — 列／セルごとに許可されるカードの最大数
• constraintType：検証の範囲として 'Column'（既定値）または 'Swimlane'
• 視覚的なフィードバック：制限に違反した場合のハイライトカラー
• 検証時のハイライトカラーをカスタマイズする CSS クラス

クイックスタート

<template>
  <div id="app">
    <ejs-kanban id="kanban" keyField="Status" :dataSource="kanbanData" :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>
  </div>
</template>

<script setup>
import { KanbanComponent as EjsKanban, ColumnDirective as EColumn, ColumnsDirective as EColumns }
  from '@syncfusion/ej2-vue-kanban';
import { extend } from '@syncfusion/ej2-base';

const rawData = [
  { Id: 1, Status: 'Open',       Summary: 'Analyze requirements', Assignee: 'Nancy' },
  { Id: 2, Status: 'InProgress', Summary: 'Improve performance',  Assignee: 'Andrew' },
  { Id: 3, Status: 'Testing',    Summary: 'Fix IE browser bug',   Assignee: 'Janet' },
  { Id: 4, Status: 'Close',      Summary: 'Deploy to production', Assignee: 'Nancy' },
];

const kanbanData = extend([], rawData, null, true);
const cardSettings = { contentField: 'Summary', headerField: 'Id' };
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-vue-kanban/styles/tailwind3.css';
</style>

よく使われるパターン

スイムレーンを追加する（担当者でグループ化）

<ejs-kanban keyField="Status" :dataSource="kanbanData"
  :cardSettings="cardSettings" :swimlaneSettings="swimlaneSettings">
  ...columns...
</ejs-kanban>

<script setup>
const swimlaneSettings = { keyField: 'Assignee' };
</script>

リモート OData サービスにバインドする

<script setup>
import { DataManager, ODataAdaptor } from '@syncfusion/ej2-data';

const kanbanData = new DataManager({
  url: 'https://your-api.com/api/Tasks',
  adaptor: new ODataAdaptor(),
  crossDomain: true
});
</script>

列で WIP 制限を有効にする

<e-column headerText="In Progress" keyField="InProgress" :maxCount="5" :minCount="1"></e-column>

大量のデータで仮想スクロールを有効にする

<ejs-kanban :enableVirtualization="true" keyField="Status" :dataSource="largeDataset"
  :cardSettings="{ headerField: 'Id', contentField: 'Summary' }">
  ...
</ejs-kanban>

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

プロパティ	型	用途
keyField	String	レコードを列に対応付けるデータフィールド
dataSource	Array / DataManager	カードのデータソース
cardSettings	Object	headerField（必須）、contentField、template、selectionType
swimlaneSettings	Object	keyField、textField、allowDragAndDrop、showEmptyRow、enableFrozenRows
allowDragAndDrop	Boolean	ボードレベルでのカードのドラッグ＆ドロップ（既定値：true）
allowColumnDragAndDrop	Boolean	ヘッダーをドラッグして列を並べ替える
enableVirtualization	Boolean	大規模なデータセット用の仮想スクロール
enableTooltip	Boolean	カードにカーソルを合わせたときにツールチップを表示する
constraintType	String	WIP 検証の範囲として 'Column' または 'Swimlane'