kintoneで自由に予約管理システムを作ろう

はじめに

　美容院、居酒屋etc..ホットペッパーの予約管理システムを利用されたことがある方は多いのではないでしょうか。空き時間を丸バツの一覧で見たり、条件によって表示を切り替えたりと、とても優れた予約管理システムになっていると思います。
　そんな予約管理システムですが、実はkintoneでも作ることができ、入力項目を自在に操れる点が強みとなります。以下は作成の記録ですので、自分で素早く予約管理システムを作り上げたいという方のご参考になれば幸いです。

使用ツール・技術

　- Kintoneスタンダードコース(※) 月額7,500円～
　- フォームブリッジプレミアムコース　月額14,000円
　- kViewerプレミアムコース　月額15,000円
　　上の3つは30日間の無料お試しが可能です。
　- CSS

　 (※)kintoneはサイボウズ社が提供販売する、ローコードツールです。
　　　予約管理システムに限らない幅広い用途で利用可能です。
　　　開発者向けライセンスもあります

活用想定場面

　-施設予約管理
　-セミナー予約管理
　-来庁日時予約管理　ほか

参考にした記事

　データを保持して別のアプリに情報登録！予約管理システムを作りたい

手順（今回は施設予約管理システムを作ります）

＜STEP1＞kintoneアプリを２つ作る。

（１）予約日時元データ管理アプリ
　　　予約日時データを保持するアプリです。
　　　予約可能日時データをこちらに登録します。

▼設定画面（施設は会議室Ａ、会議室Ｂ、大ホールの3種類としています。）

▼設定からAPIトークンを発行してください

アプリ保存をお忘れなく！

（２）予約者管理アプリ
　　　予約者の情報を保持するアプリです。
　　　予約があるたびに、申込者の情報が記録されます。

▼設定画面
（利用時間から利用料金を自動算出する設定を入れています。不要な場合は管理欄以下は作成不要）

▼設定からAPIトークンを発行してください

▼設定からデザインも変えてみます（任意）

アプリ保存をお忘れなく！

＜STEP2＞予約日時元データ管理アプリに、予約日時データを投入する

　-ここで投入したデータがユーザー側で予約可能日時として表示されます
　-CSVでデータを投入した方が簡易なため、CSVによる一括投入をご紹介しています。

▼手動で3件データを登録する

▼CSV出力する

▼CSVの中身データを作る

▼予約日時元データ管理アプリにCSVを読み込ませる
（一括更新のキーを外すとすんなり読み込めます。手動で登録した3件のデータが重複しますので削除してください）

＜STEP3＞kViewer(KB)、フォームブリッジ(FB)の設定を行う

　STEP2まででkintoneアプリを2つ作成したら、続いてkViewer、フォームブリッジの設定を行います。
　連携設定するkintoneアプリは「予約日時元データ管理アプリ」ですので、お間違えなく!

▼kViewerでカレンダービューを選択作成(KB)

▼kViewerの設定(KB)

▼フォームブリッジも設定します(FB)

▼作成したフォームのURLをここでコピー保存してください(FB)
　作成したフォーム

▼kViewer側で、フォームブリッジ連携を有効にし作成したフォームのURLを入力します(KB)

▼フォームブリッジ側で回答後処理を有効にします。(FB)
　※予約日時元データ管理アプリだけでなく、予約者管理アプリにもデータを送信/保存するためです。

▼一旦フォームブリッジの全てのフィールドを削除します。(FB)

▼予約者管理アプリの項目を中心に、必要なフィールドを同期します(FB)

▼予約済フィールドは「初期値をチェック済」非表示設定にしてください(FB)
※申込があったら予約済チェックを、予約日時元データ管理アプリに送信し、他の人が重複予約をしないようにするためです。

▼フォームブリッジから、フィールドと保存先アプリの対応項目を設定します(FB)
・予約日時元データ管理アプリ

・予約者管理アプリ

▼kViewerの細かい設定を行っていきます(KB)
・コンテンツ配置の設定(KB)

・カレンダー表示詳細設定(KB)

・レコードの絞り込み(KB)
※本日以前の日付、及び予約済みの日時はカレンダーに表示しないよう設定

・施設別の絞り込みリンクの作成(KB)

▼一旦完成！！
・カレンダー表示(KB)

・カレンダークリック、申込ボタンが表示される(KB)

・施設別の絞り込みも可能(KB)

・予約送信画面(FB)

▼送信された予約はkintone側で確認ができます！
・予約日時元データ管理アプリ(kintone)
※予約送信されたものは、予約済にチェックが入り、kViewerのカレンダーに表示されない！
・予約者管理アプリ(kintone)

＜STEP4＞より細かな点の設定、見た目のCSSカスタマイズ

　後日追記します。