モバイル用 API を使ってみよう!(2016 年 12 月アップデート版)

著者名:三宅 智子(サイボウズ株式会社)

目次

はじめに

2016 年 12 月のアップデート で以下のモバイル用の kintone JavaScript API が追加されます。
今回は「問い合わせ管理アプリ」を使って、それらの API を触ってみたいと思います。
まだ部分的ではありますが、PC 同様の動きをモバイルでも実装できるようになり、活用の幅が広がりました!

本記事では、以下の 3 つのカスタマイズを紹介します。

  • カスタマイズ 1:ラジオボタンの選択によって、フィールドの表示非表示を切り替える(レコード追加/編集/詳細画面)
  • カスタマイズ 2:ドロップダウンフィールドの値を変更に合せて、テーブルの行追加をする(レコード追加/編集画面)
  • カスタマイズ 3:アラートを表示する(レコード保存実行前)

使用 API

次のモバイル用の新機能をふんだんに使っています!

本記事のサンプルプログラムでは、比較検証用に PC 用の API も使用しています。

アプリの準備

今回はアプリストアにある「問い合わせ管理アプリ」を利用します。

アプリの具体的な作成方法は、以下のヘルプを確認してください。
アプリをはじめから作成する (External link)

利用するフィールドとフィールドコードは以下のとおり設定してください。
アプリストアのアプリから追加しているフィールドもあります。

フィールド名 フィールドコード フィールドタイプ アプリストアのアプリとの比較
問い合わせ種別 QType ラジオボタン
その他 Other 文字列(1 行) 新規追加
対応種別 CType ドロップダウン 新規追加
- Table テーブル
対応日時 Date 日時 フィールドコード修正
対応種別 CType2 ドロップダウン 新規追加、フィールドコード修正
対応詳細 Content 文字列(複数行) フィールド名/フィールドコード修正
添付ファイル File 添付ファイル フィールドコード修正

カスタマイズ

さて、ここからは追加された API を使って、ひとつずつ「問い合わせ管理アプリ」にカスタマイズを加えていきましょう。

ファイルの適用方法については次のページを参照してください。
JavaScript や CSSでアプリをカスタマイズする (External link)

カスタマイズ 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 (External link) のライブラリを使ってアラートを表示させたいと思います。

カスタマイズ例

レコードの保存ボタンをクリックしたときに、アラートを表示します。

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 一覧 で確認できます。

information

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