高機能JavaScriptスプレッドシート部品「SpreadJS」の活用（AD）

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

2025/01/07 12:00

ポスト

ガントシートの活用例

　ここからは、先行タスクの設定やタスク達成度の表示、スタイルのカスタマイズなど、ガントシートの活用についてのトピックスをいくつか紹介します。

先行タスクの設定

　ここまでのサンプルでは、複数のタスクがあってもそれらは同時進行していました。しかし、現実的なプロジェクトでは、通常は先行タスクがあって、その終了を待って次のタスクが始まるのが一般的です。このように、別のタスクの終了に依存する形で次のタスクを開始させたい場合には、predecessorsプロパティをタスクデータに追加し、ビューにも項目を追加します。

　predecessorsプロパティの値は文字列で、通常は先行タスクのidを指定します（複数ある場合にはカンマ区切り）。先行タスクがない場合には、空文字列を指定します。ここには、先行タスクなしの場合とありの場合の例を示すので、全体は配布サンプルを参照してください。

scripts/data.js（getDataLevel関数）

function getDataLevel() {
  const Gantt_Data = [
    …略…
    {
      "id": 2,
      "level": 1,
      "taskNumber": 2,
      "name": "社内関係者ヒアリング",
      "duration": "1 day",
      "predecessors": "",			// 先行タスクなし
      "pic": "正門 恵子"
    },
    {
      "id": 3,
      "level": 1,
      "taskNumber": 3,
      "name": "要求事項の細分化",
      "duration": "3 days",
      "predecessors": "2",			// 先行タスクはid=2のタスク
      "pic": "青木 俊之"
    },
    …略…

　対応するビューは、以下のとおりです。項目は必要ですが、列として見える必要はないのでvisibleプロパティをfalseとしています。

scripts/app.js（initGanttSheetLevel関数）

const view = table.addView("linkView", [
  …略…
  { value: "duration", caption: "予定工数", width: 90 },
  { value: "predecessors", caption: "先行タスク", width: 120, visible: false },
]);	// 追加

タスク達成度の表示

　それぞれのタスクには、達成度をパーセント表示することができます。タスクにcompleteプロパティを追加し、達成度を0～1.0までの数値で指定します。なお、completeプロパティを追加できるのは子要素を持たない要素のみです（追加しても無視されます）。親要素には、子要素の達成度を合計したものが反映されます。

scripts/data.js（getDataLevel関数）

…略…
{
  "id": 8,
  "level": 2,
  "taskNumber": 8,
  "name": "帳票設計",
  "duration": "2 days",
  "predecessors": "",
  "pic": "成宮 真紀",
  "complete": 0.5,		// 達成度は50パーセント
}
…略…

　ビューは、以下のリストのようになります。

scripts/app.js（initGanttSheetLevel関数）

const view = table.addView("linkView", [
  …略…
  { value: "predecessors", caption: "先行タスク", width: 120, visible: false },
  { value: "complete", caption: "進捗率", width: 70 },	// 追加
]);

タスクの表示スタイルのカスタマイズ

　タスクの表示スタイル（シェイプや色など）は、タスクバーの各要素につき、スタイルルール（GC.Spread.Sheets.GanttSheet.TaskbarStyleRuleName）という形で決められています。各要素のスタイルルールは以下が組み込みで用意されています。

表　タスクの表示スタイル
スタイルルール	概要
durationOnly	期間
durationOnlyMilestone	期間（マイルストーン）
finishOnly	タスク終了
finishOnlyMilestone	タスク終了（マイルストーン）
manualMilestone	マイルストーン、手動スケジュール
manualProgress	進捗、手動スケジュール
manualSummary	サマリー、手動スケジュール
manualTask	タスク、手動スケジュール
milestone	マイルストーン
progress	進捗
projectSummary	プロジェクトのサマリー
startOnly	タスク開始
startOnlyMilestone	タスク開始（マイルストーン）
summary	サマリータスク
task	タスク

　カスタマイズの基本は、上記いずれかのスタイルルールのオブジェクトを取得し、シェイプや色のプロパティを変更してオブジェクトを書き戻すという流れです。なお、以下の行に挙げるプロパティが指定できます。シェイプは矩形（rectangle）、円（circle）、矢印（arrow）などから選択できます。タイプは実線（solid）、破線（dashed）、枠線（framed）から選択できます。テキストに指定できるのは、プロパティ名と列の数式です。

表　表示スタイルのプロパティ
プロパティ	型	概要
startShape	GC.Spread.Sheets.GanttSheet.TaskbarStartShape	開始部のシェイプ形状
startType	GC.Spread.Sheets.GanttSheet.TaskbarStartType	開始部のタイプ
startColor	string	開始部のカラー
middleShape	GC.Spread.Sheets.GanttSheet.TaskbarMiddleShape	中間部のシェイプ
middlePattern	GC.Spread.Sheets.GanttSheet.TaskbarFillPattern	中間部の埋めパターン
middleColor	string	中間部のカラー
endShape	GC.Spread.Sheets.GanttSheet.TaskbarEndShape	終了部のシェイプ
endType	GC.Spread.Sheets.GanttSheet.TaskbarEndType	終了部のタイプ
endColor	string	終了部のカラー
topText	string	上部に表示するテキスト
rightText	string	右に表示するテキスト
bottomText	string	下部に表示するテキスト
leftText	string	左に表示するテキスト
insideText	string	内部に表示するテキスト

　以下のリストは、taskスタイルルールを取得し、startShapeとendShape（始点と終点のシェイプ）に"circle"（円）を設定し、さらにカラー（startColorとendColor）に中間部の色（middleColor）を設定しています。最後に、taskbarStyleオブジェクトに書き戻している点に注意してください。この設定により、タスク工程のバーの両端が丸くなります（図4）。

scripts/app.js（initGanttSheetLevel関数）

let taskRule = ganttSheet.project.taskStyleRules.getRule("task");
let taskStyle = taskRule.style.taskbarStyle;
taskStyle.startShape = "circle";
taskStyle.endShape = "circle";
taskStyle.startColor = taskStyle.middleColor;
taskStyle.endColor = taskStyle.middleColor;
taskRule.style.taskbarStyle = taskStyle;

子階層形式ガントシートの組み込み

　ここまではレベル階層形式（levelプロパティで階層を表す形式）を使った例を紹介しましたが、最後に子階層形式での指定方法についても紹介します。基本的なコードはレベル階層形式（initGanttSheetLevel関数）と同じなので、異なるポイントのみを紹介します。

　子階層形式のデータは、以下のリストのように表します。簡略化のためにnameプロパティとchildrenプロパティのみ掲載しているので、全容は配布サンプルを参照してください。見た目に階層構造が分かりやすいのが子階層形式の特徴です。

scrips/data.js（getDataChildren関数）

function getDataChildren() {
  const Gantt_Data = [
  …略…
    {
      "name": "設計",
      "children": [			// スキーマで指定する子階層のキー
        {
          "name": "基本設計",
          "children": [
            {
              "name": "画面設計",
            },
            …略…

　app.jsファイルでは、childrenプロパティが子階層のデータであることを示すために、スキーマの設定において、hierarchy.typeプロパティを"ChildrenPath"に、columnプロパティを"children"に設定します。

scripts/app.js（initGanttSheetChildren関数）

…略…
const table = dataManager.addTable("childTable", {
  data: getDataChildren(),		// 子階層形式のデータを指定
  batch: true,
  schema: {
    hierarchy: {
      type: "ChildrenPath",		// 子階層形式であることを示す
      column: "children"		// データ中のプロパティ名を指定する
    }
  }
});

　initGanttSheetChildren関数の呼び出しを、initSpread関数に追加します。すると子階層形式のシートが追加され、子階層形式のデータで表示されます（図6）。シートが複数になったので、どのシートを表示するかをシート左下の4本線のボタンで選択できます。

まとめ

　本記事では、SpreadJS V17Jの新機能であるガントシート機能でガントチャートをWebアプリに組み込み、複数の階層フォーマットの使い方や、先行タスク、達成度の表示、スタイルのカスタマイズなどの事例を紹介しました。

この記事は参考になりましたか？

印刷用を表示

ポスト

高機能JavaScriptスプレッドシート部品「SpreadJS」の活用連載記事一覧: ガントチャートをWebアプリに組み込める「ガントシート」でプロジェクト管理機能を作成してみ...

「SpreadJS」のテーブルシートでスプレッドシートをデータグリッドとして活用する

「SpreadJS」のスプレッドシートをVue.js＋ASP.NET Coreで活用してデ...

もっと読む

この記事の著者: WINGSプロジェクト山内直（WINGSプロジェクトヤマウチナオ）

＜WINGSプロジェクトについて＞有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表山田祥寛）。主にWeb開発分野の書籍／記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書、記事多数。 RSS X: @WingsPro_info（公式）、@WingsPro_info/wings（メンバーリスト） Facebook ＜個人紹介＞WINGSプロジェクト所属のテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事; 山田祥寛（ヤマダヨシヒロ）

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ（Java・C#・Python・PHP・Ruby・JSP＆サーブレットなど）」「速習シリーズ（ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど）」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編」他、著書多数。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事