個人family-trips

やりたかったこと

家族旅行の検討プロジェクト（family-trips）に高千穂峡の貸しボートを組み込みたい。30分5000円の貸しボートが本当に楽しめるのか、写真とレビューを集めて自分の頭の中で「行く／行かない」を判断したい。公式ページのURLだけ Claude Code に渡して、あとは丸投げした。

まず Claude Code に研究ノートを書かせた

公式ページのスクレイピングと、レビューサイトの並行取得を Claude Code に頼んだ。

  • 高千穂峡観光協会の公式ページ（料金・利用時間・注意事項）
  • Web検索でレビューを横断取得
  • 公式画像3枚を agent-browser でダウンロード

並行で全部走らせて、戻ってきた成果物は次の通り。

  • 画像3枚を family-trips プロジェクトの public/ 配下に格納
  • 検討メモ（レビュー要約＋公式情報＋撮影アングル）を memo 配下に作成
  • 地図ピンに画像対応を追加（ピンをクリックすると写真と説明が出る）
  • 旅程ファイル（itinerary）の Day3 に「高千穂峡 貸しボート 30分」枠を追加

ここまでは順調だった。Claude Code がビルドを走らせて「ビルド成功」と返してきて、ブラウザで地図を開いた。ピンをクリックして、memo へのリンクを踏んだ。

404 が出た

検討メモへのリンクが 404 を返した。画面のスクショを Claude Code に貼って原因を聞いた。

memo 配下のファイルは Astro のルーティング対象に含まれていなかった。src/pages/ の下にあるファイルだけが URL になる仕様で、memo/ は素通り。同じ理由で、以前 Claude Code が貼った booking-strategy.md へのリンクも切れていたはずだった（誰にも踏まれずに残っていた）。

「スライド形式に変えてほしい」

404 修正の指示と一緒に、もう一個リクエストを乗せた。「検討メモをスライド形式に変えてほしい。矢印キーで進めて、PCで写真を大きく見たい」。

旅行の検討メモは長いスクロールで読むより、1論点1スライドで進めた方が頭に入る。プレゼンを自分で自分に見せる感覚が欲しかった。

Claude Code に投げた要件はこれだけ。

  • h2 ごとにスライドを分割する
  • 矢印キー（←→）でスライド送り
  • フッターに「← 前」「次 →」のボタンと「←/→キーで移動」のヒント
  • PCで写真を3枚横並びに表示できるレイアウト

ドロワーUIにスライド機能を埋め込む形で改修が走った。ビルドが通って、ブラウザで開いた。スライド4枚目に高千穂峡の写真3枚が横並びで広がり、カウンターは「4 / 8」、フッターのボタンも動く。矢印キーでぱらぱらめくれた。

「スライド 1」と表示された

目次スライドを最初に追加して、目次から各論点に飛べるようにした。ブラウザで開いた瞬間、違和感が走った。先頭のスライドが「スライド 1」とだけ表示されている。本来は目次が出るはずだった。

Claude Code に調査させたら、Markdown のレンダリング由来のバグだった。

検討メモの中で各 h2 の直前に <a id="transport"></a> のような名前付きアンカーを置いていた。これを Markdown レンダラが <p> でラップしてしまい、アンカー検出ロジックがそのアンカーを見つけられず、h2 のない孤立スライドが先頭に1枚生まれていた。

修正は <a> の親要素が <p> でも検出できるようにアンカー走査を変えるだけだった。修正後、1/8 で目次が7項目正しく並んだ。

「右側にフロートで目次表示オンオフできるようにして」

スライドを8枚めくるのは、それはそれで面倒だった。「目次から飛べるのは1枚目だけ」だと、4枚目を見ている時に2枚目に戻りたくなる場面で詰む。

「右側にフロートで、表示オンオフできるようにして。どっからでもどこのスライドにもジャンプできるように」と頼んだ。Claude Code が右上フロート目次パネルを足した。

  • 右上に折りたたみボタン
  • 開くと現在のスライド位置がハイライトされた目次が縦に並ぶ
  • どのスライドにいても常に出せる

ビルドが通って、ブラウザで開いた。スクショを撮ったら、パネルが見えなかった。

position: sticky が body のスクロールで効かなかった

最初の実装は、フロート目次パネルを position: sticky で body 内に置いていた。body 自体がスクロールするレイアウトだと、sticky は親要素のスクロールコンテナにしか追従しないため、画面外に流れ去っていた。

Claude Code がパネルを drawer 直下に動かして position: absolute に変えたら、右上に固定された。スライドを送ってもパネルは動かず、目次のハイライトだけが切り替わった。

「あれ、今ってプロジェクト立ち上がってましたっけ？」

最後に確認のために dev server を見に行ったら、いつのまにか落ちていた。途中で Claude Code が別のビルド検証を走らせた時に、ポートを掴み直すために停止していたらしい。「あれ、今ってプロジェクト立ち上がってましたっけ？」と聞いたら、「先ほど停止したので、いま動いていません。立ち上げますか？」と返ってきた。

複数のビルド・dev server・ブラウザ自動化を Claude Code が並行で動かしていると、いつのまにかどれが生きていてどれが死んでいるのか分からなくなる。これは作業が長くなるほど顕著で、最後に必ず聞き直さないと、自分の頭の中の状態と Claude Code の頭の中の状態がずれる。

今日の学び

  • スライド形式UIは、検討メモのような「論点ごとに頭を切り替えたいコンテンツ」に効く。スクロールよりも前進感がある
  • Markdown レンダラが <a> を <p> でラップする挙動は事前に想像できなかった。動的レンダリングのパース系バグは、結局ブラウザで見ないと気づけない
  • position: sticky は親スクロールコンテナに依存する。body スクロール下では position: absolute + ドロワー直下配置の方が素直
  • 並行で複数プロセスを動かすと、dev server の生存状態を見失う。最後に一度プロセス一覧を聞き直す癖をつけたい

明日やること

  • 残りの旅程ピン（阿蘇方面）にも同じ画像対応を入れる
  • フロート目次のキーボードショートカット（t で開閉とか）を検討
  • スマホ表示でスライドUIが崩れないか実機で確認する