kumikumi

スケジュール調整・予約サービス「くみくみ」です。作成者が予約可能な日時を設定し、発行されたURLから予約者が空き時間を選択できます。

主な機能

• 複数の日付・時間帯から予約枠を作成
• 予約状況と登録・キャンセル履歴の管理
• キャンセルURL付き確認メールの送信
• 開発者、管理者、作成者の権限管理
• ロゴ、アイコン、サービスカラー、項目名のカスタマイズ

動作環境

• サーバー: Deno / JavaScript
• データ保存: 種別ごとのディレクトリにJSONファイルとして保存
• メール送信: Gmailer
• セッションID: sessionid の createSessionID

セットアップ

cp config.example.json config.json
# config.json にGmailアドレスとApp passwordを設定
deno task start

ブラウザで http://localhost:8001 を開きます。

開発時とテスト時は次のコマンドを使用します。

deno task dev
deno task test

認証情報を含む config.json はGit管理対象外です。

設定

設定は config.json に記述します。ひな形は config.example.json を参照してください。

項目	内容	初期値
gmailAddress	確認メールの送信元Gmailアドレス	なし
appPassword	GmailのApp password	なし
adminUser	開発者のログインユーザー名	なし
adminPass	開発者のログインパスワード	なし
adminLoginPath	管理者専用ログインURL	/admin-login
cookieSecure	セッションCookieに Secure を付与するか	false
lifetimeSession	セッションの有効期間（時間）	24
baseURL	確認メールに記載するキャンセルURLのベースURL	リクエストURL
slotTime	1スロットの時間（分）	30
attributeName	予約者情報の「会社名」に代わる表示名	会社名
titleLogo	画面およびOGPで使用するロゴのパスまたはURL	/logo.png
iconLogo	favicon、ホーム画面アイコンのパスまたはURL	/icon.png
keyColor	CSSで使用可能なサービスカラー	#168458

利用者と権限

利用者は次の4種類です。

• 開発者
  • config.json の adminUser と adminPass でログインします。
  • 作成者の承認、管理者権限の設定、削除ができます。
• 管理者
  • 開発者または管理者によって管理者に設定された作成者です。
  • 新規作成者登録URLを発行できます。
  • 自分が発行した作成者の承認、管理者権限の設定、削除ができます。
• 作成者
  • 登録URLでID、パスワード、合言葉を入力して利用申請します。
  • 管理者の承認後、ログインしてスケジュールを作成・管理できます。
• 予約者
  • 予約者向けURLを知っていれば、承認やログインなしで予約できます。

作成者登録URLは、ログイン後の作成者ページから発行します。URLで登録した作成者には発行者が記録され、開発者は全ユーザーを、管理者は自分が発行した作成者だけを管理できます。管理者ログイン画面はトップページには表示せず、adminLoginPath で設定したURLから開きます。

管理画面と管理APIのセッションはHttpOnly Cookieで管理します。cookieSecure が true の場合は Secure 属性も付与します。CookieのセッションIDが承認済みユーザーと一致しない場合、管理機能は利用できません。

画面仕様

トップページ

• サービスの説明と「管理者用ログイン」ボタンを表示します。
• 承認済みのCookieがある場合は、そのまま作成者ページへ移動します。
• 未認証の場合はユーザー名とパスワードの入力欄を表示します。
• adminUser と adminPass が一致した場合、開発者として認証します。

作成者ページ

• 作成済みスケジュールの一覧と「新規スケジュール作成」ボタンを表示します。
• 全作成者のスケジュールを共通で表示し、各スケジュールに作成者名を記載します。
• 管理者には、合言葉を含む作成者一覧も表示します。
  • 確認付きの承認チェックボックス
  • 確認付きの管理者チェックボックス
  • 削除ボタン
• ログアウトするとCookieを無効化し、トップページへ戻ります。

新規スケジュール作成ページ

• 1スロットの時間と、複数の予約可能日時を登録できます。
• 開始時間の初期値は 10:00、終了時間の初期値は 12:00 です。
• 1スロットの初期値には slotTime を使用します。
• 予約時に追加でテキストで自由記入してもらうフォームを追加できます。
  • 追加するしないを選択するチェックボックス
  • 自由記入するフォームを必須とするかどうかのチェックボックス（デフォルト必須ではない）
  • 記入してもらう項目に関する説明を記入する1行の入力フォーム
• 予約社向けに、確認メールのタイトルと本文を編集できます。
• メールにはスケジュールタイトル、日付、予約者情報、キャンセルURLを差し込めます。

予約ページ

• 「希望時間帯を選んでください」と案内します。
• 予約枠を日付ごとに表示し、予約済みの枠はグレーアウトして選択不可にします。
• 会社名、姓名、メールアドレスの入力欄を最初から表示し、すべて必須とします。
  • 「会社名」の表示には attributeName を使用します。
  • 姓と名は横並びの2入力欄にします。
  • 文字入力欄の文字サイズは16px以上にします。
• 入力内容は localStorage に保存し、次回以降も再利用します。
• 予約ボタンには、確認メールが送信されることを明記します。
• 送信中は予約ボタンを無効化し、処理中アニメーションを表示します。
• 選択後に枠が埋まった場合は、別の時間を選ぶよう案内します。
• スマートフォンで次の入力欄へ移動しやすいよう、ページ下部に十分な余白を設けます。

予約登録後はキャンセルURL付きの確認メールを送ります。メール送信に失敗した場合、予約は登録せず、エラーを data/log/err.log に追記します。

キャンセルページ

• 発行されたキャンセルURLから、予約者自身が予約をキャンセルできます。
• キャンセル完了後は「別日程で予約を取る」ボタンを表示します。

管理画面

• ページタイトルを「設定したタイトル - くみくみ管理画面」とします。
• スケジュールタイトルの編集も可能とします。
• 予約者向けURL、新規ウィンドウで開くボタン、URLコピーボタンを表示します。
• 日付ごとに、時間、会社名、姓名、メールアドレスの順で予約一覧を表示します。
• 予約枠を追加できます。
• 登録・キャンセル履歴を日時付きで表示します。
• 追加入力フォームの有無、必須かどうか、内容を編集・更新できます。
• 確認メールのタイトルと本文を編集・更新できます。
• 確認付きのスケジュール削除ボタンを表示します。

確認メール

既定の確認メールは mail-template.txt で編集できます。先頭の Subject: 以降をメールタイトル、空行以降を本文として扱います。

利用可能な差し込み項目は次のとおりです。

• {{title}}: スケジュールタイトル
• {{date}}: 予約日時
• {{company}}: 会社名など、attributeName に対応する入力値
• {{familyName}}: 姓
• {{givenName}}: 名
• {{cancelUrl}}: キャンセルURL

データ保存先

ディレクトリ	内容
data/schedules	スケジュール
data/bookings	予約
data/history	登録・キャンセル履歴
data/users	作成者と権限
data/log/err.log	メール送信エラー

画像とテーマ

• public/logo.png を全画面のロゴおよびOGP画像として使用します。titleLogo で変更できます。
• public/icon.png をfaviconおよびホーム画面アイコンとして使用します。iconLogo で変更できます。
• サービスカラーには keyColor を使用します。未指定時は緑（#168458）です。