概要
kintoneアプリで管理しているタスクをガントチャートで表示するプラグインです。
注意事項
- サンプルプラグインに関するお問い合わせは、APIサポート窓口へのお問い合わせの対象外です。
- kintoneプラグインは、スタンダードコース以上で利用できます。
制限事項
- モバイル用のブラウザーおよびkintoneモバイルには対応していません。
- レコード一覧の表示形式が「表形式」の一覧のみ対応しています。
- 大項目および小項目は全角6文字まで表示可能です。全角7文字以上となる場合、全角5文字まで表示されます。
- ブラウザーの画面で拡大/縮小した場合、ガントチャートのレイアウトが崩れることを確認しています。
- 「開始日」や「終了日」に設定したフィールドの値が空のレコードは、大項目および小項目のみガントチャートに表示されます。
これらのレコードを表示したくない場合は、フィルター機能を使ってレコードを絞り込んでください。
プラグインの機能
レコード一覧で表示されているレコードデータを活用してガントチャートを表示します。
デモ環境
デモ環境で、プラグインの動作を確認できます。
https://dev-demo.cybozu.com/k/334/
デモ環境のログイン情報は次のページを確認してください。 cybozu developer networkデモ環境
プラグインのパッケージング
プラグイン化の手順の詳細は kintoneプラグイン開発手順を参照してください。
STEP1:ソースコードのダウンロード
GitHub
にアクセスしてフォルダーごとダウンロードしてください。
「examples/ganttchart」が、このプラグインのソースコード一式です。
ファイルの構成
「examples/ganttchart」配下のファイル構成は次のとおりです。
|
|
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言語に対応しています。
- 日本語
- 英語
- 簡体字
STEP2:パッケージング
plugin-packerの手順を参考にパッケージングします。
パッケージングしたサンプル
このプラグインはプラグイン開発のためのサンプルで、サポート対象外です。
ご理解の上、ダウンロードしてください。
SAMPLE_gantt_plugin_v2.2.4.zip
プラグインの設定
STEP1:プラグインの読み込み
kintoneシステム管理画面で、パッケージングしたファイル(zipファイル)を読み込みます。
ファイルからプラグインを読み込む
STEP2:アプリの設定
-
アプリを追加します。
kintoneアプリストア にある To Do を使います。 -
フィールドを配置します。
詳細は次の記事を参照してください。
ガントチャートプラグインのアップデートを詳細解説
タスクを大項目と小項目に分けて管理する場合には、テーブルフィールドを追加してください。
STEP3:プラグインの追加と設定
-
アプリの設定画面を開き、プラグインを追加します。
アプリにプラグインを追加する -
プラグインの設定画面より、ガントチャートに表示するフィールドを設定します。
項目名 必須 説明 タイトルにするフィールド 必須 タスクのタイトルのフィールド サブタイトルにするフィールド 省略可 タスクのサブタイトルのフィールド 開始日(開始日時)のフィールド 必須 タスクの開始日のフィールド 終了日(終了日時)のフィールド 必須 タスクの終了日のフィールド 色付けするフィールド 必須 ガントチャートの色付けの条件 初期表示のスケール 必須 初回表示時点でのカレンダーのスケール - 時間
- 日
- 週
- 月
-
【保存】をクリックします。
-
「アプリの設定」画面で、【設定完了】をクリックします。
更新履歴
- 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) を確認してください。
- 「addin-style.css」を修正しました。
- 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を修正しました。
v1からアップデートする場合
プラグインをv0からv2にアップデートする場合、v1で設定した色付け設定は引き継がれません。
次の記事を参考に設定してください。
ガントチャートプラグインのアップデートを詳細解説
利用しているOSSのライセンス情報
このプラグインで利用している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