はじめようJavaScript第15回 kintone JavaScriptカスタマイズのプログラム実例を学ぼう③（経過年数を表示する）

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

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

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

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

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

プログラム

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

全体の構成

まずは大まかな部分をみていきましょう。大まかにわけて、自作関数と詳細ページを開いたときの処理があります。

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

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

Moment.js

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

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

• moment(引数)
  引数で指定された日時のDateオブジェクトを作成します。引数がない場合は現時点の日時で作られます。
• moment.diff(引数1, 引数2)
  引数1との日時の差を取得します。引数2には year, month, day などを指定できます。
• moment.isBefore(引数)
  引数の日時より以前かどうかを判定します。

jQuery

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

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

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

jQueryの宣言

jQueryを使うために、サンプルコードでは下記のステップを踏んでいます。
複数のjQueryや他のライブラリによって思わぬエラーが起きたりするので、jQueryを使うときはこうする、と覚えてもらえれば結構です。

関数の作成

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

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

詳細画面表示イベントのプログラム

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

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

1. フィールドの要素取得 この行は、書式変更したい部分のElement(要素)を取得しています。
   kintone.app.record.getFieldElements(フィールドコード) とすることで該当の要素を取得できます。 (リファレンス)
   
   
2. 年齢計算ボタンの作成と設置
   ここでは、ボタンを作成し、クリックしたときのイベントを定義しています。
   最後にボタンを生年月日フィールドに追加しています。
3. 入社してからの経年年数を表示

まとめ

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

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

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