リニューアル後のチュートリアルは次のページを参照してください。
はじめよう JavaScript
（著者：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つの処理に分けることができます。それぞれみていきましょう。
- 入社してからの経年年数を表示
- 年齢計算ボタンの作成と設置
ここでは、ボタンを作成し、クリックしたときのイベントを定義しています。
最後にボタンを生年月日フィールドに追加しています。
上記２つの処理の中に、書式変更したいフィールドの要素を取得する関数も使われています。
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カスタマイズのプログラム実例を学ぼう④（テーブル操作）
年齢計算のボタンがなぜ、詳細画面を開いた場所の決まった部分に表示されるか分からない。です。
Shochi様
この記事の題材となっている 経過年数を表示する という記事で、
アプリに「BirthDay」というフィールドコードのスペースフィールドを設置する必要がありました。
そのスペースフィールドの設置場所が年齢計算ボタンの位置になります。
上記スペースフィールドについて記述がなかったため追記する対応をいたします。
ご指摘をありがとうございました。
Shochi様
経過年数を表示する という記事で利用している
kintoneのアプリストアで提供されている「社員名簿」のアプリをあらためて確認したところ、
もともと「BirthDay」というフィールドコードのスペースフィールドが含まれていました。
そのため、先にお伝えしていた追記対応について、無しといたします。
大変失礼いたました。
こちらのプログラムですが、「経過年数を表示する」という記事と合わせて確認し、「社員名簿」アプリに反映させようとしているのですが、書いてある通りに処理をしてもボタン等出てきません、、
ざっくりですが以下の流れで処理しています。
①サンプルコードをコピー
②文字コードを「UTF-8」にして保存
③アプリの「設定」>「JavaScript / CSSでカスタマイズ」にてファイルを選択
④「保存」をクリック
⑤「アプリを更新」をクリック
これ以外に何か対応が必要なのでしょうか？
すみません、上記解決しました。
こちらのページの一番上のサンプルプログラムをそのまま社員名簿アプリに入れてアプリの更新をしても正常に作動しません。スペースIDなども特に間違っていないようです。
対応よろしくお願い致します。
30行目のコードですが
kintone.events.on("app.record.detail.show", function(event) {
となっていますが
kintone.events.on('app.record.detail.show’, function(event) {
ではないでしょうか。
工藤 大輔 様
お世話になっております。cybozu developer network 運営事務局です。
ご指摘の箇所ですが、ダブルクォートではなくシングルクォートが正しいのではないか、というお問い合わせでよろしいでしょうか。
ダブルクォートであっても、ご指摘いただいたようにシングルクォートでもどちらを用いても問題はありません。
違いに関しては下記のような記事を参考にしてください。
テキストを扱う — JavaScript での文字列
また、こちらのコメント欄は記事内容のフィードバック目的となっておりますので、
JavaScriptの仕様など技術的な質問に関してはcybozu developer コミュニティをぜひご活用ください。
一番下の3行ですが、moment(dtFrom)は、dtFromだけにしてはいけないのでしょうか？
dtFromは既に変数定義する時点で、moment(dtDate)で、moment()のインスタンス（と言う？）として定義されています。
ですから、moment(dtFrom)は、moment(moment(dtDate))という風な処理になり、moment()二重がけしていることに思われ、冗長に思いました。
この考えで書き直すと、以下です。どうでしょうか？
if (!dtToday.isBefore(dtFrom, 'day')) {
years = dtToday.diff(dtFrom, 'years');
months = dtToday.diff(dtFrom, 'months') % 12;
YK様
お世話になっております。cybozu developer network 運営事務局です。
ご指摘の通り、二重にmomentの関数を適用してしまっている状態なので、修正いたします。
ご指摘ありがとうございます。
拙い投稿にご返信いただき、ありがとうございました。