この記事は 【 Bubble で calendly クローンを作ってみる！（初級者向け） 】の第６回です。 前提条件等、確認されていない方は先にこちらの記事を確認してください。
みなさん、こんにちは！本シリーズについて、前回記事から随分と期間が開いてしまいました。お待ちいただいております方々につきましては、大変申し訳ありません。今後とも、気長にお付き合いいただけましたら幸いです。なお、本シリーズでは、期間中に公開されました Responsive Engine[beta] については適用しない状態で進めていく予定ですので、どうぞよろしくお願いいたします。
では、始めていきましょう～！
前回は、管理者がイベントを編集できるページを作成しましたが、今回は、お客さんが予約をする event ページです。また、今回は Repeating group を使ってオリジナルのカレンダーを作成しますので、予約システムなどの開発を検討されている方は、是非参考にしてみてくださいね。
1. 画面の作成
Calendar tool プラグインのインストール
今回のオリジナルカレンダーでは、Calendar Tool というプラグインを使用しますので、Plugins からインストールしておいてください。
Calendar Tool は、例えば「2021年5月」と指定すると、2021/4/25(日) から 2021/5/31(月) までの日付を list にして返却してくれるプラグインで、日曜日始まりという縛りがあるものの、シンプルで使いやすいと思います。
なお、もし月曜日始まりで使いたい場合は、list の値を工夫すれば可能だとは思いますが、今回の calendly クローンでは、デフォルトの日曜始まりで使用させていただきたいと思います。
ページの枠組みを作成
エディタの出来上がりは以下のようなイメージです。
ブラウザから見ると以下のようなイメージになります。
ポップアップも作成していきます。
UIとしては、カレンダーの日付アイコンをクリックしたら、時間を選択できるポップアップが表示され、メールアドレスなどを登録して予約するといった流れになります。管理者によって予約を受け付けない曜日が設定されていれば、日付アイコンをクリックできないようにするなどの制限も加えています。
では、ページの枠組みから作成していきましょう。ページ名を event として、Type of content で Event を選択します。ここでは、Background color を #F7F7F7 としました。 i マークアイコンをクリックして、Current Month という名前の date 型の Custom state を作成します。
次に、インストールした Calendar Tool を一つ画面に配置し、Month Date と Time Date に先ほど作成した Custom state の Current Month を設定しておきます。今回は日付リストのみを使用するので、Time Interval は あまり関係ありませんが、ここでは 60 としています。もし時間リストを使いたい場合は、この部分の設定で何分間隔で時間を取得するか設定することができます。
次に、W 900 H 536 程度の大きさの Group を配置し、Background color や Shadow style を設定します。名前を Group Content としました。Apply a max width when the page is streched にチェックを入れ、Maximum width を 100 としておき、ページ幅が大きくなっても最大横幅は 900 のままにしておきます。また、ここでは Conditional で、ページ幅がタブレットに多い 768 以下の場合は、Background や Shadow style などは削除するように設定しました。
次に、Group Content 内の左側に Group Left 、右側に Group Right という W 450 の Group を配置します。それぞれ Minimum width を 99 、Apply a max width when the page is streched にチェックを入れて、Maximum width を 100 にしておき、ページ幅が狭くなった場合に、Group Right はカラム落ちさせて垂直にレイアウトされるようにします。また、Group Left は、Group Right が垂直に並んだ場合に余分な空白の高さが表示されないよう、後ほど中に配置する element がピッタリ収まるような高さ（ここでは H 298）で調整します。
Conditional では、画面幅が 768 以下の場合は、Roundness を 0 に戻す設定をしています。この辺りは、お好みで結構です。
イベントの詳細部分（左側コンテンツ）
では、イベントの詳細情報を表示する Group Left の中身を作成していきます。
まずは、このイベントの管理者の名前を表示します。具体的に参照するデータベースは、Event Type の User です。このフィールドは List になっているので、Repeating Group で表示させます。Type of content を User にして、Data source を Current Page Event's User とします。Layout は全て表示させたいので、Full list としておきましょう。なお、今回の calendly クローンでは、仕様上この User に複数人登録されることはないので、Repeating Group は使わず、Current Page Event's User's Name:first item として Text を表示させるだけでも大丈夫です。
あとは、下図のように Current Page Event から取得できる情報を Text を配置して設定していきます。
カレンダーの作成（右側コンテンツ）
カレンダー部分を作成していきます。まずは「日時を選択してください」Text と現在表示している 年月 text を配置します。年月の部分は、先ほど作成した Custom state の Current Month に設定されている日付を :formatted as から yyyy 年 m 月 にフォーマットして表示させます。なお、Current Month へ日付をセットするのは、後ほどワークフローの部分で解説します。
年月の横に、前月、次月とページ送りできるよう IonicIcon を配置します。もし、表示しているカレンダーが現在月の場合は、予約カレンダーにおいては過去日付を表示する必要はないので、Conditional で条件を event's Current Month:formatted as 2021/05 is Current date/time:formatted as 2021/05 としてクリックできないようにしておきましょう。
カレンダーは、曜日を表示する Repeating Group と、Calendar Tool から取得した日付を表示する Repeating Group の2つを用意して作成します。
まずは、曜日から作っていきましょう。Option sets の Day of the week を使用して設定します。Type of content を Day of the week、Data source には Get an option から All Day of the week とします。Layout style で Full list を選択し、Rows を 1、Columns を 7 で設定します。Cell min width は 30 としておきましょう。Repeating group のサイズは W400 H31 としました。
Repeating group の中にひとつ Text を配置して、Current cell's Day of the week's Display として曜日を表示させます。
次に日付部分を作成していきます。Type of content を date、Data source を Calendar Tool A’s List of Dates とします。Layout style で Full list を選択し、Rows を 6、Columns を 7 で設定します。曜日と同様に Cell min width は 30 としておきましょう。Repeating group のサイズは W400 H372 としました。
Repeating group の中に、Roundness を設定して丸くした Group date という名前の Group を配置し、Data source を Current cell's date として、Background Color を透過させた水色で設定しています。
ここでは実装しませんでしたが、Color は動的にも指定できるため、例えばですが、Color の値を Option sets の Event Color を利用して、Current Page Event's Event Color's Code としても良いかもしれません。IonicIcon の色なども一緒に統一してあげると Event Type 毎に、よりカスタマイズされたカレンダーを作成できそうですね。Option sets の Attribute を増やすことで、背景色用の別の色を一緒に持たせるといったことも可能です。この辺りの設定を気軽に楽しめるのが Bubble の醍醐味なのかもしれません。是非、色々試して楽しんでくださいね！
次に、この Group date の中に日付の Text を配置しますが、その前に、この Group date に対して Conditional を設定しておきましょう。
ユーザー（お客様）が予約を取る場合は、この Group date をクリックして時間指定のポップアップを表示していくことになるのですが、イベントを予約できる日付範囲（Event Type の Start Date から End Date まで）以外となる日付はクリックできない必要があります。それが一つ目の Conditional で、Current cell's date < Current Page Event's Start Date or Current cell's date > Current Page Event's End Date が条件となります。
次に、管理者によって予約できないように設定されている曜日（具体的には Schedule Type の isValid が no）の場合も、クリックできないようにしておきます。それが二つ目の Conditional で、条件は、Schedule Type を Event = Current Page Event と Day of the week = Current cell's date:formatted as 金（ddd でフォーマットしたもの）で検索した :first item's の isValid is "no" となります。
最後に、本日日付よりも過去の日付もまた予約できないので、クリックできないようにしておきます。条件は、Current date/time:rounded down to day > Current cell's date となります。ここで、:rounded down to day としているのは、Calendar Tool の日付もまた AM0:00 で保持されているためです。
なお、細かい部分ですが、上図の 2つ目の Conditional において、日付から曜日を取得する部分で :find & replace しているのは、Bubble の以前のバージョンにおいて、日本語の曜日に不要な半角スペースが含まれるバグに対応するためですが、ver13以降では、解消された不具合となるため必要ありません。
では、Group date 内に、日付の Text を入れていきましょう。Appearance で Parent group's date:formatted as 28（d でフォーマットしたもの）とします。Parent group's date というのは、ここでは Group date のことですね。
この Text にも Conditional を設定しておきましょう。カレンダーの日付が現在よりも過去の場合と、イベントの終了日以降の場合は、文字色をグレーアウトさせておきます。
次に、作成した曜日と日付の Repeating group を Group にまとめておきましょう。ここでは、名前を Group Calendar としました。横幅を 400 としておき、Minimum width を 75% にしておきます。これで 300px 程度の画面幅が狭いスマートフォンなどにも対応できるかと思います。
時間選択ポップアップの作成
では次に、日付がクリックされた場合に表示するポップアップを作成していきます。
まずは、Popup を画面に一つ配置し、Type of content を date とします。横幅は 320 としました。ポップアップを閉じる為の IonicIcon と、選択された日付が分かるように、Popup date's date を yyyy/m/d(ddd) で :formatted as した Text を配置します。
次に、時間を表示する Type of content を Time Master とした Repeating group を配置していきますが、ここでのポイントは、表示する時間は、Current Page Event の Duration Minutes によって変える必要があるということです。Duration Minutes の値が 15 （所要時間が15分のイベント）の場合は、時間の一覧も 15分刻みで表示したいですし、同様に 30 の場合は 30分刻み、1時間の場合は 1時間刻みで表示させる必要があります。
シリーズ第1回目で紹介した マスターデータとして利用する Time Master Type は下図のような構成となっていますので、この Display15 や Display30、Display60 といったフィールドの値を yes のデータで絞り込みを行うことで、対象とする Duration Minutes の時間を一覧を取得することができるようになっています。
そして、更にそれぞれの Duration Minutes で対象となる時間については、管理者が edit_event_type で登録した、スケジュールに基づいた時間である必要がありますので、Time Master からデータを取得する際に、MinuteNum を Schedule Detail Type の Start Time と、End Time で絞り込みを行います。
ということで、Repeating group の Data source には 上記の条件を指定したものを設定していきます。まずは、15分の場合です。Time Master を検索する条件を Display15 = "yes" として、更に MinuteNum が Schedule Detail の Start Time's MinuteNum:min 以上、End Time's MinuteNum:max 以下を条件に絞り込みを行います。ここで :min や :max としているのは、Schedule Detail を取得する際に list で取得されるのを min と max で 、MinuteNum と比較できるように単一にするためです。
Schedule Detail を取得するには、Do a search for で Schedule を Event = Current Page Event と Day of the week = Parrent group's date:formatted as 月（dddでフォーマットしたもの）で検索したデータを使用します。言葉では分かりにくいと思いますので、下図もあわせてご参考ください。
次に、Repeating group 内に Data source を Current cell's TimeMaster とした Group を一つ配置し、更にその中に、時間のみを表示している Group と、時間を選択した後の予約ボタンを表示する Group を、２つ重ねて配置していきます。
1つ目の Group は、横幅を 255 ぐらいにしておき、Make this element fixed-width にチェックを入れておきます。Repeating group の幅に対して、右端にスクロールバー用の余白のスペースを少し開けておきましょう。Data source は Parent group's TimeMaster として、親の TimeMaster を引継ぎます。Group の名前は Group TimeMaster となります。
Group の中に Text を配置して、Parent group's TimeMaster's Time として HH:MM の値を表示させます。
なお、この Group TimeMaster は、予約できない時間はクリックできないよう、Conditional を設定していくのですが、この部分に関しては、次回の「 7：予約機能の考え方とデータベースへの登録」で詳しく解説したいと思います。
次に、2つ目の Group を作成してきます。先ほど作成した1つ目の Group TimeMaster をコピーして、横幅を 110 ぐらいにしておきます。予約する Button と × IonicIcon を並べて配置し、これらを更に Group でまとめておきます。Group 名は、Group Time Master Checked としました。
また、この Group は1つ目の Group TimeMaster がクリックされた場合に表示したいので、初期表示では非表示となるよう This element is visible on page load のチェックを外しておきます。
最後に Popup date には、yes/no Type の clickable という名前で Custom state をひとつ設定しておきましょう。Default value を「はい」にしておいてください。これは、Group TimeMaster の Conditional でフラグとして使います。
予約フォームポップアップの作成
次に、先ほど作成した Popup date で、予約する Button がクリックされた時に表示する、予約フォームを作成していきます。
新しくポップアップを一つ画面に配置し、Type of content は TimeMaster を選択します。Popup date と同じ要領で、閉じる Icon や、対象の日付 Text を配置してください。その際、日付については Popup date’s date を取得します。
次に、Group Left を作成した時と同じ要領で、Current Page Event の User の list や、Eent Name を表示していきます。
なお、予約する時間を表示するには、このポップアップ（Popup TimeMaster）にセットされた TimeMaster の時間（Time）～ 選択された時間の MinuteNum に、Current Page Event の Duration Minute を加算した値とします。
あとは、名前とメールアドレスを登録する Input と、メモやコメントが入力できるように Multiline Input 、最後にスケジュール登録 Button を配置しておきましょう。その際、Input には Enter Key の無効化と入力必須項目になるように、Prevent "enter" key from submitting と This input should not be empty にチェックをいれておいてください。
ワークフローの作成
では、ワークフローを作成していきます。今回は、予約に関する部分以外の所を作成していき、予約に関するフローについては、次回の「 7：予約機能の考え方とデータベースへの登録」で解説します。
カレンダー部分
まずは、カレンダーに関する部分のワークフローを作成していきます。Page is load のタイミングで、現在日付のカレンダーが作成されるように、Custom state の Current Month に Current date/time:rounded down to month を Set state しましょう。
次に、カレンダーのページ送り部分で、前月と次月の IonicIcon がクリックされた場合のワークフローです。前月の場合は、Current Month の値から +(months): -1 として、1ヵ月減算します。逆に次月の場合は、Current Month の値を +(months): 1 として、1ヵ月加算します。
次に、日付がクリックされた場合のワークフローです。日付（ここでは Group date）がクリックされたら、Display data アクションで Popup date に Current cell's date を引き渡します。ここで、Data to display に date が引き渡せるのは、Popup date の Type of content を date で設定しているからです。
Display date したら、Popup date を Show しておきましょう。
ポップアップ
次に、Popup date で時間がクリックされた場合の処理です。まずは、Step1 で作成しておいた clickable という Custom state を "no" で Set state します。これは、いずれかの時間がクリックされた場合、他の時間はクリックできないよう、時間の Group TimeMaster を非活性状態にするための設定です。次に、選択された Group TimeMaster を Animate で FadeOut させて、Group Time Master Checked を FadeIn させます。
次に、今度は逆に Group Time Master Checked の × ボタンがクリックされた場合は、clickable を ”yes” に戻して、Animate で Group Time Master Checked を FadeOut し、Group TimeMaster を FadeIn させます。
次に、Popup date の閉じる Icon がクリックされた場合では、Popup date を Hide させておきましょう。
最後に、Popup date の予約する Button がクリックされたら、Popup TimeMaster に選択された時間を Parent group's TimeMaster で引き渡し、Popup TimeMaster を表示するようにします。また、Popup TimeMaster の閉じる Icon がクリックされた場合は、Popup TimeMaster を Reset data してから、Popup date に戻るようにしておきます。
以上で、今回の event ページ作成は終了です！なお、event ページ内の一部 Conditional やワークフローについては次回以降でご紹介していく予定です。お疲れさまでした！
次回
今回は、Repeating group を使ってオリジナルのカレンダーを作成していきました。次回は、calendly クローンの肝となる部分、「予約機能の考え方とデータベースへの登録」についてご紹介したいと思います！
では、次回もどうぞお楽しみに～！ここまでお読みいただき、ありがとうございました！
コンテンツ
Bubble で calendly クローンを作ってみる！（初級者向け）
