JavaScript/SpreadJS

JavaScriptでガントチャートが作れる！「ガントシート」の使い方（1）

by MESCIUS-dev

（2024年4月23日更新）

2024年2月28日にリリースされたJavaScriptスプレッドシートライブラリ「SpreadJS（スプレッドJS）」の最新バージョン「V17J」ではプロジェクト管理や生産管理などで使用される工程管理表（ガントチャート）をExcelライクなUIで作成できる「ガントシート」機能を追加しました。

ガントシート

今回はこのガントシートでガントチャートをWebアプリケーションに組み込む基本的な方法を解説していきたいと思います。

後編の記事ではガントシートとWeb APIを連携させて、タスクの登録、更新、削除を行う方法を解説していますので、こちらもご覧ください。

開発環境

今回は開発環境として以下を使用します。

事前準備

ガントシートを使い始めるのに難しい設定を行う必要はありません。今回は以下の3つのファイルを用意してWebページにガントシートを組み込みます。

index.htmlページ本体。このページの要素としてガントシートを組み込みます
app.jsガントシートの初期化など各種設定を行うためのコードを記載します
data.jsガントシートに表示するタスクのデータの定義を記載します
styles.cssガントシートや各種要素のスタイル設定を行うためのコードを記載します

また、ガントシートの使用にはSpreadJSのモジュールを環境に配置する必要があります。npmなどから入手したりする方法もありますが、今回は環境に直接SpreadJSのモジュールを配置していきます。あらかじめSpreadJSの製品版かトライアル版をご用意ください。トライアル版は以下より無償で入手可能です。

製品版、またはトライアル版をダウンロードしたら、ZIPファイルを解凍し、以下のファイルを環境にコピーします。CSSファイルは7種類あるのでお好みのテーマのものを選択してください。

  • scripts/gc.spread.sheets.all.17.0.4.min.js
  • scripts/plugins/gc.spread.sheets.tablesheet.17.0.4.min.js
  • scripts/plugins/gc.spread.sheets.ganttsheet.17.0.4.min.js
  • scripts/resources/ja/gc.spread.sheets.resources.ja.17.0.4.min.js
  • css/gc.spread.sheets.excel2013white.17.0.4.css

コピーしたファイルはそれぞれ以下のように配置します。

SpreadJSのライブラリを配置

ガントシートの組み込み

それでは早速Webページにガントシートを組み込んでいきたいと思います。

SpreadJSのライブラリの参照

まずは「index.html」を以下のように記載し、各種ライブラリの参照設定や、ガントシートを表示する部分の定義を行います。

<!DOCTYPE html>
<html style="height:100%;font-size:14px;">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="css/gc.spread.sheets.excel2013white.17.0.4.css">
    <script src="scripts/gc.spread.sheets.all.17.0.4.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.tablesheet.17.0.4.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.ganttsheet.17.0.4.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.resources.ja.17.0.4.min.js" type="text/javascript"></script>
    <script src="scripts/app.js" type="text/javascript"></script>
    <script src="scripts/data.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
    <div class="sample-tutorial">
        <div id="ss" class="sample-spreadsheets"></div>
    </div>
</body>
</html>

ガントシートの初期化

さらに「app.js」を以下のように記載し、ガントシートの初期化の定義を行います。

※ ライセンスキーを設定しない場合、トライアル版を示すメッセージが表示されます。ライセンスキーの設定方法についてはこちらをご覧ください。

GC.Spread.Sheets.LicenseKey = "ここにSpreadJSのライセンスキーを設定します";
GC.Spread.Common.CultureManager.culture("ja-jp");

window.onload = function () {
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 });
    initSpread(spread);
};

function initSpread(spread) {
    spread.suspendPaint();
    initGanttSheet(spread);
    spread.resumePaint();
}

function initGanttSheet(spread) {
    var dataManager = spread.dataManager();
    var myTable1 = dataManager.addTable("myTable1", {
        data: getData(),
        batch: true,
        schema: {
            hierarchy: {
                type: "Parent",
                column: "parentId"
            },
            columns: {
                id: { isPrimaryKey: true },
                taskNumber: { dataType: "rowOrder" },
            }
        }
    });
    var ganttSheet = spread.addSheetTab(0, "社内システム刷新プロジェクト", GC.Spread.Sheets.SheetType.ganttSheet);
    ganttSheet.gridlines.bottomTierColumn.lineType = GC.Spread.Sheets.GanttSheet.GanttGridlineType.dashed;
    ganttSheet.gridlines.ganttRows = {
        lineType: GC.Spread.Sheets.GanttSheet.GanttGridlineType.thin,
        lineColor: "lightgray",
    }
    var view = myTable1.addView("myView1", [
        { value: "taskNumber", caption: "NO.", width: 70 },
        { value: "name", caption: "タスク名", width: 260 },
        { value: "pic", caption: "担当責任者", width: 120 },
        { value: "duration", caption: "予定工数", width: 90 },
        { value: "predecessors", caption: "先行タスク", width: 120, visible: false },
        { value: "start", caption: "開始日", width: 120, visible: false },
        { value: "mode", caption: "モード", width: 120, visible: false }
    ]);
    view.fetch().then(function () {
        ganttSheet.bindGanttView(view);
    }).then(function () {
        // タイムスケールの設定
        let tierMode = GC.Spread.Sheets.GanttSheet.TimescaleTierMode.topMiddleBottom;
        ganttSheet.project.timescale.tierMode = tierMode;
        ganttSheet.project.timescale.topTier.unit = GC.Spread.Sheets.GanttSheet.TimescaleUnit.months;
        ganttSheet.project.timescale.topTier.formatter = "yyyy年mm月";

        // タスクバーのスタイルの設定
        let taskRule = ganttSheet.project.taskStyleRules.getRule("task");
        let taskStyle = taskRule.style.taskbarStyle;
        taskStyle.middleShape = "rectangleMiddle";
        taskStyle.middleColor = "#abd08f";
        taskRule.style.taskbarStyle = taskStyle;
    });
}

ここからは上記のコードでポイントとなる部分を解説していきます。上記のコードでは、まず作成したスプレッドシートのインスタンスにganttsheet型のシートタブを追加しています。さらに「startdate」プロパティで開始日を指定し、「gridlines」プロパティでガントチャートのグリッド線の線種や色の設定などを行っています。

・・・（省略）・・・
    var ganttSheet = spread.addSheetTab(0, "社内システム刷新プロジェクト", GC.Spread.Sheets.SheetType.ganttSheet);
    // プロジェクトの開始日を設定
    ganttSheet.project.startDate = new Date("2024/03/05 09:00");    
    ganttSheet.gridlines.bottomTierColumn.lineType = GC.Spread.Sheets.GanttSheet.GanttGridlineType.dashed;
    ganttSheet.gridlines.ganttRows = {
        lineType: GC.Spread.Sheets.GanttSheet.GanttGridlineType.thin,
        lineColor: "lightgray",
    }
・・・（省略）・・・

そのほか、DataManagerメソッドを使用してデータマネージャーを初期化し、addTableメソッドを使用して、データマネージャーにテーブルを追加します。このメソッドは、テーブル名を文字列として受け取り、IDataSourceOptionインターフェイスオプションを受け取ります。

ガントシートを使用する場合、データの同期モードにバッチモードを使用する必要があるので、「batch」プロパティを「true」に設定します。また、今回はデータの表示のみを試すので、「data」プロパティで固定の配列データをバインドします。

さらにガントシートでは、「親階層」、「レベル階層」、「子階層」の3種類の階層データが使用可能ですが、今回は親となる階層をIDで指定する「親階層」の階層データを使用するので、それにあわせてスキーマの「hierarchy」のオプションを設定します。詳細は製品ヘルプの以下のトピックもご覧ください。

・・・（省略）・・・
    var dataManager = spread.dataManager();
    var myTable1 = dataManager.addTable("myTable1", {
        data: getData(),
        batch: true,
        schema: {
            hierarchy: {
                type: "Parent",
                column: "parentId"
            },
            columns: {
                id: { isPrimaryKey: true },
                taskNumber: { dataType: "rowOrder" },
            }
        }
    });
・・・（省略）・・・

次にaddViewメソッドを使用してデータマネージャのテーブルにビューを追加し、GanttSheetを初期化するための列情報を定義します。

・・・（省略）・・・
    var view = myTable1.addView("myView1", [
        { value: "taskNumber", caption: "NO.", width: 70 },
        { value: "name", caption: "タスク名", width: 260 },
        { value: "pic", caption: "担当責任者", width: 120 },
        { value: "duration", caption: "予定工数", width: 90 },
        { value: "predecessors", caption: "先行タスク", width: 120, visible: false },
        { value: "start", caption: "開始日", width: 120, visible: false },
        { value: "mode", caption: "モード", width: 120, visible: false }
    ]);
・・・（省略）・・・

次にビューのfetchメソッドを使用してビューを取得し、bindGanttView メソッドを使用してガントシートにバインドします。

・・・（省略）・・・
    view.fetch().then(function () {
        ganttSheet.bindGanttView(view);
・・・（省略）・・・

バインド後にタイムスケールやタスクバーのスタイルをカスタマイズしています。

・・・（省略）・・・
    }).then(function () {
        // タイムスケールの設定
        let tierMode = GC.Spread.Sheets.GanttSheet.TimescaleTierMode.topMiddleBottom;
        ganttSheet.project.timescale.tierMode = tierMode;
        ganttSheet.project.timescale.topTier.unit = GC.Spread.Sheets.GanttSheet.TimescaleUnit.months;
        ganttSheet.project.timescale.topTier.formatter = "yyyy年mm月";

        // タスクバーのスタイルの設定
        let taskRule = ganttSheet.project.taskStyleRules.getRule("task");
        let taskStyle = taskRule.style.taskbarStyle;
        taskStyle.middleShape = "rectangleMiddle";
        taskStyle.middleColor = "#abd08f";
        taskRule.style.taskbarStyle = taskStyle;
    });
・・・（省略）・・・

バインドするデータの設定

「data.js」では以下のように表示するタスクのデータを定義します。前述のとおり、今回は「親階層」の階層データを使用します。

function getData() {
  var Gantt_Data = [
    {
      "id": 1,
      "parentId": null,
      "taskNumber": 1,
      "name": "要件定義",
      "duration": "6 days",
      "predecessors": "",
      "pic": "正門 恵子"
    },
    {
      "id": 2,
      "parentId": 1,
      "taskNumber": 2,
      "name": "社内関係者ヒアリング",
      "duration": "1 day",
      "predecessors": "",
      "pic": "正門 恵子"
    },
    {
      "id": 3,
      "parentId": 1,
      "taskNumber": 3,
      "name": "要求事項の細分化",
      "duration": "3 days",
      "predecessors": "2",
      "pic": "青木 俊之"
    },
    {
      "id": 4,
      "parentId": 1,
      "taskNumber": 4,
      "name": "要件定義書作成",
      "duration": "2 days",
      "predecessors": "3",
      "pic": "青木 俊之",
    },
    {
      "id": 5,
      "parentId": null,
      "taskNumber": 5,
      "name": "設計",
      "duration": "1 day",
      "predecessors": "1",
      "pic": "正門 恵子",
    },
    {
      "id": 6,
      "parentId": 5,
      "taskNumber": 6,
      "name": "基本設計",
      "duration": "1 day",
      "predecessors": "",
      "pic": "正門 恵子",
    },
    {
      "id": 7,
      "parentId": 6,
      "taskNumber": 7,
      "name": "画面設計",
      "duration": "4 days",
      "predecessors": "",
      "pic": "森上 偉久馬",
    },
    {
      "id": 8,
      "parentId": 6,
      "taskNumber": 8,
      "name": "帳票設計",
      "duration": "2 days",
      "predecessors": "",
      "pic": "成宮 真紀",
    }
  ]
  return Gantt_Data;
}

ガントシートにバインドするデータで、以下の項目が固有の必須項目またオプションの項目となります。そのほかでガントシートに表示したいデータ等も適宜オプションとして設定可能です。

必須項目

項目データ型説明
taskNumbernumberタスク番号
namestringタスク名
durationstring／number／objectタスクの期間
predecessorsstring依存する先行タスク
modestringスケジュールモード：「Auto」もしくは「Manual」
デフォルトは「Auto」

オプション項目

項目データ型説明
startdateタスクの開始日
finishdateタスクの終了日
completenumberタスクの進捗率

スタイルの設定

仕上げとして「styles.css」を以下のように記載し、スタイルの調整を行います。

.sample-tutorial {
   width: 100%;
   height: 100%;
}

body, html {
   padding: 0;
   margin: 0;
   width: 100%;
   height: 100%;
   position: relative;
   overflow: hidden;
}

.sample-spreadsheets {
   width: 100%;
   height: 100%;
}

実行

以上でガントシートの設定は完了です。「index.html」を右クリックして「Open with Live Server」を実行し、開発サーバーでアプリケーションを起動します。

Live Serverで実行

ブラウザが起動し、ガントシートが表示できます。

ガントシートの表示

階層表示された各タスクは折りたたみや展開ができます。また、タスクバーをドラッグアンドドロップすればタスクの期日や先行後続のタスクも変更できます。

今回ご紹介した各種設定を実装したサンプルをStackBlitzで公開しているので、こちらもご覧ください。

なお、今回ご紹介したガントシートの機能はほんの一部です。ガントシートの詳細な機能については製品ヘルプやデモもご確認ください。

さいごに

以上がガントシートの基本的な使い方の解説でした。ガントシートを使えばガントチャートを組み込んだWebアプリケーションの開発が格段に簡単にできるようになりますので、ぜひお試しください。

後編の記事ではガントシートとWeb APIを連携させて、タスクの登録、更新、削除を行う方法を解説していますので、そちらも是非ご覧ください。

製品サイトでは、SpreadJSの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

＼  この記事をシェアする  ／