--- title: 小江戸らぐ: OpenStreetMap Japan Websiteの再構築 tags: #koedolug #openstreetmap author: [Taro Matsuzawa aka. btm](https://docswell.com/user/smellman) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/8EDKK5VM7G.jpg?width=480 description: 小江戸らぐ: OpenStreetMap Japan Websiteの再構築 by Taro Matsuzawa aka. btm published: May 09, 26 canonical: https://docswell.com/s/smellman/5DMG7W-2026-05-09-koedolug-openstreetmap-jp --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/8EDKK5VM7G.jpg) OpenStreetMap Japan Website の再構築 Drupal から Astro へ Taro Matsuzawa (@smellman) OSGeo.JP/OSMFJ/jus/Geolonia Inc. 2026/05/09 # Page. 2 ![Page Image](https://bcdn.docswell.com/page/V7PKKGVQJ8.jpg) 自己紹介 ● 松澤 太郎 (Taro Matsuzawa / @smellman) ● OpenStreetMap Foundation Japan (OSMFJ) 理事 ● OSGeo 財団 日本支部(OSGeo.JP) 理事 ● 日本 UNIX ユーザ会 副会長 ● 株式会社 Geolonia GIS エンジニア 小江戸らぐ 2026 年 5 月 2 / 25 # Page. 3 ![Page Image](https://bcdn.docswell.com/page/2JVVV6ZPJQ.jpg) 背景 # Page. 4 ![Page Image](https://bcdn.docswell.com/page/5EGLLN4QJL.jpg) 旧サイト openstreetmap.jp の課題 ● 長年 Drupal 7 で運用されてきた OSM Japan の公式サイト ● PHP/MySQL ベースで運用負担が大きい ● セキュリティアップデート対応が継続的に必要(もう無理) ● イベントやガイドの追加に Drupal 管理画面の操作が必要 ● 投稿のハードルが高く、コミュニティが手を入れづらい 小江戸らぐ 2026 年 5 月 4 / 25 # Page. 5 ![Page Image](https://bcdn.docswell.com/page/4JQYYQGW7P.jpg) 移行の目的 ● 運用コストの削減（サーバ・DB 不要の静的サイトへ） ● GitHub で誰でも Pull Request で記事追加できる体制 ● モダンなフロントエンド技術スタックへの刷新 ● URL 構造（/node/<id>/）は互換性を保つ ● コンテンツ（イベント・ガイド）は全て移行 小江戸らぐ 2026 年 5 月 5 / 25 # Page. 6 ![Page Image](https://bcdn.docswell.com/page/K74WWN51E1.jpg) 新サイトの構成 # Page. 7 ![Page Image](https://bcdn.docswell.com/page/LJ1YY5W5EG.jpg) 採用した技術スタック ● Astro v6 — 静的サイトジェネレータ ● React 19 — イベント地図など一部の動的 UI ● Tailwind CSS v4 + daisyUI v5 — スタイリング ● MapLibre GL JS — イベント地図のレンダリング ● TypeScript — 型安全な実装 ● GitHub Pages — main への push で自動デプロイ 小江戸らぐ 2026 年 5 月 7 / 25 # Page. 8 ![Page Image](https://bcdn.docswell.com/page/GJWGG56W72.jpg) なぜ Astro を選んだか ● コンテンツ主体のサイトと相性がよい ● Markdown + フロントマターでイベント・ページを記述 ● Content Collections のスキーマで投稿時のミスを検出 ● 必要な箇所だけ React で islands 化（地図など） ● 出力は完全な静的 HTML → GitHub Pages にそのまま乗る 小江戸らぐ 2026 年 5 月 8 / 25 # Page. 9 ![Page Image](https://bcdn.docswell.com/page/4EZLLNY273.jpg) リポジトリ構成 ● 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 # Page. 10 ![Page Image](https://bcdn.docswell.com/page/Y76WW8R67V.jpg) 新サイトの画面 # Page. 11 ![Page Image](https://bcdn.docswell.com/page/G75MM98574.jpg) トップページ 小江戸らぐ 2026 年 5 月 11 / 25 # Page. 12 ![Page Image](https://bcdn.docswell.com/page/9J2992KGER.jpg) イベント・ページ一覧 小江戸らぐ 2026 年 5 月 12 / 25 # Page. 13 ![Page Image](https://bcdn.docswell.com/page/DEY44YNGJM.jpg) イベント地図 (MapLibre) 小江戸らぐ 2026 年 5 月 13 / 25 # Page. 14 ![Page Image](https://bcdn.docswell.com/page/VJNYYPX878.jpg) ガイドページ (例: OSM 利用入門) 小江戸らぐ 2026 年 5 月 14 / 25 # Page. 15 ![Page Image](https://bcdn.docswell.com/page/YE9PP38XJ3.jpg) 移行で工夫したこと # Page. 16 ![Page Image](https://bcdn.docswell.com/page/GE8DDM89ED.jpg) URL の互換性を保つ ● 旧サイトは Drupal の /node/<id>/ 形式 ● フロントマターに legacy_node_id を持たせる ● イベントは /events/<id>/ に正規化しつつ ● /node/<id>/ から リダイレクト で誘導 ● 既存の被リンク・ブックマークを切らない 小江戸らぐ 2026 年 5 月 16 / 25 # Page. 17 ![Page Image](https://bcdn.docswell.com/page/LELMM3RM7R.jpg) Drupal 由来の Markdown 挙動を再現 ● 段落内の単一改行 → <br> (remark-breaks) ● 行頭半角スペースのインデントを保持する独自プラグイン ● https://... の自動リンク (GFM autolink) ● 素の HTML（<ul>/<a>/<br>）もそのまま使える ● 既存記事を 無変換 に近い形で取り込める 小江戸らぐ 2026 年 5 月 17 / 25 # Page. 18 ![Page Image](https://bcdn.docswell.com/page/4JMYYDR6JW.jpg) 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 # Page. 19 ![Page Image](https://bcdn.docswell.com/page/PJR994RN79.jpg) 画像と本文の書き換え ● 添付ファイル（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 # Page. 20 ![Page Image](https://bcdn.docswell.com/page/PEXQQ2R8JX.jpg) コンテンツ移行の結果 ● 旧サイトの全イベント・全ガイドページを Markdown 化 ● 画像は public/images/legacy/ に退避 ● 新規追加分は public/images/current/ に分離 ● Content Collections のスキーマで型バリデーション ● start が必須、source_url は URL 形式チェックなど 小江戸らぐ 2026 年 5 月 20 / 25 # Page. 21 ![Page Image](https://bcdn.docswell.com/page/3EK99MRLED.jpg) 投稿フローの変化 ● 旧: Drupal にログイン → 管理画面で投稿 ● 新: GitHub 上で Markdown を Pull Request ● 誰でもレビュー可能、履歴は Git で残る ● main への merge で GitHub Actions が自動ビルド・公開 ● イベント主催者・コミュニティの負担を分散できる 小江戸らぐ 2026 年 5 月 21 / 25 # Page. 22 ![Page Image](https://bcdn.docswell.com/page/L73WWY8675.jpg) 細かい改善 # Page. 23 ![Page Image](https://bcdn.docswell.com/page/87DKK5MMJG.jpg) SEO・SNS 対応 ● 全ページに Open Graph / Twitter Card メタタグ ● RSS フィード を追加（@astrojs/rss） ● ヘッダーに X / Facebook / RSS のソーシャルボタン ● OSM ロゴを favicon 化（地図ピン + 日章のドット） ● GitHub リポジトリへのリンクをグローバルナビに追加 小江戸らぐ 2026 年 5 月 23 / 25 # Page. 24 ![Page Image](https://bcdn.docswell.com/page/VJPKKGRQE8.jpg) 開発体験 ● npm run dev で即プレビュー（Vite による HMR） ● PR ごとにローカルで同じ手順で動作確認 ● 型エラー・スキーマ違反はビルド時に検出 ● daisyUI でデザインの統一感を担保 ● サーバ・DB の管理から解放 小江戸らぐ 2026 年 5 月 24 / 25 # Page. 25 ![Page Image](https://bcdn.docswell.com/page/2EVVV6RPEQ.jpg) まとめ ● OSM Japan のサイトを Drupal から Astro に再構築 ● Markdown + GitHub PR でコミュニティが投稿しやすく ● GitHub Pages で運用コストほぼゼロ ● URL 互換と Drupal 風 Markdown 挙動で 過去資産を保護 ● イベント追加・ガイド更新の Pull Request 歓迎です 小江戸らぐ 2026 年 5 月 25 / 25