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
※サンプルのため、プラグインの** 動作保証はできかねます。また、技術的なサポート等も行えませんのでご了承ください。**
koichiさん
いつも本当にありがとうございます
確認しました。完璧です！
引き続きまた何かありましたら、ご教示いただきたいです
何卒宜しくお願い致します。
koichiさん
お久しぶりです。いつもお世話になります。
ご検討いただいたガントチャートプラグインについてご教授いただきたいことがあります。
「設定」→「プラグインの設定」の中にある
【（E）色付けするフィールド】
のところですが、現在は指定先のフィールドがドロップダウンになってないとフィールド指定先リストに表示されないようです
これを指定先がドロップダウンでなくても指定先リストに表示させたいのですが、可能でしょうか？
また、その逆で
【（B）サブタイトルにするフィールド】
のところですが、（E）の逆でセ指定先フィールドがドロップダウンになっているとフィールド指定先リストに表示されないようです
これを指定先がドロップダウンであっても指定先リストに表示させたいのですが、可能でしょうか？
どちらか片方でも大丈夫ですし、両方でも大丈夫ですが、もし可能であれば、最新のサンプルプラグインの修正更新をお願いしたいです。
koichiさんにはいつもお手数をおかけしますが、またご対応お願いしたいと思います。
よろしくお願いいたします。
Miyawakiさん
ご無沙汰しております。
プラグインの仕様変更を行いました。両方とも反映できていると思います。
プラグインは、下記URLからダウンロードできます。（ファイル名：SAMPLE_gantt_plugin_v2.1_7_20201103.zip）
https://drive.google.com/file/d/1Ph2nByxat_RrWABxpGnOuGRD1q9EV4pi/view?usp=sharing
※サンプルのため、プラグインの** 動作保証はできかねます。また、技術的なサポート等も行えませんのでご了承ください。**
koichiさん
この間はご無沙汰の対応ありがとうございました。
毎度のお引き立てならびにご対応いただき本当にありがとうございます。
段々とガントチャートプラグインの完成度が高くなってきました。
下記内容をご検討いただきたいです。
【要望①】
2020年9月8日のご対応で
koichiさんに用意していただいた「検索ボックス」はものすごく便利です！
現在は「検索ボックス」は完全一致語句条件を満たさないと検索されないようになっています
そこでさらに便利にするように、それを部分一致語句条件（キーワードを含む）検索もできるようにすることは可能でしょうか？
【要望②】
2020年9月5日のご対応で
koichiさんに用意していただいた「小項目2つ目のフィールド」のことですが
小項目1つ目フィールド用の「検索ボックス」があるように
小項目2つ目フィールド用の「検索ボックス」も用意することは可能でしょうか？
【要望③】
ガントチャート表示のソート順を
小項目の「ガントチャートバーの一番最後の日（工程納期）」の昇順や降順で表示させたいのですが、
現在の機能でそのように表示させることは可能でしょうか？
以上3つの【】要望に対して
もう少し機能性をよくしたいと、またご教授ならびにサンプルプラグインの修正更新お願いしたいです。
よろしくお願いいたします。
Miyawaki様
ご確認いただきありがとうございます。
追加の改修について、確認いたします。
只、当方本業の方が忙しく、対応にこれまで以上に日数を要すると思いますので、何卒ご了承ください。
koichiさん
改修は遅くなっても大丈夫です。
簡単であるかもしれなので確認だけでもお願いします。
いつもありがとうございます。
よろしくお願いいたします。
Miyawaki 様 koichi 様
お世話になっております。cybozu developer network 事務局です。
この何か月間のやりとりから、当コミュニティの主旨であるkintone API を使った質問、アイデア、意見交換の域ではなく、
プラグインの作成依頼になっているように見受けられます。
今後このようなやりとりはお控えいただくようお願いいたします。
他のユーザーの参考にもなりますので、プラグインの改修方法についての技術的な質問と回答という形でコミュニティを活用ください。
cybouzu Development team 様
大変ご迷惑をおかけしております。
まだ駆け出しで、kintoneAPIの技術的なことは勉強不足なところがあります。
なので、作成依頼に見受けられますが、中身をどのように改修したかを調べると大変勉強になっております。
koichiさんには大変お世話になっています。
以後、気を付けてまいりますが、kintoneさんで脱エクセルをうたっているので簡単に取り組めるかと思い始めたのですが、
意外と専門的なことが多く奥が深いです。
kintoneAPIなどのこういった技術的なことを勉強して自分で改修できるようにするにはどのような方法をとればよろしいでしょうか？
大変お手数ですがご教授お願いいたします。
Miyawaki 様
ご返答をありがとうございます。
kintone APIについての学習方法ですが、当サイトのチュートリアルをおすすめします。
kintoneカスタマイズ チュートリアルの進め方 https://developer.cybozu.io/hc/ja/articles/360024370392 を参考に、
はじめよう JavaScript はじめよう kintone API を実施ください。
チュートリアルの時点で難しかったり、当サイトの情報のみでは不足したりする場合は、
あわせて一般のJavaScriptやHTML,CSSの書籍等で学習することでチュートリアルの理解が深まります。
一般の書籍等については、他のユーザー様で学習に対して同様の状況と思われるコメントに対し、以下のようなアドバイスもあります。
ご参考になさってください。
https://developer.cybozu.io/hc/ja/community/posts/900001537506/comments/900000966963
チュートリアルが理解できましたら、koichi様の改修内容を参考に、ご自分で実装してみることも
今より難しくはないかと思います。プラグイン開発の手順については以下の記事を参考にしてください。
実装中、エラーが出た場合は以下の記事を参考に、デバッグをしてみてください。
デバッグした情報をもとにコミュニティで質問をすると、他の方でも回答がしやすくなるかと思います。
まだ来年の実施は未定ですが、数ヶ月に一度、弊社主催の勉強会もあります。開催情報は Webサイト や Twitterの @kintonedevjp でお知らせしております。
重複がありましたら申し訳ありませんが、今のところ必要そうな情報は以上になります。