うさぎSOSマップ — Leaflet.jsで作ったボランティア情報共有システム

概要

大久野島（通称うさぎ島）でボランティア活動を続けている友人から依頼を受けて制作した、インタラクティブ地図アプリケーションです。

このアプリの一番の特徴は、地図の上でユーザー同士が直接情報を共有できることです。たとえば、あるボランティアが「ここのうさぎに水をあげた」と地図上のポイントをタップして報告すると、その情報がリアルタイムで反映され、次に島を訪れた別のボランティアが「じゃあこっちのまだ対応されていないポイントに行こう」と判断できます。通常の地図アプリは「場所を見る」ためのものですが、このアプリは地図そのものがユーザー同士のコミュニケーションの場になっている点が大きく異なります。

友人が従来Google マイマップで管理していた112件のマーカーデータを移行し、Leaflet.js + OpenStreetMapで完全無料・APIキー不要のオープンな情報共有プラットフォームとして再構築しました。日本語・英語・中国語・韓国語の4言語に対応し、海外からの観光客も利用できます。

なぜ作ったのか

大久野島でボランティア活動を長年続けている友人から相談を受けたのがきっかけです。島のうさぎたちは深刻な水不足と食料不足に直面しており、ボランティアによる水やり・餌やりが不可欠なのですが、どの場所で水が足りていないのか、どこに怪我をしたうさぎがいるのかといった情報は、Google マイマップに手動でマーカーを置いて管理していたそうです。

話を聞くと、Google マイマップにはいくつかの課題がありました。データの追加・更新にはGoogleアカウントと権限が必要で、現場のボランティアが素早く報告するには不便です。また、水やりの「対応済み」報告や、時間経過による「未対応」の可視化といった動的な機能は実現できません。

「スマホからワンタップで報告できて、まだ対応されていないポイントが自動で浮き上がるような仕組みが欲しい」という要望だったので、ボランティアサイトという性質上ランニングコストゼロで運用できることを前提に、技術選定から設計・実装まで一括で請け負いました。

技術的な仕組み

地図エンジンにはLeaflet.js（v1.9.4）を採用しています。Google Maps APIは月$200の無料枠を超えると従量課金が発生しますが、Leaflet.js + OpenStreetMapの組み合わせは完全無料で、ボランティア活動サイトにとって運営コストゼロは決定的な利点です。

バックエンドはWordPressのカスタム投稿タイプ「report」で構築しています。各マーカーの緯度・経度、種別（水やり・餌やり・怪我・注意など7種別）、水やり/餌やりの履歴などをpost_metaとして管理します。マーカーデータはPHP側でJSON配列として構築し、ページHTMLにインライン出力することで、追加のAPIコールなしで初回表示が完了する高速な設計にしています。

マーカーの操作（追加・編集・削除・ワンタップ報告）はWordPressのadmin-ajax.phpを介した5つのAJAXエンドポイントで処理します。Fetch API + FormDataによるリクエスト送信で、画像アップロードにも対応しています。

位置情報はブラウザ標準のGeolocation APIを3つのモードで活用しています。ワンショットの現在地取得、位置取得→投稿フォーム連携の「ここで報告」、そして島を歩き回りながらリアルタイムで現在地を追従する「追従モード」です。取得座標が大久野島のバウンディングボックス外にある場合は警告を表示する島外検知機能も実装しています。

工夫したポイント

水やり/餌やりワンタップ報告: ボランティア支援の中核機能です。マーカーをタップするとポップアップが開き、「水やり報告」ボタンをワンタップするだけで報告が完了します。同じユーザーが6時間以内に再度タップすると取り消しになる仕組みで、誤報告も簡単に修正できます。1日の編集上限（20回）にはカウントされないため、無制限に報告可能です。

未対応ポイントの自動可視化: 24時間以上水やり・餌やり報告がないマーカーだけを抽出するフィルタ機能を実装しました。島に到着したボランティアが「今どこに行けばいいか」を即座に判断できます。

マーカークラスタリング: 大久野島は周囲4.3kmの小さな島に112以上のマーカーが密集します。Leaflet.markerclusterプラグインで近接マーカーを自動グループ化し、ズームインすると段階的に分解される快適な操作感を実現しています。

フルスクリーンマップ: WordPressテーマを完全にバイパスし、ブラウザのビューポート100%を地図が占有するフルスクリーンモードを実装。template_redirectフックで独自HTMLを直接出力することで、テーマのCSS/JS干渉を排除し、スマートフォンの地図アプリと同等の操作感を実現しています。

4言語対応の独自翻訳システム: 大久野島は海外観光客も多いため、日本語・英語・中国語・韓国語に対応しました。PHPサーバサイド翻訳、JavaScriptクライアント翻訳、Google Translate連携の3層構造で、外部翻訳ファイル（.mo/.po）を使わない軽量な独自実装です。

多層セキュリティ: ユーザー参加型アプリのため、WordPress Nonce検証、座標バウンディングボックスによる島外スパム防止、1日20回の編集上限、最短操作間隔（3〜10秒）、XSS対策、MIMEタイプ検証＋5MB制限、ゴミ箱経由の削除（30日復元可能）など11層の防御を設計しています。

Google マイマップからのデータ移行: 旧マイマップから112件のKMLデータをエクスポートし、PHPスクリプトでXMLパース→名称パターンから種別を自動判定→WordPressのカスタム投稿として一括登録。WP-CLIで実行する移行ツールとして実装しました。

リンク

usagi-jima.org — 大久野島 うさぎSOSマップ