カテゴリー内の他の記事

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

(著者:kintone エバンジェリスト 村濱 一樹

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

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

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

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

プログラム

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

全体の構成

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

______JavaScript_15__kintone_JavaScript_____________________________________cybozu_developer_network.png

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

コードを見ていく前に、今回使われているライブラリについて簡単に説明します。
今回紹介しているサンプルの記事にも掲載されていますが、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を使うときはこうする、と覚えてもらえれば結構です。

関数の作成

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

______JavaScript_15__kintone_JavaScript_____________________________________cybozu_developer_network.png

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

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

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

________________.png

上記のとおり、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カスタマイズのプログラム実例を学ぼう④(テーブル操作)

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

Avatar
Shochi

年齢計算のボタンがなぜ、詳細画面を開いた場所の決まった部分に表示されるか分からない。です。

Avatar
cybozu Development team

Shochi様

この記事の題材となっている  経過年数を表示する  という記事で、

アプリに「BirthDay」というフィールドコードのスペースフィールドを設置する必要がありました。

そのスペースフィールドの設置場所が年齢計算ボタンの位置になります。

上記スペースフィールドについて記述がなかったため追記する対応をいたします。

ご指摘をありがとうございました。

Avatar
cybozu Development team

Shochi様

 経過年数を表示する  という記事で利用している

kintoneのアプリストアで提供されている「社員名簿」のアプリをあらためて確認したところ、

もともと「BirthDay」というフィールドコードのスペースフィールドが含まれていました。

そのため、先にお伝えしていた追記対応について、無しといたします。

大変失礼いたました。

Avatar
yokocchi

こちらのプログラムですが、「経過年数を表示する」という記事と合わせて確認し、「社員名簿」アプリに反映させようとしているのですが、書いてある通りに処理をしてもボタン等出てきません、、 

ざっくりですが以下の流れで処理しています。

①サンプルコードをコピー
②文字コードを「UTF-8」にして保存
③アプリの「設定」>「JavaScript / CSSでカスタマイズ」にてファイルを選択
④「保存」をクリック
⑤「アプリを更新」をクリック

これ以外に何か対応が必要なのでしょうか?

Avatar
yokocchi

すみません、上記解決しました。

Avatar
yuuki

こちらのページの一番上のサンプルプログラムをそのまま社員名簿アプリに入れてアプリの更新をしても正常に作動しません。スペースIDなども特に間違っていないようです。

対応よろしくお願い致します。

Avatar
cybozu Development team
yuuki様
 
お世話になっております。cybozu developer network 運営事務局です。
この記事は経過年数を表示するという記事の解説になっております。
実際にサンプルを試したい場合は、経過年数を表示するのページの内容に従って試してみてください。
 
こちらで試しましたところ特に不具合は見受けられませんでしたので、
上記ページで説明がある、必要なJavaScriptファイルの追加がされていないのかもしれません。
 
試してみてわからないなどあれば、ぜひコミュニティをご活用ください。
Avatar
工藤 大輔

30行目のコードですが

kintone.events.on("app.record.detail.show", function(event) {

となっていますが

kintone.events.on('app.record.detail.show’, function(event) {

ではないでしょうか。

 

 
 
Avatar
cybozu Development team

工藤 大輔 様

お世話になっております。cybozu developer network 運営事務局です。

ご指摘の箇所ですが、ダブルクォートではなくシングルクォートが正しいのではないか、というお問い合わせでよろしいでしょうか。

ダブルクォートであっても、ご指摘いただいたようにシングルクォートでもどちらを用いても問題はありません。

違いに関しては下記のような記事を参考にしてください。
テキストを扱う — JavaScript での文字列


また、こちらのコメント欄は記事内容のフィードバック目的となっておりますので、
JavaScriptの仕様など技術的な質問に関してはcybozu developer コミュニティをぜひご活用ください。

Avatar
YK
  function getYearMonth(dtDate) {
   
  var dtToday = moment(); // 現在の日時取得
  var dtFrom = moment(dtDate); // 引数の日時取得
  var years = 0;
  var months = 0;
   
  //入力日が過去日付の場合計算
  if (!dtToday.isBefore(moment(dtFrom), 'day')) { 
  years = dtToday.diff(moment(dtFrom), 'years'); 
  months = dtToday.diff(moment(dtFrom), 'months') % 12;
 

 

一番下の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;  

   
   
Avatar
cybozu Development team

YK様

お世話になっております。cybozu developer network 運営事務局です。

ご指摘の通り、二重にmomentの関数を適用してしまっている状態なので、修正いたします。

ご指摘ありがとうございます。

Avatar
YK

拙い投稿にご返信いただき、ありがとうございました。

サインインしてコメントを残してください。