概要
To Doアプリのレコード一覧をガントチャート形式で表示するサンプルです。
- レコード一覧画面で、表示するレコードがある場合にガントチャートを表示します。
- 優先度フィールドの値に応じてガントチャートの色を変えています。
- 年月日の表示は、ユーザーの言語設定に応じて変更します。
その他、詳細な仕様はプログラムで確認してください。
完成イメージ
下準備
- kintoneアプリ kintoneアプリストア の 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, '<') .replace(/>/g, '>') .replace(/"/g, '"') .replace(/'/g, '''); }; // 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/
ログイン情報は cybozu developer networkデモ環境で確認してください。