jQuery UI は v1.13 をもってメンテナンスモードになりました。
レコード一括取得時にその結果が1万を超える可能性がある場合には、運用・適用中のプログラムのご確認ならびに修正対応の検討をお願いいたします。
詳細はこちらの記事を確認ください。
概要
こちらのサンプルは、予算管理アプリと実績管理アプリのデータを使って、予算/実績の差異と達成率を計算し、集計表に表示させるカスタマイズです。
カスタマイズビューという機能を利用し、一つの集計表にデータをまとめられるので、複数のアプリを確認したり、手動で集計したりする手間を省くことができます。
カスタマイズの適用方法は、「適用手順」をご参照ください。
完成形
デモ環境
こちらのデモ環境から実際に動作を確認できます。
(実績管理) https://dev-demo.cybozu.com/k/67/
(予算管理) https://dev-demo.cybozu.com/k/68/
デモ環境の利用は、事前に cybozu developer network のメンバー登録が必要です。画面右上の「サインイン」ボタンよりご登録ください。
デモ環境アカウントとパスワードは、サインイン後にこちらのページでご確認ください。
デモ環境アカウントとパスワードは、サインイン後にこちらのページでご確認ください。
事前準備
- kintone アプリ（kintone アプリストア にある「予算・実績管理」を使います）
※該当のアプリは、https://(サブドメイン).cybozu.com/k/#/market/ から追加できます。 - エディター
※エディターの準備についてはこちらご参照ください。
適用手順
今回のカスタマイズは、「実績管理」アプリに対して作業を行います。
カスタマイズビューの設定
アプリストアから「予算・実績管理」を追加した場合、この設定は不要です。
また、カスタマイズビューを作成するには、kintone の管理権限が必要です。
- 一覧を追加します。
- 新規に一覧を作成し「レコード一覧の表示形式」を「カスタマイズ」に設定します。
- HTML 欄に下記の HTML を入力し保存します。
カスタマイズビューの設定方法の詳細は、ヘルプの「カスタマイズする場合」の部分をご参照ください。
また、カスタマイズビューの使い方について、チュートリアル記事「カスタマイズビューを利用してみよう」により詳しい解説がありますので、
興味ある方はぜひそちらもご覧ください。
また、カスタマイズビューの使い方について、チュートリアル記事「カスタマイズビューを利用してみよう」により詳しい解説がありますので、
興味ある方はぜひそちらもご覧ください。
JavaScriptファイル / CSS ファイルの追加
カスタマイズに必要なライブラリを追加します。
- アプリの設定画面から、「JavaScript / CSS によるカスタマイズ」を開きます。
- 次の内容を設定します。
項目 設定する値 PC用のJavaScriptファイル 次の順で、URL およびファイルを指定します。 - https://js.cybozu.com/jquery/2.2.4/jquery.min.js
- https://js.cybozu.com/jqueryui/1.11.4/jquery-ui.min.js
- jquery.jqGrid.min.js ※
- grid.locale-ja.js ※
- sample_grid.js
サンプルプログラムのコードをエディターにコピーし、文字コードを「UTF-8（BOM無し）」、拡張子を「js」にしてファイルを保存します。
ファイル名は任意です。ここでは「sample_grid.js」としています。
PC用のCSSファイル 次の順で、URL およびファイルを指定します。 - https://js.cybozu.com/jqueryui/1.11.4/themes/redmond/jquery-ui.css
- ui.jqgrid.css ※
適用対象 カスタマイズを適用するユーザーやグループを選択します。
※ jqGrid について
カスタマイズで利用している jqGrid は、v4.7.1 以降 MIT ライセンスではなくなりました。
このカスタマイズでは、MIT / GPLv2 ライセンスである v4.7.0 を利用しています（ライセンス表記）。
v4.7.1 以降を利用する際は Guriddo の HP で有償ライセンスを購入し、ライセンス条件に従ってご利用ください。
詳細は、Cybozu CDN ライセンス対応ガイド をご参照ください。
このカスタマイズでは、MIT / GPLv2 ライセンスである v4.7.0 を利用しています（ライセンス表記）。
v4.7.1 以降を利用する際は Guriddo の HP で有償ライセンスを購入し、ライセンス条件に従ってご利用ください。
詳細は、Cybozu CDN ライセンス対応ガイド をご参照ください。
jqGrid は https://github.com/tonytomov/jqGrid/releases/tag/v4.7.0 の「Source code(zip)」からダウンロードしてください。
ダウンロードした zip ファイルを解凍した後、次のファイルを利用します。
- jquery.jqGrid.min.js：js > minified ディレクトリの下
- grid.locale-ja.js：js > i18n ディレクトリの下
- ui.jqgrid.css：css ディレクトリの下
サンプルプログラム
注意事項
- サンプルプログラムは、その動作を保証するものではありません
- サンプルプログラムの技術的なサポート等は行っていません
- kintone JavaScript API は非同期で実行されるため、XMLHttpRequest を使って同期処理しています。 処理中はブラウザがフリーズする場合があります。
また、XMLHttpRequest は利用できないブラウザもありますので、ご注意ください。
使用したAPI
- イベントハンドラーを登録する
- レコード一覧の表示後イベント
- アプリのIDを取得する
- ルックアップフィールドの参照先のアプリIDを取得する
- REST APIリクエストを送信する
- URL を取得する（クエリ文字列無し）
いつも大変お世話になっております。
こちらのサンプルを弊社用にカスタマイズし、利用しております。
達成率の部分なのですが、こちらの数字を「100%以下の場合赤文字にする」ということは可能でしょうか？
よろしくお願いします。
Eriko様
お世話になっております。
達成率を「100%以下の場合赤文字にする」件ですが、以下の方法で可能と考えます。
cybozu Development team 様
いつも大変お世話になります。
もう一つのTIPSでもお伝えしましたが、
当方初心者のため、大変お手数ではありますが上記のサンプルコードを頂くことは可能でしょうか？
ご迷惑をおかけしますが、よろしくお願いいたします。
Eriko様
先のご案内に誤りがありました。申し訳ありません。
$('.Difference_class').val() ではなく、達成率のため、$('.Achievemnet_class').val() がいいかと思います。
トリミングについては、developer network内のこちらの記事に参考になる方法がございます。
parseIntについては本記事の該当箇所をご参考ください。
ぜひお試しの上、またご不明な点がありましたらご連絡ください。
よろしくお願いいたします。
いつも参考にさせて頂いております。
実績管理アプリの集計を行うとき、例えば弊社では2000件くらいレコードがあり、
色々試したのですが全レコードの集計値を出すことができません。
(繰り返し処理無しの上限、500件までなら出来たのですが・・)
実績を全レコード集計する際のサンプルコードなどご教示頂けないでしょうか?
takashi 様
いつもお世話になっております。
もうし解釈がズレましたら申し訳ございません。
実績管理アプリの全レコードに対して集計を行いたいであれば、
本Tipsのサンプルコードの「予算管理アプリの全レコード取得」を参考して、
実績管理アプリの全レコードを取得することで、全レコード集計を行うことが可能かと思います。
ぜひお試しの上、またご不明な点がありましたらご連絡ください。
よろしくお願いします。
いつもお世話になっております。
こちらで下記の手順で実施してみましたが、予実管理に何も表示されていません。
①アプリ追加
②予算管理アプリにデータ一行追加
➂上記手順通り実績管理アプリを編集。
④実績管理アプリにデータ一行追加。
何か操作が間違ってますか。
以上、よろしくお願い申し上げます。
du様
いつもお世話になっております。
cybozu developer network運営事務局です。
こちらで記事通り作成してみたら、問題なく動作しました。
まず以下の3つの内容をご確認の上、それでも何も表示されないようでしたら、
差し支えなければ、各設定画面の画像を添付していただければと思います。
①アプリの設定＞JavaScript/CSSカスタマイズで記事にある画像の順番通り、
ライブラリ、JS,CSSファイルを適用したのかをもう一度ご確認ください。
②またライブラリをURL指定してアップロードする時に、
https://が重複して記入されていないかご確認ください。
③アプリの設定＞一覧の設定で、カスタマイズビューのHTML部分に
入れたコードに記述ミスがないかもう一度ご確認ください。
よろしくお願いします。
お疲れ様です。
ご回答ありがとうございます。
最初はサンプルJSをローカルからアップロードする形で、結果は失敗しましたが、
先ほど、DropboxにサンプルJSをアップして、URLを設定する形で、成功しました。
ローカルからアップする方法は何かほかの設定が必要でしょうか？
以上、よろしくお願い申し上げます。
du様
お世話になっております。
＞ローカルからアップする方法は何かほかの設定が必要でしょうか？
こちらについてですが、ファイルをアップロードする以外に他の設定は必要ありません。
アプリの設定＞JavaScript/CSSカスタマイズ＞PC用のJavaScriptファイルの方に
作成したJSファイルをアップロードして、保存＞アプリ更新をクリックするという手順になります。
(※一覧でのカスタマイズビューの設定や、ライブラリの指定は完了したことを前提にしています。)
アプリの設定＞JavaScript/CSSカスタマイズ＞適用範囲に「すべてのユーザーに適用」、
もしくは、「アプリ管理者だけに適用」に設定されているかご確認ください。
よろしくお願いいたします。
いつもお世話になっております。このサイトで素人ながらメンバーでいつもJavaScriptを勉強させて頂いております。
機能拡張の件ですが、予算管理アプリのフォームの内容を「拠点」「予算」に「予算年月」「予算項目」を追加し、実績管理アプリの「予算実績一覧」に「拠点」「予算年月」「予算項目」毎に予算/実績/差異/達成率が出るようにしたいと思いっています。
現在「予算実績一覧」に「拠点」「予算年月」「予算項目」「予算」までは正しく出るようにしたのですが、「実績」が元のまま「拠点」合計額がそれぞれに出てしまっています。
下記lsファイルの中ほどのkey3の「実績合計」当りのところだと思うのですが、内容が理解できておらず修正出来ません。ご教授お願い致します。
（修正したSample.grid.jsは以下の通り）
---------------------------------------------------------------------------------
//予実管理データのカスタマイズビュー用データの作成
function makeYojitsuData(records, opt_data, opt_i) {
var i = opt_i || 0; //レコードのカウント
var allData = opt_data || []; //予実の集計結果
var appId = kintone.app.getId(); //実績管理アプリID
var key1, key2, key3, key4, key5, key6, key7;
key1 = records[i]['拠点']['value'];
key1 = key1.replace(/</g, "<").replace(/>/g, ">");
key6 = records[i]['予算年月']['value'];
key6 = key6.replace(/</g, "<").replace(/>/g, ">");
key7 = records[i]['予算項目']['value'];
key7 = key7.replace(/</g, "<").replace(/>/g, ">");
key2 = records[i]['予算']['value'];
// var params = {'app': appId, 'query': '拠点 = "' + key1 + '"'};
var params = {'app': appId, 'query': '拠点 = "' + key1 + '"', 'query1': '予算年月 = "' + key6 + '"', 'query2': '予算項目 = "' + key7 + '"' };
return kintone.api('/k/v1/records', 'GET', params).then(function(resp) {
if (resp.records) {
key3 = 0;
var obj = resp.records;
for (var j = 0; j < obj.length; j++) {
key3 += parseInt(obj[j]['実績合計']['value'], 10);
}
key4 = parseInt(key3, 10) - parseInt(key2, 10);
key5 = parseInt(key3, 10) / parseInt(key2, 10) * 100;
key5 = key5.toFixed(2);
key5 += "%";
allData.push({segment: key1, yyyymm: key6, item: key7, budget: key2, results: key3, Difference: key4, AchievementRate: key5});
}else {
event.error = '実績管理情報が取得できません。';
}
i = i + 1;
if (records.length !== i) {
return makeYojitsuData(records, allData, i);
}
return allData;
});
}
--------------------------------------------------------------------------------------
もつくん 様
お世話になっております。
cybozu developer network運営事務局です。
ご質問の内容が記事のシナリオと異なる場合、コミュニティでの質問をお願いしております。
お手数ですが以下のコミュニティで再度ご投稿をお願いします。
「JavaScript developer 向けフォーラム」
https://developer.cybozu.io/hc/ja/community/topics/200034345
cybozu developer network運営事務局様
失礼しました。改めてコミュニティの方で質問させて頂きます。
ありがとうございました。
ご質問があるのですが、実績管理のJavaScript サンプルコードをコピーして、
カスタマイズ画面から、PC用のJavaScriptファイルにJSEdit for kintoneより保存したものを入れたのですが、画面に反映しません。
何か間違っているのでしょうか。教えていただけると助かります。
ポム 様
こちらでカスタマイズ内容を確認したところ、正常に表示することが可能だったため、
カスタマイズ一覧の設定や、その他カスタマイズの設定等お間違いがないか今一度ご確認お願い致します。
また、カスタマイズ部分で不明点があった際は コミュニティをご活用ください
どうぞよろしくお願い致します。
こちらのカスタマイズでは実績を入力する方法が、拠点ごとにレコードを作成して、その中のサブテーブルで
実績とその金額を行ごとに入力していると思います。
その方法ではなく、実績ごとにレコードを作成して、それに拠点を追加していきたいのですが、
（1レコード内において、前者 拠点：実績＝1：N、後者 拠点：実績＝1：1）
それで問題なくカスタマイズビューにおいて拠点ごとに集計はちゃんとできるでしょうか？
大変お手数をおかけしますが、ご教示のほどよろしくお願いいたします。
kyoden 様
お世話になっております。cybozu developer network 運営事務局です
こちらは記事に対するフィードバックの欄となっておりますため、
記事の内容の発展などのご質問は、大変お手数ですがコミュニティにお願いできますでしょうか。
コミュニティのほうが多くの方がご覧になっているため、アドバイスも得やすいかと思います。
いつもお世話になっております。
以下、2点を変更・追加したく自身で試してみたのですが正解が分からず・・・
ご教示いただけませんでしょうか？
山崎様
お世話になっております。cybozu developer network 運営でございます。
コメント欄右記に記載があります通り、
記事の発展的な質問に関してはコミュニティをご活用ください。
以上、よろしくお願いいたします。
お世話になります。下記ご教示いただけるとありがたいです。
こちらの知識不足でしたらすみません。記述のコード「予算管理アプリを全レコード取得」の箇所でfetchRecordsのappIdは引数として必要でしょうか？
関数の中で、実績管理アプリのIDは使われていないように見えますが、指定している理由があれば教えていただけると勉強になります。よろしくお願いいたします。
Zono 様
お世話になっております。cybozu developer network 運営チームです。
ご指摘の通り、fetchRecords の appId は利用されていなかったため、ソースコードを修正しました。
ご連絡いただきありがとうございました。
今後ともよろしくお願いいたします。
いつもお世話になっております。
生成したテーブルの昇順と降順はどうやって設定できますか。
よろしくお願いいたします。
minhlongjapan 様
お世話になっております。cybozu developer network 事務局です。
こちらのコメント欄は、記事へのフィードバックを目的としております。
恐れ入りますが、記事の内容から発展した内容についての質問は コミュニティ をご活用ください。
いつもお世話になっております。
本ページ、適用手順の「カスタマイズビューの設定」の項目で、
「3.HTML 欄に下記の HTML を入力し保存します。」とありますが
HTMLの記載を見つけることができません。
ご教示いただけますでしょうか？
Nagata 様
お世話になっております。cybozu developer network 事務局です。
HTMLのサンプルを漏れておりまして、大変申し訳ありませんでした。
記事を修正いたしましたので、ご確認いただけますでしょうか？
よろしくお願いします。
早速ご確認下さりありがとうございました。
お手数をおかけいたしました。
お世話になっております。
超初心者なのですが、初心者なりに上記のカスタマイズビューを試しましたが、何も変わりませんでした。
根本的になにかが足りていないのだと思うのですが、そこすらわからない状況です。
大変恐縮ではございますが、ご教示いただけますと幸いです。
何卒よろしくお願い申し上げます。
状況
私自身は共有管理者です。
JSEdit for kintoneを入れ、上記の指示通り、一覧のカスタマイズ画面で、コードを入力し、上記の指示通りにjqGrid-4.7.0をDL後解凍し、指定のファイルをアップロード、URLの入力はしています。（サンプルコードをテキストに入力し、保存してアップロードしました。）
笹 史明 様
お世話になっております。cybozu developer network 運営でございます。
念の為、こちらの環境でも記事通りに設定し試したところ無事動作しました。
一部設定に誤り等がある可能性が高いかと存じます。
JSの設定がこちらの画像の通りになっているか、
カスタマイズビューの設定等ができているかなどを今一度ご確認いただければと存じます。
（通常の一覧が表示されているのであればカスタマイズビューが表示されていない可能性が高いです。カスタマイズビューを表示してJS等に問題がある場合は一覧は表示されない状態になります。）
また、恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
試してもまだ解決しないなどありましたら、ご質問はcybozu developer コミュニティをご活用ください。
その際はカスタマイズデバッグまとめ記事をご参照いただき、エラーが何か発生していないかなどの詳細もご記載いただくと回答が集まりやすいかと存じます。
以上、よろしくお願い致します。