kintone でプロジェクト管理を行う場合、タスクの期間やスケジュールを視覚的に把握したいと感じることはありませんか？
標準のレコード一覧では、各タスクの開始日と終了日がテキストで羅列されるだけで、プロジェクト全体のスケジュールを俯瞰するのが困難です。
当プラグインを使用すると、kintone のカスタムビュー上にインタラクティブなガントチャートを表示できます。タスクバーのドラッグ&ドロップでスケジュール変更、リサイズで日付調整、右クリックメニューからレコード操作が可能です。
ソースコードは全て GitHub に公開しており、無料で利用できます。
プラグインが提供する機能
ガントチャート表示
kintone アプリのレコードをガントチャートとして描画します。各レコードがタスクバーとして表示され、タスクの期間が視覚的に把握できます。
- 3段階のスケール切替: 日・週・月のスケールをワンクリックで切り替え可能
- 今日ライン: 赤い縦線で今日の位置を示し、現在のスケジュール状況を一目で確認
- 週末ハイライト: 週末の列をグレーで表示し、稼働日と非稼働日を区別
- 進捗率バー: 進捗率フィールドを設定することで、タスクバー内に進捗状況を表示
- カラーパレット: 指定フィールドの値に基づき、タスクバーを最大12色で自動色分け
- ツールチップ: タスクバーにマウスオーバーすると、タスク名・期間・担当者・カテゴリ・進捗率を表示
ドラッグ&ドロップ操作
マウス操作だけでタスクのスケジュールやグループを変更できます。
- バードラッグ: タスクバーを水平にドラッグして、タスクの日程（開始日・終了日）をシフト
- クロスグループ移動: タスクバーを別のグループにドラッグして、カテゴリや担当者を変更
- バーリサイズ: タスクバーの左端をドラッグして開始日を調整、右端をドラッグして終了日を調整
- 楽観的更新: ドラッグ操作後、API 応答を待たず即座に UI に反映。エラー時は自動でロールバック
グループ化
タスクをカテゴリ別または担当者別にグループ化して表示できます。
- カテゴリ/担当者切替: ツールバーのボタンでグループ化の軸をワンクリックで切り替え
- グループ折りたたみ: グループヘッダーをクリックしてタスク一覧を展開/折りたたみ。サイドバーとタイムラインが連動
- 未分類/未割当: カテゴリや担当者が未設定のタスクも「未分類」「未割当」グループとして表示
コンテキストメニュー
タスクバーまたはサイドバーのタスク名を右クリックすると、コンテキストメニューが表示されます。
| メニュー項目 | 動作 |
|---|---|
| レコードを表示 | kintone のレコード詳細画面を新しいタブで開く |
| レコードを編集 | kintone のレコード編集画面を新しいタブで開く |
| 進捗率を更新 | サブメニューから進捗率を選択して即座に更新 |
| レコードを複製 | 全フィールドをコピーして新規レコードを作成 |
| レコードを削除 | 確認ダイアログ後にレコードを削除 |
新規タスク追加
ツールバーの「新規タスク」ボタンから、ダイアログでタイトル・開始日・終了日を入力して新しいタスクを作成できます。
ナビゲーション
- 今日ボタン: 表示を今日の位置にジャンプ
- 前後ナビゲーション: スケールに応じた間隔（日=7日、週=28日、月=90日）で表示期間を前後に移動
- スケール切替時の自動調整: スケールを切り替えると、今日が画面中央に来るよう自動スクロール
プラグインが活きるシーン
プロジェクトのスケジュール管理
複数のタスクの期間を俯瞰し、スケジュールの重複や空きを視覚的に確認したい場面に最適です。
チーム内のタスク割当の把握
担当者別にグループ化することで、各メンバーの負荷状況やタスクの偏りをひと目で確認できます。
進捗管理
進捗率表示とカラーコーディングにより、プロジェクト全体の進捗状況を直感的に把握できます。
アジャイルなスケジュール調整
ドラッグ&ドロップやリサイズで素早くスケジュールを調整でき、会議中のリアルタイムなスケジュール変更にも対応できます。
外部ライブラリに依存しない独自実装
当プラグインのガントチャートは、外部のガントチャートライブラリを使用せず、React + Emotion（CSS-in-JS）で一から実装しています。
- 軽量: 不要な機能を含まず、kintone 環境に最適化されたバンドルサイズ
- 柔軟性: kintone のデータモデルに密結合した設計で、フィールドマッピングの自由度が高い
- インタラクション: dnd-kit ライブラリによる高品質なドラッグ&ドロップ体験
ドラッグ操作は「楽観的更新」パターンを採用しています。操作と同時に UI を即座に反映し、バックグラウンドで kintone API を呼び出します。API エラーが発生した場合はスナップショットから自動的にロールバックされるため、ユーザーは操作の結果を待つことなくスムーズに作業を続けられます。
設定手順
1. プラグイン用のカスタムビューを作成する
当プラグインでは 1 つのカスタムビューを使用してガントチャートを表示します。
アプリの設定画面 → 「一覧」から一覧を追加し、以下の設定を行います。
| 一覧名 | 任意の名前（例: ガントチャート） |
| レコード一覧の表示形式 | 必ず「カスタマイズ」を選択してください |
| ページネーションを表示する | チェックを外してください |
以上の設定が完了したら、一度アプリを更新してください。
プラグインは更新済みの一覧のみ参照できます。カスタムビューを作成したら、必ずアプリの設定を保存して更新してください。
2. プラグインの設定
プラグイン設定画面では、以下の項目を設定します。
表示する一覧の選択
前の手順で作成したカスタムビューを選択します。
タスク情報の設定（必須）
ガントチャートに表示するために必要なフィールドマッピングを設定します。
| 設定項目 | 説明 | 対応フィールドタイプ |
|---|---|---|
| タスク名 | タスク名として表示するフィールド | 文字列（1行）等 |
| 開始日 | タスクの開始日を表すフィールド | 日付 |
| 終了日 | タスクの終了日を表すフィールド | 日付 |
追加の表示項目（任意）
設定すると、より便利にガントチャートを活用できます。
| 設定項目 | 説明 | 対応フィールドタイプ |
|---|---|---|
| 担当者 | タスクの担当者。担当者別グループ化に使用 | ユーザー選択 |
| カテゴリ | タスクのカテゴリ。カテゴリ別グループ化に使用 | ドロップダウン等 |
| 進捗率 | 進捗率を 0〜100 の数値で表示 | 数値 |
| カテゴリソート順 | カテゴリのソート順を制御する数値 | 数値 |
初期表示の設定
ガントチャートを開いたときのデフォルトのスケール（日/週/月）を選択します。表示後に画面上で切り替えることも可能です。
3. ガントチャートを使用する
設定が完了したら、作成したカスタムビューを表示してください。レコードがガントチャートとして表示されます。
レコード数について
当プラグインは、一覧表示時に対象アプリの全レコードを取得してガントチャートに表示します。
レコード数が非常に多い場合（数千件以上）、初期読み込みに時間がかかる可能性があります。
当プラグインは、数万件以上のレコードが蓄積されているような大規模なアプリで使用することを想定していません。
レコード数が多いアプリでは、カスタムビューの絞り込み条件を設定してレコード数を制限することをお勧めします。
カスタムビューに絞り込み条件を追加することで、表示対象のレコードを限定できます。例えば、「ステータスが完了以外」や「開始日が過去3ヶ月以内」などの条件を設定すると、読み込み速度が大幅に向上します。
お問い合わせ
プラグインの不具合や、機能追加のご要望などがあれば、画面上部のナビバーからお問い合わせください。
プラグインのソースコード
本プラグインはオープンソースです。 ソースコードは GitHub で公開されており、どなたでも自由に確認できます。
詳細な実装内容や構成に興味がある方は、ページトップの「ソースコードを確認する」ボタンからリポジトリにアクセスしてください。
よくある質問
-
外部のガントチャートライブラリを使用していますか？
いいえ。外部ライブラリに依存せず、React + Emotion による独自実装でガントチャートを描画しています。ドラッグ&ドロップには dnd-kit を使用しています。
-
モバイルでも使用できますか？
はい。デスクトップとモバイルの両方に対応しています。
-
1つのアプリに複数のガントチャートビューを作成できますか？
はい。プラグイン設定で複数の条件を作成し、それぞれ異なるカスタムビューに紐づけることができます。
-
ゲストスペースのアプリでも使用できますか？
はい。ゲストスペース内のアプリにも対応しています。
リリースノート
ガントチャートプラグインの初回リリース
日/週/月の3段階スケール切替
ドラッグ&ドロップによるタスク日程変更
バーリサイズによる開始日/終了日調整
カテゴリ/担当者によるグループ化表示
コンテキストメニュー（表示/編集/複製/削除/進捗率更新）
新規タスク追加ダイアログ
グループ折りたたみ機能
楽観的更新によるスムーズな操作体験
多言語対応（日/英/中/西/葡/泰）