カテゴリー内の他の記事

ガントチャートプラグインのアップデートを詳細解説

はじめに

こんにちは。武井です。
皆さん、ガントチャートプラグインは使用しているでしょうか?
kintoneの標準機能では搭載していない「スケジュールの可視化」が実現できて便利ですね。

このほど、そのガントチャートプラグインが大幅にパワーアップされました!
今回は、アップデートされたガントチャートプラグインをフル活用する方法を書いていきます。

注意:旧バージョンのプラグインをお使いの方で、新バージョンのプラグインにアップデートされる方は、
   色付け設定が引き継がれないのでプラグイン設定画面で再設定をお願いします。

今回新たに10個もの機能を追加しました。目玉アップデートはこちらです。

目玉1:アプリフォームのテーブル化に対応
タスクを大項目と小項目に分けて管理できるようになりました。

4.png

目玉2:タスクバーをクリックするとモーダルウィンドウを出し、開始日/終了日を更新可能に。
これまで該当するレコードを探し、別途開いてデータ更新しなければなりませんでしたが、ガントチャートからスムーズな更新が可能になりました。

2.PNG

その他の機能追加については下のセクションをご確認ください。

新たに追加された機能一覧

新たに以下の機能が追加されました。

  • アプリフォームのテーブル化に対応
    • タスクを大項目と小項目に分けて管理できるようになりました。
  • ページングでガントチャートを再描画
    • 検索数が一覧画面の表示件数以上でも、ページングによってガントチャートが再描画されます。
  • ガントチャートの土曜日と日曜日を着色。
    • 一目で曜日が判別できるようになりました。
  • 優先度の色をカラーパレットから選択可能に。
    • 簡単に目的の色を設定できるようになりました。
  • 優先度を行追加で増やせるように。
    • 好きな数だけタスクカラーを設定することができるようになりました。
  • 初期表示のスケジュールに「時間」を追加。
    • 時間単位のガントチャートをデフォルトで表示できます。
  • マウスオーバーによるポップアップ画面では設定画面で設定する全データを表示。
    • タイトル/サブタイトル/開始日/終了日/優先度がすべて表示されるようになりました。
  • マウスオーバーによるポップアップ画面でフィールド名を表示。
    • タイトル/サブタイトルを除き「フィールド名:フィールドの値」という表示形式になりました。
  • タスクバーをクリックするとモーダルウィンドウを出し、開始日/終了日を更新可能に。
    • これまで該当するレコードを探し、別途開いてデータ更新しなければなりませんでしたが、ガントチャートからスムーズな更新が可能になりました。
  • タスクバーの中のタイトルは小項目を表示し、小項目がない場合には大項目を表示。
    • テーブル化に際し、サブタイトルを優先的に表示するようにしました。

設定手順

プラグインの設定方法など基本的な設定手順はガントチャートプラグインのページをご覧ください。

ここでは、アップデートされた機能の利用方法を説明します。

アプリのテーブル化対応の利用方法

1.上記の基本的なフィールドに加え、フォームの編集で、以下のようなテーブルフィールドを作成します。

使用目的 フィールドタイプ 備考
サブタイトル 文字列フィールド  
開始日 日付フィールド  
終了日 日付フィールド  
優先度 ドロップダウンなど  
テーブル テーブル 上記フィールドを含むテーブルを作成の上、フィールドコードを必ず「Table」として下さい。

特に、テーブルのフィールドコードを必ず「Table」とすることが重要となります。
※第2階層までガントチャート上で表示したい場合、
この「Table」というフィールドコードがついたテーブルを使用するプラグイン構造となっているため。
その他のフィールドコードは自由でかまいません。

これを設定すると、下図の様になります。
1.PNG

2.プラグイン設定画面にて下図のように設定します。
_____3.PNG

テーブルフィールドに関しては、テーブルのフィールドコードが「Table」のフィールドのみ、選択肢として表示されるようになっています。
また、テーブルフィールドについては選択肢の先頭に[Table]と表示されます。

設定の際の注意点は以下のようになります。

  • タイトルにするフィールドに、テーブルのフィールドを設定することはできません。
  • タイトルにするフィールドを除き、テーブルフィールドと非テーブルフィールドを混在させることはできません。

3.これらを設定し、アプリに反映させます。

4.レコードを作成します。
この際、テーブルで複数のタスクを設定します。

5.下図のような表示になります。
4.png

タイトルにするフィールドをプロジェクト名、
サブタイトルをタスク名のようにすることで便利な使い方ができそうですね。

また、ズームボタン「+」を押すごとに、曜日の下に
(0.12)(0.9.18)(0.6.12.18)(0.3.6.9.12.15.18.21)(0.1.2.3…23)と詳細な時間が表示されます。
5.png

ガントチャート上レコード更新の利用方法

1.ガントチャートを表示し、タスクバーをクリックします。

2.下図のようなモーダルウィンドウが表示されます。
2.PNG

3.下図のように開始日/終了日をそれぞれ入力またはカレンダーから選択します。
3.png

4.「更新」ボタンを選択します。

5.画面が自動的にリロードされ、タスクが変更されていることを確認します。
4.png

※開始日/終了日以外のデータは「詳細画面へ」のリンクをクリックして更新可能です。

拡張可能性

  • マウスオーバーのポップアップ情報で、プラグイン設定画面で設定する項目以外のテーブル項目も表示できるようにする。
  • 大項目/小項目の最大表示文字数を増やす。
  • レコード一覧に表示されているレコードについて表示するのではなく、全件表示にする。

注意事項

  • 旧バージョンのプラグインをお使いの方で、新バージョンのプラグインにアップデートされる方は、
    色付け設定が引き継がれないのでプラグイン設定画面で再設定をお願いします。
  • スマートフォン用のブラウザには対応していません。
  • カレンダービューにはガントチャートは適用されません。
  • 大項目および小項目は全角6文字まで表示可能で、全角7文字以上となる場合、全角5文字まで表示されます。

おわりに

いかがでしたでしょうか。
ガントチャートプラグインをご利用中の方も多いかと思いますが、
かゆいところに少し手が届くようになったのではないかと思います。

皆様の素晴らしいkintoneカスタマイズライフの一助になれたら幸いです。

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

Avatar
武井 琢治

尾島さん

お返事遅くなり申し訳ありません。

 

>Table内のフィールドコードをTable_1、Table_2、Table_3に
>設定したのですが、プラグイン設定画面の選択にTableの項目が
>表示されません。

 

本件、こちらで少々調査しましたが、

フィールドコードをTable_1、Table_2、Table_3に設定しましても、

当方ではプラグイン設定画面で項目が表示されております。

 

あるいは、別の箇所で設定ミスがある(例えば、サブテーブルのフィールドコードを「Table」としていないなど)可能性がありますので、

今一度、記事の方法にて設定し直していただけると幸いです。

Avatar
尾島 勝

武井様

お世話になります。

TableのフィールドコードをTableに書き換えることで表示できるようになりました。

ありがとうございました。

Avatar
Yamaguchi

cybozu Development team様

 

突然の投稿、失礼いたします。

ガントチャートプラグインのバージョンアップに伴い、2点ほど質問させていただきたいのですがよろしいでしょうか。

 

1. レコードごとに予定と実績をガントチャートで管理したいのですが、予定と実績の2行のガントチャートを1つのレコードに紐づけて表示することは可能でしょうか。

上記の「タイトルにするフィールド」にレコードの特定の名前、「サブタイトルにするフィールド」に予定、実績の2つが存在するイメージです。

なお、この場合、レコードの特定の名前、予定、実績はテーブル形式でないと動作しないのでしょうか。

 

2. 1行のガントチャートを複数列に分けて、1行で表示することは可能でしょうか。上記の、サブタイトルの1行に、複数個の小さなガントチャートが存在するイメージです。

 

特に2に関して、JavaScriptのカスタマイズが必要でしたら、お手数ではございますが、

どのあたりの修正で可能かもお教えいただけましたら幸いです…。

お手数をおかけしますが、よろしくお願いいたします。

Avatar
cybozu Development team

Yamaguchi様

いつもお世話になっております。
cybozu developer network事務局です。

こちらは当記事に関するフィードバックのみを受け付けております。

カスタマイズに関するご質問はcybozu developer コミュニティをご活用ください。

Avatar
SU

cybozu Development team様

お世話になっております。
大項目・中項目の文字が切れないようガントチャートに表示させることは可能でしょうか。
現在は6文字まで表示されるようになっておりますが、15文字程度まで表示できると嬉しいです。

設定方法と合わせてご教示いただけますと幸いです。どうぞ宜しくお願いいたします。

SUにより編集されました
Avatar
cybozu Development team

Suzuki様

いつもお世話になっております。
cybozu developer network事務局です。

大項目・中項目の文字数についてですが、こちらは制限事項となっております。
申し訳ございません。

下記のガントチャートプラグインの記事も制限事項について記載しておりますので、
ご確認お願い致します。

> 制限事項
> 大項目および小項目は全角7文字まで表示可能で、全角8文字以上となる場合、全角6文字まで表示されます。
https://developer.cybozu.io/hc/ja/articles/203716110

ご希望に添えず申し訳ございません。
今後共よろしくお願い致します。

Avatar
SU

cybozu Development team様

早速ご回答いただきありがとうございます。

残念ですが、次回のアップデートに期待しております!

今後とも宜しくお願いいたします。

Avatar
古川宏美

ガンドチャートの画面表示がうまくいきません。

サンプルの「gantt_plugin.zip」で、試しています。

F5で画面更新すると縮小で表示され曜日の行と重なります。

赤丸部の+をクリックして拡大すると曜日の行と重ならなくなりましたが12と0が表示されます。

Avatar
cybozu Development team

古川様

ご不便おかけしております。ご連絡いただいた2点の件です。

<ご連絡内容>

1. F5で画面更新すると縮小で表示され曜日の行と重なります。

2. 赤丸部の+をクリックして拡大すると曜日の行と重ならなくなりましたが12と0が表示されます。

<回答>

1. の点は、こちらで再現しませんでした。こちらのプラグインは、ブラウザの画面表示が100%でないと表示が崩れる場合があります。

ブラウザの表示を100%にして再現するかご確認いただけますでしょうか。

2.についてはこちらで再現したため調査してまいります。ご指摘をありがとうございました。

Avatar
cybozu Development team

古川様

たびたび失礼いたします。

曜日が重なる件は、同じ記事のコメント欄に同様の事例がありましたため、ご参考いただければと思います。

https://developer.cybozu.io/hc/ja/articles/115002537443?page=1#comments

Avatar
古川宏美

cybozu Development team様

1.の解決法『ブラウザー表示を100%にする』について、参考リンクありがとうございました。

2.につきましてもご確認ありがとうございます。

よろしくお願い申し上げます。

Avatar
dai

このプラグインの公開は終了してしまいましたか?

リンク先もアクセス権限なしと出てしまいました。

お手数おかけ致しますが、どなたかご回答頂けると幸いです。

Avatar
cybozu Development team

dai様

ご質問いただきありがとうございます。

ガントチャートプラグインは、公開は一時停止させていただいております。
詳細は下記に記載させていただいております。

【お知らせ】ガントチャートプラグイン公開一時停止について(2017/09/01)
https://developer.cybozu.io/hc/ja/articles/115004497643

問題については解決しており、現在再公開準備を進めております。
一週間以内に再公開予定ですので、今しばらくお待ちいただければと思います。
よろしくお願い致します。

Avatar
cybozu Development team

dai様

先週の金曜日にガントチャートプラグインを再公開いたしました。

・【お知らせ】ガントチャートプラグイン再公開について(2017/11/24)
https://developer.cybozu.io/hc/ja/articles/115005575166

ご迷惑をおかけし、申し訳ございませんでした。
是非ご利用下さい。

Avatar
dai

cybozu Development team様

ご返信、ご確認ありがとうございます。

先程無事プラグイン追加が行えました。

今後とも宜しくお願い致します。

Avatar
金子有一

コメント失礼いたします。

・大項目および小項目は全角6文字まで表示可能で、全角7文字以上となる場合、全角5文字まで表示されます。

とありますが改善の予定はあるのでしょうか。よろしくおねがいいたします。

 

Avatar
cybozu Development team

金子様

お世話になっております。developer network 事務局です。

本サンプルプラグインは、現在のところ改修の予定はございません。

ソースコードはGitHubに公開しておりますので、カスタマイズしてご利用いただくことが可能です。
https://github.com/kintone/plugin-sdk/tree/master/examples/ganttchart

ご希望に添えず申し訳ございません。

今後ともご活用いただけますと幸いです。

Avatar
金子有一

事務局様

早速ご返信下さりありがとうございました。

了解いたしました。引き続きよろしくおねがいいたします。

Avatar
板東 篤史

ProjectとTaskの列幅を変更したいと思うのですが、うまく動作しません。

CSSのaddin-styleにどのような修正を加えればよろしいのでしょうか?

Avatar
cybozu Development team

板東 篤史様

お世話になっております。
cybozu developer network 運営局です。

おそらく以下のような css になるかと思います。

なお、こちらは記事に対するフィードバック欄となっています。
このような発展的な内容については、cybozu developer コミュニティ のご利用をお願いいたします。

/* Project 列の幅 */
.fn-gantt .leftPanel .name {
width: 200px
}
/* Task 列の幅 */
.fn-gantt .leftPanel .desc {
width: 300px;
}
/* Project 列と Task 列のラベルの幅は親要素の幅を継承する */
.fn-gantt .leftPanel .fn-label {
width: inherit;
}
/* Project + Task の見出しの幅 */
.fn-gantt .leftPanel {
width: 500px;
}

 

サインインしてコメントを残してください。