2016年12月のアップデート
で以下のモバイル用のkintone JavaScript APIが追加されます。
今回は「問い合わせ管理アプリ」を使って、それらのAPIを触ってみたいと思います。
まだ部分的ではありますが、PC同様の動きをモバイルでも実装できるようになり、活用の幅が広がりました!
本記事では、以下の3つのカスタマイズを紹介します。
- カスタマイズ1:ラジオボタンの選択によって、フィールドの表示非表示を切り替える(レコード追加/編集/詳細画面)
- カスタマイズ2:ドロップダウンフィールドの値を変更に合せて、テーブルの行追加をする(レコード追加/編集画面)
- カスタマイズ3:アラートを表示する(レコード保存実行前)
次のモバイル用の新機能をふんだんに使っています!
本記事のサンプルプログラムでは、比較検証用にPC用のAPIも使用しています。
今回はアプリストアにある「問い合わせ管理アプリ」を利用します。
アプリの具体的な作成方法は、以下のヘルプを確認してください。
アプリをはじめから作成する
利用するフィールドとフィールドコードは以下のとおり設定してください。
アプリストアのアプリから追加しているフィールドもあります。
フィールド名 |
フィールドコード |
フィールドタイプ |
アプリストアのアプリとの比較 |
問い合わせ種別 |
QType |
ラジオボタン |
|
その他 |
Other |
文字列(1行) |
新規追加 |
対応種別 |
CType |
ドロップダウン |
新規追加 |
- |
Table |
テーブル |
|
対応日時 |
Date |
日時 |
フィールドコード修正 |
対応種別 |
CType2 |
ドロップダウン |
新規追加、フィールドコード修正 |
対応詳細 |
Content |
文字列(複数行) |
フィールド名/フィールドコード修正 |
添付ファイル |
File |
添付ファイル |
フィールドコード修正 |
さて、ここからは追加されたAPIを使って、ひとつずつ「問い合わせ管理アプリ」にカスタマイズを加えていきましょう。
ファイルの適用方法については次のページを参照してください。
JavaScriptやCSSでアプリをカスタマイズする
カスタマイズ1:ラジオボタンの選択によって、フィールドの表示非表示を切り替える
固定リンクがコピーされました
レコード追加/編集/詳細画面で、フィールドの表示/非表示を切り替えることができるようになったので、そのカスタマイズを実装したいと思います。
フィールドの表示/非表示を切り替える
カスタマイズ例
ラジオボタンの選択肢によって、文字列フィールドの表示/非表示を切り替える例です。
PC版のイメージ
モバイル版のイメージ
サンプルプログラム
問い合わせ種別のラジオボタンで「その他」を選択したときのみ、文字列フィールドの「その他」が表示されるようにカスタマイズしています。
フィールドの表示/非表示の切り替え方法は
回答の条件によって別フィールドの表示/非表示を切り替えるを参照しています。
「問い合わせ管理アプリ」に、以下のJavaScriptファイルを適用してください。
忘れずにPC用のJavaScriptファイル、モバイル用のJavaScriptファイル、両方の欄に適用してください。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
/*
* モバイルAPIを使ったサンプルプログラム
* Copyright (c) 2016 Cybozu
*
* Licensed under the MIT License
*/
(function() {
'use strict';
// ラジオボタンの選択によってフィールドの表示・非表示を切り替える
const events1 = [
'app.record.detail.show',
'app.record.create.show',
'app.record.create.change.QType',
'app.record.edit.change.QType',
'mobile.app.record.detail.show',
'mobile.app.record.create.show',
'mobile.app.record.create.change.QType',
'mobile.app.record.edit.change.QType'
];
kintone.events.on(events1, (event) => {
const record = event.record;
const QType = record.QType.value;
if (QType === 'その他') {
kintone.app.record.setFieldShown('Other', true);
kintone.mobile.app.record.setFieldShown('Other', true);
} else {
kintone.app.record.setFieldShown('Other', false);
kintone.mobile.app.record.setFieldShown('Other', false);
}
return event;
});
})();
|
カスタマイズ2:ドロップダウンフィールドの値を変更に合せて、テーブルの行追加をする
固定リンクがコピーされました
今回、PC同様にモバイル用にフィールド値変更時イベントが追加されました。
これらのイベントが発生する際に、テーブルの行の追加をしてみたいと思います。
カスタマイズ例
以下のカスタマイズを実装します。
- ドロップダウンフィールドの値をドロップダウンフィールドの選択肢を変更する毎に、テーブルの行を末尾に追加する。
- ドロップダウンフィールドの値をテーブル内のドロップダウンフィールドにも引き継ぐ。
PC版のイメージ
モバイル版のイメージ
サンプルプログラム
ドロップダウンの選択を変更した時点で、changeイベントが発生してテーブルの末尾に行が追加されるようにカスタマイズしています。
「問い合わせ管理アプリ」に以下のJavaScriptファイルを適用してください。
忘れずにPC用のJavaScriptファイル、モバイル用のJavaScriptファイル、両方の欄に適用してください。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
/*
* モバイルAPIを使ったサンプルプログラム
* Copyright (c) 2016 Cybozu
*
* Licensed under the MIT License
*/
(function() {
'use strict';
// ドロップダウンの選択でテーブル行の追加&データ入力をする
const events2 = [
'app.record.create.change.CType',
'app.record.edit.change.CType',
'mobile.app.record.create.change.CType',
'mobile.app.record.edit.change.CType'
];
kintone.events.on(events2, (event) => {
const record = event.record;
const CType = record.CType.value;
record.Table.value.push({
value: {
Date: {
type: 'DATETIME',
value: ''
},
CType2: {
type: 'DROP_DOWN',
value: CType
},
Content: {
type: 'MULTI_LINE_TEXT',
value: ''
},
File: {
type: 'FILE',
value: ''
}
}
});
return event;
});
})();
|
カスタマイズ3:アラートを表示する
固定リンクがコピーされました
こちらもPC同様に、モバイルでもレコード追加/編集画面の保存実行前イベントを使えるようになったので、Cybozu CDNにもあがっている
SweetAlert
のライブラリを使ってアラートを表示させたいと思います。
カスタマイズ例
レコードの保存ボタンをクリックしたときに、アラートを表示します。
PC版のイメージ
モバイル版のイメージ
サンプルプログラム
レコードの保存ボタンを押すと、アラート表示させるというカスタマイズです。コーディングにおいての注意点は2つです。
- PCの場合は、kintoneの設定画面上JavaScriptファイルとCSSファイルをアップロードする場所があります。
しかしこの記事の執筆時点ではモバイルのCSSのファイルをアップロードする場所がありません。
レコードの追加/編集画面でSweetAlertというライブラリのJavaScriptファイルとCSSファイルをまとめて読み込むように設定しています。
- アラート表示するという部分は、
SweetAlertを使って、kintoneでメッセージをスタイリッシュに表示させよう!を参照しています。
リンク先の記事にもあるようにSweetAlertをそのまま記述すると、OKボタンを押す前に画面がリロードしてしまうため、非同期処理としてPromiseの書き方を用いています。
Promiseはつまずきやすいポイントだと思います。
「問い合わせ管理アプリ」に以下のJavaScriptファイルを適用させてください。
忘れずにPC用のJavaScriptファイル、モバイル用のJavaScriptファイル、両方の欄に適用してください。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
/*
* モバイルAPIを使ったサンプルプログラム
* Copyright (c) 2016 Cybozu
*
* Licensed under the MIT License
*/
(function() {
'use strict';
// SweetAlertのライブラリを読み込む
const events3 = [
'app.record.create.show',
'app.record.edit.show',
'mobile.app.record.create.show',
'mobile.app.record.edit.show'
];
kintone.events.on(events3, (event) => {
const loadFiles = function(url, type) {
const head = document.getElementsByTagName('head')[0];
switch (type) {
case 'js': {
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
head.appendChild(script);
break;
}
case 'css': {
const link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = url;
head.appendChild(link);
break;
}
}
};
loadFiles('https://js.cybozu.com/sweetalert/v1.1.3/sweetalert.min.js', 'js');
loadFiles('https://js.cybozu.com/sweetalert/v1.1.3/sweetalert.css', 'css');
});
// 保存実行前にアラートを表示する
const events4 = [
'app.record.create.submit',
'app.record.edit.submit',
'mobile.app.record.create.submit',
'mobile.app.record.edit.submit'
];
kintone.events.on(events4, (event) => {
return new kintone.Promise((resolve, reject) => {
swal({
title: 'この内容で保存してもいいですか?',
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
closeOnConfirm: false,
closeOnCancel: true
},
(isConfirm) => {
if (isConfirm) {
resolve(event);
} else {
reject(event);
}
});
});
});
})();
|
注意点
CSS読み込みをしている以下のコード部分は、kintoneのアップデートのタイミングでhead
の要素IDが変更になると動かなくなる場合があります。
1
|
const head = document.getElementsByTagName('head')[0];
|
サンプルプログラム(まとめ)
固定リンクがコピーされました
上記3つのカスタマイズのサンプルプログラムをまとめて記述すると以下のようになります。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
/*
* モバイルAPIを使ったサンプルプログラム
* Copyright (c) 2016 Cybozu
*
* Licensed under the MIT License
*/
(function() {
'use strict';
// ラジオボタンの選択によってフィールドの表示・非表示を切り替える
const events1 = [
'app.record.detail.show',
'app.record.create.show',
'app.record.create.change.QType',
'app.record.edit.change.QType',
'mobile.app.record.detail.show',
'mobile.app.record.create.show',
'mobile.app.record.create.change.QType',
'mobile.app.record.edit.change.QType'
];
kintone.events.on(events1, (event) => {
const record = event.record;
const QType = record.QType.value;
if (QType === 'その他') {
kintone.app.record.setFieldShown('Other', true);
kintone.mobile.app.record.setFieldShown('Other', true);
} else {
kintone.app.record.setFieldShown('Other', false);
kintone.mobile.app.record.setFieldShown('Other', false);
}
return event;
});
// ドロップダウンの選択でテーブル行の追加&データ入力をする
const events2 = [
'app.record.create.change.CType',
'app.record.edit.change.CType',
'mobile.app.record.create.change.CType',
'mobile.app.record.edit.change.CType'
];
kintone.events.on(events2, (event) => {
const record = event.record;
const CType = record.CType.value;
record.Table.value.push({
value: {
Date: {
type: 'DATETIME',
value: ''
},
CType2: {
type: 'DROP_DOWN',
value: CType
},
Content: {
type: 'MULTI_LINE_TEXT',
value: ''
},
File: {
type: 'FILE',
value: ''
}
}
});
return event;
});
// SweetAlertのライブラリを読み込む
const events3 = [
'app.record.create.show',
'app.record.edit.show',
'mobile.app.record.create.show',
'mobile.app.record.edit.show'
];
kintone.events.on(events3, (event) => {
const loadFiles = function(url, type) {
const head = document.getElementsByTagName('head')[0];
switch (type) {
case 'js': {
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
head.appendChild(script);
break;
}
case 'css': {
const link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = url;
head.appendChild(link);
break;
}
}
};
loadFiles('https://js.cybozu.com/sweetalert/v1.1.3/sweetalert.min.js', 'js');
loadFiles('https://js.cybozu.com/sweetalert/v1.1.3/sweetalert.css', 'css');
});
// 保存実行前にアラートを表示する
const events4 = [
'app.record.create.submit',
'app.record.edit.submit',
'mobile.app.record.create.submit',
'mobile.app.record.edit.submit'
];
kintone.events.on(events4, (event) => {
return new kintone.Promise((resolve, reject) => {
swal({
title: 'この内容で保存してもいいですか?',
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
closeOnConfirm: false,
closeOnCancel: true
},
(isConfirm) => {
if (isConfirm) {
resolve(event);
} else {
reject(event);
}
});
});
});
})();
|
今回は新規追加になったモバイル用APIの活用方法を紹介しました。
モバイルならではの使い方はまだまだ他にもあると思うので、ぜひ違う使い方も試してみてください。
モバイル用のAPIは、
kintone JavaScript API一覧で確認できます。