本日より bestes-wetter.de が本番公開されました。CARECOM ファミリーで2つ目のウェブサイトであり、ここ carecom.de のコンサルティングと写真の世界とはあえて対照的な存在です。テーマは「外」です。ガルミッシュからシュテルツィングへのアルプス越えのようなロングトレイル、徒歩で巡る街、そしてカタログではなく山から生まれた装備について。その志はキャッチコピーにすでに表れています ― 正直にテストし、丁寧に記録する。
ここはソフトウェアアーキテクト兼開発者のサイトですので、何ができたかだけでなく、どう作ったかにも少し光を当てたいと思います。ボンネットの下は .NET 10 上の Blazor Web App ― サーバー側でレンダリングし、必要なところにだけインタラクティブな島を置いています ― とはいえご安心を、ホワイトペーパーにはなりません。
複数のウェブサイトのための一つの基盤
bestes-wetter.de は carecom.de と同じ基盤の上に立っています ― carecom.de を構築する際に切り出した共通の Razor Class Library です。Cookie バナー、多言語対応、サイトマップと hreflang を備えた SEO ツールキット、MailKit によるメール送信 ― これらはすべて一箇所にあり、サイトごとに装いを変えるだけです。今ではこの基盤が複数の姉妹サイトを支えており、新しいサイトは前のものより早く仕上がり、基盤への一つの改善がすべてに同時に恩恵をもたらします。基盤と外観をきれいに分けておく価値は、まさにここにあります。
データとして考えるコンテンツ
ツアーレポートは流し読みのテキスト以上のものです。区間、標高差、ルート、日付つきの写真、そして所々に装備のアドバイスがあります。そのため各記事は、純粋な Markdown テキストの隣に置かれた軽量な XML メタデータファイルとして存在します。そのテキストは Markdig でレンダリングされ、独自のコンテナブロックで拡張されています：距離・標高プロファイル・地図を含む区間のための :::leg、装備の推薦のための :::product-card、正直な比較検討のための :::pros-cons。執筆は純粋なテキストに近いままで、それでいて結果は構造化され機械可読です。さらに記事のテキストは実行時にもう変わらないため、各本文はちょうど一度だけ解析され、完成した HTML はその後キャッシュから提供されます。
テンポを保つ地図と画像
ツアーは地図で見たいものです。それを担うのが Leaflet ですが、メインバンドルには入れず、ページが実際に地図を含むときに初めてオンデマンドで読み込みます。ライブラリは自社サーバーでセルフホストしており、初期化は最初のページ読み込みだけでなく Blazor の Enhanced Navigation にもフックします ― そのためアプリ内のクリック後でも地図が確実に表示されます。ページ遷移の際には孤立した地図インスタンスが片付けられます。そうしないと Leaflet が resize リスナーやアニメーションループを残し、後で邪魔になるのです。
一方、写真は WebP で複数の解像度として存在し、srcset 経由で配信されるため、スマートフォンがデスクトップ版をダウンロードすることはありません。鮮明な画像が届くまでは、ごく小さなぼかしたプレビューがその場所を保ちます ― 画像は急に飛び出すのではなく、柔らかくフェードインします。こうした小さな積み重ねが、「読み込み中」と「ただそこにある」の違いを生むのです。
最初から二つの言語で
サイトはドイツ語と英語を話します。それも後から貼り付けた付け足しではありません。UI テキストは XML として存在し、Roslyn ソースジェネレーターがコンパイル時に型安全な C# コードへと鋳込みます ― こうして各テキストキーはプロパティになり、打ち間違いは訪問者のところではなくビルド時に明らかになります。外向きには、適切な hreflang シグナルが Google にドイツ語版と英語版を対等な兄弟として認識させ、重複コンテンツと取り違えないようにします。
レンダラーがリンクする推薦
一部の装備推薦にはパートナーリンクが付いています ― 明示的に開示しています。Markdown には amazon:<商品ID> のようなソース非依存のプレースホルダーがあるだけで、レンダリング時に初めて ArticleRenderer がそれを完成したパートナーリンクに変え、rel="sponsored" と新しいタブでの遷移先も付けます。その利点は自前ならでは：テキストを書く人はトラッキングパラメーターを気にする必要がなく、パートナーの切り替えはすべての記事を横断する検索・置換ではなく設定の問題で済みます。
ぜひ覗いてみてください
もちろん、これらすべては実物で体験するのが一番です。山、街、そしてよく記録された装備に心惹かれる方は、bestes-wetter.de へどうぞお気軽に。そして、こうしたサイトをご自身のプロジェクトのためにどう実現できるかを知りたい方へ ― それこそが CARECOM Consulting の出番です。