kintone Café 大阪 vol.12

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

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

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

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

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

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

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

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

[はじめから作成]を選択します

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

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

右上の歯車- [設定]をクリックします

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

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

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

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

[プロセス管理]をクリックします。

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

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

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

社員コード、社員名、入社日を入力しておきます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

レコード一覧画面の表示イベントのプロパティ
プロパティ名型説明
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)

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);
}

レコード一覧画面のインライン編集開始時のプロパティ
record オブジェクトインライン編集開始時のデータを保持したレコードオブジェクト
recordId 数値レコードID
フィールドの値に応じた制御
・フィールドの編集可/不可を設定する

レコード一覧画面のインライン編集イベントで
var record = event.record;
record['continued_month']['disabled'] = true;
return event;
}
・PC用でのみ利用可能
・スペースに貼り付けたアプリには利用出来ない
・編集権限のないフィールドを編集可能([‘disabled’]=false)にして
も反映されない。

レコード一覧画面のインライン編集イベントで

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

レコード一覧画面のインライン編集保存実行前のプロパティ
kintone.events.on('app.record.index.edit.submit, function(event) {
record オブジェクトレコードオブジェクト
・フィールドの値を書き換える
・フィールドにエラーを表示する
・画面の上部にエラーを表示する

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

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

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

レコード一覧画面のインライン編集保存成功後のプロパティ
kintone.events.on('app.record.index.edit.submit.success, function(event) {

レコード一覧画面のインライン編集保存実行前のプロパティ
kintone.events.on('app.record.index.edit.change.<fieldcode>, function(event) {
changes オブジェクト変更されたオブジェクト
changes.field オブジェクト変更されたフィールドのオブジェクト

レコード一覧画面のフィールドの値に応じた制御
・変更されたフィールド、テーブル内の行オブジェクトを取得する

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

外部ライブラリを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は
上から下の順に
実行されます。

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

レコード一覧画面のレコード削除前のプロパティ
kintone.events.on('app.record.index.delete.submit, function(event) {

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

04_record_index_delete.js

レコード詳細画面の表示イベントのプロパティ
kintone.events.on('app.record.detail.show, function(event) {
・フィールドの表示/非表示を切り替える
発生タイミング
・レコード詳細画面が表示された時(通知から、ページ送りからも対象)
・レコード編集画面で[保存]または[キャンセル]をした後(編集モードを終了した後)

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

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

レコード詳細画面の削除イベントのプロパティ
kintone.events.on('app.record.detail.delete.submit, function(event) {

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

05_record_detail.js

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

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

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

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

レコード追加画面表示イベントフィールドの値に応じた制御
・ルックアップの取得を自動で行う

レコードの追加画面表示イベントで
kintone.events.on('app.record.create.show', function(event) {
return event;
}
06_record_create.js

レコードの追加画面表示イベントで

レコード追加画面の保存実行前のプロパティ
kintone.events.on('app.record.create.submit, function(event) {

レコード追加画面の保存実行前イベントでフィールドにエ
ラーを表示する
kintone.events.on('app.record.create.submit, function(event) {
return event;
}
}
・PC用とスマートフォン用で利用可能
06_record_create.js

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

レコード追加画面の保存成功後のプロパティ
kintone.events.on('app.record.create.submit.success, function(event) {

レコード追加画面のフィールド値変更時のプロパティ
kintone.events.on('app.record.create.change.<fieldcode>, function(event) {
changes.row オブジェクト変更されたテーブル行のオブジェクト
・テーブルに行を追加した場合 : 追加した行オブジェクト
・テーブルの行を削除した場合 : null
・テーブル外のフィールドを変更した場合 : null

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

・変更されたフィールドやテーブル内の行オブジェクトを
　参照する

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

レコード編集画面の表示イベントのプロパティ
kintone.events.on('app.record.edit.show, function(event) {
record オブジェクトレコード追加画面表示時のデータ(初期値)を保持したレコードオブジェクト

レコードの編集画面表示イベントで
kintone.events.on('app.record.edit.show', function(event) {
return event;
}
08_record_edit.js

レコードの編集画面表示イベントで

レコード編集画面の保存実行前のプロパティ
kintone.events.on('app.record.edit.submit, function(event) {

レコード編集画面の保存実行前イベントでフィールドにエ
kintone.events.on('app.record.edit.submit, function(event) {
return event;
}
}
・PC用とスマートフォン用で利用可能
08_record_edit.js

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

レコード編集画面の保存成功後のプロパティ
kintone.events.on('app.record.edit.submit.success, function(event) {

レコード編集画面のフィールド値変更時のプロパティ
kintone.events.on('app.record.edit.change.<fieldcode>, function(event) {
changes.row オブジェクト変更されたテーブル行のオブジェクト
・テーブルに行を追加した場合 : 追加した行オブジェクト
・テーブルの行を削除した場合 : null
・テーブル外のフィールドを変更した場合 : null

編集時に勤続年月を計算する
(function() {
"use strict";
~~ 中略 ~~
//レコード編集画面表示後イベント
kintone.events.on('app.record.edit.change.entering_date', function(event) {
});
})();

複数のイベントをまとめて定義する
(function() {
"use strict";
~~ 中略 ~~
var change_events = [
'app.record.index.edit.change.entering_date',
'app.record.create.change.entering_date',
'app.record.edit.change.entering_date'
]
kintone.events.on(change_events, function(event) {
});
})();

レコード印刷画面表示イベントのプロパティ
kintone.events.on('app.record.print.show, function(event) {

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

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

グラフ画面のイベント

グラフ画面表示イベントのプロパティ
kintone.events.on('app.report.show, function(event) {

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

関数
var user = kintone.getLoginUser();

関数
返り値
(を格納している変数)
関数引数

ログインユーザー情報の取得
(function() {
"use strict";
//レコード追加画面表示イベント
console.log(user);
console.log(user.name);
console.log(user.code);
});
})();
11_get_login_user.js

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 - 中国語

レコード詳細情報取得関数
関数返り値または説明引数
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 フィールドコード

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

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

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

タイプ : ユーザー選択
フィールド名 : 登録者
フィールドコード : create_user

タイプ :組織選択
フィールド名 : 登録部門
フィールドコード : create_section

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

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

タイプ : ドロップダウン
フィールド名 : 都市
フィールドコード : city_code
項目:
270000
130010
170010
230010
260010

タイプ : 文字列(複数行)
フィールド名 : 天気
フィールドコード : weather

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

kintone Café 大阪 vol.12

Recommended

Recommended

More Related Content

More from Mitsuhiro Yamashita

More from Mitsuhiro Yamashita (20)

kintone Café 大阪 vol.12