カスタマイズ kintone 初心者向け:kintone で初めての JavaScript プログラムの作成(パート1)

前回の記事では、kintoneはどんな時に利用したらいいかを説明しました。そして、少し作り込んでいくとどうしてもJavaScriptを書かないといけない状況になることも説明しました。
前回記事;kintoneはExcelよりどこが便利、標準機能だけでどこまで作れるの ?

今回の記事からしばらく、JavaScriptを使用してkintoneをカスタマイズする方法について説明します。

問題
広告の予算管理業務において、A社の製品の広告担当者は、実際の支出が予算を超える可能性があるかどうかを予測したいと考えています。それに基づいて広告戦略を変更します。
しかし、kintone標準の「計算」機能だけでは計算できません。
以下は上記の問題に対する説明画像です。

結果
これは、kintoneアプリケーションでの計算のカスタマイズ結果です。

準備アプリ
「予算進捗管理」アプリを作成します。
以下はアプリケーション内のデータフィールドです。

フィールド名フィールドコードデータ型説明
数値レポートの年。
数値レポートの月。 1~12の値。
リストキャンペーンリストキャンペーンテーブル以下の項目をテーブル化する。
   キャンペーンキャンペーン文字列(1行)広告キャンペーンの名前。
   予算 (月)予算数値広告キャンペーンの月間予算。
   経費 (現在)経費数値現在までの広告キャンペーンに使用された経費。
   経費予測 (月)経費予測数値月末までの広告キャンペーン経費経費予測。

JavaScriptプログラム
Visual Studio Codeを使用して、以下の内容で JavaScript ファイル (budget_management.js) を作成してください。
VS Codeとは、Microsoft社の提供する無償のコードエディタです。
ダウンロードやインストールの前に、システム要件について確認しておきましょう。VSCodeはmacOS、Windows、Linuxの3つのプラットフォームで利用できます。お使いのオペレーティングシステムに適したバージョンをダウンロードするように注意してください。
VS Codeのダウンロードとインストール手順はこちらです。

(() => {
  'use strict';
  kintone.events.on([
    'app.record.create.change.経費',
    'app.record.create.change.年',
    'app.record.create.change.月',
    'app.record.edit.change.経費',
    'app.record.edit.change.年',
    'app.record.edit.change.月'
  ], (event) => {
    let record = event.record;
    let campaigns = record['リストキャンペーン'].value;
    let date = new Date().getDate();
    let year = record['年'].value;
    let month = record['月'].value;
    if (!year || !month) return event;
    let numberOfdaysInMonth = new Date(year, month, 0).getDate();
    for (let item of campaigns){
      let campaign = item.value;
      if (!campaign['経費'].value) continue;
      let estimates = Math.ceil(campaign['経費'].value * numberOfdaysInMonth / date );
      campaign['経費予測'].value = estimates;
    }
    return event;
  });
  
  kintone.events.on([
      'app.record.detail.show'
    ], (event) => {
      let record = event.record;
      let campaigns = record['リストキャンペーン'].value;
      let elementCampaigns = kintone.app.record.getFieldElement("リストキャンペーン");
      let observer = new MutationObserver(function(mutationsList) {
          mutationsList.forEach(function() {
              let trTags = elementCampaigns.querySelectorAll('tbody tr');
              for (let [index, item] of campaigns.entries()){
                let campaign = item.value;
                if (+campaign['経費予測'].value > +campaign['予算'].value){
                   trTags[index].querySelectorAll('td')[3].querySelector('.control-value-gaia').style.color = 'red';
                }
              } 
          });
      });
      let observerConfig = { attributes: true, childList: true, subtree: true };
      observer.observe(elementCampaigns, observerConfig);
      return event;
    });
})();


budget_management.jsファイルを予算進捗管理アプリケーションにアップロードします
予算進捗管理アプリのアプリの設定に進み、JavaScript / CSSでカスタマイズを選択します。
budget_management.js ファイルを kintone にアップロードして保存します。

ソースコードを見るだけでは理解は難しいかもしれませんが、次の記事でできるだけわかりやすく説明したいと考えています。
楽しみにしておいてください!

参照
JavaScriptやCSSでアプリをカスタマイズする