ガンチャートのプラグインサンプルについて

kintone カスタマイズ
1

初投稿の初心者です。至らぬ点もあると思いますがご容赦ください。

 

下記のサンプルを元にkintoneにガンチャートを追加したいのですが

画面のファイルとcssがみつかりません。

GitHub - kintone-samples/plugin-samples

プラグイン後の画面で開発ツールで調べたところ

下の画像の赤の部分がclass=leftPanel 青がclass=raightPanelということがわかりましたが

肝心の画面のファイルとclassの内容が書かれているcssがどこに格納されているのか分かりません。教えていただけますでしょうか。

 

2

ファイル自体はこの中かと
https://github.com/kintone-samples/plugin-samples/tree/master/examples/ganttchart

ただ、これはあくまでPluginに変換する前のものなので、プラグインとして使いたい場合はここにあるようにビルドが必要です。
（一部を参考にしてご自身でJSカスタマイズとして組み込むなら、プラグイン化とかは不要ですが）

 

3

ご回答ありがとうございます。

しかし確認したところ画面のファイルと編集したいclassが記載されたcssファイルがないように見えます。

もしこの中にあるようでしたら具体的に教えていただくことは可能でしょうか？

知識不足で大変申し訳ありません。何卒ご教授ください

4

https://github.com/kintone-samples/plugin-samples/search?q=leftPanel

このように検索するとわかると思います。

5

再度ご丁寧に回答していただきありがとうございます。

 

大変申し訳ありません、私の質問の仕方が悪かったのですが

質問時に載せました図にある赤のラインの部分大きさを変えるにはどのファイルを編集すればよろしいでしょうか。

開発ツールで見る限りstyle.cssというファイルの中にclass=leftPanel細かなの数値があるようですが見つからないです。 width: 225px;で設定しているようですが width: 440px;に変更したいです。

お手数をおかけしますが再度ご教授いただけないでしょうか

 

6

あーなるほど。的を得ておらずすいません

これjQuery.ganttというライブラリを利用しているので、そのライブラリのデフォルトがそうなってるのだと思います。

https://cybozudev.zendesk.com/hc/ja/community/posts/900001381583/comments/900000825546

この投稿にあるように、cssで幅は指定できそうですね。

あるいは、プラグインのファイルを直接編集せずとも、別でCSSファイルをアップロードして幅を上書きしてもいいかもですね。

（!importantとかで強制的に上書きが必要かもしれませんが試してみないとわからないのでCSSの細かい話についてはここでは割愛します）

もしかするとJS

7

再度ご回答していただきありがとうございます。

試しにaddin-style.cssを下記のように書いてアップロードを行った所アップロードができませんでした。

私のcssの書き方が悪いのかもしくは別の方法があるのか、お手数ですが再度ご教授いただけますでしょうか。

}
.fn-gantt .leftPanel {
    width: 450px !important;
    z-index: 0;
}
.fn-gantt .leftPanel .fn-label {
    overflow: inherit !important;
}
.fn-gantt .leftPanel .name{
    float: left !important;
    height: 24px !important;
    width: 25% !important;
    background-color: #f6f6f6 !important;
}
.fn-gantt .leftPanel .desc{
    float: left !important;
    height: 24px !important;
    width: 75% !important;
    background-color: #f6f6f6 !important;
}
.fn-gantt .bar {
    z-index: 0;
}
8

> 試しにaddin-style.cssを下記のように書いてアップロードを行った所アップロードができませんでした。

できない、というのはどういう状態を指すのでしょうか（うまくいかない詳細を書いてもらえると適切なアドバイスをうけやすいとおもいます）

上記は詳細わからないので答えかねますが、一般的にはやれそうな方法は下記２つです。

  1. プラグインのカスタマイズを行う
    正攻法といえば正攻法ですが、ガントチャートプラグインをご自身でカスタマイズする方法です。
    この場合、CSS等書き換えて、ビルドして自分でアップロードする必要があります。
    ビルドの手順はこちら
    初心者、ということであれば一定ハードルは高いかもしれません（不可能、というほどめちゃくちゃ難しいわけではないですが、例えばコマンドラインでの操作とかなれてなければまぁ距離が遠いですよね…）
  2. CSSの上書きのみを行う
    プラグインには手をいれず、CSSアップロードのみ行って上書きをする方法です。
    アップロードの手順はこちら
    CSSに関してはグローバルといいますか、別のファイルからでもクラス名など指定して上書きはできるので、プラグインを書き換える正攻法と比較するとちょっと力技ですが、CSSファイルをアップロードするだけなので比較的楽だとはおもいます。
    CSSを上書きするには詳細度といって、プラグインのCSSより強いCSSを!important等で指定する必要などはあります。
    （ただし、プラグイン内部のJSでスタイルを書き換えてたりする可能性もあるのでその場合はアップロードしたCSSでは上書きがかなわないケースもあります（たぶん恐らく今回はこれに該当しない予感ですが））
9

再度ご回答いただきありがとうございました。

＞2.CSSの上書きのみを行う

こちらの方法で変更することができました！初めはプラグインサンプルに変更したcssを入れて再度アップロードしてエラーが出ていましたがご提示いただいたcssのみをアップロードする方法で変更ができました。

長い期間ご教授していただきありがとうございました。

10

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。