cybozu Development team様
お世話になっております。
ご投稿の旨、ご指摘いただきありがとうございます。以後、投稿内容には注意いたします。
Miyawaki様
上記の通り、当コミュニティでの改修という形の投稿は、以後控えさせていただきます。
Miyawaki様にてコードのご確認・修正いただけますと幸いです。
もし改修が難しい場合、開発要望という点では、サイボウズ様のパートナーSIer様にご相談されるのも一つの手かと存じます。
なお、先に頂いた質問につきましては、下記ご参考ください。
いずれも、プラグイン内のdesktop-ganttchart.jsのコード修正で可能と思います。
①function createRecords1の定義内でキーワードを部分一致するようにコード修正すれば可能と思います。
②kintone.events.on(‘app.record.index.show’, function(event) {}内で既存の検索ボックスと同じものを複製いただければ、
2つめの小項目についても検索できる仕組みを作れると思います。
③getRecordsData内でデータを取得する順番を変える（取得した順番にガントチャートは並びます）
あるいは、取得した後にそのデータ配列を納期順にソートすることで、昇順／降順を変えられると思います。
koichi様
お世話になっています
desktop-ganttchart.jsのコードを見て改修作業をやってみています
ですが、どれをどのように修正したらいいのかまだ全くわからない状況です
①は433行からの部分
function createRecords1() {
for (var i2 = 0; i2 < records.length; i2++) {
var subTable = records[i2].Table.value;
var firstFlg = true;
for (var j = 0; j < subTable.length; j++) {
の部分を見ています
申し訳ないですが、どの行のどの部分をどのように書き換えたら完全一致条件を部分一致条件になりますでしょうか？
②は307行目の部分～349行目の
kintone.events.on(‘app.record.index.show’, function(event) {
var searchItem = ‘’;
if (sessionStorage.getItem(‘searchItem’)) {
searchItem = sessionStorage.getItem(‘searchItem’);
}
・・・
｝までだと思いますが、この部分を見ています
何行目から何行目を複製して何行目にどのように修正して挿入したらいいでしょうか？
③の件に関しましては検索条件にソート順の条件を加えることでできました！
もし、以上の質問にお答えすることが不可能であれば、このような質問も以後控えさせていただきます
まだまだ勉強不足で申し訳ありません。
koichiさんにお手数をおかけしますが、ご教授の程よろしくお願いいたします。
Miyawaki様
ご返信遅くなりました。下記ご参考になれば幸いです。
先に②検索ボックスの複製から書きます。
searchItemと$myInputの定義を複製します。
区別しやすいように、変数名の末尾に1と2をつけるようにしました。
var searchItem1 = '';
if (sessionStorage.getItem('searchItem1')) {
searchItem1 = sessionStorage.getItem('searchItem1');
}
var searchItem2 = '';
if (sessionStorage.getItem('searchItem2')) {
searchItem2 = sessionStorage.getItem('searchItem2');
}
var conf = kintone.plugin.app.getConfig(PLUGIN_ID);
if (conf.fieldNameColor.indexOf('[Table]') === 0) {
if ($('#input-search-item1')[0]) {
return;
}
// サブタイトル1の検索ボックス
var $myInput1 = $('<input>', {
id:'input-search-item1',
type:'text',
placeholder:'サブタイトル1：半角カンマ(,)で複数抽出'
});
$myInput1.val(searchItem1);
// サブタイトル2の検索ボックス
var $myInput2 = $('<input>', {
id:'input-search-item2',
type:'text',
placeholder:'サブタイトル2：半角カンマ(,)で複数抽出'
});
$myInput2.val(searchItem2);
var $myButton = $('<button>', {
id:'button-search-item',
text:'抽出'
}).click(function() {
sessionStorage.setItem('searchItem1', $myInput1.val());
sessionStorage.setItem('searchItem2', $myInput2.val());
if (!self.settings.config) {
return;
}
if (typeofself.settings.config.settingColors === 'string') {
self.initSetting();
}
var ganttBox = self.uiCreateGanttBox();
self.data = [];
self.getRecordsData(event.records, $myInput1.val(), $myInput2.val(), ganttBox, function() {
// Put to jquery gantt and render
self.gantt(ganttBox);
});
});
$(kintone.app.getHeaderSpaceElement()).append($myInput1);
$(kintone.app.getHeaderSpaceElement()).append($myInput2);
$(kintone.app.getHeaderSpaceElement()).append($myButton);
}
①検索キーワードの部分一致は、function createRecords1の定義内を変更します。
「if (配列.indexOf(文字列)) != -1」で、「配列」内に「文字列」が含まれている場合にtrueになります。
半角カンマで、複数指定できることから、ここではfor文も使います。
キーワード配列searchItemArray1内のいずれかのキーワードに部分一致（true）した場合、
かつ
キーワード配列searchItemArray2内のいずれかのキーワードに部分一致（true）した場合に、
ガントチャートに表示するようにしています。
// Check the desc.
var searchItemArray1 = searchItem1.split(',');
var searchItemArray2 = searchItem2.split(',');
var flag1 = false;
var flag2 = false;
for (var i = 0; i < searchItemArray1.length; i++) {
if (subTable[j].value[GANTT_DESC].value.indexOf(searchItemArray1[i]) != -1) {
flag1 = true;
}
}
for (var i = 0; i < searchItemArray2.length; i++) {
if (subTable[j].value[GANTT_DESC2].value.indexOf(searchItemArray2[i]) != -1) {
flag2 = true;
}
}
if ((!searchItem1 && !searchItem2) || (flag1 && flag2)) {
koichiさん
返事遅れました。
お忙し中ご検討ならびにご回答ありがとうございます。
教えていただいた内容でこちらで対応してみようと思います。
また別件質問です。
1：同一ドメイン内で私のIDでアプリを開くと100件表示されますが、他のIDのユーザーからこのガントチャートが入っているアプリを開くと、ガントチャート表示が25件程度しか見れないですが、他の人も同様に100件表示にするにはどのようにしたらいいでしょうか？
2：このガントチャートを使用するとレコード数が1000件を超えると表示されないとか、kintoneのシステムがアップデートされることによってこのガントチャートがみられなくなったりとかする可能性はありますでしょうか？
またご都合の良いときにご教授いただければ幸いです。
よろしくお願いいたします。
Miyawakiさん
１については、レコード一覧画面の表示件数によるものではないかと思います。
一覧画面右のオプションアイコンより、表示件数を変えてみてください。
２については、レコード一覧画面の１ページに表示できる上限が100件であるため、現在の仕様のようにガントチャートの下にレコード一覧表を表示させるとなると、これが上限になると思います。
勿論、ガントチャートの表示は、全件を対象に描画することは可能と思います。
（現仕様でも、ガントチャートの表示上限は100件以上だったかもしれません。）
kintoneのシステムアップデートにより動かなくなる可能性はあります。
これはどのプラグインにも言えますので、大規模なアップデートがある際には注意が必要です。
koichiさん
おひさしぶりです。
以前ガントチャートサンプルプラグインでお世話になりました
いろいろとこのガントチャートサンプルプラグインでkoichiさんにアドバイスいただいた通り自分なりに開発を進めていましたが、最後の投稿にあるkintoneのシステムアップデートにより動かなくなる可能性があると伺ってから、システムアップデートに対応した有償ガントチャートプラグインを導入して使用を試みましたが、こちらのガントチャートサンプルプラグインのような優秀なガントチャートプラグインを探し出すことに至らずで困っています。こちらのガントチャートサンプルプラグインのようなガントチャートプラグインでシステムアップデートに対応した有償ガントチャートプラグインをもし知っておられたら紹介いただきたいのですが、ご教示いただけますでしょうか？よろしくお願いいたします。
Miyawakiさん
ご無沙汰しております。ご連絡ありがとうございます。
有償のものと言いますと「KOUTEI」でしょうか。
恐らくkintoneと連携するものでは、こちらが最も有名なものと思います。
私も公式サイトで見た限りで、使ったことはなく使用感は分からないのですが。
あとは、gusuku Customineの中にもガントチャートがあるようです。
いずれにしてもkintone上で動く以上は、上記製品もkintoneのアップデートに依存するものになりますので
この対応をユーザー側でされるか、メーカー側でされるか、という違いになるかと思います。
Miyawakiさん（または貴社内）でカスタマイズから運用保守まで内製化されることが一番と思いますが
難しい場合はパートナー様にお願いするというのも一つの手です。
有償にはなると思いますが、保守まで対応してもらえるところもあるでしょうし
貴社オリジナルガントチャートとして、継続して使えるものにもなると思います。
koichiさん
ご連絡ありがとうございます
「KOUTEI」を導入してみましたがkoichiさんにアドバイスいただいて作成したガントチャートのの方が現段階では完成度が高く現在も仮運用ではありますがそちらを使用中です。現在koichiさんから紹介を受けた「SAMPLE_gantt_plugin_v2.1_7_20201103」のバージョンで仮運用していますが、developernetworkに掲載のバージョンが「SAMPLE_gantt_plugin_v2.2」と上がっているようですが、小項目検索ボックス機能はついているものでバージョンアップされているのでしょうか？
またいろいろとkoichiさんに尋ねたいのですが、ここではなく直接メール等で問い合わせることは可能でしょうか？
以上よろしくお願いします
Miyawakiさん
記事を見たところ、v2.2は開始日が入っていないときの表示不具合の修正版のようですね。
元々のv2.1からさほど大きな仕様変更は成されていないものと思います。
当サイトの利用規約上、メールアドレス等の情報は公開できない規定となっておりますので
恐れ入りますがご了承ください。
koichiさん
なんとかkoichiさんにいろいろ伺いたかったのですが、ご無理言いまして申し訳ありません。
現在学習中であります。またいろいろ伺いますので何卒よろしくご教示お願いいたします。
このカントチャートサンプルプラグインに表示されるカレンダーは西暦何年まで表示対応していますか？
Miyawakiさん
2100年の日付を入れてみて動きましたので、少なくとも先100年は大丈夫と思います。
但し、入れ込む件数が多くなれば多くなるほど、ガントチャートの描画にかかる時間が長くなりますので
件数と描画時間の兼ね合いを見て、定期的に古いレコードは削除するなど対応いただいた方が良いかもしれません。
koichiさん
ご連絡ありがとうございます
とりあえずシステムアップデートに対応した有償ガントチャートプラグインを導入して使用しよう始めましたが、いろいろと制限があり、自分たちの意図したものにはなかなか近づけることが難しいと思っているところです。まだまだ勉強中ですがcybozu developer network 事務局さんやkoichiさんの言う通りカスタマイズから運用保守まで内製化を目指した方がいいと思いますが、なにも知識がない人がkintone APIやJAVAsqriptなどを勉強してカスタマイズから運用保守までできるようになるには、どのくらいの時間を要すればkoichiさんのようにカスタマイズできるようになりますか？koichiさんの個人的な見解でアドバイスいただきたいです。よろしくお願いいたします。
Miyawakiさん
個人的な見解で申し上げますと、プログラミング経験ゼロの場合、基礎レベルを習得するのに200〜300時間かかると言われています。この度のようなガントチャートを作成するまで習得するとなると、その10倍の時間は要すると考えます。
というのも、JavaScriptだけでなくHTMLやCSSといった色々なスキルが必要になるためです。
内製化であってもデメリットもあります。
上記の通り、習得に係る時間的コストもありますし、マスターされた方が退職されると振り出しです。
そのような点も考慮いただき、パートナー様へご相談いただくという選択肢もご検討いただくと良いかと思います。
私も小さな会社の開発部門にいる者ですので、最悪自分が対応できなくなったら…ということを考えつつ、パートナー様とのコネクションも持つようにしています。
少し横道にそれてしまいました。
以前もご紹介したかもしれませんが、kintoneのカスタマイズに関しては、まずは当サイトのチュートリアルをひと通りマスターされることをお勧めします。
また、少々このdevnetの主旨からそれたやり取りになりつつあるため、技術以外のことは、別にキンコミというコミュニティもありますので、こちらでご質問いただくと色々なご意見を頂けると思います。
koichiさん
いつもありがとうございます。
koichiさんからアドバイスいただいた通り、現在devenetチュートリアルで約50時間ほど勉強しました。そしてdeveCampの勉強会にも参加して、まだまだ勉強途中ですが何となく基礎的なことがだんだんわかってきました。
そこで、一通りdevenetの勉強が完了したときに2020/11/28のkoichiさんからアドバイスいただきました①と②をコードをカスタマイズしてみようと思います。
カスタマイズコードは以前いただいたプラグイン「SAMPLE_gantt_plugin_v2.1_7_20201103」の中にある「desktop-ganttchart.js」をカスタマイズすることになりますが、カスタマイズする前に確認ですが、この.jsをエディタなどでカスタマイズして再びその場所に同じ名前で保存すれば、カスタマイズ内容が反映されるという認識でよかったでしょうか？
あと、①の条件検索を複数選択で決められたものを選択して検索できるようにしたいのですが、そういうのは可能でしょうか？
古い話を持ち出して申し訳ありませんが、ご教授よろしくお願いいたします。
Miyawakiさん
勉強を進められているとのこと素晴らしいです。
SAMPLE_gantt_plugin_v2.1_7_20201103.zipを解凍するとcontentsフォルダがあると思います。
.jsを編集した後、このcontentsフォルダごとプラグイン化する必要があります。
プラグイン化については、以下ご参照ください。
以下でフォルダから簡単にプラグイン化することができます。
https://plugin-packer.kintone.dev/
※プラグイン化すると、私が添付したプラグインとは別物として生成されるため
kintoneアプリ上でプラグインの再設定が必要です。
もしくはプラグイン化せず、.jsをアプリのjavascriptに適用するという方法もあります。
この場合は、プラグインの設定画面で定義しているフィールド等を.js内で定義しなおす必要があります。
条件検索を複数選択にする場合
現在はテキストボックスだったと思いますが、これをチェックボックス等に変えてあげるといけると思います。
koichiさん
ご回答ありがとうございました。
まだ勉強不足なのでもう少しご教示いただきたいです
次のやり方であっているかどうか確認をお願いします
①SAMPLE_gantt_plugin_v2.1_7_20201103.zipを解凍し、contentsフォルダも解凍し、「desktop-ganttchart.js」をエディタを使って編集し、以前の.jsのバックアップを取りつつ編集した.jsを上書き保存します
②もともとあったようにcontensフォルダをzipで圧縮し、「SAMPLE_gantt_plugin_v2.1_7_20201103」を適当に「SAMPLE_gantt_plugin_v2.1_7_custom_20211122」と名前を変えてzipで圧縮します
③https://plugin-packer.kintone.dev/ を開いてその新しくカスタマイズした「SAMPLE_gantt_plugin_v2.1_7_custom_20211122」.zipを左側の囲いにドラッグアンドドロップし、青いボタンをクリックします
④生成されたプラグイン.zipとプライベート.ppkをダウンロードします
⑤kintonneのプラグインで再設定して使用
どんな処理が行われているか全然わかりませんが、こんな感じでよかったでしょうか？
Miyawakiさん
ご記載の流れで問題ありません。
②zip圧縮せず、③フォルダごと放り込んでも良いと思いますよ。
以降、.jsを修正する度に同様の流れになりますが
④でダウンロードした.ppkを③でフォルダと一緒に放り込むと
アプリ設定のプラグインを再設定する手間がなくなります（同じプラグインとして認識されます）。
※kintoneシステム設定のプラグインは再読み込みする必要はあります。
koichiさん
ご回答ありがとうございます。本当に助かります！
ちなみにppkを放り込むと・・・のことで、質問ですが、現在開発中のアプリと運用中アプリが存在していて、開発中アプリを運用中アプリから複製してカスタマイズを行い開発アプリとしていこうとしています。開発中アプリでppkを放り込んで作ったフォルダでプラグインすると、運用中アプリに何か影響がでますでしょうか？
やったことないのですが、すでに入っているSAMPLE_gantt_plugin_v2.1_7_20201103.zipのプラグインにkintoneシステム管理から別の新しいガントチャートプラグインを読み込んだ場合、もともとあるガントチャートプラグインと新しく入ったガントチャートプラグインとそれぞれ違うものとして認識するのでしょうか？
何度も申し訳ありません。koichiさんがいなければここまでこれませんでした。またご教示いただきたくお願いします
Miyawakiさん
v2.1_7_20201103.zipプラグインとMiyawakiさんが今回作成したプラグインは
ppkが異なるため、別物として認識されます。
運用中アプリはv2.1_7_20201103.zip、開発中アプリはMiyawakiさんプラグインとして分ければ
開発中のプラグインを更新しても、運用中の方には影響はありません。