2019年5月のアップデート版kintoneで、モバイル用一覧画面をカスタマイズしてみた

目次

caution
警告

Moment.jsはメンテナンスモードになり、 日付処理できる代替ライブラリへの移行 (External link) が推奨されています。
代替ライブラリのひとつ Luxon (External link) については、 kintoneカスタマイズでの導入方法の紹介記事があります。

はじめに

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アプリストア (External link) にある「 To Do (External link) 」アプリを利用します。

手順2. 一覧(カスタマイズビュー)の追加

一覧追加の詳細は「 一覧を設定する (External link) 」を参照してください。

  1. アプリの設定画面を開き、[一覧]タブを選択します。

  2. [+]ボタンをクリックします。

  3. 追加する一覧を、次のように設定します。

    項目名
    一覧名 任意の値を入力します。
    今回は「カスタマイズビュー」とします。
    レコード形式の表示形式 「カスタマイズ」を選択します。
    一覧を表示する範囲 「PC版とモバイル版で表示する」を選択します。
    一覧ID 一覧のビューIDです。
    カスタマイズファイルで利用するので、控えておいてください。
    ページネーションを表示する チェックします。
    HTML 後述の「 HTML」の内容を貼り付けてください。
  4. 左上の[保存]ボタンをクリックして、一覧を追加します。

手順3. カスタマイズの適用

  1. アプリの設定画面を開き、[設定]タブを選択します。

  2. カスタマイズ/サービス連携の [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ファイル なし
  3. 左上の[保存]ボタンをクリックして、カスタマイズを適用します。

プログラム

HTML

カスタマイズビューに設定する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の仕様が違うから、モバイル用のカスタマイズは面倒だな…」と思われていた方も、この機会にぜひ、モバイル用のカスタマイズに挑戦してみてください。

information

このTipsは、2019年5月版kintoneで動作を確認しています。