【Click/Adalo】時間の入力不要なカレンダー予約アプリを作ってみた

（なぜこれを書いたか）
前回、カレンダーを使わない簡易的な予約アプリの紹介をしました。なぜカレンダーを使わなかったかというと週末ボランティアの予約用に作ったので時間帯の入力はそもそも不要なのに入力しないとカレンダーが使えなかったからです。（時間帯はAM9:00～12:00と決まっています。）

しかし、カレンダーがあった方がやはり日付管理がしやすいので、カレンダーは使うけど開始時間と終了時間の入力不要なアプリを作ってみることにしました。（※実際は自動で時間を入力しているだけで、時間の入力はやっぱり必要なんです。）

世の中には日付だけ入力すればいいという予約アプリの需要ってきっとあると思うのでこのアイディアが誰かの役に立てれば幸いです。

（余談）
私が最近noteに投稿しているブログはClickユーザー向けに書いていますが、Adaloでも全く同じように使えますのでAdaloユーザーの方にも読んで頂きたいです。というか、私はアプリは殆どAdaloで作っており、Clickはビギナー向けの解説用にアプリを作っているだけです。（国産NoCodeアプリの応援のため）

１．こんな予約アプリを作りました

細かい説明の前に今回作ったアプリの画面を以下に示します。ボランティア活動に参加する日をカレンダーで入力します。

カレンダーアプリは普通、開始と終了の日時を入力するようになっていますが本アプリでは下記画像のように日付だけを入力します。活動時間はAM9:00～12:00で決まっているのでこれは自動で入力するようにしました。

～点（ドット）の問題点～
いつも活動は10人前後で行っているのですが、カレンダーに参加者を点（ドット）で表示するとClickの場合、一つの日程に点が最大3つまでしか付きません。10人参加しても点が3つしか付かないのでこの点も改善することにしました。

日付をクリックするとその日の「予定表ビュー」が以下のように開きます。
ここがまた問題で、人数が6，7人迄なら予定表ビューで人数と参加者名を確認できるのですがそれ以上になると個人データの帯が細くなりすぎて字が読めなくなるんです。（人数もぱっと見、何人か分からない）

そこで個人ごとの帯をクリックするとデータ詳細を表示する別画面に遷移するようにしました。

例えば小林さんのデータ帯をクリックすると下記のような画面に遷移します。11月23日（水）の参加者名と人数合計が表示されています。（カスタムフィルターでリストを日付で絞り込んでいるだけですが。）

２．時間入力を省く方法

今回のアプリでは日付だけ入力して、時間の入力（開始時間、終了時間）は行いません。これは時間の入力が不要になったわけでなく自動で入力がされています。

①データベースの作り方
「参加日」という名前のデータベースを作り、内容は下記画像のように４つの項目から構成されています。

・氏名
・date（日付）
・start（日付＋開始時間）
・end（日付＋終了時間）

②ホーム画面の設定
ホーム画面ではカレンダー、DatePicker（日付選択）、ボタンの３つを配置してあります。

また、カレンダーは以下のように「参加日」データベースと紐づけています。

③ボタンのClickFlowの設定
ボタンを押すとClickFlowによって「参加日」データベースにデータが作成され、カレンダーには点（ドット）が追加されます。

ポイントはstartとendという項目にどうやって開始と終了の時間を入れるかということです。ここの部分は日単位でデータを入力するようになっており、DatePickerで入力した日付データの後にAM9:00～12:00を日単位で追加すればいいのです。
（例）
～2022年11月23日9:00のデータの作り方～
「2022年11月23日」→DatePickerでこの日を選択します。
AM9:00→日単位に換算するために24Hで割り算します。9÷24

「日付入力1」＋9÷24　（単位は日）

同様に2022年11月23日12:00は以下のように設定します。
「日付入力1」＋12÷24　（単位は日）

３．その日の参加者、人数を確認する

日付をクリックすると予定表ビューが開き、その日の参加者名が表示されますが、人数が6，7人を超えるとデータが細くなりすぎて内容がよく分かりません。そこで（誰でもいいので）個人のデータをクリックすると「詳細」という別画面に遷移し、その日の参加者名と参加人数が表示されるようにしました。

「詳細」画面の作り方
予定表ビューの個人データをクリックすると「詳細」画面に遷移するようにClickFlowを設定します。こうすることで予定表ビューのデータが詳細に転送されます。

①その日の参加者数
ホーム画面の「予約」ボタンを押したときに選択された日付（date）データを一旦、userデータベースに飛ばし、この日付データでカスタムリストを絞り込んで個数をカウントしています。

→ここの部分のロジックはかなり迷いました。日付データが「詳細」画面に転送されているのにも関わらず、カスタムフィルターで絞り込みするときにこの画面から日付データが読み取れませんでした。仕方なく日付データをLogged In userに飛ばして、そこから読むこむようにしました。（もっといい方法があると思うんですが、思いつきませんでした）

②その日の参加リスト
「参加日」データベースをDatePickerで選択された日で絞り込みを行っています。ここも上記と同様に選択された日付をLogged In userに設けたdateという項目から引っ張ってきています。

説明は以上です。いろいろ書きましたが、ポイントはカレンダー設定の開始時間、終了時間を自動入力できるように日単位で表現して、それをDatePickerで選択した日付データに加える部分です。

カレンダーは開始時間と終了時間を入力しなければ使えないとずっと思っていたのですが、今回、自動入力すればその部分の入力はクリアできることが分かりました。（この件は最初に疑問に感じてからもう1年以上経過しました。ずっと考え続けていたら何とかなったのでカレンダーの活用範囲が広くなりました。）

ClickやAdaloで何か質問あれば言って下さい。一緒に考えましょう。ここまで読んで頂き、有難うございます。