To Do をガントチャートで表示する

フォローする

Index

概要

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

  1. イベントハンドラーを登録する
  2. フィールド要素を取得する
  3. デザインのバージョンの取得
  4. ログインユーザーの情報を取得する

デモ環境

https://dev-demo.cybozu.com/k/57/

※デモ環境についての説明はこちら

コメント

Avatar
kobayashi

この通りにやってみたのですが、表示されません。
エディターに改行コードを指定する箇所があるのですが、そこに関係があるのでしょうか?
お教えくだされば幸いです。

Avatar
kobayashi

jqueryのバージョンは、Cybozu CDN には、2.1.4しかないのですが、
https://js.cybozu.com/jquery/2.1.4/jquery.min.js
を使うべきでしょうか? (変えてみましたがやはり表示されないです)

Avatar
saberin

こちのGanttライブラリいかがでしょうか。https://github.com/mbielanczuk/jQuery.Gantt
例 ⇒ http://mbielanczuk.com/upload/gantt-demo/index.htm
1.休日、祝日はチャットの図面の下部まで見れる
2.依存関係が線でわかる。

もう一点ですが、上記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に追加すればどうでしょうか

Avatar
Mayumi Iwasa
java初心者です。 提示いただいた通りに実施し、ガントチャート表示ができたのですが Todo名の横に、担当者を表示できるようにしたいのですが scriptが解読できないため、どうしたらよいかお教えいただけますと幸いです。
Avatar
saberin

新しいガントチャートのプロジェクトを作成中です。興味がございましたら、ぜひ試してください。

http://tristan-lin.github.io/jQueryGantt/

Avatar
北島 清孝

キントーン初心者です、ガントチャートを使用したく、上記URLからダウンロードし設定を行っていますが、正常に表示されません。

何処に問合せを行えば回答を返していただけるかなど、サポートをしていただける情報を教えていただけないでしょうか。

よろしくお願い致します。

Avatar
diio

saberin様
http://tristan-lin.github.io/jQueryGantt/
からwikiの実装方法のページにある
Js20とCSS5を追加してみて
ガントチャートのボタン表示までは実行できたのですが、
ガントチャート画面に表示がされません。

この実装手順以外になにか実施する内容ありますか?
教えていただければ幸いです。

Avatar
saberin

diio様

以前動作するはずですが、最近触っていないので、もしかしてAPIの変更があるかもしれません。もしDev Consoleでエラーメッセージなどあれば、教えてください。近いうちに、検証環境を構築して試します。

Avatar
saberin

diio様 デモ環境作成しました。入れば、設定方法がすべてわかれると思います。テスト用のメールアドレスがあれば、招待いたします。

Avatar
diio

saberin様
メールアドレスどのように連絡すればいいでしょうか?

Avatar
Mo

sample-ganttchart.jsのサンプルコードをそのままコピペすると、エラーが発生するので、以下のようにLine96から、コードを修正するときちんとガントチャート表示されました。

【修正前】



【修正後】

Avatar
cybozu Development team

Mo様

コメントいただきありがとうございます。cybozu developer Network事務局です。
ご指摘いただきました sample-ganttchart.jsのサンプルコードについて、ソースに誤りがございましたので修正致しました。
今後ともcybozu developer Networkをよろしくお願い致します。

Avatar
takokichi

ガントチャートを実装しました。

進捗状況がみやすくとてもよいプラグインだと思います!

1点要望があります。

ガントチャート上で☆(ブックマーク)を表示すると添付のようにブックマークが隠れてしまいます。

修正していただくことはできませんでしょうか。

Avatar
cybozu Development team

takokichi様

お世話になっております。

現在ガントチャートプラグインはアップデート中のため、ご指摘いただいた点を反映する方向で検討いたします。

今回は暫定版として古いバージョンから修正を作成しました。以下からダウンロードできますので動作確認をお願いします。

https://cybozudev.zendesk.com/hc/article_attachments/115008292863/ganntchart-ifix201705.zip 

 

ログインしてコメントを残してください。
Powered by Zendesk