kintoneアプリで管理しているタスクをガントチャートで表示するプラグインです。

• サンプルプラグインに関するお問い合わせは、APIサポート窓口へのお問い合わせの対象外です。
• kintoneプラグインは、スタンダードコース以上で利用できます。

• モバイル用のブラウザーおよびkintoneモバイルには対応していません。
• レコード一覧の表示形式が「表形式」の一覧のみ対応しています。
• 大項目および小項目は全角6文字まで表示可能です。全角7文字以上となる場合、全角5文字まで表示されます。
• ブラウザーの画面で拡大／縮小した場合、ガントチャートのレイアウトが崩れることを確認しています。
• 「開始日」や「終了日」に設定したフィールドの値が空のレコードは、大項目および小項目のみガントチャートに表示されます。
  これらのレコードを表示したくない場合は、フィルター機能を使ってレコードを絞り込んでください。

レコード一覧で表示されているレコードデータを活用してガントチャートを表示します。

デモ環境で、プラグインの動作を確認できます。
https://dev-demo.cybozu.com/k/334/

デモ環境のログイン情報は、次のページを確認してください。
cybozu developer networkデモ環境

プラグイン化の手順の詳細は kintoneプラグイン開発手順 を参照してください。

GitHub にアクセスしてフォルダーごとダウンロードしてください。
「examples/ganttchart」が、このプラグインのソースコード一式です。

ファイルの構成

「examples/ganttchart」配下のファイル構成は次のとおりです。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

examples/ganttchart
├── README.md
├── css
│   ├── 51-modern-default.css
│   ├── addin-style.css
│   └── config.css
├── html
│   └── config.html
├── img
│   └── icon.png
├── js
│   ├── config.js
│   ├── desktop-ganttchart.js
│   └── jquery.ui.datepicker-ja.min.js
├── manifest.json
└── thirdparties
    └── jqColorPicker.min.js

css

• 51-modern-default.css
  サイボウズが提供しているプラグイン設定画面のスタイルです。
• addin-style.css
  オリジナルの色を指定するためにアドインしたスタイルです。

html

• config.html
  プラグイン設定画面のHTMLです。
  ログインユーザーの言語に応じて設定画面の言語を切り替えるため、 JsRender を利用しています。

image

• icon.png
  プラグインのアイコンファイルです。
  

  

js

• config.js
  プラグイン設定画面のプログラムです。ここでは、次の処理を行っています。

  • [保存]ボタンが押されたときに、空欄のフィールドがあると警告を表示する。
  • [保存]ボタンが押されたときに、設定した値をプラグインの変数に代入する。
  • [キャンセル]ボタンが押されたときに、前の画面へ戻る。
  • すでにプラグインの変数が設定されている場合は、各フィールドに値を設定する。
  • 「タイトル」にテーブルのフィールドが指定された場合は、警告を表示する。
  • テーブルのフィールドとテーブルでないフィールドを混在させて保存しようとすると警告を表示する。

• desktop-ganttchart.js
  ガントチャートのプログラムです。
  PC版のみ対応しています。
  アプリの「JavaScript読み込み」機能でも利用できるようにしています。

• jquery.ui.datepicker-ja.min.js
  「開始日」「終了日」で日付を選択するUIで使用しているライブラリ Datepicker のソースコードです。

thirdparties

• jqColorPicker.min.js
  色を選択するUIで使用しているライブラリ tinyColorPicker and colors のソースコードです。

manifest.json

プラグインのマニュフェストファイルです。
設定画面は、次の3言語に対応しています。

• 日本語
• 英語
• 簡体字

plugin-packer の手順を参考にパッケージングします。

パッケージングしたサンプル

このプラグインはプラグイン開発のためのサンプルで、サポート対象外です。
ご理解の上、ダウンロードしてください。

SAMPLE_gantt_plugin_v2.2.4.zip

kintoneシステム管理画面で、パッケージングしたファイル（zipファイル）を読み込みます。
ファイルからプラグインを読み込む

1. アプリを追加します。
   kintoneアプリストアにある To Do アプリを使います。

2. フィールドを配置します。
   詳細は次の記事を参照してください。
   ガントチャートプラグインの詳細解説
   タスクを大項目と小項目に分けて管理する場合には、テーブルフィールドを追加してください。

1. アプリの設定画面を開き、プラグインを追加します。
   アプリにプラグインを追加する

2. プラグインの設定画面より、ガントチャートに表示するフィールドを設定します。

   

   項目名	必須	説明
   タイトルにするフィールド	必須	タスクのタイトルのフィールド
   サブタイトルにするフィールド	省略可	タスクのサブタイトルのフィールド
   開始日（開始日時）のフィールド	必須	タスクの開始日のフィールド
   終了日（終了日時）のフィールド	必須	タスクの終了日のフィールド
   色付けするフィールド	必須	ガントチャートの色付けの条件
   初期に表示するスケール	必須	初回表示時点でのカレンダーのスケール 時間 日 週 月

3. [保存]をクリックします。

4. 「アプリの設定」画面で、[設定完了]をクリックします。

• 2017年5月v2.0を公開
  • フォームのテーブル化に対応しました。テーブル化しなくても動作します。
  • ページングでガントチャートが再描画されるようになりました。
  • ガントチャートの土曜日と日曜日に色づけされました。
  • 優先度の色をカラーパレットから選択可能にしました。
  • 優先度を行追加で増やせるようにしました。
  • 初期表示のスケジュールに「時間」を追加しました。
  • マウスオーバーによるポップアップ画面では設定画面で設定する全データを表示するようにしました。
  • マウスオーバーによるポップアップ画面でフィールド名を表示するようにしました。
  • バーをクリックするとモーダルウィンドウを出し、開始日/終了日を更新できるようにしました。
  • バーの中のタイトルは小項目を表示し、小項目がない場合には大項目を表示するようにしました。
  • 設定画面にどの項目がガントチャート上のどの部分に紐づくかが分かる説明画像を追加しました。
• 2017年8月24日v2.0を公開
  • スタイルシートを「51-current-default.css」から「51-modern-default.css」に変更しました。
  • その他軽微な修正を実施しました。
• 2017年8月25日v2.0.2を公開
  • 不具合を修正しました。
• 2017年11月24日v2.0.3を公開
  • 「addin-style.css」を修正しました。
    機能の変更はありません。詳細は 【お知らせ】ガントチャートプラグイン再公開について(2017/11/24) を確認してください。
• 2020年4月6日v2.1を公開
  • プラグイン設定画面の言語に中国語を追加しました。「ログインユーザーの言語」が中国語の場合、中国語で表示されます。
• 2021年3月22日v2.2を公開
  • 開始日に設定したフィールドの値が空の場合、ガントチャートの表示がおかしくなる不具合を修正しました。
• 2022年9月6日v2.2.1を公開
  • JavaScriptソースコードをES6以降の記法に書き換えました。
• 2022年10月5日v2.2.2を公開
  • フロントエンド基盤の刷新 に対応しました。
• 2023年2月14日v2.2.3を公開
  • 軽微な修正を実施しました。
• 2023年11月9日v2.2.4を公開
  • プラグインのhomepage_urlを修正しました。

プラグインをv0からv2にアップデートする場合、v1で設定した色付け設定は引き継がれません。
次の記事を参考に設定してください。
ガントチャートプラグインの詳細解説

このプラグインで利用しているOSSのライセンスは次のとおりです。

• jQuery UI
  • Author: jQuery Foundation and other contributors
  • License: See License
• jQuery.Gantt
  • Author: Marek Bielańczuk, Tait Brown, Leo Pfeifenberger, Grzegorz Russek and Contributors
  • License: MIT License
• Moment.js
  • Author: Tim Wood, Iskren Chernev, Moment.js contributors
  • License: MIT License
• jQuery
  • Author: jQuery Foundation, Inc.
  • License: MIT License
• JsRender
  • Author: Boris Moore
  • License: MIT License
• 51-modern-default
  • Author: Cybozu, Inc.
  • License: MIT License