公開日：
こんにちは～あかねです！
gusuku Everysiteプレビュー版を使って、イベント申し込みサイトを作る話…だったはずなのですが、私の投稿が遅すぎて完結する前にリリースするという落ちになりましたww
とはいえ、完結まで引き続き連載していこうと思いますので、最後までよろしくお願いします🫡
さてさて、第5回の今回は「申込フォーム」からkintoneにレコードを追加する動きを紹介していきます！
（前回は申込フォームの見た目だけ作りました）
第1回：構成編>>リンク
第2回：トップページ編>>リンク
第3回：イベント詳細ページ編>>リンク
第4回：申込フォーム編①>>リンク
構成とkintoneアプリのおさらい
イベント申し込みサイトは、エブリサイトで作成する4つのページと、2つのkintoneアプリで構成をしていきます。
イベント管理アプリ｜kintone
参加者管理アプリ｜kintone
今回は、入力フォームの情報を使ってこのアプリにレコードを追加していきます。
実際に作成する申込フォームのイメージ
前回「申込内容を確認（青矢印）」「申込内容を修正する（黒矢印）」の動きを設定しました。
今回は、「プライバシーポリシーに同意して、この内容で申し込み（赤矢印）」の動きを設定していきます。
フォームから予約した人数をカウントする
エブリサイトには「カウンターのカウント値を増減する」という【やること】があり、Aボタンを押したら+1、Bボタンを押したら-1のように、任意の数を増減させる機能があります。
これを使って、申し込まれたら予約人数が+1する機能を追加していきます。
事前準備：接続設定
接続設定タブから、エブリサイトのサーバーと接続するための設定しておきます。
カウンターの設定
次に、ページ内処理で「この内容で申し込む」ボタンを押したときに+1されるような設定をしていきます。
カスタマインの自動採番を利用したことがある方はイメージしやすいかと思いますが、この「カウンターのカウント値を増減する」は【「キー」パラメーター】が用意されています。
この「キー」に設定した値ごとに、エブリサイトがカウントした値を保持しておいてくれる仕様です。
今回は、開催日毎に申し込み人数を管理したいため、キーには#ハッシュから取得した開催日（$2）を設定しておきます。
ですが…
定員に達しているのに予約人数を+1して参加申し込みを受け付けるわけにはいきません⚠️
そのため、この前に現在のカウンターの数値(予約人数)が定員を下回っている場合にだけ、カウントして参加申し込みを受け付けようと思います。
そこで、やること「カウンターからカウント値を取得する」を利用し、設定を変更していきます。
※$3は、この申込フォームで申し込もうとしているイベント管理アプリのレコードです。
これで、現在の予約人数が定員を下回っている場合にだけ、予約人数を+1して参加者管理アプリにフォームの情報を用いてレコードを追加する準備が整いました。
参加者管理アプリにレコードを追加する
続いて、やること「kintoneにレコードを追加する」を利用して、フォームの情報をkintoneへ追加していきます。
事前準備：接続設定
こちらも事前に「参加者管理アプリ」に接続するための準備を行っておきます。
（私がブログを更新していない間に、1つのkintoneの接続設定で複数APIトークンを追加できるようになりました！ルックアップのフィールドに値をセットするときなどに有用です✨）
kintoneにレコードを追加する
ページ内処理で、フォームの情報からkintoneにレコードを追加するよう設定を行います。
この時のポイントはマッピングです！
左側の「エブリサイトのアイテムID」に入力されている値を、右側の「kintoneのフィールドコード」のフィールドにセットします。
よしよしこれで、kintoneアプリにレコードを追加する設定が完了です！（とっても簡単＼(^o^)／）
kintoneアプリの予約人数を更新する
さて、アクション番号16番で予約人数のカウンターを用いて現在の予約人数が更新されたので、イベント管理アプリを更新します。
接続設定については前回触れていませんでしたが、「ハッシュからイベント情報を特定する」で設定済みです！
やること「kintoneのレコードを更新する」を使って、予約人数フィールドを更新します。
ここまで来たら申し込みが完了したので、情報ダイアログを出して申し込み完了の旨を表示した後、ご自身が申し込んだイベント詳細ページに遷移する設定にしてみます。
これで良さそう！と思って動かしてみたのですが…
申し込みボタンを押してから完了の情報ダイアログが出るまでに少し時間がかかり、「あれ？」とちょっと不安になるので、ボタン押下後に「処理中表示を行う」を使って待機しててね～と分かるよう設定して終了です！！
（↓）今回設定したページ内処理
申し込みの処理完成？？
今回は、一番スタンダードな？設定、申し込み→kintoneアプリにレコード追加をご紹介しました。
次回は現在の予約人数が定員に達していたらどうする？という設定か、マイページ機能か…どっちかをご紹介していきますw
アールスリーの1年間アドベントカレンダーの企画は今年で終了となります。しかし、私自身はこのイベント申し込みサイトが作り終わるまで、この不定期連載はやめません！
ぜひ、最後までお付き合いいただけると嬉しいです🥰
現在エブリサイトはリリース記念キャンペーンを開催中です！！
通常、2か月間限定で利用可能な検証プランを、なななんと2026年3月末まで延長いたします！
（※2026年1月末までにお申し込みの方限定）
まだお試しされていない方は、今がじーーーーーーーっくり試すチャンスです！
以下より、お申込みをお待ちしています！
社外もチームだ！
エブリサイトで社外DXを！
gusuku Everysite（グスク エブリサイト）は、kintoneをはじめとした複数のサービスと連携し、そのデータを自由なレイアウト・挙動でWebサイトとして入出力できるフロントエンド開発サービスです。
投稿者プロフィール
-
サイボウズのパートナーさん担当です！
gusuku Customine大好きで転職しました！
