本日は、Astroを使用した大規模デジタル辞書の基盤作りを大きく進めました。特に「1万語」という膨大なデータを扱うための拡張性と、ユーザーが回遊しやすいリンク構造の構築に重点を置きました。
- 内部リンク（関連用語）の自動生成
辞書の利便性を高めるため、Markdownのデータ（ID）を指定するだけで、自動的に「用語名」をリンク付きで表示する仕組みを実装しました。
技術的な工夫: getEntry を活用し、スラッグからタイトルを動的に取得。リンク切れを防ぐフィルタリング処理も組み込みました。
効果: 編集者がファイル名を書くだけで、サイト全体に網の目のように内部リンクが張り巡らされます。
- 「簡易ページ」と「詳細解説（Wiki）」の二段構え
ユーザーが「サッと意味を知りたい」時と「深く知りたい」時の両方に対応できるよう、ページ構成を二階層にしました。
簡易ページ: 要約、読み、NDC分類、語源などの基本情報を掲載。
詳細解説ページ: 長文の解説、図解、詳細な表などを掲載する「Wiki」的な役割。
連携機能: 辞書ページからワンクリックで詳細記事へ飛べる誘導ボタンを設置しました。
- 外部リンクの「ブログカード」形式対応
外部サイトへの参照を単なる青文字リンクではなく、画像や説明文が付いたリッチな「ブログカード」として表示できるようコンポーネントを独自作成しました。
柔軟性: 辞書側とWiki側の両方のテンプレートに組み込み、どちらのページからでもリッチな外部リンクを出せるようにしました。
- デザインの統一とナビゲーションの改善
大規模サイトで迷子にならないよう、以下の機能を全ページに共通で実装しました。
パンくずリスト: カテゴリ階層を辿れるように配置。
サイドバー: 同じカテゴリの用語を自動でリストアップ。
検索機能: Pagefindによる高速な全文検索窓を設置。
- テスト公開に向けたビルド確認
まずは「リンゴ」のデータを使用して、本番環境へのデプロイ準備を整えました。
npm run build による静的ファイルの生成を確認。
サーバーの public_html 直下に dist フォルダの中身を配置する公開フローを整理。
明日への課題
本日はシステムの「器」が完成しました。明日は、いよいよ手元にあるCSVデータをこのMarkdown形式へと一括変換する、Node.jsスクリプトの作成に着手します。
1万語の言葉たちが、このシステムの上で動き出すのが非常に楽しみです。
コメント