ガントチャートをWebアプリに組み込める「ガントシート」でプロジェクト管理機能を作成してみよう

　メシウス株式会社の提供する「SpreadJS」は、サーバサイドの実装を必要とせずにWebブラウザのみでExcelライクなスプレッドシートを作成、表示することのできるJavaScriptライブラリです。本記事では、SpreadJS V17Jの新機能であるガントシート機能でガントチャートをWebアプリに組み込み、レベル階層フォーマットの使い方や先行タスク、達成度の表示、スタイルのカスタマイズなどの事例を紹介します。

必要な環境

　本記事のサンプルコードは、以下の環境で動作を確認しています。

• macOS Sonoma
  • SpreadJS（17.1.5）
  • Visual Studio Code 1.95.1（Live Server 5.7.9）
  • Google Chrome 130.0

対象読者

• Webアプリにガントチャート機能を実装したい方
• Webアプリでプロジェクトの工程管理を行いたい方
• SpreadJSのスプレッドシート以外の機能を知りたい方

作成するガントチャート

　本記事では、図1のガントチャートを作成します。このガントシートは、架空のプロジェクトにおける進捗を表示します。ワークシートを2つ作成し、ガントシートのデータ形式であるレベル階層形式と子階層形式で、それぞれガントチャートを表示します。また、先行タスクと達成率の表示、ガントチャートのスタイルのカスタマイズも実施します。

図1　本記事で作成するガントチャート

開発環境と事前準備

　最初に、開発環境と必要なファイルを準備しておきます。

開発環境

　開発環境としては、VSCode（Visual Studio Code）をインストールしておきます。そのあと、VSCodeにHTTPサーバを提供する拡張機能Live Serverをインストールします。本記事のサンプルではHTTPサーバは必須ではありませんが、ホットリロードなどが利用できるので、インストールしておくと便利です。

SpreadJSモジュールの入手と配置

　アプリの拠点となる作業フォルダを作成しておきます。ここでは、spreadjs_ganttとしました。この作業フォルダに、JavaScriptファイルの置き場所であるscriptsフォルダと、CSSファイルの置き場所であるcssフォルダをさらに作成しておきます。

　SpreadJSのトライアル版、または製品版を入手して配置します。トライアル版は公式ページからダウンロードできます。Zipファイルを解凍してできるSpreadJS_Release/SpreadJS-Libs/SpreadJS以下にあるフォルダから、以下のファイルを作業フォルダにコピーします。scriptsフォルダ配下のファイルはscriptsフォルダへ、cssフォルダ配下のファイルはcssフォルダへ、それぞれコピーしてください。

　なお、cssフォルダにはCSSファイルが7種類収納されています。ライト系とダーク系などからお好みのデザインのものを選択してください。ここではオーソドックスなexcel2013white.17.1.5.cssとしました。

　scripts/gc.spread.sheets.all.17.1.5.min.js

　scripts/plugins/gc.spread.sheets.tablesheet.17.1.5.min.js

　scripts/plugins/gc.spread.sheets.ganttsheet.17.1.5.min.js

　scripts/resources/ja/gc.spread.sheets.resources.ja.17.1.5.min.js

　css/gc.spread.sheets.excel2013white.17.1.5.css

SpreadJSのバージョン

　執筆にはSpreadJS 17.1.5を使用しました。入手したバージョンが異なる場合には、index.htmlファイルの<link>タグと<script>タグにおいて、ファイル名中のバージョンの表記を実際のバージョンに合わせてください。

カスタムCSSファイルの準備

　カスタムCSSは、ガントシートをHTMLにどのように表示させるかを決めるためのものです。以下のリストの内容で作成し、cssフォルダに配置します。基本的にページ領域いっぱいを使用して表示します。

css/styles.css

body, html {			/* ガントシートをページいっぱいに表示 */
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.sample, .spreadsheets{		/* 親要素に対して100%の領域で表示 */
    width: 100%;
    height: 100%;
}