小江戸らぐ: OpenStreetMap Japan Websiteの再構築

OpenStreetMap Japan Website の再構築 Drupal から Astro へ Taro Matsuzawa (@smellman) OSGeo.JP/OSMFJ/jus/Geolonia Inc. 2026/05/09

自己紹介 ● 松澤 太郎 (Taro Matsuzawa / @smellman) ● OpenStreetMap Foundation Japan (OSMFJ) 理事 ● OSGeo 財団 日本支部(OSGeo.JP) 理事 ● 日本 UNIX ユーザ会 副会長 ● 株式会社 Geolonia GIS エンジニア 小江戸らぐ 2026 年 5 月 2 / 25

背景

旧サイト openstreetmap.jp の課題 ● 長年 Drupal 7 で運用されてきた OSM Japan の公式サイト ● PHP/MySQL ベースで運用負担が大きい ● セキュリティアップデート対応が継続的に必要(もう無理) ● イベントやガイドの追加に Drupal 管理画面の操作が必要 ● 投稿のハードルが高く、コミュニティが手を入れづらい 小江戸らぐ 2026 年 5 月 4 / 25

移行の目的 ● 運用コストの削減（サーバ・DB 不要の静的サイトへ） ● GitHub で誰でも Pull Request で記事追加できる体制 ● モダンなフロントエンド技術スタックへの刷新 ● URL 構造（/node/<id>/）は互換性を保つ ● コンテンツ（イベント・ガイド）は全て移行 小江戸らぐ 2026 年 5 月 5 / 25

新サイトの構成

採用した技術スタック ● Astro v6 — 静的サイトジェネレータ ● React 19 — イベント地図など一部の動的 UI ● Tailwind CSS v4 + daisyUI v5 — スタイリング ● MapLibre GL JS — イベント地図のレンダリング ● TypeScript — 型安全な実装 ● GitHub Pages — main への push で自動デプロイ 小江戸らぐ 2026 年 5 月 7 / 25

なぜ Astro を選んだか ● コンテンツ主体のサイトと相性がよい ● Markdown + フロントマターでイベント・ページを記述 ● Content Collections のスキーマで投稿時のミスを検出 ● 必要な箇所だけ React で islands 化（地図など） ● 出力は完全な静的 HTML → GitHub Pages にそのまま乗る 小江戸らぐ 2026 年 5 月 8 / 25

リポジトリ構成 ● GitHub: https://github.com/openstreetmap-japan/openstreetmap-japan. github.io ● 公開 URL: https://openstreetmap-japan.github.io/ ● src/content/events/<id>.md — イベント ● src/content/pages/<slug>.md — 固定ページ・ガイド ● src/components/EventMap.tsx — MapLibre 地図 ● src/lib/remark-preserve-indent.mjs — 独自 Remark プラグイン 小江戸らぐ 2026 年 5 月 9 / 25

• https://github.com/openstreetmap-japan/openstreetmap-japan.github.io
• https://openstreetmap-japan.github.io/

新サイトの画面

トップページ 小江戸らぐ 2026 年 5 月 11 / 25

イベント・ページ一覧 小江戸らぐ 2026 年 5 月 12 / 25

イベント地図 (MapLibre) 小江戸らぐ 2026 年 5 月 13 / 25

ガイドページ (例: OSM 利用入門) 小江戸らぐ 2026 年 5 月 14 / 25

移行で工夫したこと

URL の互換性を保つ ● 旧サイトは Drupal の /node/<id>/ 形式 ● フロントマターに legacy_node_id を持たせる ● イベントは /events/<id>/ に正規化しつつ ● /node/<id>/ から リダイレクト で誘導 ● 既存の被リンク・ブックマークを切らない 小江戸らぐ 2026 年 5 月 16 / 25

Drupal 由来の Markdown 挙動を再現 ● 段落内の単一改行 → <br> (remark-breaks) ● 行頭半角スペースのインデントを保持する独自プラグイン ● https://... の自動リンク (GFM autolink) ● 素の HTML（<ul>/<a>/<br>）もそのまま使える ● 既存記事を 無変換 に近い形で取り込める 小江戸らぐ 2026 年 5 月 17 / 25

• https://...

Drupal → Markdown 移行スクリプト ● 自作の Python スクリプトで 一括変換（未公開） ● 入力は MySQL ダンプの .sql テキストそのもの ● MySQL を立てずに CREATE TABLE / INSERT INTO を直接パース ● node / field_data_body / field_data_field_meeting_date / url_alias / file_managed / taxonomy_* などを抽 出 ● イベント判定は field_meeting_date の有無、ページは url_alias 経由 ● 出力: events/<nid>.md / pages/<slug>.md + リダイレクト CSV 小江戸らぐ 2026 年 5 月 18 / 25

画像と本文の書き換え ● 添付ファイル（field_data_upload + file_managed）から hero_image を選定 ● field_data_field_top_photo を最優先でキャッチ画像に ● 本文 HTML の <img src="...openstreetmap.jp..."> を正規表現で抽出 ● requests で実画像をダウンロードし public/images/legacy/ へ ● URL のクエリ違いはハッシュ付与で衝突回避 ● body は Markdown 化せず HTML のまま 保持して忠実性を優先 小江戸らぐ 2026 年 5 月 19 / 25

コンテンツ移行の結果 ● 旧サイトの全イベント・全ガイドページを Markdown 化 ● 画像は public/images/legacy/ に退避 ● 新規追加分は public/images/current/ に分離 ● Content Collections のスキーマで型バリデーション ● start が必須、source_url は URL 形式チェックなど 小江戸らぐ 2026 年 5 月 20 / 25

投稿フローの変化 ● 旧: Drupal にログイン → 管理画面で投稿 ● 新: GitHub 上で Markdown を Pull Request ● 誰でもレビュー可能、履歴は Git で残る ● main への merge で GitHub Actions が自動ビルド・公開 ● イベント主催者・コミュニティの負担を分散できる 小江戸らぐ 2026 年 5 月 21 / 25

細かい改善

SEO・SNS 対応 ● 全ページに Open Graph / Twitter Card メタタグ ● RSS フィード を追加（@astrojs/rss） ● ヘッダーに X / Facebook / RSS のソーシャルボタン ● OSM ロゴを favicon 化（地図ピン + 日章のドット） ● GitHub リポジトリへのリンクをグローバルナビに追加 小江戸らぐ 2026 年 5 月 23 / 25

開発体験 ● npm run dev で即プレビュー（Vite による HMR） ● PR ごとにローカルで同じ手順で動作確認 ● 型エラー・スキーマ違反はビルド時に検出 ● daisyUI でデザインの統一感を担保 ● サーバ・DB の管理から解放 小江戸らぐ 2026 年 5 月 24 / 25

まとめ ● OSM Japan のサイトを Drupal から Astro に再構築 ● Markdown + GitHub PR でコミュニティが投稿しやすく ● GitHub Pages で運用コストほぼゼロ ● URL 互換と Drupal 風 Markdown 挙動で 過去資産を保護 ● イベント追加・ガイド更新の Pull Request 歓迎です 小江戸らぐ 2026 年 5 月 25 / 25