甘特圖外掛

專案的日程管理、工程表的建立、出勤表的管理⋯⋯您是否曾希望在 kintone 中以視覺方式掌握排程呢？

標準的記錄清單只會以文字條列開始日與結束日，難以綜觀整體排程。

使用本外掛，即可在 kintone 的自訂檢視上顯示互動式甘特圖。您可以透過拖放任務長條變更排程、拖曳長條調整日期，並從右鍵選單操作記錄。

原始碼全部公開於 GitHub，可免費使用。

外掛提供的功能

甘特圖顯示

將 kintone 應用程式的記錄繪製成甘特圖。每一筆記錄都會顯示為一條任務長條，讓您以視覺方式掌握任務的期間。

• 3 種刻度切換：日、週、月刻度只需一鍵即可切換
• 今日線：以紅色縱線標示今天的位置，一眼確認目前的排程狀況
• 週末醒目提示：以灰色顯示週末的欄位，區分工作日與非工作日
• 進度率長條：設定進度率欄位後，即可在任務長條內顯示進度狀況
• 色彩配置：依指定欄位的值，自動以最多 12 種顏色區分任務長條
• 工具提示：將滑鼠移至任務長條上，即可顯示任務名稱、期間、負責人、分類與進度率

拖放操作

只需滑鼠操作，即可變更任務的排程與所屬群組。

• 拖曳長條：水平拖曳任務長條，即可平移任務的日程（開始日、結束日）
• 跨群組移動：將任務長條拖曳至其他群組，即可變更分類或負責人
• 拖曳長條兩端：拖曳任務長條的左端可調整開始日，拖曳右端可調整結束日

群組化

可依分類或負責人將任務群組化顯示。

• 分類／負責人切換：透過工具列的按鈕，一鍵切換群組化的依據
• 群組收合：點擊群組標題可展開／收合任務清單，側邊欄與時間軸會連動
• 未分類／未指派：尚未設定分類或負責人的任務，也會以「未分類」「未指派」群組顯示

快捷選單

在任務長條或側邊欄的任務名稱上按右鍵，即會顯示快捷選單。

新增任務

透過工具列的「新增任務」按鈕，即可在對話框中輸入標題、開始日與結束日，建立新的任務。

導覽

• 今日按鈕：將顯示位置跳轉至今天
• 前後導覽：依刻度對應的間隔（日＝7 天、週＝28 天、月＝90 天）前後移動顯示期間
• 切換刻度時自動調整：切換刻度時，會自動捲動讓今天位於畫面中央

適合使用本外掛的情境

工程管理與出勤表

無論是製造或建設的工程管理，或是人員的出勤表，都能運用於各種以日程為軸心的管理業務。

專案的排程管理

最適合用於綜觀多項任務的期間，以視覺方式確認排程的重疊或空檔。

掌握團隊內的任務分配

依負責人進行群組化，即可一眼確認各成員的負荷狀況與任務是否過度集中。

進度管理

透過進度率顯示與顏色標示，直覺掌握整個專案的進度狀況。

敏捷式排程調整

可透過拖放與拖曳快速調整排程，也能因應會議中的即時排程變更。

不依賴外部函式庫的自主實作

本外掛的甘特圖並未使用外部的甘特圖函式庫，而是以 React + Emotion（CSS-in-JS）從零實作。

• 輕量：不包含多餘功能，打包大小已針對 kintone 環境最佳化
• 彈性：設計上與 kintone 的資料模型緊密結合，欄位對應的自由度高
• 互動性：透過 dnd-kit 函式庫提供高品質的拖放體驗

拖曳操作採用「樂觀更新」模式。操作的同時 UI 會立即反映結果，並在背景呼叫 kintone API。若發生 API 錯誤，系統會自動從快照回復，因此使用者無須等待操作結果，即可流暢地繼續作業。

設定步驟

1. 建立外掛專用的自訂檢視

本外掛使用 1 個自訂檢視來顯示甘特圖。

請從應用程式的設定畫面 →「清單」新增一個清單，並進行以下設定。

完成以上設定後，請先更新一次應用程式。

2. 外掛的設定

在外掛設定畫面中，請設定以下項目。

選擇要顯示的清單

選擇前一個步驟所建立的自訂檢視。

任務資訊的設定（必填）

設定顯示於甘特圖所需的欄位對應。

額外的顯示項目（選填）

設定後可讓甘特圖更加實用。

初次顯示的設定

選擇開啟甘特圖時的預設刻度（日／週／月）。顯示後也可以在畫面上自行切換。

3. 開始使用甘特圖

設定完成後，請開啟所建立的自訂檢視，記錄就會以甘特圖的形式顯示。

關於記錄筆數

本外掛在顯示清單時，會取得目標應用程式的所有記錄並顯示於甘特圖。

若記錄筆數非常龐大（數千筆以上），初次載入可能會耗費較長時間。

聯絡我們

若您發現外掛的問題，或有新增功能的需求，歡迎透過畫面上方的導覽列與我們聯繫。

外掛的原始碼

本外掛為開源專案。 原始碼公開於 GitHub，任何人都能自由查閱。

若您對詳細的實作內容或架構有興趣，請透過本頁上方的「查看原始碼」按鈕前往儲存庫。