概要
To Doアプリのレコード一覧をガントチャート形式で表示するサンプルです。
- レコード一覧画面で、表示するレコードがある場合にガントチャートを表示します。
- 優先度フィールドの値に応じてガントチャートの色を変えています。
- 年月日の表示は、ユーザーの言語設定に応じて変更します。
その他、詳細な仕様はプログラムでご確認ください。
完成形
事前準備
- kintone アプリ（kintone アプリストア の 「To Do」を使います）
- エディター
サンプルプログラム
サンプルプログラムでは、Cybozu CDN の利用、JavaScript と CSS のサンプルを紹介します。
PC用のJavaScriptファイル
詳細設定から「JavaScript / CSSによるカスタマイズ」を開き、Cybozu CDN から次のライブラリを指定します。
- jQuery
https://js.cybozu.com/jquery/2.1.1/jquery.min.js (version 2.1.1を利用) - jQuery.Gantt
https://js.cybozu.com/jquerygantt/20140623/jquery.fn.gantt.min.js (version 20140623を利用)
JavaScriptサンプル
- 次のサンプルプログラムをエディターにコピーして、ファイル名を「sample-ganttchart.js」 、文字コードを「UTF-8」、「BOMなし」で保存します
※ファイル名は任意ですが、ファイルの拡張子は「js」にしてください
PC用のCSSファイル
詳細設定から「JavaScript / CSSによるカスタマイズ」を開き、Cybozu CDN から次のライブラリを指定します。
- jQuery.Gantt
https://js.cybozu.com/jquerygantt/20140623/css/style.css (version 20140623を利用)
CSSサンプル
バリエーションを持たせるために、自前で別の色を指定します。 省略しても動作します。
- 次のサンプルプログラムをエディターにコピーして、ファイル名を「sample-addin.css」 、文字コードを「UTF-8」、「BOMなし」で保存します
※ファイル名は任意ですが、ファイルの拡張子は「css」にしてください
設定した画面
「JavaScript / CSSによるカスタマイズ」画面でそれぞれ設定した例を紹介します。
JavaScript / CSS ファイルの設定は以上です。
アプリのトップページへ移動し、サンプルデータを登録してカスタマイズした結果を確認してください。
使用したAPI
デモ環境
デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/57/
ログイン情報はcybozu developer network デモ環境で確認してください。
この通りにやってみたのですが、表示されません。
エディターに改行コードを指定する箇所があるのですが、そこに関係があるのでしょうか？
お教えくだされば幸いです。
jqueryのバージョンは、Cybozu CDN には、2.1.4しかないのですが、
https://js.cybozu.com/jquery/2.1.4/jquery.min.js
を使うべきでしょうか？ (変えてみましたがやはり表示されないです)
こちのGanttライブラリいかがでしょうか。https://github.com/mbielanczuk/jQuery.Gantt
例 ⇒ http://mbielanczuk.com/upload/gantt-demo/index.htm
１．休日、祝日はチャットの図面の下部まで見れる
２．依存関係が線でわかる。
もう一点ですが、上記sample-ganttchart.jsでは
records[i]['From']['value']、records[i]['To']['value']の値をCHKしていないようです。私の検証では、もしFromの値を未定義のままで、このチャットのViewに入ると、ブラウザ（Firefox）が無反応になり、ブラウザを再起動することが必要。
if (records[i]['From']['value']==undefined) {return;}
if (records[i]['To']['value']==undefined) {return;}
if (records[i]['Priority']['value']==undefined) {return;}
をLine70に追加すればどうでしょうか
新しいガントチャートのプロジェクトを作成中です。興味がございましたら、ぜひ試してください。
http://tristan-lin.github.io/jQueryGantt/
キントーン初心者です、ガントチャートを使用したく、上記URLからダウンロードし設定を行っていますが、正常に表示されません。
何処に問合せを行えば回答を返していただけるかなど、サポートをしていただける情報を教えていただけないでしょうか。
よろしくお願い致します。
saberin様
http://tristan-lin.github.io/jQueryGantt/
からwikiの実装方法のページにある
Js20とCSS5を追加してみて
ガントチャートのボタン表示までは実行できたのですが、
ガントチャート画面に表示がされません。
この実装手順以外になにか実施する内容ありますか？
教えていただければ幸いです。
diio様
以前動作するはずですが、最近触っていないので、もしかしてAPIの変更があるかもしれません。もしDev Consoleでエラーメッセージなどあれば、教えてください。近いうちに、検証環境を構築して試します。
diio様 デモ環境作成しました。入れば、設定方法がすべてわかれると思います。テスト用のメールアドレスがあれば、招待いたします。
saberin様
メールアドレスどのように連絡すればいいでしょうか？
sample-ganttchart.jsのサンプルコードをそのままコピペすると、エラーが発生するので、以下のようにLine96から、コードを修正するときちんとガントチャート表示されました。
【修正前】
【修正後】
Mo様
コメントいただきありがとうございます。cybozu developer Network事務局です。
ご指摘いただきました sample-ganttchart.jsのサンプルコードについて、ソースに誤りがございましたので修正致しました。
今後ともcybozu developer Networkをよろしくお願い致します。
ガントチャートを実装しました。
進捗状況がみやすくとてもよいプラグインだと思います！
1点要望があります。
ガントチャート上で☆（ブックマーク）を表示すると添付のようにブックマークが隠れてしまいます。
修正していただくことはできませんでしょうか。
takokichi様
お世話になっております。
現在ガントチャートプラグインはアップデート中のため、ご指摘いただいた点を反映する方向で検討いたします。
今回は暫定版として古いバージョンから修正を作成しました。以下からダウンロードできますので動作確認をお願いします。
<リンク削除済>
cybozu Development team 様
回答ありがとうございます。
頂いたリンクですが、「お探しのページが表示されません」と表示されます。
こちらのオペレーションが誤っているのでしょうか。
takokichi様
失礼いたしました。権限が必要なエリアに添付してしまっていたようです。
たびたびご面倒をおかけしますが、こちらのリンクをお試しいただけますでしょうか。
<リンク削除済>
cybozu Development team 様
返答が遅くなり申し訳ありあｍせん。
プラグイン取得できました。
ブックマークが表示されることも確認できました。対応ありがとうございました。
プラグインもデザインが改善されており使いやすくなりました。
ありがとうございました。
このガントチャートですが、アプリにあるすべての一覧で表示されていますが、
表示したくない一覧もあります。
一覧により表示、非表示を切替えることはできますか。
よろしくお願いします。
takokichi様
ご質問の件ですが、現状のプログラムの仕様としては、一覧により表示非表示を制御することはできません。
もしプログラムを改修するとすれば、一例ですが、以下のような開発が考えられます。
プログラムはこちらで公開しております。プラグインの再パッケージ化の手順はこちらになります。
また、開発時のQAについてはコミュニティの方にご質問いただければと思います。
あまりお役に立てず申し訳ございませんが、よろしくお願いいたします。
フィールドの上のガントチャートの「TO DO名」の横に「担当者」を表示させたいのですが、
どのようにコードをいじればよいのでしょうか？
初心者であるためわかりません。
また、締め切り期限を過ぎたらアラートが表示されるようにしたいのですが、
それは難しいでしょうか？
どなたかお教えいただけると幸いです。
kyoden様
コメントいただき、ありがとうございます。
jQuery.Ganttで2つの要素を表示したい、ということですね。
本記事のサンプルプログラムの場合、116行目の後に以下の一行を追記することで、大項目（nema）、中項目（desc）といったような表現ができるようになります。
desc: escapeHtml(records[i]['対象フィールドのフィールドコード']['value']),
詳しくはこちらのサイトをご確認ください。
http://taitems.github.io/jQuery.Gantt/
※サンプルアプリのように担当者をユーザー選択フィールドにしてる場合、オブジェクトで取得されますのでご注意ください。
各フィールドの形式はこちらでご確認いただけます。
コメント欄は記事に直接関係するコメントをお願いしており、恐れ入りますがアラートの件に関しましてはこちらではなく、コミュニティをご活用いただけますと幸いです。
なお、締め切り期限を過ぎた場合のアラート表示ですが、どのような形で表示するかによって実現方法が変わります。
例えば、「担当者に通知が欲しい」（標準機能で実現できます）や「ログインユーザーが担当者になっているタスクが期限を過ぎている場合にポップアップ画面を出す」など具体的に記載いただくと、求める回答が得やすくなると思います。
お手数ですが、よろしくお願いいたします。
はじめまして。
・ガントチャートのタイトル、サブタイトルの表示文字数を増やしたい
・初期表示で、スケールを半日（12時間）単位としたい
以上のようにはできないものでしょうか？
ご教授いただけましたら幸いです。
よろしくお願い申し上げます。
Okamoto様
ご質問の件です。
>・ガントチャートのタイトル、サブタイトルの表示文字数を増やしたい
CSSを変更することで可能です。
たとえば比較的簡単な方法としては、タイトルの文字サイズを小さくすることで実現できるかと思います。
class名は、開発者ツールの「Elements」タブで確認できます。
例: .fn-gantt .leftPanel .fn-label { font-size: 10px;}
>・初期表示で、スケールを半日（12時間）単位としたい
以下JavaScriptの132行目のコメントにも記載のとおり、jQuery.Ganttの仕様で、12時間単位はありません。
なお、ガントチャートはサンプルプラグインもございますのでよろしければお試しください。
https://developer.cybozu.io/hc/ja/articles/203716110
こちらのコメント欄は、フィードバック欄として活用いただけます。
シナリオに沿っていない技術的なご質問は基本的に受けかねますので、今後はcybozu developer コミュニティをご活用ください。
kitone初心者です。ガンチャートのカレンダー部にTODO名ではなく、作業者を表示させたいのですが可能でしょうか？
sunshine 様
お世話になっております。cybozu developer network 運営局です。
はい、作業者を表示させることは可能です。
それぞれ以下の行で escapeHtml(records[i]['To_Do']['value']) となっている部分を、作業者フィールドに設定されている値に変更すると表示されるかと思います。
作業者フィールドの形式については フィールド形式 をご参照ください。
なお、記事のコメント欄は、記事に対するフィードバックを受け付ける場所となっております。
機能追加・機能変更などのカスタマイズに関する質問は、恐れ入りますが、コミュニティにてお願いいたします。
すみません、読解不足かもしれませんが教えてください。
＞次のサンプルプログラムをエディターにコピーして
どこにサンプルプログラムがあるかわからないため
場所を教えていただけませんでしょうか。
お手数ですが、よろしくお願いいたします。
Yasuosa様
恐らく仰っているのはこのページの上部にある、
JavaScriptサンプル
の下に書かれている文言のことだと思うのですが、背景が黒い部分にJavaScriptのコードが書かれています。
黒い背景の右上に「Copy」ボタンがありますので、そのボタンを押しWindowsに標準で入っているメモ帳にペーストして名前を付けて保存してくださいってことです。
sunshine様
ご回答いただきまして有難うございました。
Copyボタンが表示されておらず、ブラウザのせいで表示されていないのかもしれません。
過去コメントにプラグインがあるとのことなので、一旦こちらで試させていただきます。
泉 宏樹 様
お世話になっております。cybozu developer network 運営事務局でございます。
ガントチャートの描画は jQuery.Gantt で行っているため、jQuery.Gantt のコードを改修する必要があるかと思います。
こちらのコメント欄は記事内容のフィードバック目的となっており、
直接的に記事と関連がない、または技術的なご質問はcybozu developer コミュニティをご活用ください。
有志により回答が得られる場所となります。
よろしくお願い致します。
すみません。
コミュニティーの方で投げてみます。
返答ありがとうございました。
尚、コメント画像に弊社情報も記載されていましたので、コメント削除しました。