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

目次

はじめに

フォームブリッジ (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で動作を確認しています。