.png)
必要な環境
本記事のサンプルコードは、以下の環境で動作を確認しています。
-
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つ作成し、ガントシートのデータ形式であるレベル階層形式と子階層形式で、それぞれガントチャートを表示します。また、先行タスクと達成率の表示、ガントチャートのスタイルのカスタマイズも実施します。
開発環境と事前準備
最初に、開発環境と必要なファイルを準備しておきます。
開発環境
開発環境としては、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フォルダに配置します。基本的にページ領域いっぱいを使用して表示します。
body, html { /* ガントシートをページいっぱいに表示 */
padding: 0;
margin: 0;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.sample, .spreadsheets{ /* 親要素に対して100%の領域で表示 */
width: 100%;
height: 100%;
}
