【2024年トヨクモkintone収穫祭アフターイベント】合同会社アクアビット様による登壇レポート記事

トヨクモkintone収穫祭のアフターイベントでのLT（ライトニングトーク）登壇の様子をレポート！

この記事はトヨクモkintone収穫祭のアフターイベントでの合同会社アクアビット 長井さんのLT（ライトニングトーク）登壇の様子をお届けするレポート記事です。

今回は「歯科医院での活用を想定した予約システムで実践！FormBridgeとkViewerを活用するコツ」をテーマにご登壇いただきました！

FormBridgeとkViewerで予約システムを構築

皆さん、こんにちは。合同会社アクアビットの長井です。

当社では、kintoneを中心としたクラウドを活用したシステム開発・保守、システム導入、ホームページ作成、データ入力などのお手伝いをしています。

私はkintoneエバンジェリスト兼旅するkintone俳人として、kintone Caféをはじめとしたさまざまなkintoneコミュニティに登壇したり、支援を行ったりしています。

Xをしておりますので、気になる方はぜひフォローしてください。

本日は、歯医者での活用を想定してFormBridgeとkViewerで予約システムを構築したので、システムの解説と共にFormBridgeとkViewerのコツをお伝えできればと思います。

カレンダービューから予約フォームに遷移

いきなりですが、クイズです。ここから、実際に作成したシステムのキャプチャをお見せしていきます。

一箇所だけJavaScriptカスタマイズを入れているので※、どこにJavaScriptのカスタマイズを使っているのか考えながら見てください。それでは解説していきます。
※JavaScriptカスタマイズは1箇所のみですが、CSSカスタマイズは別途入れていただいています。

まず、kViewerのカレンダービューを開くと空き日程が表示されています。

日程を選んで開いてもらい、「この日付で予約」を押すと、FormBridgeで作成した予約フォームに遷移します。

予約フォームの詳細

予約フォームを開くと、複数の時間が選択項目として表示されています。10時半には空きがないので、予約ボタンが表示されていません。

日程と予約したい時間が決まったら、予約ボタンを押していただきます。

そうすると、次のフォーム画面に切り替わり、個人情報の入力画面に移ります。

こちらは、FormBridgeのステップフォームを使うことで、1つのフォームを複数ページにまたがるフォームとして表示させています。

氏名、電話番号、メールアドレスを入力いただいたら、「次へ」を押していただきます。

最後に、症例を文字列（複数行）フィールドに自由記述で入力していただきます。

確認ボタンを押したら、これまでの入力内容がまとめて表示されるので、問題なければ「回答」を押して入力完了です。

Myページからキャンセル受付

完了画面になると、「予約確認」と書かれたボタンが表示されます。

「予約確認」ボタンをクリックすると、kViewerのMyページに遷移し、自分がした予約を確認できます。

【kViewer】Myページとは？

さらに、予約を開くと詳細が出てきます。「この予定をキャンセル」を押すと、今度はFormBridgeで作成したキャンセル画面（フォーム）に飛びます。

開始日時や氏名などの情報は、そのままkViewerから引っ張ってきて初期値として入力し、編集できないようにしています。

初期値の入力について関連記事や操作ガイドで補足できるものがあればここに挿入

そのため、利用者は「この予定をキャンセル」のチェックボックスにチェックを入れて、回答ボタンを押すだけでキャンセルができるという仕組みです。

JavaScriptカスタマイズの答え合わせ

ここまで、予約システムの一連の流れをご紹介してきました。

この中に、一箇所だけJavaScriptでカスタマイズしている場所があるのですが、皆さんはお分かりになりましたでしょうか？

…（参加者から”予約ボタン”と回答を受ける）

正解です！今回のシステムでは、1枠分の予約しか押せないようにJavaScriptで制御しています。

また、選んだ時間を裏側で予約レコードとしてkintoneに生成しています。

kintoneのテーブルで予約枠を管理

トヨクモ製品を活用した予約システムの作成において、残枠数をDataCollectで集計して管理するという方法があると思います。

実は今回のシステムにおいては、DataCollectは使っていません。

kintoneのテーブル自体に予約フラグや予約締切を入れ、すべてを計算式でカウントして管理しています。

今回のシステム構築にあたり、kintoneでは3つのアプリを作ったのですが、どれ1つとしてJavaScriptなどでのカスタマイズはしておりません。

つまり、先ほどご紹介した予約ボタンのJavaScriptとkintoneの基本機能であるテーブルのみで制御しているということです。

※kintone上でのカレンダー画面の表示に「カレンダーPlus」が使われていますが、今回のシステム構築に「カレンダーPlus」の機能は使われておりません。

まとめ.FormBridgeとkViewerのコツ

最後にまとめです。皆さんにお伝えしたいFormBridgeとkViewerを使うコツは、データの構造を理解するということです。

私自身、kintoneの導入支援などでも、口酸っぱくお客様にお伝えしているぐらいに大切なことだと思っています。

kintoneとFormBridgeは1対1ですが、もし他のところで1対多を実現したいのであれば、データ構造を理解した上でUIや回答保存プロセスを工夫してください。

そうすると、kintone、FormBridge、kViewerでさまざまなことを実現できるようになります。

以上です。本日はありがとうございました。

JavaScriptとkintone内の制御だけで簡単に予約システムが作れる、というアイデア満載の設定事例！

また、普段からお客様のkintone環境の構築のサポートなどもされている視点から、kintoneやトヨクモ製品をご活用いただく際のコツまで教えていただいたので、勉強になる方も多いのではないでしょうか。