2019年春、モバイル用kintoneが大幅リニューアルされました。
API更新情報（
4月版
・
5月版
）でもお伝えしていますが、このリニューアル伴って、モバイル用のkintone JavaScript APIも強化されています。
この記事では、アップデートで特に注目したい「モバイル用レコード一覧画面の表示後イベントでrecordプロパティを取得できる」機能を利用して、レコードの値を使って条件付き書式を行うカスタマイズを紹介します。
アップデートでできるようになったこと
固定リンクがコピーされました
2019年4月と5月のアップデートで特に注目したい点は、「モバイル用の
レコード一覧画面を表示した後のイベント
（mobile.app.record.index.show）でrecordプロパティが取得できる」です。
本アップデート前のコード
固定リンクがコピーされました
これ以前のモバイル用APIには、レコード一覧画面の表示したときのeventオブジェクトにrecordプロパティがなく、
複数のレコードを取得する
を使ってレコード一覧を取得していました。
そのため、PC用と同じカスタマイズをするときは、「PC用ならevent.recordsを使い、モバイル用ならREST APIを呼ぶ」といった分岐が必要でした。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
kintone.events.on(['app.record.index.show', 'mobile.app.record.index.show'], (event) => {
// PC版
if (event.eventType === 'app.record.index.show') {
const records = event.records;
// レコードに対する処理を記述
// スマートフォン版
} else if (event.eventType === 'mobile.app.record.index.show') {
const params = {app: event.appId, query: kintone.mobile.app.getQuery()};
kintone.api(kintone.api.url('/k/v1/records', true), 'GET', params, (resp) => {
const records = resp.records;
// レコードに対する処理を記述
});
}
return event;
});
|
本アップデート後のコード
固定リンクがコピーされました
2019年4月と5月のアップデートで、モバイル用にもevent.recordsが追加されるため、レコード情報の処理を次のようにまとめられるようになりました。
1
2
3
4
5
6
|
kintone.events.on(['app.record.index.show', 'mobile.app.record.index.show'], (event) => {
// これからはPC版もスマートフォン版もevent.recordsが存在する
const records = event.records;
// レコードに対する処理を記述
return event;
});
|
タスクを管理するアプリで、締切日に応じて「締切日」フィールドに色を付けるカスタマイズです。
ファイルアイコンをクリックすると、そのレコードのレコード詳細画面へ遷移します。
このカスタマイズでは、カスタマイズビューを利用しています。
また、
Cybozu CDN
で公開されている以下のライブラリを利用しています。
- jQuery
https://js.cybozu.com/jquery/3.3.1/jquery.min.js
- Moment.js
https://js.cybozu.com/momentjs/2.10.3/moment-with-locales.min.js
- Font Awesome
https://js.cybozu.com/font-awesome/v4.7.0/css/font-awesome.min.css
手順1. kintoneアプリの追加
固定リンクがコピーされました
kintoneアプリストア
にある「
To Do
」アプリを利用します。
手順2. 一覧（カスタマイズビュー）の追加
固定リンクがコピーされました
一覧追加の詳細は「
一覧を設定する
」を参照してください。
-
アプリの設定画面を開き、[一覧]タブを選択します。
-
[＋]ボタンをクリックします。
-
追加する一覧を、次のように設定します。
| 項目名 |
値 |
| 一覧名 |
任意の値を入力します。
今回は「カスタマイズビュー」とします。 |
| レコード形式の表示形式 |
「カスタマイズ」を選択します。 |
| 一覧を表示する範囲 |
「PC版とモバイル版で表示する」を選択します。 |
| 一覧ID |
一覧のビューIDです。
カスタマイズファイルで利用するので、控えておいてください。 |
| ページネーションを表示する |
チェックします。 |
| HTML |
後述の「
HTML
」の内容を貼り付けてください。 |
-
左上の[保存]ボタンをクリックして、一覧を追加します。
手順3. カスタマイズの適用
固定リンクがコピーされました
-
アプリの設定画面を開き、[設定]タブを選択します。
-
カスタマイズ/サービス連携の [JavaScript / CSSでカスタマイズ]を選択します。
カスタマイズについて、次のように設定します。
| 項目名 |
値 |
| 適用範囲 |
「すべてのユーザーに適用」を選択します。 |
| PC用のJavaScriptファイル |
PC用にも適用したい場合は、以下の順でリンクまたはファイルを追加してください。- https://js.cybozu.com/jquery/3.3.1/jquery.min.js
- https://js.cybozu.com/momentjs/2.10.3/moment-with-locales.min.js
- カスタマイズファイル（customize.js）
詳細は後述の「
ソースコード（customize.js）
」を参照してください。
|
| モバイル用のJavaScriptファイル |
以下の順でリンクまたはファイルを追加してください。- https://js.cybozu.com/jquery/3.3.1/jquery.min.js
- https://js.cybozu.com/momentjs/2.10.3/moment-with-locales.min.js
- カスタマイズファイル（customize.js）
詳細は後述の「
ソースコード（customize.js）
」を参照してください。
|
| PC用のCSSファイル |
なし |
-
左上の[保存]ボタンをクリックして、カスタマイズを適用します。
カスタマイズビューに設定するHTMLです。
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
|
<!--
* kintone sample program
* customize for mobile list view
* Copyright (c) 2019 Cybozu
*
* Licensed under the MIT License
-->
<style type="text/css">
#customized-view table {
width: 100%;
background-color: #fff;
border-collapse: collapse;
border-spacing: 0;
border-left-color: grey;
}
@media screen and (max-width: 480px) {
#customized-view table {
width: 480px;
}
}
#customized-view thead {
background-color: #206694;
color: #ffffff;
}
#customized-view th {
font-weight: bold;
}
#customized-view th,td {
font-size: 1.2rem;
text-align: left;
line-height: 1.5rem;
padding: 10px 5px;
}
#customized-view tr:nth-child(even) {
background: #eee;
}
#customized-view th {
border-right: 1px solid #fff;
border-left: 1px solid #fff;
}
#customized-view td {
border-left: 1px solid #ccc;
}
.first-cell {
width: 40px;
min-width: auto;
box-sizing: border-box;
text-align: center;
}
#customized-view td img {
border: none;
vertical-align: top;
}
</style>
<link rel="stylesheet" href="https://js.cybozu.com/font-awesome/v4.7.0/css/font-awesome.min.css">
<div id="customized-view">
</div>
|
ソースコード（customize.js）
固定リンクがコピーされました
締切日に応じて「締切日」フィールドに色を付けるスクリプトファイルです。
14行目のCUSTOM_VIEW_IDの数値を、「手順2. 一覧（カスタマイズビュー）」の追加で控えた一覧IDに変更してください。
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
|
/**
* kintone sample program
* customize for mobile list view
* Copyright (c) 2019 Cybozu
*
* Licensed under the MIT License
*/
jQuery.noConflict();
(($) => {
'use strict';
// 環境に合わせてカスタムビューIDを設定してください。
const CUSTOM_VIEW_ID = 1234;
const now = moment();
moment.locale('ja');
kintone.events.on(
['app.record.index.show', 'mobile.app.record.index.show'],
(event) => {
if (event.viewId !== CUSTOM_VIEW_ID) {
return;
}
// ページネーションしたときなど、テーブルがすでに存在している場合は削除する
if ($('#customized-view table').length !== 0) {
$('#customized-view table').remove();
}
$('#customized-view').append('<table />');
// ヘッダーの表示
const header = ['Todo名', '締切日', '担当者', '優先度'];
$('#customized-view table').append('<thead />');
const $header = $('<tr />');
$header.append('<th></th>');
header.forEach((column) => {
$header.append('<th>' + column + '</th>');
});
$('#customized-view table thead').append($header);
// レコード情報の表示
const appId = event.appId;
const records = event.records;
$('#customized-view table').append('<tbody />');
if (records.length === 0) {
$('#custom-view table tbody').append('表示するレコードがありません。');
}
// レコードURL
let recordUrl = `/k/${appId}/show?record=`;
if (event.type === 'mobile.app.record.index.show') {
recordUrl = `/k/m/${appId}/show?record=`;
}
records.forEach((record) => {
// 「アイコン」
const $row = $('<tr />');
const $iconCell = $(`<td><a href="${recordUrl}${record.$id.value}"><i class="fa fa-file custom" aria-hidden="true"></i></a></td>`).addClass('first-cell');
$row.append($iconCell);
// 「Todo名」
$row.append(`<td>${record.To_Do.value}</td>`);
// 「締切日」
const dueCell = $(`<td>${record.Duedate.value}</td>`);
const dayDiff = moment(record.Duedate.value).diff(now, 'days');
if (dayDiff < 3) {
// 3日以内なら「締切日」の背景色を赤に設定
dueCell.css('background-color', '#f7d3da');
} else if (dayDiff < 7) {
// 7日以内なら「締切日」の背景色を黄に設定
dueCell.css('background-color', '#fffacd');
}
$row.append(dueCell);
// 「担当者」
let assign = '';
if (record.Assignees.value.length > 0) {
assign = record.Assignees.value[0].name;
}
$row.append(`<td>${assign}</td>`);
// 「優先度」
$row.append(`<td>${record.Priority.value}</td>`);
$('#customized-view table tbody').append($row);
});
}
);
})(jQuery);
|
カスタマイズのポイント
固定リンクがコピーされました
- 45行目
PC用かモバイル用かを区別することなく、event.recordsのレコード情報を利用しています。
- 54行目〜57行目
ファイルアイコンをクリックするとレコード詳細画面に遷移できるよう、リンク先を設定します。
PC用とモバイル用でレコード詳細画面のURLが異なります。
そのため、event.typeを利用してURLを使い分けます。
- 69〜78行目
現在の日付と締切日を比較し、3日以内なら赤色、7日以内なら黄色に「締切日」フィールドの背景色を変更します。
日付の比較には、簡単に日付を操作できるMoment.jsを利用しています。
モバイル用kintoneのリニューアルによりUIの機能追加や改善が行われたことで、モバイルでのkintoneの利用機会も増えるかと思います。
これまで「PC用とJavaScript APIの仕様が違うから、モバイル用のカスタマイズは面倒だな…」と思われていた方も、この機会にぜひ、モバイル用のカスタマイズに挑戦してみてください。
