（著者：kintone エバンジェリスト 村濱 一樹）

前回は条件書式のサンプルをもとにStyleの変更について学びました。
今回はイベント詳細ページにボタンを設置し、押したときに任意の処理をさせるプログラムについて学んでいきましょう。

題材: 経過年数を表示する

今回は 経過年数を表示する というサンプルプログラムについて学んでいきましょう。
kintone アプリは、kintone アプリストア にある「社員名簿」を使っています。

ボタンの設置とそのボタンを押したときのイベント、時間の計算、jQueryというライブラリを使って作成されています。

プログラム

プログラムは下記です。少しずつピックアップして、内容を解説していきます。

全体の構成

まずは大まかな部分をみていきましょう。大まかにわけて、日時計算のための関数とレコード詳細画面の表示後の処理があります。

• 日時計算のための関数
  

• レコード詳細画面の表示後の処理
  

使われているライブラリについて

コードを見ていく前に、今回使われているライブラリについて簡単に説明します。
今回紹介しているサンプルの記事にも掲載されていますが、Cybozu CDNより下記のライブラリを使用します。

Luxon

Luxon を使うことで日付の計算やフォーマッティングが簡単になります。公式サイト

今回のサンプルでは、下記の関数が使われています。

• luxon.DateTime.local().startOf('引数')
  現時点の日時のオブジェクトを作成します。startOf()の引数には year, month, day などを指定できます。
• luxon.DateTime.fromISO(引数1).startOf('引数2');
  引数1で指定された日時のオブジェクトを作成します。startOf()の引数には year, month, day などを指定できます。
• diff(引数1, 引数2)
  引数1との日時の差を取得します。引数2には years, months, days などを指定できます。
  
• toObject()
  日時のオブジェクトを返します。

jQuery

jQueryを使うことでボタンの追加やスタイルの調整などがしやすくなります。公式サイト

jQueryをつかったkintoneのカスタマイズは第12回 jQueryを利用してみようをご参照ください。

• ボタンの作成例
  
• Styleの変更
  

関数の作成

さて、それでは実際のコードをみていきましょう。
今回のサンプルコードでは、日時計算の処理が関数化されています。

• 現在の日時と、引数で指定した日時のオブジェクトを取得する
  

• diff()を使って差分を取得する
  

 この calculateDuration ですが、指定した日からの今日までの日付の計算が行われ、何年何ヶ月という形式で文字列が返却されます。

レコード詳細画面の表示後イベントのプログラム

レコード詳細画面の表示後イベントのプログラムを、更に細かくわけてみましょう。

下記のとおり、2つの処理に分けることができます。それぞれみていきましょう。

1. 入社してからの経年年数を表示
2. 年齢計算ボタンの作成と設置
   ここでは、ボタンを作成し、クリックしたときのイベントを定義しています。
   最後にボタンを生年月日フィールドに追加しています。

上記２つの処理の中に、書式変更したいフィールドの要素を取得する関数も使われています。
kintone.app.record.getSpaceElement(id)、kintone.app.record.getFieldElements(fieldCode) を使うことで、該当の要素を取得できます。 

まとめ

今回はボタンを追加したり時間の計算をしたりと、JSカスタマイズにおいてよく行う処理について学ぶことができたと思います。
必要に応じて、jQueryやluxonについては公式ページやcybozu developer networkなどで検索してみてください。

この記事は、2022年6月版 kintoneで確認したものになります。

<< はじめようJavaScript第14回 kintone JavaScriptカスタマイズのプログラム実例を学ぼう②（条件書式設定） | はじめようJavaScript第16回 kintone JavaScriptカスタマイズのプログラム実例を学ぼう④（テーブル操作）