01 / 読書ナビ
- 狙い
- 仕事や暮らしの悩みから本を選び、要点を次の行動につなげる読書ナビ。テーマ別ガイドと読む順番を用意する。
- 実装
- frontmatter（記事のメタデータ）を型付きで管理し、ビルド時に検査する。静的ページの生成とPagefindの検索索引作成を同じビルドに組み込み、記事の追加を検索へ反映する。
制作実績18 projects
@dosyuun開発したWebサイトの狙いと、実装の工夫をまとめています。
02 / 中学受験 / 学校検索
- 狙い
- 中学受験の学校選びに、通いやすさという比較軸を用意する。公式に案内されたアクセス駅をもとに、学校名だけでは比べにくい通学条件を整理する。
- 実装
- 国土数値情報N02の駅路線データから乗換グループを生成する。同一路線とみなすことで有利に見える表記や貨物支線の誤接続を補正し、公式アクセス駅までの経路を保守的に概算して、比較基準の一貫性を保つ。
03 / 小学校受験 / 学校検索
- 狙い
- 小学校受験に向け、学校を通学条件から比べられるようにする。所在地や学校情報だけでは判断しにくい、家庭ごとの通いやすさを調べる入口をつくる。
- 実装
- 学校の位置を収録した国土数値情報P29と鉄道データN02を、サイト用のデータへ変換する。静的な鉄道ネットワークで乗換を分類し、学校公式URLとともに比較情報を提供する。
04 / 音楽練習
- 狙い
- ギターの指板で音名と度数を段階的に練習できるようにし、知識はあっても弾く場面で位置を結び付けにくい問題を解く。
- 実装
- 標準チューニングをMIDIの音高でモデル化し、弦とフレットから音を求める。C♯とD♭のような異名同音の回答を許容。デイリー練習では誤答傾向に応じて出題確率を変え、直近6問との重複を避ける。
05 / ギター練習
- 狙い
- YouTube動画の好きな区間を、速度と再開待ち時間を調整しながら繰り返し練習する。フレーズやマイリストを保存し、次回の練習をすぐ再開できるようにする。
- 実装
- YouTube IFrame Player APIで、再生、停止、待機の状態を分けて区間リピートを制御する。フレーズとマイリストはブラウザ内に保存し、JSONで書き出せる。動画検索はWorker経由とし、APIキーをブラウザに渡さず、キャッシュと回数制限を設ける。
06 / 贈答診断
- 狙い
- 贈る相手や用途に合うお取り寄せを選べるようにし、価格や人気順だけでは避けにくい温度帯や日持ちの失敗を減らす。
- 実装
- 楽天APIの取得結果は候補に限定し、人手によるコメントを公開条件にする。温度帯、日持ち、個包装、のし、相手、避ける場面を商品データに持たせ、5問の診断結果へ結び付け、判断基準のぶれを抑える。
07 / 書籍検索
- 狙い
- Kindle Unlimited対象でレビューのある本を横断して探せるようにし、読み放題の候補から自分に合う本を探す手間を減らす。
- 実装
- 確認済みの書籍をCSVで一元管理し、ASIN（Amazonの商品識別子）から紹介リンクを生成する。Fuse.jsでブラウザ内の検索を行い、記事のASIN参照と書籍データの整合性をビルド前に検査する。
08 / キャリア診断
- 狙い
- 開発経験者がAI時代の職種と次に学ぶ内容を整理できるようにし、現在地が曖昧なまま学習や転職を始める迷いを減らす。
- 実装
- 経験を9軸で入力し、ブラウザ内で職種データと照合する。比較結果はURLで再現でき、求人、教材、提携先には確認日と出典の状態を保持して、情報の鮮度と確認状況を見分けられるようにする。
09 / ホテル比較
- 狙い
- MarriottとHiltonのポイント宿泊ホテルを条件と地図で比べられるようにし、候補が多い地域でも使いたいポイントに合う滞在先を探せるようにする。
- 実装
- 施設情報、座標、写真を分離して管理し、公式出典と確認日を記録する。条件で絞り込んだ結果を遅延読み込みする地図へ同期し、密集地点はクラスタ表示して地図操作の負荷と候補確認の手間を抑える。
10 / 旅行英語
- 狙い
- ホテルや空港など旅行先の50場面を、音声のお手本と一言ずつのチャレンジで練習する。返答を隠して声に出し、例文を自分で確かめながら次の場面へ進める。
- 実装
- JSON教材を読み込み、Reactで場面選択と返答例の表示を管理する。音声合成モデルのKokoroで事前生成したWAVをセリフごとに再生し、場面移動時は停止する。画面と音声はWorkersで配信し、利用者側で音声生成モデルを動かさずに練習できる。
11 / 家事代行ガイド
- 狙い
- 初めて家事代行を頼む人向けに、掃除で頼めることや初日の準備を公式情報に沿って案内する。作業の優先順と伝達事項を整理して依頼文を作り、サービスの条件を確認できる。
- 実装
- Astroでガイドを静的生成し、Markdown記事の確認日と公式出典をスキーマで検査する。依頼メモはブラウザ内で生成し、利用者が手直しした文章はほかの入力を変えても保持する。コピーに失敗した場合は文面を選択し、手動でコピーできるようにする。
12 / 食事の組み合わせ
- 狙い
- 宅配食と市販のごはんを組み合わせた一食例を探せるサイト。サービス別に絞り込み、栄養表示値で並べ替え、主食や一品を変えた合計を確認できる。
- 実装
- Astroで一食例と注文条件を静的生成し、食品データに表示単位、公式出典、確認日を保持する。選択に合わせてブラウザ内で栄養表示値を合算し、欠けた項目は「一部未確認」と表示する。別のスクリプトで公式ページを再取得し、掲載値を照合する。
13 / 食事と体重の記録
- 狙い
- 毎日の食事と体重をスマートフォンから記録する本人向けの試用版。食品や定番食、写真を使って食事を残し、日別の摂取量と体重の推移を確認できる。記録画面の利用にはログインが必要。
- 実装
- Reactの画面とHonoのAPIをWorkerで配信し、記録はD1へ保存する。未送信の操作はIndexedDBに保持して再送し、操作IDと版番号で重複や競合を扱う。Workers AIの写真概算と栄養成分表示の読取りは、利用者が確認してから保存する。
14 / 会場選びと幹事支援
- 狙い
- 子連れの持ち寄り会の幹事が、人数と準備時間、会場費用を整理するサイト。3候補の総額と家族ごとの負担額を比べ、確認リスト付きの条件メモをコピーして参加者と相談できる。
- 実装
- Astroで記事と条件メモを静的生成し、比較計算はブラウザ内で処理する。入力値を実行時に検証し、未入力の費用を0円にしない。小数時間をBigIntによる整数計算へ変換して総額を切り上げ、家族ごとの負担額と余りを表示する。コピーが失敗したときは手動選択用の欄を出す。
15 / 遠征の宿泊ガイド
- 狙い
- ライブ遠征の前泊や当日泊に向け、会場と翌日の予定から宿泊エリアを選ぶサイト。公式アクセスとエリアの提案を読み、日付と大人人数を指定して楽天トラベルで宿を探せる。
- 実装
- Astroで3会場とガイドを静的生成し、公式アクセスと宿泊エリアの提案を分けて表示する。会場データの項目をTypeScriptの型で定義し、宿泊条件はブラウザ内で検証する。地域名と日付、大人人数を楽天の検索URLへ渡し、日程未定なら地域名だけで探せる。
16 / フォトブック制作ガイド
- 狙い
- 家族や卒業、旅行の思い出をフォトブックにして贈るための案内サイト。用途別の構成見本から写真を選び、商品ごとのページ数と配送条件を確認して、印刷先での制作へ進める。
- 実装
- Astroでガイドと比較表を静的生成し、Cloudflare Workersで配信する。共通の画像コンポーネントで生成画像を複数幅のWebPに変換し、公式仕様には出典と確認日を添える。アクセス解析は本番ドメインで許可された場合だけ読み込み、拒否への変更と別タブの選択にも対応する。
17 / 撮影と機材選び
- 狙い
- 子どもの行事を撮る保護者向けに、3問でカメラの種類を整理する。距離とレンズから写る範囲を計算し、5行事の撮影ガイドを読みながら機材と撮影場所を検討できる。
- 実装
- Astroで行事ガイドとMarkdownの記事を静的生成する。ブラウザ内の3問診断は、過去の回答を変えると後続を消して選び直す。センサー寸法、距離、焦点距離から写る範囲を求め、数値とSVGの人物図を同時に更新する。JavaScriptが無効でも用途別の候補表と早見表を読める。
18 / ランドセル選び
- 狙い
- ランドセルを選ぶ保護者向けに、12ブランドの公式情報を出典と確認日付きで整理する。5問の診断と比較表で候補を絞り、仕様や保証、カタログ請求先を確かめられる。
- 実装
- Astroでブランド確認表とガイドを静的生成し、JSONの公式情報を共通利用する。ブラウザ内の診断は条件に合う理由と未確認の項目を表示し、比較表はJavaScriptなしでも読める。モデル年度、数値、出典のURLと確認日をビルド時に検証し、Cloudflare Workersで配信する。