Tips

モバイル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で動作を確認しています。