家事代行ガイド
家事のたのみかた
初めて家事代行を頼む人に、掃除の依頼内容と事前準備を案内するサイト。公式情報の確認日と出典を添えたガイドを読み、頼みたい作業を最大3つ選んで優先順を決められる。依頼メモはブラウザ内で生成、編集、コピーでき、サービスの条件を確認してから申込みへ進める。
公開サイトを見る （新しいタブ）
技術スタック
| 技術 | このサイトでの役割 |
|---|---|
| Astro | ガイド、サービス案内、依頼メモのページを静的に生成する。記事の一覧と個別ページにも使う。 |
| Astro Content Collections | Markdownのガイドを読み込み、タイトル、確認日、公式出典などの項目をスキーマで検査する。 |
| TypeScript | 依頼メモの優先順の追加と並べ替え、依頼文の整形、手編集後の保持を関数に分ける。 |
| ブラウザのJavaScript | 選択と入力に応じて依頼文を更新し、再生成、リセット、クリップボードへのコピーを画面内で処理する。 |
| Cloudflare Workers Static Assets | Astroが生成した静的ファイルを独自ドメインで配信し、存在しないページには404ページを返す。 |
処理の流れ
ガイドで依頼内容を確認する
掃除代行で頼めること、優先順位、初回の準備などの記事を読み、公式出典と確認日を確かめる。
作業を選んで並べる
必ず頼みたい場所を最大3つ選び、「上へ」「下へ」の操作で伝える順番を決める。
依頼文を整える
任意の作業と事前に伝えたいことを入力する。生成された文面を手編集し、必要なら再生成またはコピーする。
申込条件を確認する
サービス案内で対応地域、料金、申込手順を確認し、条件が合えば公式サイトへ進む。
実装の工夫
出典と確認日を記事に結び付ける
ガイドのMarkdownには確認日と1件以上の公式出典を必須項目として持たせる。共通テンプレートが本文の後に確認日と出典リンクを表示し、記事で使う情報の根拠を読者がたどれるようにする。
手編集した依頼文を保持する
作業の選択や補足欄の変更に応じて依頼文を組み立てる。利用者が依頼文を直接書き換えた後は入力欄の変更で上書きせず、再生成ボタンを押したときだけ選択内容を反映する。
入力内容をブラウザ内で扱う
優先順と入力欄の状態は表示中のページの変数とフォームに保持する。依頼文のコピーはブラウザのクリップボードを使い、失敗時には文面を選択して手動コピーできる状態にする。
構成と制約
- 依頼メモは作業の所要時間やサービスで対応できるかを自動判定しない。申込前に提供元の条件を確認する必要がある。
- 依頼メモの入力内容は保存、送信されず、ページを再読み込みすると消える。作成した文面だけでは申込みや予約にならない。
実装確認：