技術詳細

概要

このサイトは、Google Sheetsを入力用のマスター、Rをデータ検証・変換、Quartoを静的サイト生成、LeafletをWeb地図表示、GitHub ActionsとGitHub Pagesを公開基盤として使います。

サーバー常駐型のShinyアプリではなく、HTML、CSS、JavaScript、CSV、GeoJSONだけで動く静的サイトです。公開後の閲覧にはGitHub Pages以外のサーバーを必要としません。

データフロー

flowchart LR
  A["Garmin GPSMAP"] --> B["Google Sheets: trees"]
  C["Google Sheets: species"] --> D["GitHub Actions"]
  B --> D
  D --> E["R validation"]
  E --> F["CSV / GeoJSON"]
  F --> G["Quarto render"]
  G --> H["GitHub Pages"]

trees シートは1行1個体の樹木データ、species シートは樹種ごとの補助情報です。GitHub ActionsがSheets由来のCSVを読み込み、公開対象行だけをCSVとGeoJSONへ変換します。

現地調査から入力まで

データ追加は、現地でGPS座標と樹種情報を記録し、Google Sheetsの trees シートに1行追加する流れです。GitHub上のCSVやGeoJSONは生成物なので、手で編集しません。

初回だけ、入力用のGoogle SheetsとGitHub Actionsを接続します。Google Sheetsを新規作成し、trees と species という2つのシートを作ります。trees の列は tree_id, lat, lon, species_jp, scientific_name, survey_date, observer, accuracy_m, publish, note_public です。species の列は species_jp, scientific_name, family_jp, marker_color, description です。

各シートはGoogle Sheetsの ファイル > 共有 > ウェブに公開 から、シート単位で カンマ区切り値（.csv） として公開します。trees と species それぞれのCSV URLをコピーし、GitHubリポジトリの Settings > Secrets and variables > Actions で TREES_CSV_URL と SPECIES_CSV_URL というRepository secretとして登録します。

登録後は Actions > Publish tree map > Run workflow を実行します。workflowは登録されたCSV URLからSheetsの内容を読み込み、Rで検証してから公開用CSV/GeoJSONとQuartoサイトを再生成し、GitHub Pagesへ反映します。

調査前には、Garmin GPSMAPの測地系をWGS84にし、座標を10進度で記録できる状態にします。あわせて、その日の記録者名、個体IDの採番ルール、未確定データを publish = FALSE にする運用を確認します。

現地では1本の木ごとに、個体ID、緯度、経度、樹種名、調査日、記録者、GPS精度、公開メモを記録します。樹種が未確定の場合や座標に不安がある場合は、Google Sheetsには入力しても publish を FALSE にしておき、確認後に TRUE へ変更します。

trees シートへの入力例は以下です。

tree_id	lat	lon	species_jp	scientific_name	survey_date	observer	accuracy_m	publish	note_public
T-0125	35.71020	139.76120	イチョウ	Ginkgo biloba	2026-06-11	field-team	3	TRUE	正門付近

Sheets更新後は、GitHub Actionsの Publish tree map を手動実行するか、定期実行を待ちます。成功すると、公開サイト、CSV、GeoJSONが同じタイミングで更新されます。

検証ルール

Rスクリプトは公開前に以下を確認します。

必須列がそろっていること。
publish == TRUE の行に tree_id, species_jp, lat, lon があること。
公開行の tree_id が重複していないこと。
緯度・経度がWGS84の有効範囲内にあること。
survey_date が YYYY-MM-DD であること。
marker_color が #RRGGBB 形式であること。
キャンパス境界を設定した場合、公開座標がその範囲内にあること。

公開サイト

地図画面は data/public/trees.geojson を読み込み、Leafletで点を描画します。点にマウスを重ねると樹種、学名、調査日、精度、公開メモを表示します。スマートフォンなどホバーがない環境では、点または一覧のIDをタップして情報を確認します。

一覧、検索、樹種フィルター、CSV/GeoJSONダウンロードはすべてブラウザ上のJavaScriptで動きます。

GitHub Actions

.github/workflows/publish.yml は以下の順で実行します。

QuartoとRをセットアップする。
tests/test-validation.R で検証ロジックをテストする。
scripts/build_data.R で公開CSV/GeoJSONを生成する。
scripts/check_generated_outputs.R で生成物を確認する。
quarto render で _site を生成する。
GitHub Pagesへデプロイする。

workflowは main へのpush、手動実行、定期実行で動きます。

主なファイル

ファイル	役割
`index.qmd`	公開地図ページ
`tech-stack.qmd`	技術詳細ページ
`assets/map.js`	Leaflet地図、検索、フィルター、一覧表示
`assets/styles.css`	サイトと地図UIのスタイル
`scripts/build_data.R`	Sheets/CSVから公開CSVとGeoJSONを生成
`scripts/tree_data_lib.R`	データ読み込み、検証、GeoJSON出力の共通関数
`tests/test-validation.R`	代表的な検証ケースのテスト
`.github/workflows/publish.yml`	GitHub Pagesへの自動公開

運用上の考え方

Google Sheetsを唯一の入力場所にし、GitHub上の data/public/trees.csv と data/public/trees.geojson は再生成可能な公開成果物として扱います。この分け方により、現地調査後の入力は簡単に保ちつつ、公開前の検証と履歴管理はGitHub側で維持できます。