cybozu developer network

カテゴリー内の他の記事

予算と実績をリアルタイムに把握する経費精算システムパッケージ

jQuery UI は v1.13 をもってメンテナンスモードになりました。
Moment.js はメンテナンスモードになり、日付処理できる代替ライブラリへの移行が推奨されています。
代替ライブラリのひとつ Luxon については、kintone カスタマイズでの導入方法の紹介記事があります。

Index

概要

交通費申請、支払申請、立替申請、出張申請など、経費に関する申請を行うアプリ群のサンプルです。

経費申請に紙や Excel を使っていたり、個々の連携していないシステムを利用している企業向けの、 いつでもどこでも申請及び承認ができ、リアルタイムに予実を共有することができるアプリパッケージです。

経費精算システムアプリ関連図

下記の図のように、経費精算システムは以下の8個のアプリで構成されています。

アプリ間の関係を表した図

 

各アプリの概要

予実マスタ

最新の予算と実績集計結果を登録/閲覧するアプリです。

ポイント

  • 年度単位で部署ごとの予算、実績、差異を並べて表示するカスタムビューを用意しています。
  • カスタムビューでは、実績金額をクリックすると集計対象となっている申請の一覧がポップアップで表示されます。
  • 詳細画面に表示されるカスタムビューでは、実績に事前申請や出張申請の金額が含まれている場合にセルの背景がピンクになります。
  • 個人設定アプリで集計権限「有」と設定されているユーザーの画面には集計ボタンが表示され、月を指定して実績を再集計したり、実績を確定する処理を行うことができます。
  • 予算番号は、会計年度マスタに設定している年度が異なれば、同じ予算番号を使うことができます。

予実マスタの表示例

支払/立替申請アプリ

事前申請及び支払や立替の申請とその承認を行うアプリです。

ポイント

  • 事前申請から支払及び立替申請までを1レコード行います。
  • 一つの申請は、同一支払月の申請となります。
  • 指定した予算ごとに事前申請の有無を判断し、事前申請が不要な申請は支払及び立替申請から申請可能です。
  • 税抜/税込のどちらの金額で申請しても、自動で税抜金額が実績として集計されます。
  • 事前申請承認した時と支払申請承認した時に、自動で実績が集計され、予実マスタの実績欄に反映されます。
    • スマホビューから承認した場合は、集計されないのでご注意ください。

支払/立替申請アプリの表示例

交通費申請申請アプリ

立替えた交通費の申請とその承認を行うアプリでです。

ポイント

  • 1ヶ月分の交通費を申請します。
    • 月をまたいだ申請はできません。
  • 負担部署単位に設定されている交通費用の予算を自動的に選択して申請するため、予算番号を選択する必要がありません。
  • 自動で交通費の税抜価格を実績として集計します。
  • 申請を承認した時に、自動で実績が集計され、予実マスタの実績欄に反映されます。
    • スマホビューから承認した場合は、集計されないのでご注意ください。

交通費申請申請アプリの表示例

出張/支払申請アプリ

出張申請及び支払いや立替申請とその承認を行うアプリです。

ポイント

  • 出張申請及び支払いや立替申請とその承認を行うアプリです。
  • 一つの申請は、同一支払月の申請となります。
  • 税抜/税込のどちらの金額で申請しても、自動で税抜金額が実績として集計されます。
  • 出張申請承認した時と支払申請承認した時に、自動で実績が集計され、予実マスタの実績欄に反映されます。
    • スマホビューから承認した場合は、集計されないのでご注意ください。

出張/支払申請アプリの表示例

その他マスタアプリ

会計年度マスタ

  • 企業ごとに異なる会計年度の開始月、終了月に対応します。
  • ルックアップの元として、各アプリでの会計年度入力の際の表記の揺れを防ぎます。
  • 各申請の予算と申請内容の会計年度が一致しているかのチェックの際に参照します。
  • 実績が確定した、最新の月を管理します。

組織マスタ

  • 予算の負担部署を管理します。
  • ルックアップ元として、各申請アプリと予実マスタアプリで負担部署組織を選択入力できるようにします。

個人設定

  • 各申請アプリの負担部署と承認者の初期値を管理します。
  • 予実マスタアプリでの、実績集計権限の有無を管理します。

集計日時管理

  • 予実マスタアプリに表示する、最終集計日時を管理します。
  • 予実マスタアプリで集計を実行したタイミングでレコードを自動的に作成しています。

事前準備

STEP1:テンプレートを読み込む

添付のアプリテンプレートファイルから、kintoneアプリを新規作成します。
手順は、kintoneヘルプ「テンプレートファイルからアプリを作成する」を参照してください。
※アプリをスペース上に配置したい場合は、先にスペースを作成してからスペースにアプリを追加してください。
手順は、kintoneヘルプ「スペースを作成する」「スペースにアプリを作成する」を参照。

STEP2:アプリ番号を管理しているJavaScriptプログラムを更新する

expenses_common.js

各アプリに設定されているこのファイルを、該当のアプリ番号で書き換えてください。

  • 会計年度マスタ→AID_NENDO
  • 個人設定→AID_USER
  • 組織マスタ→AID_ORG
  • 予実マスタ→AID_BUD
  • 集計日時管理→AID_CALC
  • 支払/立替申請→AID_PAY
  • 交通費申請→AID_MOVE
  • 出張/支払→AID_TRIP

STEP3:アプリの設定を行う

以下の設定を行置います。

  • 申請系アプリの申請No.に自動採番プラグインを設定する。
  • ドロップダウン項目の選択肢を必要に応じて設定する。
  • ルックアップの絞込やソート順を必要に応じて設定する。
  • 必要に応じてアクセス権や通知を設定する。

STEP4:マスタデータを登録する

※ルックアップを使っているため、以下の順番で登録するとスムーズです。

  • 組織マスタに組織を登録する。
  • 会計年度に年度を登録する。
  • 個人設定を登録する。
  • 予実マスタに予算を登録する。

注意事項/補足

注意事項

  • 支払/立替申請では、複数の予算に対する申請を一つの申請にまとめることができますが、事前申請有の予算と事前申請無の予算を同じ申請にまとめることはkintoneプロセス管理の仕様上、オペレーションが複雑になるため、お控えください。
  • 申請アプリのレコードを削除すると、集計が正しく行われなくなる可能性があります。レコードの削除権限はアクセス権で適宜制御することをお勧めします。
  • プロセスの更新毎に実績の集計と予実マスタへの更新を行うため、予実マスタのレコードの編集権限は全員に必要です。編集権限がないユーザーは正しく動作しません。
  • 自動採番プラグインはレコードのアクセス権に対応しておりません。
  • 申請アプリのアクセス権について
    • 更新履歴の過去バージョンに戻す機能使って承認後のデータを変更することが可能になります。変更履歴機能を無効にすることを推奨します。
    • 申請後に金額等の項目を変更できないカスタマイズをしていますが、REST APIを直接叩くことでデータを変更することが可能です。考慮が必要な場合は、以下の対応などをご検討ください。
      • サンプルで1アプリにまとめている出張申請と支払申請や事前申請と支払申請をそれぞれ別アプリに分け、フィールドのアクセス権は標準機能を使って制御する
      • 実績集計のプログラムを上記の対応に合わせて変更するか、外部のDBを使って集計処理を行う。
  • モバイル利用について
    • PC画面からのみ使用できるAPIを使用しているため、モバイルビューで承認した場合には自動で集計されません。モバイルからもPCビューを使うことをお勧めします。

補足

  • 各会社の運用に応じて項目を追加したり、フィールド名や配置を変更するなどしてご利用いただくことが可能です。
  • 運用に合わせて追加でカスタマイズしてお使いいただくことも可能です。
  • ただし、既存の項目はカスタマイズで利用してる可能性があるため、削除したりフィールドコードを変更することや、プロセスの設定を変更することはお控えください。

サンプルプログラム/データ

カスタマイズで利用している jqGrid は、v4.7.1 以降 MIT ライセンスではなくなりました。
このカスタマイズでは、MIT / GPLv2 ライセンスである v4.7.0 を利用しています(ライセンス表記)。
v4.7.1 以降を利用する際は Guriddo の HP で有償ライセンスを購入し、ライセンス条件に従ってご利用ください。

カスタマイズで利用している Handsontable は、v7.0.0 以降 MIT ライセンスではなくなりました。
このカスタマイズでは、MIT ライセンスである v0.20.1 を利用しています(ライセンス表記)。
v7.0.0 以降を利用する際は Handsontable の HP で有償ライセンスを購入し、ライセンス条件に従ってご利用ください。

詳細は、Cybozu CDN ライセンス対応ガイド をご参照ください。

経費精算システムテンプレート

サンプルデータ

更新履歴

  • 2020年10月05日
    jqGrid を v4.7.1 に差し替え
  • 2020年11月18日
    jqGrid を v4.7.0 に差し替え
  • 2021年8月31日
    サンプルプログラムの不具合を修正

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

Avatar
masaaki

経費精算システムテンプレートをダウンロードすると。

ファイル名が、パッケージ版経費精算システム.sptpl となってしまって読み込めない。。

Avatar
cybozu development team

masaakiさん

こちらはアプリではなくスペースのテンプレートとなっております。

Avatar
katsuo

交通費申請の自動採番が動きません。原因わかりますでしょうか。

 

Avatar
cybozu Development team

kausoさま

cybozu developer networkをご利用いただき、ありがとうございます。cybozu developer network運営事務局です。

お問い合わせの件ですが、弊社でも確認させていただきましたところ、交通費申請アプリも自動採番されました。

コンソールに何らかのエラーが出ていないかご確認いただけますでしょうか。お手数をおかけいたしますが、よろしくお願いいたします。

 

Avatar
katsuo

再インストールしてみます。

expenses_common.jsのアプリ番号とはアプリのIDのことで合ってますか。

アプリ番号はどこで確認できますか。

Avatar
cybozu Development team

katsuoさま

お世話になっております。cybozu developer network運営事務局です。

ご指摘の通り、アプリ番号=アプリIDで、URLから確認できます。

https://XXX.cybozu.com/k/アプリID/

このk/の後の数字がアプリIDとなります。

よろしくお願いいたします。

Avatar
Yasuhiro K

1点教えてください。

経費精算テンプレートをダウンロードして、kintoneシステム管理画面でスペーステンプレートをインポートしたのですが、下記のエラーがでてインポートされません。

対応方法を教えてください。

  • テンプレートファイルが古いため、読み込めません。
  • (GAIA_IM02 G2y9YYlZrHsFFwW94zDr)
Avatar
cybozu Development team

Yasuhiro K 様

お世話になっております。cybozu developer network運営事務局です。

スペーステンプレートのバージョンが古く、利用できない状態となっておりました。
記事に添付しておりますテンプレートを更新しましたので、再度お試しいただけますでしょうか。

お手数をおかけして申し訳ございません。
よろしくお願いいたします。

Avatar
Y Aoki

同じく、

経費精算テンプレートをダウンロードして、kintoneシステム管理画面でスペーステンプレートをインポートしたのですが、下記のエラーがでてインポートされません。

対応方法を教えてください。

エラー

  • テンプレートファイルが古いため、読み込めません。
  • (GAIA_IM02 ALesmc6ckLb5pLqL2Cm6)
Avatar
cybozu Development team


Y Aoki 様

お世話になっております。cybozu developer network運営事務局です。

テンプレートファイルを更新しましたので、お手数ですが再度読み込みをお願いします。

Avatar
Dev

お世話になります。

テンプレートをインストールしたのですが、

STEP2 にある、「expenses_common.js 各アプリに設定されているこのファイルを」の部分がわかりません。

どこで設定されているのでしょう。

 

Avatar
cybozu Development team

Dev 様

テンプレートから読み込んだアプリのうち以下のアプリの設定「JavaScript / CSSでカスタマイズ」に
「expenses_common.js」というファイルが適用されているので、こちらのファイルを記事シナリオ通りに変更頂く必要がございます。

  • 会計年度マスタ
  • 予実マスタ
  • 支払/立替申請
  • 交通費申請
  • 出張/支払

よろしくお願い致します。

Avatar
Dev

お世話になります。

ありがとうございます。

各アプリに設定されている~ とあったので、個人設定_経費精算、集計日時管理_経費精算など上部にあったアプリのJavaScript / CSSでカスタマイズ を最初に探して何も設定されていなかったので、あきらめたのがいけなかったですね。

どこか違う場所に設定があるのではと思ってしまいました。

指定のアプリ内で無事発見・解決しました。

Avatar
Naeko

お世話になっております。

経費算出の方重宝させて頂いております。

ご相談なのですが、「年度マスタ」に「期」の項目を入れ、

期ごとで管理したいのですが、

「予実マスタ」のどの部分を修正すればよいでしょうか?

一覧画面の年度のプルダウンを期に変更するイメージです。

Avatar
cybozu Development team

Naeko 様

お世話になっております。cybozu developer network事務局でございます。
ご利用いただきありがとうございます。

期ごとの管理を行う場合、予実マスタアプリに添付されている複数JavaScriptファイルのプログラムを修正する必要がございます。
恐れ入りますが、サンプルプログラムについて個別のご要件へのサポートはできかねます。

なお、カスタマイズに関してお困りの点がございましたら、ぜひコミュニティをご活用ください。
https://developer.cybozu.io/hc/ja/community/topics/200034345

今後とも kintone をご活用いただけますと幸いです。

Avatar
76

お世話になっております。

記事通りに導入を試みたところ、予実マスタに予算のレコードを追加しようとした際、

下記のエラーが生じ、登録することができませんでした。

Uncaught TypeError: cybexp.cmn_qu_getQueryBudgetSameNendoBudgetNoApi is not a function

こちら側で変更を加えたものは、アプリ番号のみです。

ご確認のほどお願いいたします。

Avatar
cybozu Development team

76 様

お世話になっております。cybozu developer network事務局でございます。

当方の環境でアプリのインストールから試したところ、問題ありませんでした。

既に実施していらっしゃるようにお見受けしますが、
当記事STEP2に示してありますとおり、各アプリのexpenses_common.jsのアプリ番号を実際の環境のアプリ番号書き換える必要があります。
その際に、各JavaScriptファイルの順番をインストールした際の順番と同じになるようにお願いいたします。

下記は予実マスタの設定画面画像ですが、このようにexcpences_common.jsを再アップロードするときに元の順番の位置に設定する必要があります。


エラーの内容から、ファイルの順番が変わってしまっている可能性が考えられます。

cybozu Development teamにより編集されました
Avatar
76

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

いただいた通りで、無事に解決することができました。

 

Avatar
76

続けて失礼いたします。

予実マスタ等に情報を登録し、以下を試そうとしたところ、

  • カスタムビューでは、実績金額をクリックすると集計対象となっている申請の一覧がポップアップで表示されます。

下記のエラーが表示されました。

$.jgrid.gridUnload is not a function

 

初歩的なご質問で恐縮ですが、対処法がありましたらご教示いただけないでしょうか。

Avatar
cybozu Development team

76 様

お世話になっております。cybozu developer network 事務局でございます。
こちらの環境で同じエラーを再現することができました。
対処方法を以下に記載いたします。

対処方法
予実マスタアプリに適用している JavaScript ファイル「expenses_bud_jqgrid.js」内を修正する

「expenses_bud_jqgrid.js」の修正箇所

// エラーが出力されている 26 行目を以下のようにコメントアウトし、ソースコードを書き加えてください
// $.jgrid.gridUnload('#view'); // Grid を削除
$('#view').GridUnload();

回答に時間がかかってしまい申し訳ございません。
参考にしていただければと思います。
また、本エラーについて引き続き調査し、対応を検討いたします。
ご連絡ありがとうございました。

Avatar
76

お世話になっております。
ご回答いただいた内容で問題が解決いたしました。

引き続き何卒宜しくお願いいたします。

サインインしてコメントを残してください。