今回はサイト自体を整えた
今週の中心は、別のプラグインやローカルツールではなく、この記録サイト自体の整備だった。対象は大きくないが、長く使うためには重要な点が多い。誤解を生むクリックをなくすこと、ホームの Spacewar パネルの初期負荷を下げること、記録が増えたときの一覧を読みやすくすることが主な目的だった。
サイトにはすでに軽量な Astro ビルド、多言語コンテンツ、Open Graph メタ情報、RSS、sitemap、ブラウザ QA がある。弱かったのは主に振る舞いの部分だった。Notes のカードはクリックできる見た目なのに詳細ページがなく、ゲームはホーム表示と同時に初期化され、プロジェクト一覧は種類の違う項目を同じ密度で並べていた。
Notes を実ページにした
Notes は Blog と同じように詳細ページを持つようになった。各 note カードは /notes/<slug>/ に移動し、簡体字中国語と日本語にも同じ slug のページがある。記事レイアウトは Blog と Notes の両方を扱えるようにし、canonical と多言語 alternate リンクは同じ場所で処理する。
小さな構造変更だが、意味ははっきりしている。Notes は短い記録だが、日付、説明、タグ、言語情報、翻訳キーを持っている。実ページとして扱うことで、キーボード操作、検索エンジン、長い記事からの参照が自然になる。
Spacewar は静かに始まる
ホームのゲームは見た目の存在感を残しながら、ページ読み込み時には完全な実行状態に入らないようにした。最初は静的な canvas プレビューだけを描き、開始ボタンを表示する。ボタンを押した後に、ゲームの状態、アニメーションループ、操作入力が有効になる。
アニメーションループは、ページの表示状態、ビューポートとの交差、reduced-motion の設定を見る。タブが背面に回ったとき、パネルが画面外に出たとき、動きを減らす設定が有効なときは、描画ループを止める。通常フレームでの状態公開も減らし、毎フレームでゲーム状態を丸ごと書き出さないようにした。
プロジェクトカードに文脈を足した
Projects のカードには、分類、状態、短い技術スタックを追加した。分類は plugin、local tool、website、data/benchmark、game utility、writing などを扱う。状態は active、experimental、archived の三つに絞った。
これにより、Projects ページは単なる一覧ではなく索引に近づいた。公開プロジェクトと非公開プロジェクトを同じページに置けるまま、非公開のものにはリンクを出さずに済む。長い説明に入る前に、そのカードがどの種類の記録なのかを把握できる。
検証も内容に合わせた
発行前チェックも更新した。Notes の詳細ページが生成されること、Notes に href="#" が残っていないこと、Header が現在のセクションを示すこと、skip link があること、Spacewar が静的 HTML の時点では初期化されていないこと、プロジェクトカードに分類と状態があることを確認する。
固定の manifest 件数もやめ、三つの言語で件数が一致しているかを見るようにした。これで次のブログ記事を追加したときに、固定数字の更新漏れでビルドが止まりにくくなる。
sitemap は一般的な sitemap.xml に変更し、robots.txt もその名前を指すようにした。ブラウザ確認では 16:9 のデスクトップ、iPhone 17 Pro 相当の縦画面、一般的な Android 縦画面を確認した。
軽さは残す
カバー画像は引き続き軽量な SVG にしている。今回のカバーは構造図に近く、複数サイズのラスター画像を生成しても得られる効果は小さい。画像タグには sizes を足し、記事ページの先頭画像には fetchpriority="high" を残した。
検索はまだ控えめに扱う。サイトは内容索引を出力しているが、前面に見える検索 UI を作る前に、ページ構造、Notes の実 URL、Projects の索引性を整えるほうが先だった。