制作実績の一覧へ

会場選びと幹事支援

集まりの場所

子連れの持ち寄り会の幹事が、人数、利用時間、会場費用を整理するサイト。準備と片付けを含む時間で3候補の総額と家族ごとの負担額を比べられる。定員や持ち込み条件の確認方法を記事で読み、確認リストを含む条件メモをコピーまたは印刷して参加者と相談できる。

公開サイトを見る (新しいタブ)
集まりの場所の画面

技術スタック

集まりの場所で使用する技術と役割
技術このサイトでの役割
Astroトップ、条件メモ、記事一覧と個別記事を静的に生成する。共通レイアウトでナビゲーションとページ情報を揃える。
TypeScript記事データの構造と、計算処理に渡す入力や結果の型を定義する。入力値の妥当性は実行時の検証で別に確認する。
JavaScript / BigIntブラウザ内で入力を検証し、会場費用を計算する。JavaScriptの整数型BigIntを使い、小数の利用時間を分数として扱って、総額を円単位で切り上げる。
Astro Imageサイト内の生成画像を複数の幅のWebPへ変換する。画面幅に応じて表示し、実在会場の写真ではないことを添える。
Cloudflare Workers Static Assets生成した静的ファイルを独自ドメインで配信し、存在しないページには404ページを返す。

処理の流れ

  1. 会場選びの確認項目を読む

    人数、座席、予算、持ち込みと片付けの記事を読み、予約先へ確かめる条件を整理する。

  2. 人数と利用時間を揃える

    大人と子どもの人数、費用を分ける家族数、会の時間、前後の準備と片付けの時間を入力する。

  3. 3候補の費用を比べる

    各候補の税込時間料金と追加費用を入力する。同じ利用時間で総額と家族あたりの集金額を表示する。集金額は円単位で切り上げ、集金総額から会場費を引いた余りも確認できる。

  4. 条件メモで相談する

    定員、子ども、持ち込み、清掃の確認状況を記録し、地域のメモと比較結果をコピーまたは印刷する。空き状況と最終条件は予約先で確認する。

実装の工夫

未入力の費用を0円にしない

人数と時間には範囲を設け、文字列の形式と数値を実行時に検証する。時間料金か追加費用が空欄、範囲外なら、その候補の計算結果を表示しない。無料の場合も0円を明示入力し、未確認の費用と区別する。

小数時間の金額を整数で計算する

1.5時間を15/10時間として扱うように、小数時間を整数の分子と分母へ変換する。BigIntで準備時間と追加費用を含む総額を計算し、円単位で切り上げる。その総額を家族数で割り、端数を切り上げた集金額と、集めたときに余る金額を表示する。

比較結果と確認状況を同じメモにする

コピー文は現在の入力と計算結果から組み立て、地域のメモ、未計算の候補、確認リストの状態も含める。クリップボードへの書込みが失敗した場合は、手動で選択してコピーできる欄を表示する。印刷時は操作ボタンを隠す。

構成と制約

実装確認:

制作実績の一覧へ戻る