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

Index

はじめに
サンプル
kintone設定
kViewer設定
フォームブリッジ設定
終わりに
関連リンク

はじめに

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

外部公開APIを利用すると、kintone外部から、kintone内部のデータを参照することができます。
フォームブリッジに適用すると、こちらの記事のようにルックアップ機能の実装などが可能です。

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

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

サンプル

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

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

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

シナリオをシンプルにするために、イベントIDのルックアップ時にアラートを出すようにしています。
回答ボタンを押したときにアラートを出す方法は、こちらの方法を参考にしてください。
カスタマイズによっては、上限に達したイベントを選択できなくすることも可能です。
ただし、イベントごとにAPIを呼ぶ必要があり、イベント数が多い場合にはAPI制限に注意が必要です。
また、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度に表示したいレコード数を「1リクエストでの取得数」に設定します。
設定後、「保存」 > 「編集完了」 > 「公開」を順にクリックします。

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

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

フォームブリッジ設定

フォーム作成

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

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」を順に読み込みます。 sample.jsの「masterApp」と「applicantListApp」には、kViewer設定でメモしたURLをそれぞれ指定します。

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

・sample.js: kViewerの外部公開APIを実行してkintoneのデータを取得するプログラムです。16行目、24行目のAPI実行部分のadditionalFiltersでリクエストパラメーターを追加し、絞り込みをしています。
リクエストパラメータの詳細については、kViewerのAPIドキュメントを参照してください。

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

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

終わりに

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