ガントチャートプラグインサンプル「SAMPLE_gantt_plugin_v2.1」を使用して工程管理ガントチャートを
作成してみました。
大項目：注文番号
小項目：工程名
↓
まだ、はじめたばかりで全然知識がないのですが、
ガントチャートプラグインサンプルで大項目と小項目が表示されている表示形式で、小項目の同一名のみ表示させたいときに、大項目が一致していればそれに付随する小項目まで一緒に表示されてしまいます
この表では小項目「データ」だけ検索したつもりが、検索結果でまた上の画像のように、工程名「データ」のみ表示させようと検索しても、「データ」を含む大項目を検索してしまうので他の小項目も表示されてしまいます
これを
↑こんなふうに小項目検索工程名「データ」のみ検索して表示させたいです。
（完成想像図です。実際の検索結果ではこのように表示させることができません）
どのようにカスタマイズしたらこのように表示させることができるか、ご教示いただきたくお願いします。
67件のコメント
Miyawakiさん
こんにちは。まだ解決されていなければ、下記ご確認ください。
レコード一覧画面の絞り込み条件（漏斗アイコン）にて、下記のように設定するといかがでしょうか。
工程名が文字列1行でしたら、「＝（等しい）」でも良いです。
または、JavaScriptで一覧画面を更新するなどのカスタマイズをされてますでしょうか？
koichiさん
コメントありがとうございます。
koichiさんの言われる通り下記のように検索しても表示される結果がかわりませんでした
おそらく小分類 の「データ」を検索しても大分類の「ctrlNO」が同一であれば他の「製作期間」「加工1」「加工3（仕上）」も一緒に表示されてしまうのではないか？と思っています。
これを何とか小分類の検索で【「データ」と検索したら「データ」だけ表示】【「加工1」と検索したら「加工1」だけ表示】という風に何とか表示できないかと苦慮しています
↑現在のフィールド入力画面はこのようになっています。
「JavaScriptで一覧画面を更新するなどのカスタマイズをされてますでしょうか？」
koichiさんの↑のこともどのようにカスタマイズしたらいいのかというのもわかっておりません。
まだ始めたばかりで勉強不足なところがありますが、以上のことを誠に恐縮ではございますがご教示いただきたくお願いいたします。
Miyawakiさん
ガントチャートプラグインの各設定項目でテーブルのフィールドを使う場合は、
上記のように絞り込みをしても、全ての項目が表示されてしまうようです。
ご希望の表示にするには、プラグインの設定項目で、テーブルではないフィールドを指定するしかないようです。
ただ、その場合には、レコードを1件1件に分けて登録する必要があります。
現在：ctrlNOに対し、1レコード内にテーブルで製作工程（製作期間、データ、加工1、加工3）を入力
代替：ctrlNOに対し、製作工程を1レコードずつに分けて入力
レコード1：製作期間
レコード2：データ
レコード3：加工1
レコード4：加工3
koichiさん
更なるご教示ありがとうございます。
やはりそうでしたか・・・
こちらの条件としてはctrlNOは絶対に重複させたくないフィールドなので、代替案で表示させられたとして本末転倒なところでございます。
何か別の方法はありますでしょうかね？
お手数ですがよろしくお願いします
koichiさんのコメントの通り
「ガントチャートプラグインの各設定項目でテーブルのフィールドを使う場合は、
上記のように絞り込みをしても、全ての項目が表示されてしまうようです。」
で返事いただいた部分を、スクリプトなどを使用して
「すべてが表示されないように、検索条件だけ表示する」
に、なんとか持っていきたいところです。
現在弊社ではすでに代替案の方法と同様なやり方で「エクセル」で工程管理しています
CTRLNOは重複させることによって情報が重複してしまうところに問題が生じています
エクセルをkintoneにして改善した意味がなくなってしまいます
こちらとしてもこういった専門知識がないため他人頼みで恐縮なところがありますが、
cybozu developer network で解決したいと思っています
Miyawakiさん
ガントチャートプラグインのスクリプトを修正するのが一番早そうです。
こちらでも見てみますので、またご連絡しますね。
Miyawakiさん
プラグインを少し拡張してみました。
下記URLからダウンロードできます。（ファイル名：SAMPLE_gantt_plugin_v2.1._1_20200808.zip）
https://drive.google.com/file/d/1iMreHXG1BdRWRqe7OcuY_Av3RVQaex1E/view?usp=sharing
※現在適用中のプラグインを外して、再度設定していただく必要があります。
※サンプルのため、プラグインの動作保証はできかねます。また、技術的なサポート等も行えませんのでご了承ください。
＜変更点＞
ガントチャート上部に検索ボックスが表示されます。
抽出ボタンを押すと、検索キーワードに完全一致した小項目だけをテーブルから抽出し、ガントチャートを再描画します。
カンマ(,)で区切ると、複数キーワードを抽出できます。
例）「データ」と「加工1」を抽出する場合
レコード一覧の絞り込み条件を使って抽出することも検討したのですが、あらゆる条件指定を考慮する必要があるため断念しました。
koichiさん
プラグイン拡張ありがとうございました！
こちらが求めている通りの表示をさせることができて大変喜ばしい限りです
重ねてお礼申し上げます。
追加で可能であれば下図の3つの項目をクリアにしたいです
①と②は特にクリアにしたいところです
③は可能であれば大丈夫です。難しそうですし・・・
お手数ですがぜひよろしくお願いいたします。
Miyawakiさん
ご確認いただきありがとうございます。
追加の要件について、検証は行ってみますが、ご回答に日数を要することと、現時点でクリアできるかご回答できかねることをご了承ください。
追ってご連絡します。
Miyawakiさん
左側の項目名パネルの横幅は広げることができました。
しかし、プラグインで使用するjQuery.Ganttライブラリの仕様上、項目の列数を増やすことが難しいため、
タイトルに各項目を結合した文字列を格納して表示するしかなさそうです。
プラグインは、下記URLからダウンロードできます。（ファイル名：SAMPLE_gantt_plugin_v2.1_2_20200813.zip）
https://drive.google.com/file/d/1Mtq46K8HXjvBtNqxsVYKf_qjQbU455pC/view?usp=sharing
※現在適用中のプラグインを外して、再度設定していただく必要があります。
※サンプルのため、プラグインの動作保証はできかねます。また、技術的なサポート等も行えませんのでご了承ください。
注文番号、製品名、受注担当者を結合する「タイトル」（文字列1行）を設置します。
文字列の結合は、フィールドの自動計算を使います。
プラグインのタイトルフィールドに「タイトル」を指定します。
下図のようなレイアウトになります。
koichiさん
対応ありがとうございます。
自分でそういう知識があればいいのですが、koichiさんに世話になって大変助かっております。
表示数が増えたのはすばらしいです。
とりあえず「SAMPLE_gantt_plugin_v2.1_2_20200813.zip」
で対応してみます。
その他の①~③の依頼案件も可能性があるならば時間がかかっても全然大丈夫です。
やりたいことははっきりしているんですが、プログラムを開発したりするのは専門外のことなので考えていただけるだけで助かります。
よろしくお願いいたします。
koichiさん
また一つご教示いただきたいです
ガントチャート表の日付バーをクリックすると、日付を編集できる画面が表示されますが、日付を変えても編集できなくてはじかれます。
直接編集できるようにするにはどうしたらいいでしょうか？
よろしくお願いいたします
Miyawakiさん
プラグインの拡張については、改めて対応可否をご連絡いたします。
先に日付の件ですが、確認させてください。
①お使いのブラウザは何でしょうか？（IE11、Edge、Chrome、Firefox、Safariなど）
②「編集できなくてはじかれる」というのは、どのような状態（表示）になるでしょうか。
・日付欄を編集できない（キーボード入力できない、カレンダーが表示されない）
・更新ボタンを押しても反応がない。
・更新ボタンを押した際にエラー「＊＊エラー内容の詳細＊＊」が表示される。
・更新ボタンを押して、画面が切り替わるが、レコードの値が更新されていない。 など
ちなみに、正常な動きとしては下記のようになります。
＜変更前＞
赤枠の「データ」の日付を変更します。
＜日付選択＞
キーボード入力でもカレンダーでも日付指定が可能です。
＜変更後＞
画面が更新され、赤枠の「データ」の日付が変更されています。
koichiさん
ありがとうございます。
お答えいたします
①は「Edge」または「IE11」を使用しています
②は日付を変更して「更新」ボタンを押すと
ダイアログメッセージが出て
「レコードを更新できませんでした。編集権限があるかご確認ください。」
でOKボタンをおすと、編集が反映されずはじかれます
よろしくお願いいたします
Miyawakiさん
ご回答ありがとうございます。
その内容ですと、権限がないことがまず考えられます。
同ユーザーで、対象のレコードの詳細画面を開き、通常のレコード編集・保存は可能でしょうか？
koichiさん
ありがとうございます。
同ユーザーで、対象のレコードの「詳細画面」に入って通常のレコード編集・保存は可能です。
ですが、ガントチャート表示画面で日付を直して「更新」を押すと
「レコードを更新できませんでした。編集権限があるかご確認ください。」
とメッセージが出て編集が反映されません
よろしくお願いいたします
Miyawakiさん
先に10桁表示の件、修正したプラグインを載せます。
プラグインは、下記URLからダウンロードできます。（ファイル名：SAMPLE_gantt_plugin_v2.1_3_20200822.zip）
https://drive.google.com/file/d/1xY4S4sy9TIO2ncWymJIzus1mAeouu7AK/view?usp=sharing
※現在適用中のプラグインを外して、再度設定していただく必要があります。
※サンプルのため、プラグインの動作保証はできかねます。また、技術的なサポート等も行えませんのでご了承ください。
プラグインの設定にて、注文番号とは他に２つ追加で選択できるようにしています。
下画像のように表示されるかと思います。
文字数は全角で最大10文字分の幅を確保していますが、文字数制限はできないため、
必要に応じて、アプリの設定より文字列フィールドの文字数制限をしてください。
曜日の色付けについては、元のライブラリを変更できないため、仕様上対応できませんでした。ご了承ください。
最後に、エラーの件、
今回のプラグインを適用すると、他のエラーを出すようにしましたので、そのメッセージをご返信ください。
Miyawakiさん
ご確認ありがとうございます。
先に②のエラーから回答します。
「CTRLNO」の指定にルックアップフィールドを使われているかと思いますが、
その参照元となるアプリのフィールドで、「値の重複を禁止する」になっている必要があります。
参照元のアプリの設定より、フィールドの設定情報をご確認ください。
なお、水曜日11：17にコメントした画像から、今回のプラグインで表示内容を変更しましたので、
差異がある点については、無視していただいて問題ございません。
Miyawakiさん
上記コメントですが、誤っているかもしれませんので、一旦無視してください。もう少し調べてみます。
また、差し支えなければ、現在のアプリの編集画面のキャプチャいただけないでしょうか？
大項目・小項目のフィールドの部分だけでも問題ございません。
Miyawakiさん
二転三転して申し訳ありません。恐らく原因がわかりました。
テーブルで「工程名」をルックアップしていると思いますが、
この参照元のアプリのフィールドが「値の重複を禁止する」に設定されている必要があるようです。
参照元のアプリをご確認ください。
koichiさん
毎度のお引き立てならびにご対応いただき本当にありがとうございます。
「値の重複を禁止する」の件ですがやってみたのですが、うまく改善されないようです。
ここでこれまでの状況とならびに要望点を記した画像を下記に添付いたします。
要望点①と②は 昨日（8/25）8：31に問い合わせした要望点です。
要望点③と④に関しては新たに追加したものです。
画像と同等のものを作製検証していただければ、起こっている問題点が解明されるのではないかと思われます
時間は急ぎませんので、可能であれば何卒宜しくご対応お願い致します。
Miyawakiさん
値の重複に関して、
画像を拝見したところ、テーブル内の「担当者」フィールドもルックアップですので、
その参照元のアプリのフィールドも「値の重複を禁止する」必要があります。
まとめますと、下記２つの設定により、更新ができるようになると思います。
（１）「工程名」ルックアップの参照元アプリのフィールドの「値の重複を禁止する」
（２）「担当者」ルックアップの参照元アプリのフィールドの「値の重複を禁止する」
ご確認お願いいたします。
koichiさん
値の重複に関して、「担当者」アプリの「値の重複を禁止する」にチェックを入れますとエラーが解決しました！
だんだん社内で使用しているエクセルのチャート表より便利なものになってきました
koichiさんの対応のおかげです！ありがとうございます
引き続きよろしくお願いいたします。
Miyawakiさん
解決されたとのことで安心しました。下記についても反映できました。
①製品名（大項目の2番目）を20文字幅
③日付を日時に変更
④午前（0）をA、午後（12）をPに変更
プラグインは、下記URLからダウンロードできます。（ファイル名：SAMPLE_gantt_plugin_v2.1_4_20200829.zip）
https://drive.google.com/file/d/14FqieZMUk_Fx5NpAEcgSmtIIauCmjNM7/view?usp=sharing
※サンプルのため、プラグインの動作保証はできかねます。また、技術的なサポート等も行えませんのでご了承ください。
④A/P表示ですが、0/12の時は問題ありませんが、さらに＋を押した際、0/9/18や0/6/12/18の表示時も変更されます。
こちらは制御できないため、ご了承ください。
koichiさん
「ガントチャートプラグインで同一名小項目検索で同一名小項目のみ表示させたい」
という名目で本当に細かいところまで対応していただき、毎度のお引き立てならびにご対応いただき本当にありがとうございます。
あともう一つ。五月雨式で申し訳ありませんが、
チャート表示上の「工程名」の右隣に小項目をもう一項目「担当者」という項目で追加したいと考えております。
（8月26日水曜日11：40 の投稿にあるテーブル中の「担当者」という項目です）
お手数をおかけしますがよろしくお願いいたします
それでお願いのお願いになるのですが、それを実現させた場合
どのスクリプトファイルをどのように変えたかというのがわかればご教授いただきたいです。
（例：どのファイルのスクリプトの何行目にどのようなプログラムをいれたとか・・・）
私は知識がないので、それをみてどうこうするまでには至りませんが
微力ではありまが、自分でも少し学習したいと考えております。
上記の要望に関しましては時間を要しても大丈夫です。
ひとまず現在のものでこれで一段落ということで運用試験に移っていきたいと思います。
よろしくお願いいたします
koichiさん
いつもお世話になっております。
またお伺いしたいことがあります。
作成したガントチャートをスマホなどでモバイル表示を通してみようしたらみられないのですが、何か設定しなければいけませんでしょうか？
ご教示いただきたいです
よろしくお願いいたします
Miyawakiさん
小項目の追加については、検討してみます。
モバイルでは、プラグインが対応していないため、ガントチャートを表示できません。
只、モバイルでも、PC版表示に切り替えると表示されるかと思います。
Miyawakiさん
小項目を2つに増やしました。
プラグインの設定から、小項目の2つ目をドロップダウンで選択してください。
プラグインは、下記URLからダウンロードできます。（ファイル名：SAMPLE_gantt_plugin_v2.1_5_20200904.zip）
https://drive.google.com/file/d/1H-f3J61uF-HY9n7SEmZwcRpjJde7zR7x/view?usp=sharing
※サンプルのため、プラグインの動作保証はできかねます。また、技術的なサポート等も行えませんのでご了承ください。
変更箇所を全て上げると長くなりますので、主要な部分だけ記載します。
プラグインzipを解凍すると、「desktop-ganttchart.js」というファイルがあります。
これが、ガントチャートを生成するメインのスクリプトです。
下記、nameとdescの指定部分が今回の大きなポイントです。
HTMLのdiv要素を使い、「大項目（name）」と「小項目（desc）」の領域をそれぞれ3分割、2分割にすることで、
見た目上、項目が5項目あるように見せるようにしました。
var ganttRecordData = {id: self.escapeHtml(records[i2]['$id'].value),
// name: firstFlg ? self.escapeHtml(records[i2][GANTT_NAME].value) : '',
name: firstFlg ? '<div class="div-gantt-name">' + self.escapeHtml(records[i2][GANTT_NAME].value) + '</div><div class="div-gantt-name2">' + self.escapeHtml(records[i2][GANTT_NAME2].value) + '</div><div class="div-gantt-name">' + self.escapeHtml(records[i2][GANTT_NAME3].value) + '</div>' : '',
// desc: subTable[j].value[GANTT_DESC] ? self.escapeHtml(subTable[j].value[GANTT_DESC].value) : '',
desc: subTable[j].value[GANTT_DESC] ? '<div class="div-gantt-desc">' + self.escapeHtml(subTable[j].value[GANTT_DESC].value) + '</div><div class="div-gantt-desc2">' + self.escapeHtml(subTable[j].value[GANTT_DESC2].value) + '</div>' : '',
values: [{
from: self.convertDateTime(subTable[j].value[GANTT_FROM].value),
to: self.convertDateTime(subTable[j].value[GANTT_TO].value),
desc: descGantt,
label: descFlg ? self.escapeHtml(subTable[j].value[GANTT_DESC].value) : self.escapeHtml(records[i2][GANTT_NAME].value),
customClass: self.escapeHtml(colorGantt),
dataObj: {
'url': '/k/' + kintone.app.getId() + '/show#record=' + records[i2]['$id']['value'],
'name': records[i2][GANTT_NAME].value,
'desc': descFlg ? self.escapeHtml(subTable[j].value[GANTT_DESC].value) : '',
'start': subTable[j].value[GANTT_FROM].value,
'end': subTable[j].value[GANTT_TO].value,
'recId': records[i2]['$id'].value,
'tableId': subTable[j].id,
'record': records[i2],
'GANTT_FROM': GANTT_FROM,
'GANTT_TO': GANTT_TO,
'lang': self.lang[self.settings.i18n]
}
}]
};
項目の横幅については、「addin-style.css」というファイルで設定しています。
それぞれの領域幅を割合%で設定しました。
.fn-gantt .leftPanel {
width: 64%;
}
.fn-gantt .rightPanel {
width: 35%;
}
.fn-gantt .leftPanel .name {
width: 75%;
}
.fn-gantt .leftPanel .desc {
width: 25%;
}
.fn-gantt .leftPanel .fn-label {
width: 100%;
}
.div-gantt-name {
display:inline-block;
width: 25%;
}
.div-gantt-name2 {
display:inline-block;
width: 50%;
}
.div-gantt-name3 {
display:inline-block;
width: 25%;
}
.div-gantt-desc {
display:inline-block;
width: 50%;
}
.div-gantt-desc2 {
display:inline-block;
width: 50%;
}
koichiさん
いつもお世話になります。
返事遅れました。ご対応ありがとうございました。
とっても助かっております。
そしてまた運用中に要望点が出てきました。
koichiさんに作製していただいた「検索ボックス」である条件を表示したとき、
チャート表から日付をダイレクト編集を完了すると、日付編集は反映されているのですが、
「検索ボックス」で検索した結果がクリアされて、また始めからすべての表示に戻ります。
「検索ボックス」で検索結果を表示したまま、次の日付を編集したいのですが、そういうことは可能でしょうか？
（例：「データ」と検索して「データ」だけの表示にしたまま複数レコードの日付を順に編集していこうとするとわかるかと思われます）
koichiさんにはいつもお手数をおかけしますが、またご対応お願いしたいと思います。
よろしくお願いいたします。
Miyawakiさん
検索ボックスの中身を保持するようにしました。
利用環境にもよりますが、ブラウザを閉じるまでは、他のページに遷移しても
次開いたときに、検索ボックスに前回の抽出文字列が入ると思います。
日付を編集保存する度に画面が更新しますが、これは必要な処理のためご了承ください。
プラグインは、下記URLからダウンロードできます。（ファイル名：SAMPLE_gantt_plugin_v2.1_6_20200908.zip）
https://drive.google.com/file/d/1yGstlwYrpYjpyb7qP5sUD8jcqQ_znkXI/view?usp=sharing
※サンプルのため、プラグインの動作保証はできかねます。また、技術的なサポート等も行えませんのでご了承ください。