注意事項
- サンプルプラグインは、その動作を保証するものではありません。
- サンプルプラグインの技術的なサポート等は行っていません。
- kintoneプラグインはスタンダードコースでのみご利用いただけます。ライトコースではご利用いただけませんのでご注意ください。
概要
サンプルで公開している 「To Doをガントチャートで表示する」 のJavaScriptプログラムをプラグインファイルにする手順を紹介します。
作業の詳細は kintone プラグイン開発手順をご確認ください。
主要なアップデート情報
2017/05： 大項目－小項目表示形式に対応しました。その他追加機能は「更新履歴」より参照ください。
注意：旧バージョンのプラグインをお使いの方で、新バージョンのプラグインにアップデートされる方は、
色付け設定が引き継がれないのでプラグイン設定画面で再設定をお願いします。
また、v2.0.0では以前のバージョンと設定方法が少し異なります。インストール前に必ずこちらの記事をご確認ください。
ガントチャートプラグインのアップデートを詳細解説
完成形
このプラグインを利用したアプリのイメージです。
レコード一覧で表示されているレコードデータを活用してガントチャートを表示します。
アプリの準備
今回のプラグインで利用するアプリは、kintone アプリストアにある「To Do」を使います。
※すでにご利用中のアプリに適用することもできます。
お持ちのkintoneにアプリを追加し、サンプルデータを数件ほど追加してください。
※完成形のように2階層設定をされたい場合はテーブルフィールドを追加していただく必要があります。詳細な設定方法はこちらの記事をご確認ください。
プラグインファイルの構成
GitHub にアクセスしてフォルダごとダウンロードしてください。そのフォルダ内の「examples/ganttchart」に、今回のファイル一式があります。
「ganttchart」 配下のファイル構成は次のとおりです。
各フォルダ内のファイルの説明です。
フォルダ：css
- 51-jp-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
モーダルウィンドウで開始日/終了日を選択する際に使用するDatepickerライブラリです。
フォルダ：manifest.json
プラグインのマニュフェストファイルです。
- Cybozu CDNのjQuery、jQuery.Gantt、JSRenderを利用しています。
- 日本語、英語、中国語の設定画面に対応しています。
パッケージング
こちらの手順を参考にパッケージングします。
パッケージングしたサンプル
プラグイン開発のためのサンプルであり、サポート対象外であることをご理解の上、ダウンロードしてください。
SAMPLE_gantt_plugin_v2.2.3.zip
インポートと設定
- 設定画面より、ダウンロードした「plugin.zip」をkintoneシステム管理画面より読み込みます。
- 適用するアプリの設定画面より、プラグインをインストールします。
- プラグインの設定画面より、ガントチャートに表示するフィールドを設定します。
「入力値チェックプラグイン」のチュートリアル にプラグインの適用方法と動作確認を紹介していますのでご参考下さい。
更新履歴
2017/05 v2.0.0を公開しました ：下記の機能を追加しました。
- フォームのテーブル化に対応しました（テーブル化しなくても動作します）。
- ページングでガントチャートが再描画されるようになりました。
- ガントチャートの土曜日と日曜日に色づけされました。
- 優先度の色をカラーパレットから選択可能にしました。
- 優先度を行追加で増やせるようにしました。
- 初期表示のスケジュールに「時間」を追加しました。
- マウスオーバーによるポップアップ画面では設定画面で設定する全データを表示するようにしました。
- マウスオーバーによるポップアップ画面でフィールド名を表示するようにしました。
- バーをクリックするとモーダルウィンドウを出し、開始日/終了日を更新できるようにしました。
- バーの中のタイトルは小項目を表示し、小項目がない場合には大項目を表示するようにしました。
- 設定画面にどの項目がガントチャート上のどの部分に紐づくかが分かる説明画像を追加しました。
2017/08/24 v2.0.1 を公開しました。以下の点を更新しております。
- スタイルシートを「51-current-default.css」から「51-modern-default.css」に変更しました。
- その他軽微な修正を行いました。
2017/08/25 v2.0.2 を公開しました。不具合を修正しました。
2017/11/24 v2.0.3 を公開しました。「addin-style.css」を修正しました。機能に変更はありません。詳細はこちらのお知らせをご確認ください。
2020/04/06 v2.1 を公開しました。プラグイン設定画面の言語に中国語を追加しました。「ログインユーザーの言語」が中国語の場合、中国語で表示されます。
2021/03/22 v2.2 を公開しました。開始日に設定したフィールドの値が空の場合、ガントチャートの表示がおかしくなる不具合を修正しました。
2022/09/06 v2.2.1 を公開しました。JavaScriptソースコードをES6以降の記法に書き換えました。
2022/10/05 v2.2.2 を公開しました。フロントエンド基盤の刷新に対応しました。
2023/02/14 v2.2.3 を公開しました。軽微な修正を行いました。
制限事項
- スマートフォン用のブラウザには対応していません。
- カレンダービューにはガントチャートは適用されません。
- 大項目および小項目は全角6文字まで表示可能で、全角7文字以上となる場合、全角5文字まで表示されます。
- ブラウザの画面拡大・縮小を行った場合、ガントチャートのレイアウトが崩れることがあります。
-
開始日や終了日に設定したフィールドの値が空のレコードは、大項目および小項目のみガントチャートに表示されます。これらのレコードを表示したくない場合は、フィルター機能を使ってレコードを絞り込んでください。
デモ環境
こちらのデモ環境から実際に動作を確認できます。
https://dev-demo.cybozu.com/k/334/
デモ環境アカウントとパスワードは、サインイン後にこちらのページでご確認ください。
利用している OSS のライセンス情報
このプラグインで利用している OSS のライセンスは次のとおりです。
ガントチャートのみ、別アプリのレコード詳細画面に表示することは可能でしょうか？
はじめまして、やぎさん
いけもんと申します。
プラグインのソースコードをいじることで可能であると思われます。
もう少し詳細にご説明しますと、フィールド設定でスペースを追加し、そのスペースに対してガントチャートを埋め込むという処理を行うことで実現できるのではないでしょうか。
お力になれれば幸いです。
いけもん
サンプルパッケージ（gantt_plugin.zip）を設定して動いたので、cygwinなるものをインストールして
パッケージファイルを作成しようとしていますが、下記のようなエラーで止まっております。
何かヒントが頂けましたら幸いです。
ファイル構成
$ dir
css html img js manifest.json package.sh thirdparties
↓
パッケージングエラー
$ sh package.sh ./
package.sh: 行 74: /usr/bin/zip: No such file or directory
package.sh: 行 79: /cygdrive/c/work/tmp/contents.zip: No such file or directory
package.sh: 行 99: /usr/bin/zip: No such file or directory
Plugin ID: najcjcinjanalbdljhikcmmilaiellbm
Plugin file: /cygdrive/c/work/vault/plugins/work.najcjcinjanalbdljhikcmmilaiellbm/work.plugin.zip
Private key file: /cygdrive/c/work/vault/keys/work.najcjcinjanalbdljhikcmmilaiellbm.ppk
↓
ファイル構成（vaultが増えた）
$ dir
css html img js manifest.json package.sh thirdparties vault\
パッケージングエラー
$ sh package.sh ./
PLUGIN_DIR must not contain *.ppk files.
パッケージの項目に下記の記載がございます。
「作成した「plugin.zip」を プラグインの開発手順 パッケージング を参考に、パッケージングします。」
これは、ganttchart 配下のファイル一式に「pacckage.sh」を追加してパケージする。ということで宜しいでしょうか？
この結果が、上記投稿にありますエラーになります。
nomoto様
ご質問いただき、ありがとうございます。
ganttchar 配下に「pacckage.sh」を追加と記載がありますが、「pacckage.sh」を配置するのは、
「work」以下となります。
> 今回は「work」フォルダを作成し、その中に「package.sh」を追加して実行します。
説明の中にある、上記の部分で、「work」フォルダを作成していただいていると思いますので、
その中に「package.sh」を追加して、work に移動後、実行します。
> 作成した「plugin.zip」を プラグインの開発手順 パッケージング を参考に、パッケージングします。
こちらで参考として、ご紹介させていただいていた記事よりも、下記の「kintone プラグイン開発手順」の
「パッケージング」項目のほうが分かりやすいと思いましたので、下記をご参考いただければと思います。
○kintone プラグイン開発手順
・パッケージング
https://developer.cybozu.io/hc/ja/articles/203455680#step3
分かりにくい状況となり、大変申し訳ございませんでした。
参考先のURLは修正させていただきました。
お手数をおかけいたしますが、ご参考いただければと思います。
よろしくお願い致します。
cybozu Development teamさん
> $ dir
> css html img js manifest.json package.sh thirdparties
このディレクトリは、c:\work\ です。
> $ sh package.sh ./
> package.sh: 行 74: /usr/bin/zip: No such file or directory
> package.sh: 行 79: /cygdrive/c/work/tmp/contents.zip: No such file or directory
> package.sh: 行 99: /usr/bin/zip: No such file or directory
> Plugin ID: najcjcinjanalbdljhikcmmilaiellbm
> Plugin file: /cygdrive/c/work/vault/plugins/work.najcjcinjanalbdljhikcmmilaiellbm/work.plugin.zip
> Private key file: /cygdrive/c/work/vault/keys/work.najcjcinjanalbdljhikcmmilaiellbm.ppk
こちらは、c:\work\ で sh package.sh ./ を実行しています。
宜しくお願いします。
cybozu Development teamさん
もう一度、手順を追って記載します。
$ cd c:\work
↓
$ dir
css html img js manifest.json package.sh thirdparties
↓
$ sh package.sh ./
package.sh: 行 74: /usr/bin/zip: No such file or directory
package.sh: 行 79: /cygdrive/c/work/tmp/contents.zip: No such file or directory
package.sh: 行 99: /usr/bin/zip: No such file or directory
Plugin ID: dcdpnedneibdcfofgfnpjmnjakbmklda
Plugin file: /cygdrive/c/work/vault/plugins/work.dcdpnedneibdcfofgfnpjmnjakbmkld
a/work.plugin.zip
Private key file: /cygdrive/c/work/vault/keys/work.dcdpnedneibdcfofgfnpjmnjakbmk
lda.ppk
↓
$ cd vault/plugins
↓
$ dir
work.dcdpnedneibdcfofgfnpjmnjakbmklda
「work.dcdpnedneibdcfofgfnpjmnjakbmklda」は空のディレクトリです。
宜しくお願いします。
nomoto様
ご確認いただきありがとうございました。
実行場所などもご確認いただきましたので、他に考えられる点として、
インストールされた、Cygwin側の設定内容になります。
> package.sh: 行 74: /usr/bin/zip: No such file or directory
> package.sh: 行 79: /cygdrive/c/work/tmp/contents.zip: No such file or directory
> package.sh: 行 99: /usr/bin/zip: No such file or directory
上記のエラーが、すべてzip系のエラーになりますので、Cygwinにzip関連の
パッケージがインストールされていない可能性があります。
Cygwin側にzipファイルを作成できる、パッケージをインストールされているか、
Cygwin側の設定をご確認いただいた後に、再度、プラグインのパッケージングを
試していただければと思います。
よろしくお願い致します。
cybozu Development teamさん
コメント有難うございます。
当初、作成できている筈との見解を頂いておりましたが、インストール方法をwebで調査の上再インストールしました。
恐ろしく時間が掛かりましたが、下記のとおり "work.plugin.zip" ができたようです。
これで試してみます。
===================
$ cd c:\work
↓
$ sh package.sh ./
Plugin ID: gikbkgofojglommpiieancdcgbciango
Plugin file: /cygdrive/c/work/vault/plugins/work.gikbkgofojglommpiieancdcgbciango/work.plugin.zip
Private key file: /cygdrive/c/work/vault/keys/work.gikbkgofojglommpiieancdcgbciango.ppk
===================
nomoto様
ご確認いただきありがとうございます。
Cygwinでのzipパッケージインストールの方法についてはこちらにも記載させていただきました。
▼kintoneプラグイン開発でつまずきやすいポイント
https://developer.cybozu.io/hc/ja/articles/217937443
またお困りの際にはご活用ください。
スケジュールの帯をドラッグアンドドロップにて弄れるようになりませんか？
スケジュールの変更を別画面を開いて、ではなく、その場で変更できると助かります。
お世話になっております。cybozu developer network事務局です。
本プラグインはサンプルプラグインとなっており、カスタマイズにより自由に拡張いただくことができます。
ソースコードの公開先はこちらです。
https://github.com/kintone/plugin-sdk/tree/master/examples/ganttchart
プラグインの開発については、開発手順とチュートリアルをご用意しておりますのでご活用ください。
はじめまして。
ＡＰＩなどの知識のない初心者です。
ガントチャートの組み込みには成功したのですが、組み込んだガントチャートをプリントアウトすることはできないのでしょうか？
芦原花菜 様
ご質問ありがとうございます。
ブラウザの印刷機能をご利用いただいてはいかがでしょうか。
ガントチャート部分のみを選択して印刷することで、一覧など不要な部分を除いて印刷することも可能です。
印刷機能はブラウザに依存しますので、ご利用のブラウザによってはやり方が異なる可能性があります。
ご検討ください。
ありがとうございます。
ちなみにドロップダウンをタイトルに設定するにはどうしたらいいのでしょうか？
芦原花菜 様
こちらのプラグインでは、タイトルにテキスト項目を選択するようになっておりますが、サンプルですのでカスタマイズが可能です。
https://github.com/kintone/plugin-sdk/tree/master/examples/ganttchart
こちらでソースコードを公開しておりますので、改修してお使いください。プラグインの開発については、開発手順とチュートリアルをご参照ください。
また、「To Doをガントチャートで表示する」の記事では、プラグインではなくカスタマイズファイルを適用する方法をご紹介しております。
技術的な部分でお困りなことなどありましたら、是非コミュニティもご活用ください。有志のエンジニアの方々からアドバイスなどをしていただけるページとなっております。
どこをどのように回収すればいいですか？
タイトルとサブタイトルをドロップダウンで選択したテキスト表示にしたいだけなのですが、よくわかりません。
Dreamweaverで編集は可能なので、教えていただけると幸いです。
ガントチャートアプリのアプリ設定（歯車マーク）からテキスト入力をプルダウンに入れ替えて、
フィールドコードは元のテキスト入力に合わせれば良いのではないでしょうか？ HTMLではなく。
ご連絡ありがとうございます。
プルダウンに入れ替えて、フィールドコードは元のテキスト入力に合わせても反映されないのです。
また新規でテキストフィールドを追加しても、追加したテキストフィールドは反映されるような設定になっています。
タイトル サブタイトルを手打ちではなくて、ドロップダウンで入力したいのですが難しいのでしょうか？
芦原花菜 様
大変恐れ入りますが、プラグイン改修の個別対応はしておりません。
再度のご案内になりますが、
https://github.com/kintone/plugin-sdk/tree/master/examples/ganttchart
こちらにソースコードを公開していますので、改修してご利用ください。
改修の際に、技術的なことでお困りの際はコミュニティをご活用ください。有志のエンジニアからアドバイスを頂けます。
宜しくお願い致します。
ご担当者 様
「色付けするフィールド」が選択できずに利用することができません。
このフィールドは何型のデータが対象となるのでしょうか？
mamoru様
cybozu developer networkをご利用いただき、ありがとうございます。cybozu developer network事務局です。
本サンプルプラグインでは、「色付けするフィールド」はラジオボタンかドロップダウンフィールドが対象になっております。
kintone アプリストアにある「To Do」を使うことを想定しているサンプルプラグインとなり、他のアプリでもご利用いただけますが、ご希望どおりの動きにならない場合は、プログラムをご確認のうえ、カスタマイズしてお使いいただくことをお勧めします。
よろしくお願いいたします。
担当者様
ガントチャートにデータを追加する際、もしタイトルとサブタイトルが同一であれば、同じ行に予定を表示したいのですが、可能でしょうか？
また、上記案件が実現できるのであれば、同じ行に予定が重複した場合にデータ追加を弾く、エラーを出力する、
もしくは同じ行にデータは登録できるが見た目でデータの重複がわかるようにしたいのですが、可能ですか？
もし可能であれば、方法をご教授願います。
「改修」が必要である場合、どのファイルのどのあたりをどういう風に変えるのか、ヒントとなる情報をいただけると幸いです。
kawamura 様
本プラグインはサンプルプラグインです。恐れ入りますが、機能追加に関して個別のサポートは行っておりません。
公開されているソースコードを元にご自身でご確認いただきますようお願いいたします。
https://github.com/kintone/plugin-examples/tree/master/examples/ganttchart
改修の際に、技術的なことでお困りの際はコミュニティをご活用ください。有志のエンジニアからアドバイスを頂けます。
どうぞよろしくお願いいたします。
ガントチャートの表示が下記画像のように日付がきちんと表示されないのですが
何か原因はかんがえられるでしょうか。
HANAHANA 様
お世話になっております。cybozu developer network 事務局です。
再度プラグインの動作を確認いたしましたが、通常通り動作しております。
大変お手数をおかけいたしますが、今一度プラグインの設定やテーブルのフィールドコードが「Table」になっているか等、設定をご確認いただけないでしょうか。
また、開発者ツールにてエラーメッセージ等が出ていないか確認していただけると幸いです。
お手数をおかけいたしますがよろしくお願いいたします。
お世話になっております、ガントチャートプラグインを使用させていただいております。
特殊な設定をした心当たりはないのですが、Chromeだと横軸が年月日が折り返して表示されてしまい、全体がズレています。縮尺を変更してもズレたままです。ガントチャートもこの折り返し分ズレて表示されます。
IE11では正常です。どのような原因が考えられるでしょうか？
■Chrome(84.0.4147.89)の場合
■IE11の場合
SMNMR様
当サンプルはChromeでの表示が100%でないときに、そのように表示が崩れることがあります。
100%での利用を想定しているため、ご不便をおかけしますが100%表示での利用をお願いできればと思います。
よろしくお願いいたします。
2020年05月13日 20:00にHANAHANAさんが投稿している事象についてです。
■事象
一覧表示した際に先頭のレコードの日付欄が空値だと、
jquery.gantt がカレンダーの生成に失敗し日付欄のヘッダが NaN や undefined となる。
・問題ない例(Test1には日付が設定されている)
・問題ある例(Test2には日付が設定されていない)
■原因
ガントチャートプラグインが利用している jquery.gantt 側の内部処理、日付の計算(最小値/最大値)に問題があります。
jquery.gantt は日付の幅を計算する際に jquery.gantt の getMinDate(getMaxDate) 関数を使っています。
この関数は最初に変数minDate(maxDate)を宣言し null を代入している。
その直後に最小値/最大値を計算するループが開始されるが、最初の処理で日付ではない値が渡されると、
"Invalid Date" が maxDate(minDate) に代入されてしまう。
"Invalid Date"はどの日付と比較しても結果 false が得られるため、
最終的にガントチャートの日付欄の生成に失敗してしまいます。
・該当関数の定義開始行
https://github.com/mbielanczuk/jQuery.Gantt/blob/master/js/jquery.fn.gantt.js#L1497
■改善案
この問題はガントチャートプラグイン側の処理で防ぐことはできないかと思います。
例えば上記原因と直接関係のある desktop-ganttchart.js の convertDateTime 関数について引数が null (日付未設定) だった場合に jquery.gantt にも null が渡るように設定しても、
1970/01/01 00:00 が得られてしまうため、求めている結果にはならないかと思います。
暫定対応としてjquery.gantt をプラグイン内に保持し getMaxDate/getMinDate の先頭を下記に差し替える事で回避できるかと思います。
getMaxDate: function (element) {var maxDate = null;
$.each(element.data, function (i, entry) {
$.each(entry.values, function (i, date) {
if (isNaN(tools.dateDeserialize(date.to))) {
return ;
}
maxDate = maxDate < tools.dateDeserialize(date.to) ? tools.dateDeserialize(date.to) : maxDate;
});
});
...
～(中略)
getMinDate: function (element) {
var minDate = null;
$.each(element.data, function (i, entry) {
$.each(entry.values, function (i, date) {
if (isNaN(tools.dateDeserialize(date.from))) {
return ;
}
minDate = minDate > tools.dateDeserialize(date.from) || minDate === null ? tools.dateDeserialize(date.from) : minDate;
});
});
...
これ自体は jquery.gantt の不具合だと考えていますが、
jquery.gantt は開発自体が停滞しているように見受けられ、
フォークしているリポジトリでメンテナンスが継続しているなど
どのリポジトリが正式なメインリポジトリか不明でしたので特に pull request は飛ばしておりません。
どれが最新かご存知の方がいましたら、上記コードをマージしていただけますと幸いです。
■暫定対応を利用しても
日付が空だと、チップ自体が左端に寄って表示されてしまいますので、
表示が不要でしたら中のテキストを display: none にすると良いかと思います。
横井様
投稿をありがとうございます。また返答が遅れまして失礼いたしました。
jquery.gantt の方で、上記の問題に対応した Pull Request がマージされているのを確認いたしました。
https://github.com/taitems/jQuery.Gantt/pull/241
当プラグインの利用する jquery.gantt 改善後のものに差し替えることを検討いたします。