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デモ環境で確認してください。