勉強会やセミナーなどでは、申込フォームを作成して参加登録をしてもらう際に、参加人数の上限を設けたいケースがあると思います。
こういった時、エブリサイトを使うと一定の申し込み件数に達したら申込ができなくなるWebフォームを作成する事ができます。
完成ページの動作例
今回の例では申込の枠を全１０枠として作成しています。
たとえば通常の申込を行う例であれば次のようになります。
フォームを表示し
入力して送信を押すと
申込残数のカウントが１減った画面が再表示されます。
また、kintoneにもその内容のレコードが追加されている事が確認できます。
また、申込残数が0となるような送信を行うと
次のように文言を変更し、送信できなくなるように「送信」ボタンを非活性にする事もできます。
ページ設定
ページの作り方をご説明します。
kintoneアプリ例
※フィールド名とフィールドコードは同じものを指定します
またAPIトークンを設定しておきます。
※アクセス権は「レコード閲覧」、「レコード追加」を設定します
画面デザイン
今回の例ではタイルを上下に切り、ウィジェット「シンプルパネル」と「シンプル横フォーム」を縦に並べたページとしました。
シンプルパネルの設定
シンプルパネルウィジェットのウィジェットパラメーター入力カラム（中央のエリア）には、アイテム「テキスト」を設定します。
また、アイテムパラメーター入力カラム（中央のエリアで「アイテム」を選択した時に表示される右部の設定エリア）には次の内容で設定します。
※テキストについては本記事の例では空白としていますが、もし申込件数を表示するまでに初期表示したい文言があれば設定していただいてもかまいません。
シンプル横フォームの設定
シンプル横フォームウィジェットのウィジェットパラメーター入力カラム（中央のエリア）には、アイテム「テキスト」「文字列入力（１行）」「メールアドレス入力」「ボタン(塗りつぶし) 」を設定します。
また、アイテムパラメーター入力カラム（中央のエリアで「アイテム」を選択した時に表示される右部の設定エリア）には次の内容で設定します。
接続設定
接続設定は、エブリサイトに１つ、kintoneに１つ、それぞれ設定します。
なお各接続設定の詳細については、次の記事も併せてご覧ください。
エブリサイト接続設定
kintone接続設定
ページ内処理
ページ内処理は
残数表示
既定のカウント数充足時の表示制御
ボタンを押した時の処理
の３つに分けて作成していきます。
残数表示
カウンターの残数表示は２つのアクションで実現できます。
カウント値の取得
まず、カウント値を取得します。
やること「カウンターからカウント値を取得する」、条件「ページを表示した時」を用います。
この時、なんらかのキーを指定する必要があります。今回の例では「req_counter」を設定しています。
エブリサイトのカウンター機能は、サイトとキーの単位で管理されるようになっているため、サイトの他のページで用いていないキーを指定するようにしてください。
※なお、意図してほかのページで用いているキーと、設定するキーを揃えるケースもあります。これについては下記「こんなときは……？」節で説明します。
カウント値の表示
次に、カウント値を表示します。
やること「表示アイテムの内容をセットする」、条件「他のアクションの実行が完了した時」を用います。
この時、表示内容には計算式を含めることができます。
今回の表示内容は次のように設定しています。
申込残数は ${10 - $1} です
残数表示を行うアクションの設定はこれで完了です。
続いて、カウント数が満たされた時の表示制御を設定します。
※注：表示制御はこのアクションの続きとして設定します
既定のカウント数充足時の表示制御
表示制御は２つのアクションで実現できます。
ボタンの無効化
先ほどのアクションに続ける形で、カウント数が満たされていればボタンを無効化します。
やること「ボタンを無効化する」、条件「他のアクションの実行が完了した時」「数値が条件を満たすならば」を用います。
エブリサイトでは、条件「他のアクションの実行が完了した時」と、その他の追加条件を重ねる事により、特定の条件を満たした時のみ後続処理を実施することができ、今回は「カウントの値(※1番アクションの結果)」が「10」より「大きいか等しい(<=)」時に、ボタンを無効化しています。
表示文言の変更
続いて、表示アイテムの内容を「申込は満了しました」に変更します。
やること「表示アイテムの内容をセットする」、条件「他のアクションの実行が完了した時」を用います。
これで、表示制御についても実現できました。
初期表示でおこなうアクションについてはこれで完了です。続いてボタンを押した時の処理を実現していきましょう。
ボタンを押した時の処理
ボタンを押した時の処理は６つのアクションで実現できます。
まずは申込を正常に行えた場合について、４つのアクションで実現します。
カウンターのカウント値を増減する
まず最初に行うべきなのはカウンターのカウント値の増減です。
※なぜカウント値の増減を最初に行う必要があるのかについては、ページの下部「参考」節を併せてご覧ください。
やること「カウンターのカウント値を増減する」、条件「ボタンを押した時」を用います。
やることのパラメータについては次のように設定してください。
kintoneにレコードを追加する
カウンターでのカウントが成功したので、kintoneにレコードを追加します。
やること「kintone にレコードを追加する」、条件「他のアクションの実行が完了した時」を用います。
「やること」のパラメータ マッピングは次のように設定しています。
なお、やること「カウンターのカウント値を増減する」のアクション結果でカウント値を取得することができ、これをkintoneの追加レコードにマッピングする事もできます（ここでは例として、「カウント」フィールドに値をマッピングしています）。
レコード追加が成功したのでダイアログを表示する
成功したのでダイアログを表示します。
やること「情報ダイアログを表示する」、条件「他のアクションの実行が完了した時」を用います。
ページをリロードする
表示を最新にするため、リロードします。
やること「ページをリロードする」、条件「他のアクションの実行が完了した時」を用います。
ここまでで、正常にカウント値を更新できた場合の処理が完成しました。
最後に、カウント値を更新できなかった（申込ができなかった）場合の処理を作成します。
エラーになった場合にダイアログを表示する
まずはアクションがエラーになった時にエラーダイアログを表示するようにします。
やること「エラーダイアログを表示する」、条件「アクションがエラーになった時」を用います。
ページをリロードする
表示を最新にするため、リロードします。
やること「ページをリロードする」、条件「他のアクションの実行が完了した時」を用います。
これで設定はすべて完成したはずです。
ぜひ手元で動きを確かめてみてください。
参考
画面を表示した時には申込件数が充足していないが、その後登録するまでに申込件数が充足してしまった場合（例えば同時に大量のアクセスがあったケースなど）では、5番アクションのやること「カウンターのカウント値を増減する」がエラーとなり、そのため9番アクションの設定により、次のようなダイアログが表示されます。
併せて、5番アクションがエラーとなったため、6番アクション以降の処理(kintoneへのデータ登録)が止まる という動きになります。
ぜひエブリサイトで実際につくってみて、お試しください。
こんなときは……？
実際にこのフォームを作成して運用した場合、カウンターの値を急遽増減させたいケースが出てくるかもしれません（例えば：急な参加者キャパの増加/減少や、申込キャンセルなど）。
そういった時のために、この申込フォームとは別にカウンターの値を増減させるためのページを別途作成しておくと、管理が非常にやりやすくなります。
カウンターの値を単に増減する例は次の記事をご覧ください。（同じサイト上で、本記事と同一の設定にて作成していただくと、２つの記事での例が連動して動くようになっています）
おわりに
この記事ではエブリサイトを使った、一定の申し込み件数に達したら申込ができなくなるWebフォームを作成する例を通じて、カウンター機能をつかったページについてご紹介しました。
ぜひカウンター機能を有効活用して、申込フォームを作成・運用してみてください！