タスク操作

以下で説明するように、ガントシートでプロジェクトのスケジュールを管理するためにさまざまなタスク操作を実行できます。

タスクの追加

指定した位置でタスクの追加や挿入ができます。レベルを指定せずにタスクを挿入すると、タスクは対象タスクの前に配置され、そのレベルが隣接するタスクによって決定されます。

対象タスクがサマリータスクの場合、新規に挿入されたタスクがその子タスクになります。
対象タスクがアウトラインで折りたたまれている場合、挿入されたタスクは対象タスクのレベルに合わせて配置されます。そうでない場合、挿入されたタスクは直前のタスクのレベルに対応します。

type=warning
メモ：SpreadJSでは、ルートタスクの前にタスクを挿入することができません。ルートタスクは読み取り専用タスクであり、そのフィールド値は編集できません。

次の図は、先行タスクのない1日間の新しいタスクを挿入する例を示します。

task1

次のサンプルコードは、GC.Spread.Sheets.GanttSheet.Project クラスの addTasks や insertTasks メソッドを使用して新規タスクを追加・挿入する方法を示します。

// 新規タスクを追加します。
function addTask(ganttSheet) {
    ganttSheet.suspendPaint()
    var project = ganttSheet.project;
    var selections = ganttSheet.getSelections();
    var insertedRow = Math.min(...selections.map(r => r.row), project.tasks.length)
    var rowCount = selections.map(r => r.rowCount).reduce((pre, current) => { return pre + current });
    var taskData = createTaskDataList(rowCount, () => ({ name: "<新しいタスク>" }));
    project.insertTasksByRow(insertedRow, taskData); 
    ganttSheet.resumePaint();
}
function createTaskDataList(count, initializer) {
    var array = new Array(count);
    for (var index = 0; index < count; index++) {
         array[index] = initializer();
    }
    return array;
}

サマリータスクの追加

サマリータスクは、他のタスクの親タスクです。関連するタスクをグループ化して、より明確に表示し、プロジェクト管理を向上させることができます。

次の図は、新しいサマリータスクを示します。

task2

ガントシートにサマリータスクを挿入するには、次のサンプルコードのようにinsertTasksメソッドを使用できます。

// 新しいサマリータスクを追加する
function addSummary(ganttSheet) {
    ganttSheet.suspendPaint()
    var project = ganttSheet.project;
    var selectedRange = ganttSheet.getSelections()[0];
    var insertedRow = selectedRange.row;
    var insertedTaskNumbers = ganttSheet.getTaskByRow(insertedRow).taskNumber || project.count;
    var selectedTasks = getSelectedRowIndexes().map((row) => ganttSheet.getTaskByRow(row)).filter((row) => !!row);
        if (selectedTasks.length == 0) {
            project.insertTasks(insertedTaskNumbers, [{ name: "<新しいサマリータスク>" }, { name: "<新しいタスク>" }]);
            project.indentTasks(insertedTaskNumbers + 1);
        } else {
            project.insertTasks(insertedTaskNumbers, { name: "<新しいサマリータスク>" }, selectedTasks[0].level);
            project.indentTasks(selectedTasks.map((t) => t.taskNumber));
        }
        ganttSheet.setSelection(insertedRow, -1, 1, -1);
        ganttSheet.resumePaint();
}
function getSelectedRowIndexes() {
    var rows = [];
    var selections = ganttSheet.getSelections();
    for (var range of selections) {
        for (var row = range.row; row < range.row + range.rowCount; row++) {
            rows.push(row);
        }
    }
    return rows;
}

マイルストーンタスクの追加

マイルストーンはガントチャートの重要な要素の一つであり、プロジェクトタイムラインで重要な成果を示すゼロ期間のタスクを表します。

次の図では、ゼロ期間の新しいマイルストーンタスクを挿入しています。マイルストーンタスクを設定すると、ガントチャート領域にマイルストーンアイコンとともに日付テキストが表示されます。

task3

次のサンプルコードのように、insertTasksByRow メソッドを使用することでガントシートにマイルストーンタスクを挿入できます。

// マイルストーンタスクを追加します。
function addMilestone(ganttSheet) {
var project = ganttSheet.project;
var selections = ganttSheet.getSelections();
var rowCount = selections.map(r => r.rowCount).reduce((pre, current) => { return pre + current });
var insertedRow = Math.min(...selections.map(r => r.row), project.tasks.length);
var taskData = createTaskDataList(rowCount, () => ({ name: "<新しいマイルストーン>", duration: 0 }));
project.insertTasksByRow(insertedRow, taskData);
ganttSheet.setSelection(insertedRow, -1, rowCount, -1);
}

タスクの削除

ガントシートから使用されていないタスクを削除できます。ただし、ガントシートのルートタスクを削除することはできません。サマリータスクやサマリータスクを含むタスク範囲を削除すると、サマリータスクのすべての子タスクも削除されます。

次のメソッドを使用することでタスクやタスク範囲を削除できます。

removeTasks
removeTasksByRange
clearTasks
clearTasksByRange

次のサンプルコードは、removeTasks メソッドを使用してタスクを削除する方法を示します。

// タスクを削除します。
function deleteTask(ganttSheet) {   
    var project = ganttSheet.project;   
    var rowIds = getSelectedTaskNumbers();   
    project.removeTasks(rowIds);
}

タスクの昇格・降格

レベル 0 のルートタスクから始まるガントシートでは、各タスクに対応するレベルがあります。選択したタスクを昇格・降格することで、タスクのレベルを調整できます。タスクを降格すると、レベルが追加され、前のタスクがサマリータスクになります。ただし、タスクを昇格すると、タスクレベルが 1レベル減り、選択したタスクがサマリータスクになります。

次の図は、タスクレベルを昇格・降格する方法を示します。

task4

次のメソッドを使用して、同時に複数のタスクのレベルも変更できます。

indentTasks
indentTasksByRange
outdentTasks
outdentTasksByRange

次のサンプルコードは、indentTasks とoutdentTasksメソッドを使用して、タスクのレベルを変更する方法を示します。

// タスクのレベルを下げます。
function indentTask(ganttSheet) {            
var project = ganttSheet.project;            
var rowIds = getSelectedTaskNumbers();            
project.indentTasks(rowIds);        
}        
// タスクのレベルを上げます。
function outdentTask(ganttSheet) {            
var project = ganttSheet.project;            
var rowIds = getSelectedTaskNumbers();            
project.outdentTasks(rowIds);        
}

タスクのリンク・リンク解除

addDependencyメソッドを使用することでガントシートでのタスクを先行タスクにリンクして関係を成立できます。fromTaskNumberおよびtoTaskNumberパラメータを使用することでタスク間の依存関係を作成できます。次の表で、4種類のタスク依存関係を示します。

リンクの種類	サンプル
FS [終了-開始]
SS [開始-開始]
FF [終了-終了]
SF [開始-終了]

GC.Spread.Sheets.TaskDependencyTypeのAPIを使用することで、要望に応じた依存関係を設定できます。デフォルトは、FS[終了-開始]です。また、removeDependency メソッドを使用して、タスクのリンクを解除して依存関係を削除することも可能です。

次の図は、リンクされたタスクとリンクされていないタスクの例を示しています。

task5

次のサンプルコードは、ガントシートでタスクをリンク・リンク解除する方法を示します。

// タスクをリンクします。
function linkTask(ganttSheet) {
        var project = ganttSheet.project;
        var links = [];
        var selections = ganttSheet.getSelections();
        var previous = -1;
        for (var range of selections) {
                if (previous != -1) {
                    links.push([previous, range.row]);
                }
                for (var row = range.row + 1; row < range.row + range.rowCount; row++) {
                    links.push([row - 1, row]);
                }
                previous = range.row + range.rowCount - 1;
            }
            if (links.length <= 0) {
                return;
            }
            project.suspendSchedule();
            for (var link of links) {
                var [fromTaskNumber, toTaskNumber] = link;
                try {
                    project.addDependency({ fromTaskNumber, toTaskNumber });
                } catch { }
            }
            project.resumeSchedule();
        }
// タスクのリンクを解除します。
function unlinkTask(ganttSheet) {
            var project = ganttSheet.project;
            var taskNumbers = getSelectedTaskNumbers();
            var dependencies = [];
            if (taskNumbers.length == 1) {
                var task = project.getTaskByRow(taskNumbers[0]);
                dependencies = [...task.predecessorDependencies, ...task.successorDependencies];
            } else {
                var taskNumberSet = {};
                for (var taskNumber of taskNumbers) {
                    taskNumberSet[taskNumber] = true;
                }
                dependencies = project.dependencies.filter(dp => taskNumberSet[dp.from.taskNumber] && taskNumberSet[dp.to.taskNumber]);
            }
            if (dependencies.length >= 1) {
                project.removeDependency(dependencies);
            }
        }

type=warning
メモ：
サマリータスクを子タスクにリンクできません。
すでにリンクされている場合、重複するリンクをタスクに追加できません。
リンク線は交差できません。例えば、サマリータスク2がサマリータスク8にリンクされている場合、サマリータスク2の子ノードをサマリータスク8の子ノードにリンクできます。ただし、サマリータスク 8 の子ノードをサマリータスク 2 の子ノードにリンクすることはできません。
サマリータスクの先行タスクの依存関係は、FS (終了 - 開始) または SS (開始 - 開始) のみです。

タスクの進捗状況を変更

ガントシートは、タスクの進捗状況を0から100までを範囲とするCompleteフィールドで、パーセントで表示します。このため、タスクの進捗を表示する場合は、データソースにCompleteフィールドが含まれていることを確認する必要があります。Completeフィールドを追加すると、次の図に示すように、プログレスバーが、ガントチャートビューのタスクバー内に表示されます。

task6

タスクバー内の達成率を変更するには、タスクバーにマウスカーソルをホーバーして、プログレスバーをドラッグします。ガントシートで、通常タスクの達成率を手動で変更できることにご注意ください。SpreadJSデザイナには、0%、25%、50%、75%、100%にタスク完了をすばやく調整するためのボタンもあります。

ただし、サマリータスクの達成率は、以下の式に基づいて自動的に計算されます。

サマリータスク達成率 = タスクの合計時間/ タスクの推定合計期間* 100%

再スケジュールすると、サマリータスクの計算が完了します。このため、サブタスクの追加/削除/レベル変更、および期間と完了の変更を行うと、再スケジュールが発生します。

次のサンプルコードは、Completeフィールドを含むガントシートを作成する方法を示します。

// 新規ガントシートを作成してガントチャートビューの列を定義します。
var ganttSheet = spread.addSheetTab(0, "GanttSheet1", GC.Spread.Sheets.SheetType.ganttSheet);
    var view = myTable1.addView("myView1", [
                { value: "taskNumber", caption: "NO.", width: 60 },
                { value: "name", caption: "Task Name", width: 200 },
                { value: "duration", caption: "Duration", width: 90 },
                { value: "predecessors", caption: "Predecessors", width: 120 },
                { value: "complete", caption: "% Complete", width: 120 }

    ]);

GC.Spread.Sheets.GanttSheet.Taskクラスのcompleteプロパティを使用して、タスクの達成率を取得または設定します。さらに、completeThrough プロパティを使用して、タスクの特定の時点までに報告された進行状況を示す日付値を設定または取得できます。

次のサンプルコードは、ガントシートでcompleteおよびcompleteThroughプロパティを取得または設定する方法を示します。

var task = ganttSheet.getTaskByRow(10);
// completeを取得します。
console.log(task.complete);
// completeを設定します。
task.complete = 0.5;
// completeThroughを取得します。
console.log(task.completeThrough);
// completeThroughを設定します。
task.completeThrough = task.finish;