撮影と機材選び
行事カメラ
子どもの行事を撮る保護者が、カメラの種類と望遠レンズを検討するサイト。3問の用途診断で候補と理由を読み、距離、身長、レンズの焦点距離から画面に写る範囲を計算できる。5行事の撮影前チェックと初心者向け記事を読み、手持ちの機材で試す条件を整理する。
公開サイトを見る （新しいタブ）
技術スタック
| 技術 | このサイトでの役割 |
|---|---|
| Astro | 行事別ガイド、計算機、Markdownの記事を静的に生成する。記事の公開状態から個別ページの生成対象を選ぶ。 |
| TypeScript / Zod | 記事データの構造を定義し、行事分類、公開状態、出典URLと確認日を検証する。公開記事のURL重複はビルド時にエラーにする。 |
| JavaScript | 用途診断の回答と画面遷移をブラウザ内で管理する。計算機では入力を検証し、変更のたびに写る範囲と次の確認先を更新する。 |
| SVG | ベクター画像形式のSVGで人物図を描き、計算した身長の割合に合わせて拡大縮小する。縦位置と横位置で枠の寸法を変え、全身が入らない場合は枠で図を切り取る。 |
| Cloudflare Workers Static Assets | 生成した静的ファイルを独自ドメインで配信し、存在しないURLには404ページを返す。 |
処理の流れ
残したい記録と用途を整理する
写真か動画か、子どもまでの距離、荷物の許容範囲を3問で選ぶ。カメラの種類の候補、理由、撮影前に確かめる条件を読む。
行事と機材の準備を確認する
運動会、発表会、入園と入学式、卒園と卒業式、七五三のガイドを読む。初心者向け記事ではカメラの種類とレンズの数字の読み方を確認する。
距離とレンズから写る範囲を比べる
カメラの受光部であるセンサーの種類と、レンズにmmで表記される焦点距離を選ぶ。子どもまでの距離、身長、構図も入力し、写る幅と高さ、画面に占める身長の割合を数値と図で見る。
計算結果に応じて次の条件を確かめる
全身が入る構図、手持ちでの試し撮り、近い撮影場所の比較へ案内する。機材が足りない場合はレンズの比較例を読み、本体との対応、料金、在庫をメーカーや貸出先で確認する。
実装の工夫
回答の変更で後続の回答を消す
診断の回答はブラウザ内の配列で管理する。戻る操作では回答を残し、過去の回答を変更した場合はそれより後の回答を消して選び直す。質問や結果へフォーカスを移し、選択済みの状態をボタンの属性にも反映する。
数値と人物図に同じ計算結果を使う
センサーの辺の長さに距離を掛け、焦点距離で割って写る範囲を求める。縦位置ではセンサーの縦横を入れ替え、身長を写る高さで割った割合から数値とSVGの人物図を更新する。範囲外の入力はエラーを表示し、結果と次の案内を隠す。
静的な表示と操作できる計算を併設する
初期値の計算結果と早見表を静的HTMLに含める。JavaScriptが無効でも早見表を読め、診断には用途別の候補表を用意する。レンズ記事内の計算結果からは同じ記事の確認項目へ移動し、入力した値を保ったまま読み進められる。
構成と制約
- 写る範囲と「大きく写る」の判定は計算による仮の目安で、表情の鮮明さやピント、暗い会場での写り方を保証しない。説明用の画像はAI生成で、実写の作例は未作成である。
- 診断は用途からカメラの種類を示し、特定の本体を一律に推奨しない。診断と計算の入力は外部送信も保存もしないため、再読み込みすると初期状態に戻る。
実装確認：