Kintoneは日々の業務を効率化するノーコードツールです。

しかし、標準では実現できない機能も多々あり、お金をかけずに自社の業務に柔軟に対応するためにはコーディングをすることは不可欠になります。

今回はそんなKintoneの開発を自社で行っている・もしくは開発を考えている方に向けて、Kintoneの標準機能では実現できないけれど、コーディングすれば実現できる機能の代表例「日付を入力すると自動的に曜日が表示される」機能の開発方法をご紹介します。この機能を使うことで、ユーザーは手動で曜日を入力する手間が省け、データの正確性も向上します。

この記事を読むにあたって、Kintoneの基本的な操作ができることを前提としています。また、Javascriptの基礎知識があると理解がスムーズになります。

準備

まず、Kintoneアプリに以下のフィールドを追加してください。

  1. 日付フィールド（フィールドコード：日付）
  2. 文字列（1行）フィールド（フィールドコード：曜日）

フィールドコードはフィールドの設定画面で指定できます。これらのフィールドを設定したら、次に進みましょう。

コードの追加

次に、以下のJavascriptのコードをコピーし、ご自身のお好きなエディター（VScodeやAtom等）でファイルを作成してペーストします。

このコードは、「日付」フィールドが変更された際に自動的に「曜日」フィールドに曜日を代入するものです。

(function() {
  'use strict';

  const events = [
    'app.record.create.show',
    'app.record.edit.show',
    'app.record.create.change.日付',
    'app.record.edit.change.日付',
    'app.record.index.edit.change.日付'
  ];

  const setDayOfWeek = function(event) {
    const record = event.record;
    const dateValue = record['日付'].value;

    if (dateValue) {
      const dateObj = new Date(dateValue);
      const weekdays = ['日', '月', '火', '水', '木', '金', '土'];
      const dayOfWeek = weekdays[dateObj.getDay()];

      record['曜日'].value = `(${dayOfWeek})`;
      record['曜日'].disabled = true;
    }

    return event;
  };

  kintone.events.on(events, setDayOfWeek);

})();

コードの説明

（１）イベントリストの定義

  const events = [
    'app.record.create.show',
    'app.record.edit.show',
    'app.record.create.change.日付',
    'app.record.edit.change.日付',
    'app.record.index.edit.change.日付'
  ];

events配列には、日付フィールドが追加されるときやレコードが表示されるときにトリガーされるイベントを列挙します。

  • ‘app.record.create.show’：新規レコード作成時
  • ‘app.record.edit.show’：既存レコード編集時
  • ‘app.record.create.change.日付’：新規レコード作成時の日付変更時
  • ‘app.record.edit.change.日付’：既存レコード編集時の日付変更時
  • ‘app.record.index.edit.change.日付’：一覧画面でのインライン編集時の日付変更時

（２）曜日を設定する関数の定義

  const setDayOfWeek = function(event) {
    const record = event.record;
    const dateValue = record['日付'].value;

    if (dateValue) {
      const dateObj = new Date(dateValue);
      const weekdays = ['日', '月', '火', '水', '木', '金', '土'];
      const dayOfWeek = weekdays[dateObj.getDay()];

      record['曜日'].value = `(${dayOfWeek})`;
      record['曜日'].disabled = true;
    }

    return event;
  };

setDayOfWeek関数はイベントが発生したときに呼び出され、以下の処理を行います。

  • event.recordからレコードデータを取得。
  • record[‘日付’].valueから日付の値を取得。
  • 日付が入力されている場合、その値をDateオブジェクトに変換する。
  • Date.getDay()メソッドを利用して曜日（0^6の数値）を取得し、対応する曜日文字列をweekdays配列から取得。
  • 取得した曜日を曜日フィールドに設定し、編集不可能に設定。

（３）イベントと関数の関連付け

  kintone.events.on(events, setDayOfWeek);

})();
  • kintone.events.onメソッドを利用して、定義したイベントリストとsetDayOfWeek関数を関連付けています。
  • これにより、指定されたイベントが発生するたびに、setDayOfWeek関数が呼び出され、曜日が自動的に設定されます。

コーディング後

Kintoneの「アプリの設定」から「JavaScript / CSSでカスタマイズ」を選択し、Javascriptファイルを張り付けて保存します。

そして、アプリの画面に戻り日付を編集すると、曜日が自動的に入力されていることがわかります。

まとめ

この記事では、Kintoneアプリで日付を入力すると自動的に対応する曜日が表示される機能を追加する方法を紹介しました。

Kintoneのカスタマイズは初めてという方でも、この記事の手順に従って設定すれば簡単に実装できますので、ぜひお試しください。Kintoneの他の機能やカスタマイズも活用して、さらなる業務改善を目指しましょう。

このサイトではほかにも、Kintoneの様々なカスタマイズ方法に関する記事も投稿しておりますので、ぜひチェックしてくださいね！

https://arcuss-service.com/knowledge/how-to-auto-age.html