syncfusion-javascript-kanban

カンバンボードの実装

Syncfusion TypeScript カンバンボードの実装とカスタマイズに関するガイドです。カンバンボードは、列、カード、スイムレーンを使って、さまざまな段階の作業を表示する視覚的なタスク管理コントロールです。

このスキルを使用するタイミング

次のような場合に、このスキルを使用してください。

• タスクやワークフローを管理するカンバンボードを実装する
• カードのドラッグ＆ドロップ操作が可能な視覚的なワークフローを作成する
• ワークフローの段階を表す列を備えたアジャイルプロジェクトボードを構築する
• スイムレーン（担当者、優先度、チームなど）を使ってタスクをカテゴリ別にグループ化する
• 列ごとのカード検証で進行中作業の上限を管理する
• 追加、編集、削除操作用のダイアログでカードを編集できるようにする
• ローカル配列、リモート API、OData サービスのデータをバインドする
• 特定のビジネス要件に応じてテンプレートでカードレイアウトをカスタマイズする
• 複数の段階にわたる視覚的な表示でプロジェクトのステータスを追跡する

コントロールの概要

カンバンボードは、チームの次のような作業を支援する強力な視覚的管理ツールです。

• カスタマイズ可能な列で作業段階を視覚化する
• ドラッグ＆ドロップでカードをワークフローの段階間で移動する
• スイムレーンで関連する作業をグループ化する
• カード数と WIP 上限で進捗を追跡する
• 組み込みまたはカスタムのダイアログでタスクを編集する
• デスクトップやモバイルに対応したレスポンシブレイアウトをサポートする

主な機能：

• 複数の列構成（単一キー、複数キー、積み重ねヘッダー）
• 豊富なカードカスタマイズ（テンプレート、選択、スタイル設定）
• 柔軟なデータバインディング（ローカル、リモート、OData）
• 高度な機能（ローカライズ、永続化、仮想スクロール）

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

はじめに

📄 参照： references/getting-started.md

• インストールとパッケージの依存関係
• Vite TypeScript プロジェクトのセットアップ
• CSS のインポートとテーマの設定
• 基本的なカンバンの初期化
• keyField マッピングによる列の設定
• dataSource によるカードの読み込み
• 最初の動作するサンプル

列の設定

📄 参照： references/columns.md

• 単一キーおよび複数キーの列マッピング
• 列のヘッダーテキストとカスタムテンプレート
• 列の切り替え（展開／折りたたみ機能）
• 初期状態で折りたたまれている列
• 列のドラッグ＆ドロップによる並べ替え
• 列をグループ化する積み重ねヘッダー
• 列のプロパティと設定

カードの管理

📄 参照： references/cards.md

• カードの構造（ヘッダーとコンテンツ）
• 列内および列間でのドラッグ＆ドロップ動作
• カードのヘッダーおよびコンテンツのフィールドマッピング
• カスタムカードテンプレート
• カードの選択（単一および複数）
• カードヘッダーの表示／非表示
• cardSettings の設定

スイムレーンによるグループ化

📄 参照： references/swimlane.md

• グループ化用スイムレーン行の描画
• カテゴリ分けのための keyField マッピング
• textField によるカスタム行テキスト
• スイムレーン行のテンプレート
• スイムレーン行の並べ替え（昇順／降順）
• スイムレーン間のドラッグ＆ドロップ
• 空の行の描画
• スイムレーンごとのカード数の表示
• ヘッダーを常に表示する固定行

データバインディング

📄 参照： references/data-binding.md

• JSON 配列によるローカルデータバインディング
• DataManager の統合
• API によるリモートデータバインディング
• OData サービスの統合
• Web API バインディング
• リモートデータに対する CRUD 操作
• データアダプターとアダプター

追加／編集／削除用ダイアログ

📄 参照： references/dialog.md

• デフォルトの組み込みダイアログ
• データソースへのダイアログフィールドのマッピング
• カスタムフィールドの設定
• フィールドの種類（String、Numeric、TextArea、DropDown、TextBox）
• カスタムレイアウト用のダイアログテンプレート
• ダイアログフォームでの検証
• dialogSettings のプロパティ

ドラッグ＆ドロップ機能

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

• 列内でのカードのドラッグ＆ドロップ
• 列間でのカードのドラッグ＆ドロップ
• 列のドラッグ＆ドロップによる並べ替え
• スイムレーンでのドラッグ＆ドロップ操作
• ドラッグ＆ドロップの有効化／無効化
• ドラッグ＆ドロップのイベントとカスタマイズ

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

📄 参照： references/customization.md

• サイズの設定（高さ、幅）
• CSS スタイル設定とカスタムテーマ
• ツールチップの設定
• テンプレートのカスタマイズオプション
• 組み込みテーマ（Material、Bootstrap、Fabric、Tailwind）
• カスタムテーマの作成

高度な機能

📄 参照： references/advanced-features.md

• 多言語サポートのためのローカライズ
• セッションをまたいだ状態の保持
• 優先度フィールドのマッピングと視覚化
• カードの検証と WIP 制限
• 大規模なデータセット向けの仮想スクロール
• 並べ替えの設定オプション

アクセシビリティ

📄 参照： references/accessibility.md

• WCAG 準拠機能
• キーボード操作のサポート
• スクリーンリーダー向けの ARIA 属性
• カードと列のアクセシブルな操作

レスポンシブデザイン

📄 参照： references/responsive-mode.md

• レスポンシブレイアウトの動作
• モバイル端末とタブレット端末のサポート
• 列表示の自動調整
• タッチ操作のサポート

API リファレンス - プロパティ

📄 参照： references/properties.md

• すべての Kanban プロパティの一覧
• dataSource、keyField、columns の設定
• cardSettings、swimlaneSettings、dialogSettings
• ドラッグ＆ドロップのプロパティ（allowDragAndDrop、allowColumnDragAndDrop）
• サイズのプロパティ（height、width）
• 並べ替え、段組みヘッダー、制約
• ローカライズ、状態の保持、仮想化
• プロパティの型、既定値、使用例

API リファレンス - イベント

📄 参照： references/events.md

• すべての Kanban イベントの一覧
• アクションイベント（actionBegin、actionComplete、actionFailure）
• カード操作イベント（cardClick、cardDoubleClick、cardRendered）
• ドラッグ＆ドロップイベント（dragStart、drag、dragStop）
• 列のドラッグイベント（columnDragStart、columnDrag、columnDrop）
• ダイアログイベント（dialogOpen、dialogClose）
• データイベント（dataBinding、dataBound）
• イベント引数と使用例

API リファレンス - メソッド

📄 参照： references/methods.md

• すべての Kanban パブリックメソッドの一覧
• カードの管理（addCard、deleteCard、updateCard、getCardDetails）
• 列の管理（addColumn、deleteColumn、showColumn、hideColumn）
• データクエリメソッド（getColumnData、getSwimlaneData、getSelectedCards）
• ダイアログメソッド（openDialog、closeDialog）
• ユーティリティメソッド（refresh、destroy、dataBind）
• メソッドのシグネチャ、パラメーター、戻り値の型

トラブルシューティングと操作ガイド

📄 参照： references/troubleshooting.md

• 列を動的に変更する
• カードをフィルタリングおよび検索する
• ヘッダーのダブルクリックをカスタマイズする
• よくある問題と解決策
• パフォーマンス最適化のヒント

クイックスタートの例

// 1. Install the package
// npm install @syncfusion/ej2-kanban

// 2. Import Kanban component
import { Kanban } from '@syncfusion/ej2-kanban';

// 3. Define your data
const kanbanData = [
    {
        Id: 1,
        Status: 'Open',
        Summary: 'Analyze the new requirements',
        Priority: 'Low',
        Assignee: 'Nancy Davloio'
    },
    {
        Id: 2,
        Status: 'InProgress',
        Summary: 'Improve application performance',
        Priority: 'Normal',
        Assignee: 'Andrew Fuller'
    },
    {
        Id: 3,
        Status: 'Testing',
        Summary: 'Fix the issues reported',
        Priority: 'High',
        Assignee: 'Janet Leverling'
    },
    {
        Id: 4,
        Status: 'Close',
        Summary: 'Validate new requirements',
        Priority: 'Low',
        Assignee: 'Nancy Davloio'
    }
];

// 4. Initialize Kanban with basic configuration
const kanbanObj: Kanban = new Kanban({
    dataSource: kanbanData,
    keyField: 'Status',
    columns: [
        { headerText: 'Backlog', keyField: 'Open' },
        { headerText: 'In Progress', keyField: 'InProgress' },
        { headerText: 'Testing', keyField: 'Testing' },
        { headerText: 'Done', keyField: 'Close' }
    ],
    cardSettings: {
        contentField: 'Summary',
        headerField: 'Id'
    }
});

// 5. Render to DOM element
kanbanObj.appendTo('#Kanban');

よくあるパターン

パターン 1：スイムレーンを使用した Kanban

const kanbanObj: Kanban = new Kanban({
    dataSource: kanbanData,
    keyField: 'Status',
    columns: [
        { headerText: 'To Do', keyField: 'Open' },
        { headerText: 'In Progress', keyField: 'InProgress' },
        { headerText: 'Testing', keyField: 'Testing' },
        { headerText: 'Done', keyField: 'Close' }
    ],
    cardSettings: {
        contentField: 'Summary',
        headerField: 'Id'
    },
    swimlaneSettings: {
        keyField: 'Assignee',  // Group by assignee
        allowDragAndDrop: true  // Allow dragging across swimlanes
    }
});
kanbanObj.appendTo('#Kanban');

パターン 2：段組みヘッダーを使用した Kanban

const kanbanObj: Kanban = new Kanban({
    dataSource: kanbanData,
    keyField: 'Status',
    columns: [
        { headerText: 'Backlog', keyField: 'Open' },
        { headerText: 'In Progress', keyField: 'InProgress' },
        { headerText: 'Review', keyField: 'Review' },
        { headerText: 'Done', keyField: 'Close' }
    ],
    stackedHeaders: [
        { text: 'To Do', keyFields: 'Open' },
        { text: 'Development Phase', keyFields: 'InProgress, Review' },
        { text: 'Completed', keyFields: 'Close' }
    ],
    cardSettings: {
        contentField: 'Summary',
        headerField: 'Id'
    }
});
kanbanObj.appendTo('#Kanban');

パターン 3：OData を使用したリモートデータバインディング

import { Kanban } from '@syncfusion/ej2-kanban';
import { DataManager, ODataAdaptor } from '@syncfusion/ej2-data';

const dataManager = new DataManager({
    url: 'https://services.syncfusion.com/js/production/api/Kanban',
    adaptor: new ODataAdaptor
});

const kanbanObj: Kanban = new Kanban({
    dataSource: dataManager,
    keyField: 'Status',
    columns: [
        { headerText: 'Backlog', keyField: 'Open' },
        { headerText: 'In Progress', keyField: 'InProgress' },
        { headerText: 'Testing', keyField: 'Testing' },
        { headerText: 'Done', keyField: 'Close' }
    ],
    cardSettings: {
        contentField: 'Summary',
        headerField: 'Id'
    }
});
kanbanObj.appendTo('#Kanban');

パターン 4：カスタムカードテンプレート

const kanbanObj: Kanban = new Kanban({
    dataSource: kanbanData,
    keyField: 'Status',
    columns: [
        { headerText: 'To Do', keyField: 'Open' },
        { headerText: 'In Progress', keyField: 'InProgress' },
        { headerText: 'Done', keyField: 'Close' }
    ],
    cardSettings: {
        contentField: 'Summary',
        headerField: 'Id',
        template: '#cardTemplate'  // Reference to template element
    }
});
kanbanObj.appendTo('#Kanban');

// Define template in HTML
// <script id="cardTemplate" type="text/x-template">
//     <div class="custom-card">
//         <div class="card-header">${Id}</div>
//         <div class="card-content">${Summary}</div>
//         <div class="card-footer">
//             <span class="priority ${Priority}">${Priority}</span>
//             <span class="assignee">${Assignee}</span>
//         </div>
//     </div>
// </script>

主な設定オプション

必須プロパティ

• dataSource：配列または DataManager - カードのデータソース
• keyField：string - 列の keyField 値に対応するフィールド名
• columns：配列 - headerText と keyField を含む列の定義
• cardSettings：オブジェクト - カードの表示設定
  • headerField：string - 一意の識別子フィールド（必須）
  • contentField：string - メインコンテンツの表示フィールド
  • template：string - カスタムカードテンプレート
• swimlaneSettings：オブジェクト - スイムレーンの設定
  • keyField：string - カードのグループ化に使用するフィールド
  • textField：string - スイムレーンヘッダーに表示するテキスト
  • allowDragAndDrop：boolean - スイムレーン間のドラッグを有効化

共通オプション

• allowDragAndDrop: boolean - カードのドラッグ＆ドロップを有効にします（デフォルト：true）
• allowKeyboard: boolean - キーボード操作を有効にします
• height: string/number - ボードの高さ
• width: string/number - ボードの幅
• dialogSettings: Object - ダイアログのカスタマイズ
• sortSettings: Object - カードの並べ替え設定
• stackedHeaders: Array - グループ化された列ヘッダー

一般的なユースケース

1. ソフトウェア開発のスプリントボード

   • 列：バックログ → 進行中 → コードレビュー → テスト → 完了
   • スイムレーン：担当者別または機能別
   • 列ごとの WIP 制限

2. カスタマーサポートのチケット追跡

   • 列：新規 → 割り当て済み → 進行中 → 保留中 → 解決済み
   • スイムレーン：優先度別またはサポート階層別
   • チケットの詳細を含むカスタムカードテンプレート

3. コンテンツ公開ワークフロー

   • 列：アイデア → 下書き → レビュー → 承認済み → 公開済み
   • スイムレーン：作成者別またはコンテンツタイプ別
   • メタデータを追加するダイアログ

4. 製造プロセスフロー

   • 列：注文受付 → 生産中 → 品質検査 → 出荷済み
   • スイムレーン：製品ライン別
   • 生産システムへのリモートデータバインディング

5. 採用パイプライン

   • 列：応募済み → 電話面接 → 面接 → 内定 → 採用済み
   • スイムレーン：職種別または採用担当者別
   • 候補者情報を含むカードテンプレート

関連スキル

• データバインディング - DataManager の高度な使用方法
• テンプレートのカスタマイズ - カスタムレイアウト
• テーマ設定 - スタイルとテーマ

---

次のステップ： getting-started リファレンスを読んで最初の Kanban ボードを設定し、要件に応じて各機能を確認してください。