Tips

To Doをガントチャートで表示する

目次

概要

固定リンクがコピーされました

To Doアプリのレコード一覧をガントチャート形式で表示するサンプルです。

  • レコード一覧画面で、表示するレコードがある場合にガントチャートを表示します。
  • 優先度フィールドの値に応じてガントチャートの色を変えています。
  • 年月日の表示は、ユーザーの言語設定に応じて変更します。

その他、詳細な仕様はプログラムで確認してください。

完成イメージ

固定リンクがコピーされました

下準備

固定リンクがコピーされました

サンプルプログラム

固定リンクがコピーされました

サンプルプログラムでは、 Cybozu CDN の利用方法とJavaScriptとCSSのサンプルを紹介します。

PC用のJavaScriptファイル

固定リンクがコピーされました

詳細設定から「JavaScript / CSSによるカスタマイズ」を開き、 Cybozu CDN から次のライブラリを指定します。

  • jQuery（version 2.1.1）
    https://js.cybozu.com/jquery/2.1.1/jquery.min.js
  • jQuery.Gantt（version 20140623）
    https://js.cybozu.com/jquerygantt/20140623/jquery.fn.gantt.min.js

JavaScriptサンプル

固定リンクがコピーされました

  • 次のサンプルプログラムをエディターにコピーします。
    ファイル名を「sample-ganttchart.js」、文字コードを「UTF-8」、「BOMなし」で保存します。
    ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。

      1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144

    /*
* Gantt chart display of sample program
* Copyright (c) 2015 Cybozu
*
* Licensed under the MIT License
*/

(() => {

  'use strict';

  // Date conversion for Gantt.
  const convertDateTime = (str) => {
    if (str !== '') {
      return '/Date(' + (new Date(str)).getTime() + ')/';
    }
    return '';
  };

  // To HTML escape
  const escapeHtml = (str) => {
    return str
      .replace(/&/g, '&')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;');
  };

  // Record list of events.
  kintone.events.on('app.record.index.show', (event) => {

    const records = event.records;
    const data = [];

    // Don't display when there is no record.
    if (records.length === 0) {
      return;
    }
    const elSpace = kintone.app.getHeaderSpaceElement();

    // Add styles
    elSpace.style.marginLeft = '15px';
    elSpace.style.marginRight = '15px';
    elSpace.style.border = 'solid 1px #ccc';

    // I create an element of Gantt chart.
    let elGantt = document.getElementById('gantt');
    if (elGantt === null) {
      elGantt = document.createElement('div');
      elGantt.id = 'gantt';
      elSpace.appendChild(elGantt);
    }

    // To switch the moon, the day of the week, depending on the login user's Locale.
    const user = kintone.getLoginUser();
    let ganttMonths, ganttDow,
      ganttWaitmessage = '';
    switch (user.language) {
      case 'ja':
        ganttMonths = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
        ganttDow = ['日', '月', '火', '水', '木', '金', '土'];
        ganttWaitmessage = '表示するまでお待ちください。';
        break;
      case 'zh':
        ganttMonths = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
        ganttDow = ['日', '一', '二', '三', '四', '五', '六'];
        ganttWaitmessage = '请等待显示屏';
        break;
      default:
        ganttMonths = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
        ganttDow = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
        ganttWaitmessage = 'Please Wait...';
        break;
    }

    // Set the record.
    for (let i = 0; i < records.length; i++) {

      let colorGantt = 'ganttGray';
      switch (records[i].Priority.value) {
        case 'A':
          colorGantt = 'ganttRed';
          break;
        case 'B':
          colorGantt = 'ganttOrange';
          break;
        case 'C':
          colorGantt = 'ganttGreen';
          break;
        case 'D':
          colorGantt = 'ganttBlue';
          break;
        case 'E':
          colorGantt = 'ganttYellow';
          break;
        case 'F':
          colorGantt = 'ganttGray';
          break;
        default:
          colorGantt = 'ganttGray';
      }

      let descGantt = '<strong>' + escapeHtml(records[i].To_Do.value) + '</strong>';
      if (records[i].From.value) {
        descGantt += `<br />From: ${escapeHtml(records[i].From.value)}`;
      }
      if (records[i].To.value) {
        descGantt += `<br />To: ${escapeHtml(records[i].To.value)}`;
      }
      if (records[i].Priority.value) {
        descGantt += `<br />${escapeHtml(records[i].Priority.value)}`;
      }

      const obj = {
        id: escapeHtml(records[i].$id.value),
        name: escapeHtml(records[i].To_Do.value),
        values: [{
          from: convertDateTime(records[i].From.value),
          to: convertDateTime(records[i].To.value),
          desc: descGantt,
          label: escapeHtml(records[i].To_Do.value),
          customClass: escapeHtml(colorGantt)
        }]
      };
      data.push(obj);
    }

    // Set in Gantt object.
    $(elGantt).gantt({
      source: data,
      navigate: 'scroll',
      scale: 'days', // days,weeks,months
      maxScale: 'months',
      minScale: 'days',
      months: ganttMonths,
      dow: ganttDow,
      left: '70px',
      itemsPerPage: 100,
      waitText: ganttWaitmessage,
      scrollToToday: true
    });
  });
})();

PC用のCSSファイル

固定リンクがコピーされました

詳細設定から「JavaScript / CSSによるカスタマイズ」を開き、 Cybozu CDN から次のライブラリを指定します。

  • jQuery.Gantt（version 20140623）
    https://js.cybozu.com/jquerygantt/20140623/css/style.css

CSSサンプル

固定リンクがコピーされました

バリエーションを持たせるために、自前で別の色を指定します。
省略しても動作します。

  • 次のサンプルプログラムをエディターにコピーします。
    ファイル名を「sample-addin.css」、文字コードを「UTF-8」、「BOMなし」で保存します。
    ファイル名は任意ですが、ファイルの拡張子は「css」にしてください。

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

      /*
  * Copyright (c) 2015 Cybozu
  *
  * Licensed under the MIT License
  */

  .fn-gantt .ganttGray {
      background-color: #d3d3d3;
  }
  .fn-gantt .ganttGray .fn-label {
      color: #444;
  }
  .fn-gantt .ganttYellow {
      background-color: #ffff99;
  }
  .fn-gantt .ganttYellow .fn-label {
      color: #444;
  }
  .fn-gantt .leftPanel, .fn-gantt .bar{
      z-index: 0;
  }

設定した画面

固定リンクがコピーされました

「JavaScript / CSSによるカスタマイズ」画面でそれぞれ設定した例を紹介します。

JavaScript / CSSファイルの設定は以上です。
アプリのトップページへ移動し、サンプルデータを登録してカスタマイズした結果を確認してください。

使用したAPI

固定リンクがコピーされました

デモ環境

固定リンクがコピーされました

デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/57/ (External link)

ログイン情報は cybozu developer networkデモ環境 で確認してください。