Tips

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