レベル階層形式ガントシートの組み込み
SpreadJSモジュールとカスタムCSSの準備ができたら、HTMLファイルなどを作成してガントシートを組み込んでいきましょう。
HTMLファイルの準備
アプリの起点であるindex.htmlファイルを、以下のリストの内容で作業フォルダに作成します。（1）のCSSファイルの読み込みパスは、実際に使うCSSファイルに合わせてください。（2）以降のJavaScriptファイルの読み込みも同様です。（3）がガントシートアプリとデータの読み込みで、（4）がスプレッドシートが展開される要素です。
<!DOCTYPE html>
<html>
<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.1.5.css"> (1)
<script src="scripts/gc.spread.sheets.all.17.1.5.min.js"></script> (2)
<script src="scripts/gc.spread.sheets.tablesheet.17.1.5.min.js"></script>
<script src="scripts/gc.spread.sheets.ganttsheet.17.1.5.min.js"></script>
<script src="scripts/gc.spread.sheets.resources.ja.17.1.5.min.js"></script>
<script src="scripts/app.js"></script> (3)
<script src="scripts/data.js"></script>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body style="height: 100%; font-size: 14px;">
<div class="sample">
<div id="ss" class="spreadsheets"></div> (4)
</div>
</body>
</html>
JavaScriptファイルの準備
ガントシートを表示するためのapp.jsファイルを、scriptsフォルダに作成します。まずは、ガントシート作成処理以前の部分を、以下のリストの内容で作成します。
// (1)ライセンスキーと言語の設定
//GC.Spread.Sheets.LicenseKey = "ここにSpreadJSのライセンスキーを設定します";
GC.Spread.Common.CultureManager.culture("ja-jp");
// (2)ページ読み込み後にワークブックを初期化する
window.onload = () => {
const spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {
sheetCount: 0
});
initSpread(spread); // スプレッドシートの初期化
};
// (3)スプレッドシートの初期化関数
function initSpread(spread) {
spread.suspendPaint(); // 描画の停止
initGanttSheetLevel(spread); // レベル階層形式ガントシートの初期化
spread.resumePaint(); // 描画の再開
}
（1）のライセンスキーの設定では、各自が入手したライセンスキーを記述してください。ライセンスキーを設定せずにトライアル版として利用する場合には、1行目をコメントアウトしてください。この場合、実行時にトライアル版であることを示すメッセージが表示されます。
（2）は、ページ読み込み終了時のイベントハンドラ（onload）で、ワークブックを初期化しています。表示領域となるHTML要素（id="ss"）を指定してWorkbookオブジェクトを生成します。sheetCountプロパティをゼロに設定しているのは、初期状態でシートを作成しないことを意味します。
（3）は、ワークブックの生成後に呼び出されるinitSpread関数です。ここでは、ガントシート描画中の画面のちらつきを抑えるために、suspendPaintメソッドで描画を保留し、initGanttSheetLevel関数の呼び出し後に、resumePaintメソッドで描画を再開しています。
続いて、レベル階層形式のガントシートの初期化関数です。
// ガントシートの初期化関数（レベル階層）
function initGanttSheetLevel(spread) {
// (1)データマネージャの取得とテーブルの作成
const dataManager = spread.dataManager();
const table = dataManager.addTable("linkTable", {
data: getDataLevel(), // バインドするデータの指定
batch: true, // 同期モードにバッチを指定
schema: { // スキーマの指定
hierarchy: {
type: "Level", // レベル階層形式の指定
column: "level" // レベルはlevelプロパティで指定
}
}
});
// (2)ガントシートの追加と外見の設定
const ganttSheet = spread.addSheetTab(0, "レベル階層プロジェクト",
GC.Spread.Sheets.SheetType.ganttSheet); // ガントシートのシートを追加
//ganttSheet.project.startDate = new Date("2024/11/13 09:00"); // 開始日時（省略時は現在日時）
ganttSheet.gridlines.bottomTierColumn.lineType = // 縦線をダッシュに
GC.Spread.Sheets.GanttSheet.GanttGridlineType.dashed;
ganttSheet.gridlines.ganttRows = { // 横線は細線のグレー
lineType: GC.Spread.Sheets.GanttSheet.GanttGridlineType.thin,
lineColor: "lightgray",
}
// (3)ビューの作成
const view = table.addView("linkView", [
{ value: "taskNumber", caption: "NO.", width: 70 },
{ value: "name", caption: "タスク名", width: 260 },
{ value: "pic", caption: "担当責任者", width: 120 },
{ value: "duration", caption: "予定工数", width: 90 }
]);
// (4)データの読み込みとビューのバインド
view.fetch().then(() => {
ganttSheet.bindGanttView(view);
}).then(() => {
// (5)タイムスケールの設定
const 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月"; // 月表示のフォーマット
});
}
initGanttSheetLevel関数は、ガントシートを初期化します。
（1）以降は、データ管理をつかさどるデータマネージャオブジェクトをdataManagerで取得し、addTableメソッドでテーブルを追加しています。テーブルは、名前（"linkTable"）とオプションで構成されます。以下は、それぞれのプロパティの意味です。
- data：バインドするデータを表します。ここでは後述するgetDataLevel関数から返される配列を渡しています。
- batch：リモートデータベースの更新方法をBatchモードに指定します。通信効率の向上のために、スプレッドシートの変更を保存し、一度に更新するようになります。サンプルには更新処理はありませんが、ガントシートでは、batchプロパティをtrueに設定する必要があります。
- schema：データの構成を指定します。レベル階層形式では、hierarchy.typeプロパティに"Level"を、columnプロパティにはレベルを指定するデータソース上のプロパティ（この場合は"level"）を指定します。
（2）以降は、addSheetTabメソッドでシートタブを追加し、外見を設定しています。addSheetTabメソッドの引数は、前から「位置（ここでは0＝先頭）」「名前（ここでは"レベル階層プロジェクト"）」を意味します。gridlinesプロパティは、名前の通り、グリッド線の見た目を設定します。なお、サンプルではコメントアウトしていますが、project.startDateプロパティを設定すると、プロジェクトの開始日を指定できます。省略時は、現在日時となります。
（3）以降では、テーブルに対応するビューを作成します。ここで、個々の列情報を指定できます。それぞれのプロパティの意味は、以下の通りです。
- value：列名
- caption：キャプション
- width：表示幅
- visible：列を表示するか
表示したい列を追加する場合には、ここに列情報を追加していきます。
あとは、（4）のfetchメソッドでデータを読み込み、bindGanttViewメソッドでガントシートにバインドするだけです。なお、必須ではありませんが、（5）のように、タイムスケールの表示をカスタマイズすることも可能です。なお、タイムスケールとはガントチャート部の列ヘッダーです。最大3段階の表示が可能で、月、週、日などの期間を表示できます。
データソースの準備
レベル階層形式のデータソースとして、data.jsファイルをscriptsフォルダ配下に以下のリストの内容で作成します。全体は配布サンプルを参照してください。
function getDataLevel() {
const Gantt_Data = [
{
"id": 1,
"level": 0, (1)
"taskNumber": 1,
"name": "要件定義",
"duration": "6 days",
"pic": "正門 恵子"
},
…略
]
return Gantt_Data;
}
データソースにおけるポイントは（1）のlevelプロパティで、レベル階層形式においてレベルを指定することです。スキーマ設定におけるhierarchy.columnプロパティに指定した名前である必要があります。値には、レベルを整数値で指定します。数値に応じた階層に項目が配置されます。
実行確認
ここまで作成すると、実行確認できます。VSCodeのエクスプローラーからindex.htmlファイルを右クリックして、メニューから［Open with Live Server］をクリックしてサーバを起動します。図2のようにガントシートが表示されれば、ここまでの手順はうまくいっています。以降は、コードの修正で自動的にページが更新されます。
