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