ガントチャートの作成について

kintone カスタマイズ
1

https://developers.cybozu.com/ja/tutorial/sample3.html

上記のURLを参照してガントチャートを作ろうとしたのですが、うまく表示がされません。
そこで質問です。

「準備したアプリの設定画面で、保存したファイルを読み込みます」とありますが、ファイルの読み込み画面の場所は以下の場所で合ってるんでしょうか？

アプリの設定 > 詳細設定 > JavaScript / CSSでカスタマイズ > PC用のJavaScriptファイル

また、「アプリの設定を完了し、レコード一覧で「すべてのToDo」を選択します」とありますが、すべてのToDoさえ表示させてしまえば、ガントチャートが表示されると考えてもよろしいのでしょうか？

以上、何か教えていただければ嬉しいです。

2

甲斐さん、こんばんは。

読み込み場所はご指摘の箇所で大丈夫だと思います。仰る通り、「すべてのToDo」を選択すれば（表示件数に応じて）全てのレコードがガントチャート上に表示されますし、「MyToDo」を選択すれば、担当を自分にしたレコードが表示されます。

また、サンプル中にロード箇所があるJSやCSSは、次のようにHTTPSでホストされているCDNから取込んでください。

// jQuery.Gantt の CSS ファイル
 loadCSS("https://rawgithub.com/taitems/jQuery.Gantt/master/css/style.css");
 // jQuery の JavaScript ファイル
 loadJS("https://rawgithub.com/taitems/jQuery.Gantt/master/js/jquery.min.js");
 // jQuery.Gantt の JavaScript ファイル
 loadJS("https://rawgithub.com/taitems/jQuery.Gantt/master/js/jquery.fn.gantt.js");

関連する項目として次のコミュニティも参考にされてはと思います。
https://cybozudev.zendesk.com/hc/communities/public/questions/200738634

3

ガントチャートを表示することができました。
スクリプトを読み込む順序が違っていたようです。

しかし、ユーザーや一覧によってガントチャートが表示されないケースがあるようなので、調べてみたいと思います。

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

4

甲斐さん

ひとたび解決されたようで良かったです。

jQueryのプラグインを利用する場合は、jQuery本体をロードした後にプラグインのロードですね。コンソールで「”$”が定義されていない」のようなエラーが出ていたのではないでしょうか。

ユーザーや一覧によってガントチャートが表示されないケース・・・
については、
・「利用されているユーザさんによって」については、ブラウザの相違等も疑ってみるのが良いように思います。
・「一覧によって」については、新規に一覧を追加しても基本的に問題ないはずですが・・・パッと思いつく所がなく申し訳ありません。

また、ブラウザの問題と期間未入力時（サンプルは必須なので入力日が自動ではいります）の対策として、私は次のようにconvertDateTime関数を書き換えています。

function convertDateTime(str) {
    var ret;
    if( str === null){
        ret = (new Date()).getTime();
    } else {
        ret = (new Date(str)).getTime();
        if(isNaN(ret)){
            ret = (new Date(str.split("-").join("/"))).getTime();
        }
    }
    return '/Date(' + ret + ')/';
}

またご不明な点等ありましたら、お問い合わせ頂ければと思います。