カスタマイズ kintone 初心者向け：初めての JavaScript プログラムの作成（パート1）

チュン

こんにちは！ 私の名前はチュンです。
株式会社メディアフュージョンでkintone関連製品の開発を担当しているベトナム出身のエンジニアです。
kintoneに興味のある方、kintoneを使っている方に私の蓄積した経験を共有したいと思います。

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

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

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

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

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

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'
  ], () => {
    let elementCampaigns = kintone.app.record.getFieldElement("リストキャンペーン");
    let tableBody = elementCampaigns.querySelector('tbody');
    let observer = new MutationObserver(function() {
      let record = kintone.app.record.get().record;
      let campaigns = record['リストキャンペーン'].value;
      let trTags = tableBody.querySelectorAll('tr');
      for (let [index, item] of campaigns.entries()){
        let campaign = item.value;
        if (+campaign['経費予測'].value > +campaign['予算'].value){
          let currentRow = trTags[index];
          let expenseForecastingElement = currentRow.querySelectorAll('td')[3].querySelector('.control-value-gaia')
        	expenseForecastingElement.style.color = 'red';
        }
      } 
    });
    let observerConfig = { childList: true };
    observer.observe(tableBody, observerConfig);
  });

})();

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

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

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