一樹)前回は条件書式のサンプルをもとにStyleの変更について学びました。今回はイベント詳細ページにボタンを設置し、押したときに任意の処理をさせるプログラムについて学んでいきましょう。いうサンプルプログラムについて学んでいきましょう。ある「社員名簿」を使っています。ボタンの設置とそのボタンを押したときのイベント、時間の計算、jQueryというライブラリを使って作成されています。プログラムプログラムは下記です。ピックアップして、内容を解説していきます。全体の構成まずは大まかな部分をみていきましょう。大まかにわけて、自作関数と詳細ページを開いたときの処理があります。使われているライブラリについてコードを見ていく前に、今回使われているライブラリについて簡単に説明します。CDNより下記のライブラリを使用します。Moment.jsMoment.jsを使うことで日付の計算やフォーマッティングが簡単になります。公式サイト今回のサンプルでは、下記の関数が使われています。moment(引数)引数で指定された日時のDateオブジェクトを作成します。引数がない場合は現時点の日時で作られます。引数2)引数1との日時の差を取得します。moment.isBefore(引数)引数の日時より以前かどうかを判定します。jQueryjQueryを使うことでボタンの追加やスタイルの調整などがしやすくなります。jQueryを利用してみようをご参照ください。ボタンの作成例Styleの変更jQueryの宣言jQueryを使うために、サンプルコードでは下記のステップを踏んでいます。複数のjQueryや他のライブラリによって思わぬエラーが起きたりするので、jQueryを使うときはこうする、と覚えてもらえれば結構です。関数の作成さて、それでは実際のコードをみていきましょう。今回のサンプルコードでは、一部の処理が関数化されています。このgetYearMonthですが、指定した日からの今日までの日付の計算が行われ、何年何ヶ月という形式で文字列が返却されます。詳細画面表示イベントのプログラム詳細画面表示イベントのプログラムを、更に細かくわけてみましょう。上記のとおり、3つの処理に分けることができます。それぞれみていきましょう。この行は、書式変更したい部分のElement(要素)を取得しています。することで該当の要素を取得できます。(リファレンス)年齢計算ボタンの作成と設置ここでは、ボタンを作成し、クリックしたときのイベントを定義しています。最後にボタンを生年月日フィールドに追加しています。入社してからの経年年数を表示まとめ今回はボタンを追加したり時間の計算をしたりと、JSカスタマイズにおいてよく行う処理について学ぶことができたと思います。networkなどで検索してみてください。kintoneで確認したものになります。コミュニティをご活用ください。02:47年齢計算のボタンがなぜ、詳細画面を開いた場所の決まった部分に表示されるか分からない。いう記事で、アプリに「BirthDay」というフィールドコードのスペースフィールドを設置する必要がありました。そのスペースフィールドの設置場所が年齢計算ボタンの位置になります。上記スペースフィールドについて記述がなかったため追記する対応をいたします。ご指摘をありがとうございました。いう記事で利用しているkintoneのアプリストアで提供されている「社員名簿」のアプリをあらためて確認したところ、もともと「BirthDay」というフィールドコードのスペースフィールドが含まれていました。そのため、先にお伝えしていた追記対応について、無しといたします。以下の流れで処理しています。02:06すみません、上記解決しました。Permalinkログインしてコメントを残してください。