フォームブリッジの申込フォームに上限人数を実装

目次

はじめに

フォームブリッジ (External link) は、申込フォームなどの外部公開フォームを簡単に作成できるサービスです。
申込フォームに上限人数を設定し、フォームを締切りたいこともあるかと思います。
そんなときに便利なのが、 kViewer (External link) の外部公開 API です。

外部公開 API を利用すると、kintone 外部から、kintone 内部のデータを参照できます。
フォームブリッジに適用すると、次の記事のようにルックアップ機能の実装などが可能です。
参考: 【2018/9/25 以降の手順】フォームブリッジから kintone 内のマスタを参照・引用したい (External link)

また、JavaScript カスタマイズに組み込めば、kintone 内部のデータを利用した高度な外部公開フォームを作成できます。

今回は、kViewer の外部公開 API を用いた、フォームブリッジの JavaScript カスタマイズの例を紹介します。

サンプル

イベントマスターアプリとイベント申込者リストアプリを参照して、申込者数が定員を超えていないかチェックします。

イベント ID を選択後、選択したイベントの申込者が上限に達していた場合はアラートを表示して、選択を解除します。

サンプルシナリオについての補足

  • シナリオをシンプルにするため、イベント ID のルックアップ時にアラートを出します。
  • 上限に達したイベントを選択不可とするカスタマイズも可能です。
    ただし、イベントごとに API を呼ぶ必要があり、イベント数が多い場合には REST API の制限値に注意が必要です。
    参考: 制限値一覧 (External link)
    また、DOM 操作が必要となり、kintone のアップデートの影響で動作しなくなる可能性があります。

kintone 設定

2 つのアプリ、「イベントマスターアプリ」と「イベント申込者リストアプリ」を作成します。
kViewer やフォームブリッジと連携するために、API トークンを作成しておきます。

イベントマスターアプリ

フィールド名 フィールドタイプ フィールドコード
レコード番号 レコード番号 レコード番号
イベント名 文字列 (1行) イベント名
定員 数値 定員

レコード閲覧権限を持った API トークンを作成します。
アプリ内に何件かレコードを登録しておきましょう。

イベント申込者リストアプリ

フィールド名 フィールドタイプ フィールドコード
申込者名 文字列 (1行) 申込者名
イベントID 数値 イベントID

レコード閲覧権限とレコード追加権限を持った API トークンを作成します。

kViewer 設定

各アプリに対して、外部公開 API を作成します。
説明の便宜上、「イベントマスターアプリ」の API の名前を「イベントマスターアプリ API」、「イベント参加者リストアプリ」の API の名前を「イベント参加者リストアプリ API」とします。

「イベントマスターアプリ API」から先に作成します。

ビューの作成(ホーム右上の+ボタン)から、外部公開 API を選択します。

ダイアログにしたがって、「名前」、「kintone アプリの URL」、「API トークン」を設定します。

ビューの一般設定を編集します。

「イベントマスターアプリ API」については、kViewer ルックアップで表示したいフィールドを「kintone フィールド」に設定します。
また、kViewer ルックアップで一度に表示したいレコード数を「1 リクエストでの取得数」に設定します。
設定後、「保存」>「編集完了」>「公開」を順にクリックします。

公開後、「ビューの説明」の「外部公開 API の URL」をメモしておきます。

「イベント参加者リストアプリ API」も同様に作成します。
一般設定では、「kintone フィールド」を選択なし、「1 リクエストでの取得数」を 1 に設定します。

フォームブリッジ設定

フォーム作成

「イベント申込者リストアプリ」にレコード登録するフォームを作成します。
フォームブリッジのはじめ方 (External link) を参考にフォームを作成します。
手順に従うと、次のようなフォームが作成されます。

kViewer との連携

kViewer ルックアップおよび kViewer を利用した JavaScript カスタマイズをするために、kViewer と連携します。
「kViewer」タブから、「kViewer と連携する」ボタンをクリックして、「保存」します。
「kViewer と連携する」ボタンが「kViewer との連携情報を更新する」に変わったら OK です。
(下に「kViewer との連携設定が完了していません」の表示が出ますが問題ありません)

フィールド設定

「フィールド」タブから、フィールドを編集します。
「kViewer ルックアップ」フィールドと「文字列(1 行)」フィールドを追加します。

「文字列(1 行)」フィールドの歯車マークを押して、フィールドの設定を変更します。
「フィールド名」と「フィールドコード」を「イベント名」に設定し、「必須項目にする」および「編集不可にする」をチェックします。

「kViewer ルックアップ」フィールドの歯車マークを押して、フィールドの設定を変更します。
「選択肢となるレコードの API ビュー」を「イベントマスターアプリ API」に設定し、その他の「kViewer ルックアップの設定」を下図のように設定します。

その後、自動生成されていた「イベント ID」フィールドを削除します。

そして、「kViewer ルックアップ」フィールドの「フィールド名」と「フィールドコード」を「イベント ID」に設定します。

設定後、ページ下部の「保存」ボタンを押します。

JavaScript カスタマイズ

「カスタマイズ」タブから、「フォームのカスタマイズ」>「JavaScript」を利用するにチェックを入れます。
次の「generateUrl.js」と「sample.js」を順に読み込みます。

generateUrl.js

sample.js 内の kViewer の外部公開 API 実行部分の URL を生成するプログラムです。

 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
/*
 * Sample program for Form Bridge - generateUrl.js
 * Copyright (c) 2019 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */
const generateUrl = (baseUrl, params = {}) => {
  const queryParams = [];
  if (params !== [] && params !== {}) {
    const add = (key, value) => {
      // if value is a function then call it and assign it's return value as value
      value = (typeof value === 'function') ? value() : value;

      // change null to empty string
      value = (value === null) ? '' : value;

      queryParams.push(encodeURIComponent(key) + '=' + encodeURIComponent(value));
    };
    const buildQueryParams = (prefix, params, add) => {
      const rbracket = new RegExp(/\[\]$/);
      if (params instanceof Array) {
        params.forEach((val, i) => {
          if (rbracket.test(prefix)) {
            add(prefix, val);
          } else {
            buildQueryParams(prefix + '[' + (typeof val === 'object' ? i : '') + ']', val, add);
          }
        });
      } else if (typeof params === 'object') {
        for (const name in params) {
          buildQueryParams(prefix + '[' + name + ']', params[name], add);
        }
      } else {
        add(prefix, params);
      }
    };

    for (const prefix in params) {
      buildQueryParams(prefix, params[prefix], add);
    }
    return baseUrl + '?' + queryParams.join('&').replace(/%20/g, '+');
  }
  return baseUrl;

};
sample.js

kViewer の外部公開 API を実行して kintone のデータを取得するプログラムです。
12 行目の masterApp と 13 行目の applicantListApp には、 kViewer 設定 でメモした URL をそれぞれ指定します。

19 行目、29 行目の API 実行部分の additionalFilters でリクエストパラメーターを追加し、絞り込みをしています。
リクエストパラメーターの詳細については、 kViewer の JavaScript カスタマイズ (External link) を参照してください。

 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
/*
 * Sample program for Form Bridge - sample.js
 * Copyright (c) 2019 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */

/* globals generateUrl */
(() => {
  'use strict';
  fb.events.fields.イベント名.changed = [state => {
    if (!state.record.イベントID.value) return;
    const masterApp = 'https://viewer.kintoneapp.com/public/api/records/*****/1'; // イベントマスタアプリAPIのURL
    const applicantListApp = 'https://viewer.kintoneapp.com/public/api/records/*****/1'; // イベント参加者リストアプリAPIのURL
    Promise.all([
      fetch(
        generateUrl(
          masterApp,
          {
            additionalFilters: [
              {with: 'and', field: 'レコード番号', sign: '=', value: state.record.イベントID.value}
            ]
          }
        )
      ).then(response => response.json()),
      fetch(
        generateUrl(
          applicantListApp,
          {
            additionalFilters: [
              {with: 'and', field: 'イベントID', sign: '=', value: state.record.イベントID.value}
            ]
          }
        )
      ).then(response => response.json())
    ]).then(responses => {
      if (responses[0].records[0].定員.value > responses[1].totalCount) {
        alert('予約可能です。');
      } else {
        state.record.イベントID.value = '';
        state.record.イベント名.value = '';
        alert('定員オーバーです。');
      }
      return state;
    });
  }];
})();

設定後、ページ下部の「保存」ボタンを押します。
カスタマイズ設定の保存後、ページ上部の編集完了ボタンを押します。

「公開フォーム」ボタンから、冒頭の サンプル と同じ動作の確認ができたら、フォームの完成です。

終わりに

今回は、申込フォームに上限人数を実装するという簡単なカスタマイズ例を紹介しました。
外部公開 API を利用することで、フォームブリッジのカスタマイズの幅は大きく広がるかと思います。
ぜひお試しいただければと思います。

関連リンク

information

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