モバイル API の大幅アップデートの解説とモバイル版カスタマイズビューを試す

著者名:kintone エバンジェリスト 村濱 一樹 (External link)

目次

はじめに

kintone は PC 版とモバイル版でビューが分かれており、従来のモバイルビューは保存成功後のイベントを取得できなかったりとできることが限られていたため、カスタマイズしづらい実情がありました。
しかし 2018 年 11 月 12 月のアップデートでは、多くのことがモバイルでできるようになりました。
中でも注目のモバイルでのカスタマイズビューサポートについて、さっそくどんなことができるか試してみました。

デモ環境

デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/303/ (External link)

ログイン情報は cybozu developer network デモ環境 で確認してください。

モバイル API に関するアップデート情報

2018 年 11 月と 12 月のモバイル版 JavaScript API の追加情報のまとめは次のとおりです。

11 月 API アップデート内容

アップデートの詳細は 11 月 API アップデート内容詳細 を参照してください。

12 月 API アップデート内容

アップデートの詳細は 12 月 API アップデート内容詳細 を参照してください。

モバイル版カスタマイズビューが使える機能

モバイルビューでも PC ビューと同じようにカスタマイズビューを利用できる機能です。
この対応に伴い、カスタマイズビューの表示範囲を選択できます。

詳細は kintone の主要なアップデート (External link) を参照してください。

今回の大幅アップデートによりできるようになること

今回の大幅アップデートによる変化は大きく 3 つあると考えます。

  • レコード保存後の制御
    レコード保存前と保存後の処理ができるようになったことで、保存時にレコードのデータを加工するなど、細かな制御ができます。
  • プロセス管理が有効なアプリへの対応
    プロセス管理のアクション実行時のイベントを取得できるため、プロセス管理機能が重要なアプリでもモバイルで作り込むことができます。
  • モバイルユーザーの使い勝手の向上
    モバイル版カスタマイズビューへの対応、グループフィールドの開閉やスペースフィールド利用により、モバイル使用時の使い勝手をあげることができます。

中でもインパクトが大きいのはカスタマイズビューへの対応でしょう。
そこで今回はモバイル版のカスタマイズビューを試してみたいと思います。

モバイル版カスタマイズビューを試す

今までモバイルビューではレコードのタイトルしか表示できませんでした。
自動計算フィールドを駆使するとある程度情報を載せられますが、PC ビューと異なり、一度に表示できるものは限られてました。
今回使うサンプルの顧客リストアプリには、会社名以外にも、会社の住所や連絡先などの情報も載っています。
そのため、営業担当者がモバイルからでも顧客にアプローチを取りやすくするべく、ビューを改善してみたいと思います。

通常の一覧(左)とカスタマイズビューを使って見やすくした例(右)のイメージです。

カスタマイズビュー作成手順

1. サンプルアプリ「顧客リスト」の作成

kintone アプリストアからサンプルの「顧客リスト」アプリを作成してください。

2. カスタマイズビューの設定

作成したアプリの設定画面にて、カスタマイズビューを作成します。
下記画像のとおり設定してください。

カスタマイズビューの HTML は、次のように設定します。

1
<div id="view"></div>

3. プログラミング

設定したカスタマイズビューに JavaScript カスタマイズで必要な項目を出すために下記コードを作成します。

13 行目の「123」の部分を、手順 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
/*
 * Mobile Customize View sample program
 * Copyright (c) 2018 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
*/
(function() {
  'use strict';
  kintone.events.on(['mobile.app.record.index.show'], (e) => {

    // 先程メモしたカスタマイズビューのViewIdでない場合は処理を終了します。
    if (e.viewId !== 123) {
      return e;
    }

    // カスタマイズビューに設置したDiv要素を取得
    const targetElement = document.querySelector('#view');

    // アプリのレコードを取得
    // (モバイルの場合はREST APIでデータを取得する必要がある)
    kintone.api(kintone.api.url('/k/v1/records', true), 'GET', {app: e.appId}, (resp) => {

      // レコードの数だけ繰り返し、DOMを作成
      resp.records.forEach((record) => {

        // レコード情報用のWrapper
        const wrapper = $('<div />', {
          // 余白を指定
          css: {
            padding: '16px 8px',
            borderBottom: 'solid 1px gray'
          }
        });

        // 会社名
        $('<a />', {
          text: record.会社名.value,
          href: '/k/m/' + e.appId + '/show?record=' + record.$id.value, // レコードのリンク
          css: {
            fontWeight: 'bold'
          }
        }).appendTo(wrapper); // レコード情報用のWrapperに追加

        // 詳細情報のWrapper
        const details = $('<div />', {
          css: {
            padding: '8px 8px'
          }
        }).appendTo(wrapper); // レコード情報用のWrapperに追加

        // 住所
        $('<div />', {
          text: '〒' + record.郵便番号.value + ' ' + record.住所.value
        }).appendTo(details); // 詳細情報用のWrapperに追加


        // 担当者
        $('<div />', {
          text: '担当者名: ' + record.担当者名.value
        }).appendTo(details);

        // 電話番号
        $('<a />', {
          html: record.TEL.value + '<br />', // 見栄えのために改行を指定
          href: 'tel:' + record.TEL.value // tel: をつけることでタップすると電話アプリが起動する
        }).appendTo(details);

        // メールアドレス
        $('<a />', {
          text: record.メールアドレス.value,
          href: 'mailto:' + record.メールアドレス.value // mailto: をつけることでタップするとメールアプリが起動する
        }).appendTo(details);

        $(targetElement).append(wrapper);
      });
    });
    return e;
  });
})();

作成したコードは「モバイル用の JavaScript ファイル」の欄に指定してください。
また、今回は jQuery も使用していますので Cybozu CDN の jQuery もカスタマイズファイルの上に指定します。
jQuery の URL:https://js.cybozu.com/jquery/3.3.1/jquery.min.js

サンプルコードは、余白などを調整するために、次のイメージで要素を組んでいます。

設定を保存して、アプリを更新します。

4. 動作確認

モバイルから見るとカスタマイズビューが選べるようになっています。
さらに、電話番号をタップすれば電話を、メールアドレスをタップすればメールを開くようになっています。

モバイル版カスタマイズビューの補足と注意事項

  • 新規に作成するカスタマイズビューは、「PC 版のみで表示する」または「PC 版とモバイル版で表示する」を選択できます。
    既存のカスタマイズビューについて、アプリ管理者が設定変更しない限り「PC 版のみで表示する」のままです。
  • モバイルビューでカスタマイズビューを表示しても、ページネーションは表示されません。
  • モバイルビューでカスタマイズビューを表示しても、絞り込みの設定は機能しません。
  • 本対応に伴い、 一覧の設定を取得する API(/k/v1/app/views.json)に、カスタマイズビューを表示する範囲のプロパティが追加されます。

おわりに

上記のようにカスタマイズビューを作成すれば、モバイルでの使い勝手がかなり向上すると思います。
サンプルコードを参考に、現在利用しているアプリをモバイル用にカスタマイズしてみてはいかがでしょうか。

information

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