---
title: kintone Café 大阪 vol.12
tags:  #javascript #kintone  
author: [山下光洋](https://convert.docswell.com/user/yamamugi)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/9J2GGZKWJR.jpg?width=480
description: kintone Café 大阪 vol.12で使用したJavaScript APIハンズオンのスライドです。 一部文字が飛んでます。オリジナルはこちらです。 https://goo.gl/qqbVv9
published: November 13, 22
canonical: https://convert.docswell.com/s/yamamugi/58G1R7-kintone-cafe-vol12
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/9J2GGZKWJR.jpg)

vol.12
〜kintoneをさらに便利にする
JavaScriptハンズオン〜


# Page. 2

![Page Image](https://bcdn.docswell.com/page/DEYVVRN9EM.jpg)

自己紹介
山下光洋
@yamamanx
Blog : www.yamamanx.com
・ソフトウェア開発会社でIBMさんのBP
・ナイトレジャー会社で情シス
・エネルギー会社で情シス
ヤマムギ開催
JAWS-UG OSAKA , JAWS-UG IoT関西支部 コアメンバー
kintoneCafe 運営メンバー
TwilioJP-UG,DevLOVE関西,RxTStudyなどに出没してます。
緑のLv15
The八番街 Bass
Lv29
AppleMusic,LINE MUSIC,AmazonMusic,AWA,レコチョク,GooglePlayなどで配信中


# Page. 3

![Page Image](https://bcdn.docswell.com/page/VJNMMDXD78.jpg)

毎日呑んでます。
今日も呑みます


# Page. 4

![Page Image](https://bcdn.docswell.com/page/YE9NNG88E3.jpg)

会場ご提供


# Page. 5

![Page Image](https://bcdn.docswell.com/page/GE8KKV8Z7D.jpg)

本編


# Page. 6

![Page Image](https://bcdn.docswell.com/page/LELZZ5R1JR.jpg)

一覧画面のイベント


# Page. 7

![Page Image](https://bcdn.docswell.com/page/4JMVV3R5JW.jpg)

イベント
kintoneで発生するイベントにハンドラーを紐付けて
処理をする事が出来ます。
例えば、一覧画面を表示したとき、
フィールドの編集可/不可を設定する
例えば、レコード編集画面で保存を実行したとき、
レコードにエラーを表示する
例えば、新規にレコードを追加するとき、
フィールドの値を書き換える


# Page. 8

![Page Image](https://bcdn.docswell.com/page/PJR22QRZE9.jpg)

イベント
kintone.events.on( event , handler )


# Page. 9

![Page Image](https://bcdn.docswell.com/page/PEXDD5R17X.jpg)

イベント
(function() {
&quot;use strict&quot;;
//レコード一覧画面表示後イベント
kintone.events.on(&#039;app.record.index.show&#039;, function(event) {
//ここに処理をかく
alert(&quot;画面表示後&quot;);
});
})();


# Page. 10

![Page Image](https://bcdn.docswell.com/page/3EKXX6RM7D.jpg)

動かしてみます
まず、
JavaScriptを動かすための
kintoneアプリを作ります。


# Page. 11

![Page Image](https://bcdn.docswell.com/page/L7355682E5.jpg)

kintoneアプリの作成
アプリの右の [+] をクリックします


# Page. 12

![Page Image](https://bcdn.docswell.com/page/87DDDVM67G.jpg)

kintoneアプリの作成
[はじめから作成]を選択します


# Page. 13

![Page Image](https://bcdn.docswell.com/page/VJPXXVQZ78.jpg)

kintoneアプリの作成
アプリの名前を適当に入力します


# Page. 14

![Page Image](https://bcdn.docswell.com/page/2EVLLZ5MJQ.jpg)

kintoneアプリの作成
文字列(1行)をドラッグ&amp;ドロップで右の領域へ持っていきます


# Page. 15

![Page Image](https://bcdn.docswell.com/page/57GXX46XEL.jpg)

kintoneアプリの作成
右上の歯車- [設定]をクリックします


# Page. 16

![Page Image](https://bcdn.docswell.com/page/4EQ88G45JP.jpg)

kintoneアプリの作成
フィールド名に「社員コード」、フィールドコードに「emp_code」を入力して[保存]をクリックします。


# Page. 17

![Page Image](https://bcdn.docswell.com/page/KJ4225QVE1.jpg)

kintoneアプリの作成
同じように計5つのフィールドを作成します
種類
名前
フィールドコード
文字列(1行)
社員コード
emp_code
文字列(1行)
社員名
emp_name
日付
入社日
entering_date
文字列(1行)
勤続年月
continued_month
チェックボックス
無効(選択肢も無効) invalid


# Page. 18

![Page Image](https://bcdn.docswell.com/page/LE1MMWP47G.jpg)

kintoneアプリの作成
フォームを作ったら[フォームを保存]して、[アプリを公開]をクリックします。


# Page. 19

![Page Image](https://bcdn.docswell.com/page/GEW3362ZE2.jpg)

kintoneアプリの作成
右上の[・・・] - [アプリの設定を変更]をクリックします。


# Page. 20

![Page Image](https://bcdn.docswell.com/page/47ZVVYDLE3.jpg)

kintoneアプリの作成
[プロセス管理]をクリックします。


# Page. 21

![Page Image](https://bcdn.docswell.com/page/YJ655D1M7V.jpg)

kintoneアプリの作成
[プロセス管理]をクリックします。


# Page. 22

![Page Image](https://bcdn.docswell.com/page/GJ5YY34QJ4.jpg)

kintoneアプリの作成
[プロセス管理を有効にする]をチェックして[保存]をクリックします。


# Page. 23

![Page Image](https://bcdn.docswell.com/page/9E2GGZVWER.jpg)

kintoneアプリの作成
[アプリを更新]をクリックします。


# Page. 24

![Page Image](https://bcdn.docswell.com/page/D7YVVR397M.jpg)

kintoneアプリの作成
アプリが出来ましたので適当にレコードを作ってみます。
右上の[+]をクリックします。


# Page. 25

![Page Image](https://bcdn.docswell.com/page/VENMMDVDJ8.jpg)

kintoneアプリの作成
社員コード、社員名、入社日を入力しておきます。


# Page. 26

![Page Image](https://bcdn.docswell.com/page/Y79NNG6873.jpg)

動かしてみます
https://goo.gl/gWmbbj
ブラウザでアクセスすると
kintone_cafe_12-master.zip
がダウンロードされますので
解凍してください。


# Page. 27

![Page Image](https://bcdn.docswell.com/page/G78KKVZZJD.jpg)

動かしてみます
解凍したフォルダの中の
01_record_index_event.js
を使います。


# Page. 28

![Page Image](https://bcdn.docswell.com/page/L7LZZ5D1ER.jpg)

JavaScriptを適用
先ほど作成したアプリを開きます。


# Page. 29

![Page Image](https://bcdn.docswell.com/page/4EMVV3P5EW.jpg)

JavaScriptを適用
右上の[・・・] - [アプリの設定を変更]をクリックします。


# Page. 30

![Page Image](https://bcdn.docswell.com/page/PER22Q1Z79.jpg)

JavaScriptを適用
[JavaScript / CSSでカスタマイズ]をクリックします。


# Page. 31

![Page Image](https://bcdn.docswell.com/page/P7XDD5Y1JX.jpg)

JavaScriptを適用
[アップロードして追加]で 今ダウンロードしたファイルから
「01_record_index_event」を選択して、[保存]をクリックします。


# Page. 32

![Page Image](https://bcdn.docswell.com/page/37KXX63MJD.jpg)

JavaScriptを適用
[アプリを更新]をクリックします。


# Page. 33

![Page Image](https://bcdn.docswell.com/page/LJ3556G275.jpg)

JavaScriptを適用
「画面表示後」とアラートが出れば適用OKです。


# Page. 34

![Page Image](https://bcdn.docswell.com/page/8JDDDV16JG.jpg)

JavaScriptを適用
レコードの右の鉛筆アイコンをクリックすると「インライン編集開始時」とアラートが出ます。


# Page. 35

![Page Image](https://bcdn.docswell.com/page/VEPXXV5ZJ8.jpg)

JavaScriptを適用
レコードの右の保存アイコンをクリックすると「インライン編集の保存実行前」とアラートが出ます。


# Page. 36

![Page Image](https://bcdn.docswell.com/page/27VLLZPMEQ.jpg)

JavaScriptを適用
続いて「インライン編集の保存成功後」とアラートが出ます。


# Page. 37

![Page Image](https://bcdn.docswell.com/page/5JGXX4PX7L.jpg)

レコード一覧イベント
01_record_index_event.js
(function() {
&quot;use strict&quot;;
//レコード一覧画面表示後イベント
kintone.events.on(&#039;app.record.index.show&#039;, function(event) {
alert(&quot;画面表示後&quot;);
});
//レコード一覧画面のインライン編集開始時イベント
kintone.events.on(&#039;app.record.index.edit.show&#039;, function(event) {
alert(&quot;インライン編集開始時&quot;);
});
//レコード一覧画面のインライン編集の保存実行前イベント
kintone.events.on(&#039;app.record.index.edit.submit&#039;, function(event) {
alert(&quot;インライン編集の保存実行前&quot;);
});
//レコード一覧画面のインライン編集の保存成功後イベント
kintone.events.on(&#039;app.record.index.edit.submit.success&#039;, function(event) {
alert(&quot;インライン編集の保存成功後&quot;);
});
})();


# Page. 38

![Page Image](https://bcdn.docswell.com/page/47Q88G25EP.jpg)

デバッグしてみます
※当資料のブラウザはGoogleChromeを前提にしています。
ブラウザ上で右クリックして[検証]を選択します。


# Page. 39

![Page Image](https://bcdn.docswell.com/page/KE4225LV71.jpg)

デバッグしてみます


# Page. 40

![Page Image](https://bcdn.docswell.com/page/L71MMWL4JG.jpg)

デバッグしてみます
[Sources]タグを選択して左のSourcesエクスプローラーで、
top - &lt;domain&gt;.cybozu.com - k - api/js
の下にアップロードしたJavaScriptファイルが配置されています。
これを選ぶと右ペインに表示されます。


# Page. 41

![Page Image](https://bcdn.docswell.com/page/G7W336VZ72.jpg)

デバッグしてみます
任意の行をクリックしてブレークポイントを設定して、
画面を更新すると、JavaScriptが実行中に設定したブレークポイントで停止します。


# Page. 42

![Page Image](https://bcdn.docswell.com/page/4JZVVY4L73.jpg)

デバッグしてみます
右ペインのWatchでプラスを追加して変数(例えば event )を追加すると、
この停止しているタイミングの変数の中身が見えます。


# Page. 43

![Page Image](https://bcdn.docswell.com/page/YE655D3MJV.jpg)

デバッグしてみます
続きを実行するときは Resume script Execution アイコンをクリックします。
※他にもStep Over , Step Into , Step Outもあるので用途にあわせて利用します。


# Page. 44

![Page Image](https://bcdn.docswell.com/page/GE5YY3LQE4.jpg)

レコード一覧画面の表示イベントのプロパティ
kintone.events.on(&#039;app.record.index.show&#039;, function(event) {
プロパティ名
型
説明
appId
数値
アプリID
viewType
文字列
一覧(ビュー)の種類 ‘list’ , ‘calendar’ , ‘custom’
viewId
数値
ビューID
viewName
文字列
ビュー名
records
配列またはオブジェクト
viewTypeが listの場合はレコードオブジェクトの配列。
viewTypeがcalendarの場合はキーが日付文字列、値をレコードオブ
ジェクトの配列としたオブジェクト。
offset
数値
一覧のオフセット数(viewTypeがcalendarの場合はnull)
size
数値
一覧のレコード数(viewTypeがcalendarの場合はnull)
date
文字列
カレンダービューの表示月。(viewTypeがcalendar以外はnull)


# Page. 45

![Page Image](https://bcdn.docswell.com/page/972GGZLW7R.jpg)

レコード一覧画面の表示イベントのプロパティ
kintone.events.on(&#039;app.record.index.show&#039;, function(event) {
console.log(event.appId);
console.log(event.viewType);
console.log(event.viewId);
console.log(event.viewName);
console.log(event.offset);
console.log(event.size);
console.log(event.date);
console.log(event.records);
}


# Page. 46

![Page Image](https://bcdn.docswell.com/page/DJYVVRQ9JM.jpg)

レコード一覧画面の表示イベントのプロパティ


# Page. 47

![Page Image](https://bcdn.docswell.com/page/V7NMMDKDE8.jpg)

レコード一覧画面のインライン編集開始時のプロパティ
kintone.events.on(&#039;app.record.index.edit.show&#039;, function(event) {
プロパティ名
型
説明
appId
数値
アプリID
record
オブジェクト
インライン編集開始時のデータを保持したレコードオブジェクト
recordId
数値
レコードID
フィールドの値に応じた制御
・フィールドの編集可/不可を設定する


# Page. 48

![Page Image](https://bcdn.docswell.com/page/YJ9NNGV8J3.jpg)

レコード一覧画面のインライン編集イベントで
フィールドの編集可/不可を設定する
kintone.events.on(&#039;app.record.index.edit.show&#039;, function(event) {
var record = event.record;
record[&#039;continued_month&#039;][&#039;disabled&#039;] = true;
return event;
}
・PC用でのみ利用可能
・スペースに貼り付けたアプリには利用出来ない
・編集権限のないフィールドを編集可能([‘disabled’]=false)に
しても反映されない。


# Page. 49

![Page Image](https://bcdn.docswell.com/page/GJ8KKVPZED.jpg)

レコード一覧画面のインライン編集イベントで
フィールドの編集可/不可を設定する


# Page. 50

![Page Image](https://bcdn.docswell.com/page/LJLZZ5117R.jpg)

フィールドの編集可/不可を設定できないフィールド
・計算
・ルックアップコピー先フィールド


# Page. 51

![Page Image](https://bcdn.docswell.com/page/47MVV3W57W.jpg)

レコード一覧画面のインライン編集保存実行前のプロパティ
kintone.events.on(&#039;app.record.index.edit.submit, function(event) {
プロパティ名
型
説明
appId
数値
アプリID
record
オブジェクト
レコードオブジェクト
recordId
数値
レコードID
フィールドの値に応じた制御
・フィールドの編集可/不可を設定する
・フィールドの値を書き換える
・フィールドにエラーを表示する
・画面の上部にエラーを表示する


# Page. 52

![Page Image](https://bcdn.docswell.com/page/P7R22QYZJ9.jpg)

レコード一覧画面のインライン編集保存実行前イベ
ントでフィールドにエラーを表示する
kintone.events.on(&#039;app.record.index.edit.submit, function(event) {
var record = event.record;
if (record[&#039;emp_code&#039;][&#039;value&#039;].charAt(0) != &#039;S&#039;){
record[&#039;emp_code&#039;][&#039;error&#039;] = &#039;社員コードの1文字目はSにしてください&#039;;
return event;
}
}
・PC用でのみ利用可能
・スペースに貼り付けたアプリには利用出来ない


# Page. 53

![Page Image](https://bcdn.docswell.com/page/PJXDD5G1EX.jpg)

レコード一覧画面のインライン編集保存実行前イベ
ントでフィールドにエラーを表示する


# Page. 54

![Page Image](https://bcdn.docswell.com/page/3JKXX64MED.jpg)

エラーを設定してもエラーが発生しないフィールド
・レコード番号
・作成者
・作成日時
・更新者
・更新日時
・ステータス
・作業者


# Page. 55

![Page Image](https://bcdn.docswell.com/page/LE3556L2J5.jpg)

レコード一覧画面のインライン編集保存成功後のプロパティ
kintone.events.on(&#039;app.record.index.edit.submit.success, function(event) {
プロパティ名
型
説明
appId
数値
アプリID
record
オブジェクト
レコードオブジェクト
recordId
数値
レコードID


# Page. 56

![Page Image](https://bcdn.docswell.com/page/8EDDDVN6EG.jpg)

レコード一覧画面のインライン編集保存実行前のプロパティ
kintone.events.on(&#039;app.record.index.edit.change.&lt;fieldcode&gt;, function(event) {
プロパティ名
型
説明
appId
数値
アプリID
record
オブジェクト
レコードオブジェクト
recordId
数値
レコードID
changes
オブジェクト
変更されたオブジェクト
changes.field
オブジェクト
変更されたフィールドのオブジェクト


# Page. 57

![Page Image](https://bcdn.docswell.com/page/V7PXXVNZE8.jpg)

レコード一覧画面のフィールドの値に応じた制御
・フィールドの編集可/不可を設定する
・フィールドの値を書き換える
・フィールドにエラーを表示する
・画面の上部にエラーを表示する
・変更されたフィールド、テーブル内の行オブジェクトを取
得する


# Page. 58

![Page Image](https://bcdn.docswell.com/page/2JVLLZKM7Q.jpg)

一覧のインライン編集で勤続年月を計算する
03_record_index_edit.js
jQuery.noConflict();
(function() {
&quot;use strict&quot;;
~~ 中略 ~~
//レコード一覧画面表示後イベント
kintone.events.on(&#039;app.record.index.edit.change.entering_date, function(event) {
var record = event.record;
//入社日の値を取得
var entering_date = record[&#039;entering_date&#039;][&#039;value&#039;];
//入社日から今日までの年月を計算
var continued_month = getYearMonth(entering_date);
//勤続年月フィールドに計算結果を設定
record[&#039;continued_month&#039;][&#039;value&#039;] = continued_month;
return event;
});
})();


# Page. 59

![Page Image](https://bcdn.docswell.com/page/5EGXX4QXJL.jpg)

外部ライブラリをURL指定で追加する
03_record_index_edit.jsを[アップロードして追加]する時に、
以下の2つのライブラリを[URL指定で追加]してください。
※年月計算で使用しているライブラリです。Cybozu CDNより使わせていただきます。
・Moment.js
https://js.cybozu.com/momentjs/2.13.0/moment-with-locales.min.js
・jQuery
https://js.cybozu.com/jquery/2.2.4/jquery.min.js
JavaScriptは
上から下の順に
実行されます。


# Page. 60

![Page Image](https://bcdn.docswell.com/page/4JQ88GK57P.jpg)

一覧のインライン編集で勤続年月を計算する


# Page. 61

![Page Image](https://bcdn.docswell.com/page/K74225PVJ1.jpg)

レコード一覧画面のレコード削除前のプロパティ
kintone.events.on(&#039;app.record.index.delete.submit, function(event) {
プロパティ名
型
説明
appId
数値
アプリID
record
オブジェクト
レコードオブジェクト
recordId
数値
レコードID


# Page. 62

![Page Image](https://bcdn.docswell.com/page/LJ1MMW94EG.jpg)

レコード削除を許可していないことを明示的に示す
04_record_index_delete.js
(function() {
&quot;use strict&quot;;
//レコード一覧画面削除前イベント
kintone.events.on(&#039;app.record.index.delete.submit&#039;, function(event) {
event.error = &#039;削除は出来ません。不要なレコードは「無効」をチェックしてください。&#039;
return event;
});
})();


# Page. 63

![Page Image](https://bcdn.docswell.com/page/GJW336QZJ2.jpg)

レコード削除を許可していないことを明示的に示す
04_record_index_delete.js


# Page. 64

![Page Image](https://bcdn.docswell.com/page/4EZVVYWLJ3.jpg)

詳細画面のイベント


# Page. 65

![Page Image](https://bcdn.docswell.com/page/Y7655DGMEV.jpg)

レコード詳細画面の表示イベントのプロパティ
kintone.events.on(&#039;app.record.detail.show, function(event) {
プロパティ名
型
説明
appId
数値
アプリID
record
オブジェクト
レコードオブジェクト
recordId
数値
レコードID
発生タイミング
・レコード詳細画面が表示された時(通知から、ページ送りからも対象)
・レコード編集画面で[保存]または[キャンセル]をした後(編集モードを終了した後)
フィールドの値に応じた制御
・フィールドの表示/非表示を切り替える


# Page. 66

![Page Image](https://bcdn.docswell.com/page/G75YY3VQ74.jpg)

フィールドを非表示にする
05_record_detail.js
(function() {
&quot;use strict&quot;;
//レコード詳細画面表示イベント
kintone.events.on(&#039;app.record.detail.show&#039;, function(event) {
kintone.app.record.setFieldShown(&#039;emp_code&#039;,false);
});
~中略~
})();
非表示にできないフィールド
・ラベル
・罫線
・スペース
・テーブル内のフィールド


# Page. 67

![Page Image](https://bcdn.docswell.com/page/9J2GGZ3WJR.jpg)

フィールドを非表示にする
05_record_detail.js


# Page. 68

![Page Image](https://bcdn.docswell.com/page/DEYVVR19EM.jpg)

レコード詳細画面の削除イベントのプロパティ
kintone.events.on(&#039;app.record.detail.delete.submit, function(event) {
プロパティ名
型
説明
appId
数値
アプリID
record
オブジェクト
レコードオブジェクト
recordId
数値
レコードID


# Page. 69

![Page Image](https://bcdn.docswell.com/page/VJNMMD2D78.jpg)

レコード削除を許可していないことを明示的に示す
05_record_detail.js
(function() {
&quot;use strict&quot;;
~ 中略~
//レコード一覧画面削除前イベント
kintone.events.on(&#039;app.record.delete.delete.submit&#039;, function(event) {
event.error = &#039;削除は出来ません。不要なレコードは「無効」をチェックしてください。&#039;
return event;
});
~中略~
})();


# Page. 70

![Page Image](https://bcdn.docswell.com/page/YE9NNG18E3.jpg)

レコード削除を許可していないことを明示的に示す
05_record_detail.js


# Page. 71

![Page Image](https://bcdn.docswell.com/page/GE8KKV4Z7D.jpg)

プロセス管理のアクションイベントのプロパティ
kintone.events.on(&#039;app.record.detail.process.procedd, function(event) {
プロパティ名
型
説明
action
オブジェクト {value : ~~~~~ }
実行したアクション
status
オブジェクト {value : ~~~~~ }
変更前のステータス
nextStatus
オブジェクト {value : ~~~~~ }
変更後のステータス
record
オブジェクト
レコードオブジェクト
・PC用のみ
・eventオブジェクトをreturnすることでレコード情報の更新が可能(レコード編集権限は必要)。
・falseをreturn した場合、event.errorプロパティを設定してeventをreturnした場合に
アクションをキャンセル
・不正な値をreturnした場合もアクションがキャンセル


# Page. 72

![Page Image](https://bcdn.docswell.com/page/LELZZ561JR.jpg)

特定のプロセスアクション実行時に必須チェックする
05_record_detail.js
(function() {
&quot;use strict&quot;;
~ 中略~
//プロセス管理のアクション実行時のイベント
kintone.events.on(&#039;app.record.detail.process.proceed&#039;,function(event){
if (event.nextStatus[&#039;value&#039;] == &#039;処理中&#039;){
var record = event.record;
if (record[&#039;entering_date&#039;][&#039;value&#039;] == null){
event.error = &#039;処理中にする前に入社日を入力してください。&#039;
return event;
}
}
});
})();


# Page. 73

![Page Image](https://bcdn.docswell.com/page/4JMVV355JW.jpg)

特定のプロセスアクション実行時に必須チェックする
05_record_detail.js


# Page. 74

![Page Image](https://bcdn.docswell.com/page/PJR22Q3ZE9.jpg)

追加画面のイベント


# Page. 75

![Page Image](https://bcdn.docswell.com/page/PEXDD5417X.jpg)

レコード追加画面の表示イベントのプロパティ
kintone.events.on(&#039;app.record.create.show, function(event) {
プロパティ名
型
説明
appId
数値
アプリID
record
オブジェクト
レコード追加画面表示時のデータ(初期値)を保持したレコードオブ
ジェクト
reuse
真偽値
再利用の場合はtrue , 通常の追加はfalse


# Page. 76

![Page Image](https://bcdn.docswell.com/page/3EKXX6ZM7D.jpg)

レコード追加画面表示イベントフィールドの値に応じた制御
・フィールドの編集可/不可を設定する
・フィールドの値を書き換える
・フィールドにエラーを表示する
・画面の上部にエラーを表示する
・フィールドの表示/非表示を切り替える
・ルックアップの取得を自動で行う


# Page. 77

![Page Image](https://bcdn.docswell.com/page/L73556D2E5.jpg)

レコードの追加画面表示イベントで
フィールドの編集可/不可を設定する
06_record_create.js
kintone.events.on(&#039;app.record.create.show&#039;, function(event) {
var record = event.record;
record[&#039;continued_month&#039;][&#039;disabled&#039;] = true;
return event;
}


# Page. 78

![Page Image](https://bcdn.docswell.com/page/87DDDVP67G.jpg)

レコードの追加画面表示イベントで
フィールドの編集可/不可を設定する


# Page. 79

![Page Image](https://bcdn.docswell.com/page/VJPXXV1Z78.jpg)

レコード追加画面の保存実行前のプロパティ
kintone.events.on(&#039;app.record.create.submit, function(event) {
プロパティ名
型
説明
appId
数値
アプリID
record
オブジェクト
レコードオブジェクト
フィールドの値に応じた制御
・フィールドの編集可/不可を設定する
・フィールドの値を書き換える
・フィールドにエラーを表示する
・画面の上部にエラーを表示する
・フィールドの表示/非表示を切り替える


# Page. 80

![Page Image](https://bcdn.docswell.com/page/2EVLLZYMJQ.jpg)

レコード追加画面の保存実行前イベントでフィール
ドにエラーを表示する
06_record_create.js
kintone.events.on(&#039;app.record.create.submit, function(event) {
var record = event.record;
if (record[&#039;emp_code&#039;][&#039;value&#039;].charAt(0) != &#039;S&#039;){
record[&#039;emp_code&#039;][&#039;error&#039;] = &#039;社員コードの1文字目はSにしてください&#039;;
return event;
}
}
・PC用とスマートフォン用で利用可能
・スペースに貼り付けたアプリには利用出来ない


# Page. 81

![Page Image](https://bcdn.docswell.com/page/57GXX49XEL.jpg)

レコード追加画面の保存実行前イベントでフィール
ドにエラーを表示する


# Page. 82

![Page Image](https://bcdn.docswell.com/page/4EQ88GW5JP.jpg)

エラーを設定してもエラーが発生しないフィールド
・レコード番号
・作成者
・作成日時
・更新者
・更新日時
・ステータス
・作業者


# Page. 83

![Page Image](https://bcdn.docswell.com/page/KJ4225KVE1.jpg)

レコード追加画面の保存成功後のプロパティ
kintone.events.on(&#039;app.record.create.submit.success, function(event) {
プロパティ名
型
説明
appId
数値
アプリID
record
オブジェクト
レコードオブジェクト
recordId
数値
レコードID


# Page. 84

![Page Image](https://bcdn.docswell.com/page/LE1MMWX47G.jpg)

レコード追加画面のフィールド値変更時のプロパティ
kintone.events.on(&#039;app.record.create.change.&lt;fieldcode&gt;, function(event) {
プロパティ名
型
説明
appId
数値
アプリID
record
オブジェクト
レコードオブジェクト
changes
オブジェクト
変更されたオブジェクト
changes.field
オブジェクト
変更されたフィールドのオブジェクト
changes.row
オブジェクト
変更されたテーブル行のオブジェクト
・テーブルに行を追加した場合 : 追加した行オブジェクト
・テーブルの行を削除した場合 : null
・テーブル外のフィールドを変更した場合 : null


# Page. 85

![Page Image](https://bcdn.docswell.com/page/GEW336NZE2.jpg)

フィールド値変更イベントに指定可能なフィールド
下記以外の種類のフィールドを指定した場合は何も発生しません
・ラジオボタン
・ドロップダウン
・チェックボックス
・複数選択
・ユーザー選択
・組織選択
・グループ選択
・日付
・時刻
・日時
・文字列(1行)
・数値
・テーブル


# Page. 86

![Page Image](https://bcdn.docswell.com/page/47ZVVY3LE3.jpg)

レコード一覧画面のフィールドの値に応じた制御
・フィールドの編集可/不可を設定する
・フィールドの値を書き換える
・フィールドにエラーを表示する
・画面の上部にエラーを表示する
・ルックアップの取得を自動で行う
・フィールドの表示/非表示を切り替える
・変更されたフィールドやテーブル内の行オブジェクトを
参照する


# Page. 87

![Page Image](https://bcdn.docswell.com/page/YJ655DXM7V.jpg)

レコード追加画面で勤続年月を計算する
07_entering_date_edit.js
jQuery.noConflict();
(function() {
&quot;use strict&quot;;
~~ 中略 ~~
//レコード追加画面表示後イベント
kintone.events.on(&#039;app.record.create.change.entering_date&#039;, function(event) {
return entring_date_change(event);
});
})();


# Page. 88

![Page Image](https://bcdn.docswell.com/page/GJ5YY3XQJ4.jpg)

編集画面のイベント


# Page. 89

![Page Image](https://bcdn.docswell.com/page/LE3556XZJ5.jpg)

レコード編集画面の表示イベントのプロパティ
kintone.events.on(&#039;app.record.edit.show, function(event) {
プロパティ名
型
説明
appId
数値
アプリID
record
オブジェクト
レコード追加画面表示時のデータ(初期値)を保持したレコードオブ
ジェクト
recordId
数値
レコードID


# Page. 90

![Page Image](https://bcdn.docswell.com/page/8EDDDV24EG.jpg)

レコード一覧画面のフィールドの値に応じた制御
・フィールドの編集可/不可を設定する
・フィールドの値を書き換える
・フィールドにエラーを表示する
・画面の上部にエラーを表示する
・フィールドの表示/非表示を切り替える
・ルックアップの取得を自動で行う


# Page. 91

![Page Image](https://bcdn.docswell.com/page/V7PXXV1VE8.jpg)

レコードの編集画面表示イベントで
フィールドの編集可/不可を設定する
08_record_edit.js
kintone.events.on(&#039;app.record.edit.show&#039;, function(event) {
var record = event.record;
record[&#039;continued_month&#039;][&#039;disabled&#039;] = true;
return event;
}


# Page. 92

![Page Image](https://bcdn.docswell.com/page/2JVLLZYR7Q.jpg)

レコードの編集画面表示イベントで
フィールドの編集可/不可を設定する


# Page. 93

![Page Image](https://bcdn.docswell.com/page/5EGXX496JL.jpg)

レコード編集画面の保存実行前のプロパティ
kintone.events.on(&#039;app.record.edit.submit, function(event) {
プロパティ名
型
説明
appId
数値
アプリID
record
オブジェクト
レコードオブジェクト
recordId
数値
レコードID
フィールドの値に応じた制御
・フィールドの編集可/不可を設定する
・フィールドの値を書き換える
・フィールドにエラーを表示する
・画面の上部にエラーを表示する
・フィールドの表示/非表示を切り替える


# Page. 94

![Page Image](https://bcdn.docswell.com/page/4JQ88GW27P.jpg)

レコード編集画面の保存実行前イベントでフィール
ドにエラーを表示する
08_record_edit.js
kintone.events.on(&#039;app.record.edit.submit, function(event) {
var record = event.record;
if (record[&#039;emp_code&#039;][&#039;value&#039;].charAt(0) != &#039;S&#039;){
record[&#039;emp_code&#039;][&#039;error&#039;] = &#039;社員コードの1文字目はSにしてください&#039;;
return event;
}
}
・PC用とスマートフォン用で利用可能
・スペースに貼り付けたアプリには利用出来ない


# Page. 95

![Page Image](https://bcdn.docswell.com/page/K74225KPJ1.jpg)

レコード編集画面の保存実行前イベントでフィール
ドにエラーを表示する


# Page. 96

![Page Image](https://bcdn.docswell.com/page/LJ1MMWXXEG.jpg)

エラーを設定してもエラーが発生しないフィールド
・レコード番号
・作成者
・作成日時
・更新者
・更新日時
・ステータス
・作業者


# Page. 97

![Page Image](https://bcdn.docswell.com/page/GJW336NKJ2.jpg)

レコード編集画面の保存成功後のプロパティ
kintone.events.on(&#039;app.record.edit.submit.success, function(event) {
プロパティ名
型
説明
appId
数値
アプリID
record
オブジェクト
レコードオブジェクト
recordId
数値
レコードID


# Page. 98

![Page Image](https://bcdn.docswell.com/page/4EZVVY3NJ3.jpg)

レコード編集画面のフィールド値変更時のプロパティ
kintone.events.on(&#039;app.record.edit.change.&lt;fieldcode&gt;, function(event) {
プロパティ名
型
説明
appId
数値
アプリID
record
オブジェクト
レコードオブジェクト
changes
オブジェクト
変更されたオブジェクト
changes.field
オブジェクト
変更されたフィールドのオブジェクト
changes.row
オブジェクト
変更されたテーブル行のオブジェクト
・テーブルに行を追加した場合 : 追加した行オブジェクト
・テーブルの行を削除した場合 : null
・テーブル外のフィールドを変更した場合 : null
recordId
数値
レコードID


# Page. 99

![Page Image](https://bcdn.docswell.com/page/Y7655DX9EV.jpg)

フィールド値変更イベントに指定可能なフィールド
下記以外の種類のフィールドを指定した場合は何も発生しません
・ラジオボタン
・ドロップダウン
・チェックボックス
・複数選択
・ユーザー選択
・組織選択
・グループ選択
・日付
・時刻
・日時
・文字列(1行)
・数値
・テーブル


# Page. 100

![Page Image](https://bcdn.docswell.com/page/G75YY3XD74.jpg)

レコード一覧画面のフィールドの値に応じた制御
・フィールドの編集可/不可を設定する
・フィールドの値を書き換える
・フィールドにエラーを表示する
・画面の上部にエラーを表示する
・ルックアップの取得を自動で行う
・フィールドの表示/非表示を切り替える
・変更されたフィールドやテーブル内の行オブジェクトを
参照する


# Page. 101

![Page Image](https://bcdn.docswell.com/page/9J2GGZQMJR.jpg)

編集時に勤続年月を計算する
07_entering_date_edit.js
jQuery.noConflict();
(function() {
&quot;use strict&quot;;
~~ 中略 ~~
//レコード編集画面表示後イベント
kintone.events.on(&#039;app.record.edit.change.entering_date&#039;, function(event) {
return entring_date_change(event);
});
})();


# Page. 102

![Page Image](https://bcdn.docswell.com/page/DEYVVRWPEM.jpg)

複数のイベントをまとめて定義する
10_entering_date_edit.js
jQuery.noConflict();
(function() {
&quot;use strict&quot;;
~~ 中略 ~~
var change_events = [
&#039;app.record.index.edit.change.entering_date&#039;,
&#039;app.record.create.change.entering_date&#039;,
&#039;app.record.edit.change.entering_date&#039;
]
kintone.events.on(change_events, function(event) {
return entring_date_change(event);
});
})();


# Page. 103

![Page Image](https://bcdn.docswell.com/page/VJNMMD9M78.jpg)

印刷画面のイベント


# Page. 104

![Page Image](https://bcdn.docswell.com/page/YE9NNG2WE3.jpg)

レコード印刷画面表示イベントのプロパティ
kintone.events.on(&#039;app.record.print.show, function(event) {
プロパティ名
型
説明
appId
数値
アプリID
record
オブジェクト
レコードオブジェクト
recordId
数値
レコードID
フィールドの値に応じた制御
・フィールドの表示/非表示を切り替える


# Page. 105

![Page Image](https://bcdn.docswell.com/page/GE8KKV5R7D.jpg)

印刷時にフィールドを非表示にする
09_print.js
(function() {
&quot;use strict&quot;;
//レコード印刷画面表示イベント
kintone.events.on(&#039;app.record.print.show&#039;, function(event) {
kintone.app.record.setFieldShown(&#039;emp_name&#039;,false);
});
~中略~
})();
非表示にできないフィールド
・ラベル
・罫線
・スペース


# Page. 106

![Page Image](https://bcdn.docswell.com/page/LELZZ5Y2JR.jpg)

印刷時にフィールドを非表示にする


# Page. 107

![Page Image](https://bcdn.docswell.com/page/4JMVV3N9JW.jpg)

グラフ画面のイベント


# Page. 108

![Page Image](https://bcdn.docswell.com/page/PJR22QD9E9.jpg)

グラフ画面表示イベントのプロパティ
kintone.events.on(&#039;app.report.show, function(event) {
プロパティ名
appId
型
数値
説明
アプリID


# Page. 109

![Page Image](https://bcdn.docswell.com/page/PEXDD5137X.jpg)

情報取得


# Page. 110

![Page Image](https://bcdn.docswell.com/page/3EKXX62N7D.jpg)

情報取得
ここまでイベントのプロパティから情報を取得する方法が
出てきましたが、
kintoneには用意された関数で
レコード、
アプリ、
ログインユーザー
などの情報を取得する事も出来ます。


# Page. 111

![Page Image](https://bcdn.docswell.com/page/L735564ZE5.jpg)

関数
var user = kintone.getLoginUser();


# Page. 112

![Page Image](https://bcdn.docswell.com/page/87DDDVQ47G.jpg)

関数
var user = kintone.getLoginUser();
返り値
(を格納している変数)
関数
引数


# Page. 113

![Page Image](https://bcdn.docswell.com/page/VJPXXVLV78.jpg)

ログインユーザー情報の取得
11_get_login_user.js
(function() {
&quot;use strict&quot;;
//レコード追加画面表示イベント
kintone.events.on(&#039;app.record.create.show&#039;, function(event) {
var user = kintone.getLoginUser();
console.log(user);
console.log(user.name);
console.log(user.code);
});
})();


# Page. 114

![Page Image](https://bcdn.docswell.com/page/2EVLLZQRJQ.jpg)

getLoginUserの返り値パラメータ
パラメータ
型
値と説明
id
文字列
ユーザーID。システムが自動採番。
code
文字列
ログイン名。ゲストユーザーは「Email」。
name
文字列
表示名。ゲストユーザーは「名前」。
email
文字列
E-mail。
url
文字列
URL。ゲストユーザーは空白。
employeeNumber
文字列
従業員ID。ゲストユーザーは空白。
phone
文字列
電話番号。
mobilePhone
文字列
携帯。ゲストユーザーは空白。
extensionNumber
文字列
内線。ゲストユーザーは空白。
timzone
文字列
タイムゾーン
isGuest
真偽値
true or false
language
文字列
言語とタイムゾーンで設定されたユーザーの言語。「webブラウザーの設定に従う」設定はブラウザの言語
設定。 ja - 日本語 , en - 英語 , zh - 中国語


# Page. 115

![Page Image](https://bcdn.docswell.com/page/57GXX4W6EL.jpg)

レコード詳細情報取得関数
関数
返り値 または説明
引数
kintone.app.record.getId()
レコードID , 利用できない画面ではnull
なし
kintone.app.record.get()
レコードデータのオブジェクト, 利用できない画面では
null
なし
kintone.app.record.getFieldElement()
フィールド要素
フィールドコード
kintone.app.record.set()
レコードに値をセットする
レコードデータ(JSON)
kintone.app.record.getHeaderMenuSpaceElement()
メニューの上側の空白部分の要素
なし
kinotne.app.record.getSpaceElement()
指定されたスペースフィールドの要素
要素ID
kintone.app.getRelatedRecordsTargetAppId()
関連レコード一覧の参照先アプリのID
フィールドコード
kintone.app.getLookupTargetAppId()
ルックアップフィールドの参照先アプリのID
フィールドコード


# Page. 116

![Page Image](https://bcdn.docswell.com/page/4EQ88G32JP.jpg)

レコード一覧情報取得関数
関数
返り値 または説明
引数
kintone.app.record.getQueryCondition()
一覧の絞り込み情報クエリ文字列
なし
kintone.app.getQuery()
一覧の絞り込み情報クエリ文字列(order by,limit,offset付)
なし
kintone.app.getFieldElements()
指定したフィールド要素の配列
フィールドコード
kintone.app.getHeaderMenuSpaceElement()
メニューの右側の空白部分の要素
なし
kintone.app.getHeaderSpaceElement()
メニューの下側の空白部分の要素
なし


# Page. 117

![Page Image](https://bcdn.docswell.com/page/KJ42251PE1.jpg)

kintone REST APIの実行


# Page. 118

![Page Image](https://bcdn.docswell.com/page/LE1MMWGX7G.jpg)

kintone REST APIをリクエスト
kintone REST APIをJavaScriptからリクエストする事ができま
す。
kintone.api(pathOrUrl, method, params, callback, opt_errback);
kintone.api(&#039;/v1/user/organizations&#039;,
&#039;GET&#039;, {
code: user.code
},
function(resp) {
var record = kintone.app.record.get();
var organization = resp.organizationTitles[0].organization;
record[&#039;record&#039;][&#039;create_section&#039;][&#039;value&#039;] = [{
&quot;code&quot;: organization.code,
&quot;name&quot;: organization.name
}];
kintone.app.record.set(record);
});


# Page. 119

![Page Image](https://bcdn.docswell.com/page/GEW336KKE2.jpg)

新規レコード追加時にユーザー情報と組織情報を初期値登録する
12_get_login_org.js
(function() {
&#039;use strict&#039;;
kintone.events.on(&#039;app.record.create.show&#039;, function(event) {
var user = kintone.getLoginUser();
var record = event.record;
record[&#039;create_user&#039;][&#039;value&#039;] = [{
&quot;code&quot;: user.code,
&quot;name&quot;: user.name
}];
kintone.api(&#039;/v1/user/organizations&#039;,
&#039;GET&#039;, {
code: user.code
},
function(resp) {
var record = kintone.app.record.get();
var organization = resp.organizationTitles[0].organization;
record[&#039;record&#039;][&#039;create_section&#039;][&#039;value&#039;] = [{
&quot;code&quot;: organization.code,
&quot;name&quot;: organization.name
}];
kintone.app.record.set(record);
});
return event;
});
})();


# Page. 120

![Page Image](https://bcdn.docswell.com/page/47ZVVYZNE3.jpg)

新規レコード追加時にユーザー情報と組織情報を初期値登録する


# Page. 121

![Page Image](https://bcdn.docswell.com/page/YJ655DZ97V.jpg)

新規レコード追加時にユーザー情報と組織情報を初期値登録する


# Page. 122

![Page Image](https://bcdn.docswell.com/page/GJ5YY3WDJ4.jpg)

新規レコード追加時にユーザー情報と組織情報を初期値登録する


# Page. 123

![Page Image](https://bcdn.docswell.com/page/9E2GGZ2MER.jpg)

新規レコード追加時にユーザー情報と組織情報を初期値登録する


# Page. 124

![Page Image](https://bcdn.docswell.com/page/D7YVVRYP7M.jpg)

新規レコード追加時にユーザー情報と組織情報を初期値登録する
タイプ : ユーザー選択
フィールド名 : 登録者
フィールドコード : create_user


# Page. 125

![Page Image](https://bcdn.docswell.com/page/VENMMDPMJ8.jpg)

新規レコード追加時にユーザー情報と組織情報を初期値登録する
タイプ :組織選択
フィールド名 : 登録部門
フィールドコード : create_section


# Page. 126

![Page Image](https://bcdn.docswell.com/page/Y79NNG3W73.jpg)

新規レコード追加時にユーザー情報と組織情報を初期値登録する


# Page. 127

![Page Image](https://bcdn.docswell.com/page/G78KKVMRJD.jpg)

新規レコード追加時にユーザー情報と組織情報を初期値登録する


# Page. 128

![Page Image](https://bcdn.docswell.com/page/L7LZZ532ER.jpg)

外部APIの実行


# Page. 129

![Page Image](https://bcdn.docswell.com/page/4EMVV3D9EW.jpg)

外部APIをリクエスト
外部APIをJavaScriptからリクエストする事ができます。
kintone.proxy(url, method, headers , data, callback, opt_errback);
kintone.api(&#039;http://weather.livedoor.com/forecast/webservice/json/v1?city=&#039; + city_code,
&#039;GET&#039;, {},{},
function(resp) {
var resp_json = eval(&quot;(&quot; + resp + &quot;)&quot;);
console.log(resp_json);
var record = kintone.app.record.get();
record[&#039;record&#039;][&#039;weather&#039;][&#039;value&#039;] = resp_json.description.text;
kintone.app.record.set(record);
});
※GET/DELETEの場合、dataは無視されるのでパラメータはURLにのせる必要があります。


# Page. 130

![Page Image](https://bcdn.docswell.com/page/PER22Q4979.jpg)

フィールド変更時にAPIから天気情報を取得する
13_get_weather_api.js
function() {
&quot;use strict&quot;;
//レコード新規作成時フィールド変更イベント
kintone.events.on(&#039;app.record.create.change.city_code&#039;, function(event) {
var record = event.record;
var city_code = record[&#039;city_code&#039;][&#039;value&#039;];
console.log(city_code);
kintone.proxy(&#039;http://weather.livedoor.com/forecast/webservice/json/v1?city=&#039; + city_code,
&#039;GET&#039;, {},{},
function(resp) {
var resp_json = eval(&quot;(&quot; + resp + &quot;)&quot;);
console.log(resp_json);
var record = kintone.app.record.get();
record[&#039;record&#039;][&#039;weather&#039;][&#039;value&#039;] = resp_json.description.text;
kintone.app.record.set(record);
});
});
})();


# Page. 131

![Page Image](https://bcdn.docswell.com/page/P7XDD523JX.jpg)

フィールド変更時にAPIから天気情報を取得する
タイプ : ドロップダウン
フィールド名 : 都市
フィールドコード : city_code
項目:
270000
130010
170010
230010
260010


# Page. 132

![Page Image](https://bcdn.docswell.com/page/37KXX6MNJD.jpg)

フィールド変更時にAPIから天気情報を取得する
タイプ : 文字列(複数行)
フィールド名 : 天気
フィールドコード : weather


# Page. 133

![Page Image](https://bcdn.docswell.com/page/LJ3556YZ75.jpg)

フィールド変更時にAPIから天気情報を取得する


# Page. 134

![Page Image](https://bcdn.docswell.com/page/8JDDDV54JG.jpg)

フィールド変更時にAPIから天気情報を取得する


# Page. 135

![Page Image](https://bcdn.docswell.com/page/VEPXXVGVJ8.jpg)

フィールド変更時にAPIから天気情報を取得する


# Page. 136

![Page Image](https://bcdn.docswell.com/page/27VLLZ6REQ.jpg)

more...


# Page. 137

![Page Image](https://bcdn.docswell.com/page/5JGXX4N67L.jpg)

more...


# Page. 138

![Page Image](https://bcdn.docswell.com/page/47Q88GQ2EP.jpg)

ご清聴ありがとうございました。
Special Thanx to…..


