概要

地図上にメモ、写真、動画、PDF、図形を置いて管理できる Windows 向けアプリケーション GeoCode-Web を OSS として公開しました。

このアプリケーションは、内容をドキュメンタリーに寄せた Zenn では書ききれなかった「アプリケーションとして何ができるのか」「どのような構成で動いているのか」を、Qiita 向けに技術寄りで整理したのでご紹介します。

リポジトリはこちらです。

プロジェクトサイトとデモ版も用意しています。

プロジェクトサイト: https://geocode-web-site.pages.dev
PC用ブラウザデモ版: https://demo-geocode-web.pages.dev
スマホ用ブラウザデモ版: https://demo-geocode-web-mobile.pages.dev
ユーザーガイド: https://geocode-web-single.pages.dev/user-guide.html

作ったもの

GeoCode-Web は、地図上にマーカーや図形を配置し、場所に紐付いた情報を管理するためのマッピングアプリケーションです。

マーカーにはマークダウン形式の詳細本文を書けるため、単なるピン管理ではなく、場所ごとの簡易 Wiki のようにも使えます。画像、PDF、MP4 もアップロードして、マーカー詳細に埋め込めます。

主な用途としては、次のような「場所と情報を一緒に扱いたい」ケースを想定しています。

旅行や訪問先の記録
現地調査メモ
写真・PDF・動画つきの地点管理
小中規模チーム内での地図情報共有
オフラインまたはローカルネットワーク内で完結させたい地図メモ環境

なぜ基本ローカル動作にしたか

個人的に重視したのは、位置情報や写真などをできるだけ手元で管理できることです。詳しくはこちらをご覧ください👇

GeoCode-Web は通常、Tauri デスクトップアプリとして起動し、内部でローカル HTTP サーバを立ち上げて UI を表示します。データベースには SQLite を使い、設定ファイルやアップロードファイルもユーザーのローカル領域に保存します。

保存先は次のような構成です。

~/.geocode-web-single/
  ├─ geocode-web-single.env.json
  ├─ geocode-web.sqlite
  └─ images/

ただし、初期状態では国土地理院の通常地図・航空写真タイルを利用するため、インターネット環境が必要です。同一端末内にタイルサーバを用意すれば、完全オフライン運用も可能です。

技術スタック

構成は次のとおりです。

領域	技術
バックエンド	Rust 2024 / Axum / SQLx / SQLite
フロントエンド	Vue 3 / Vue Router / Pinia / Vite
デスクトップ	Tauri 2
テンプレート	Tera
認証	JWT / TOTP
マークダウンレンダラ	marked
静的ファイル埋め込み	rust-embed
配布	GitHub Actions / NSIS / MSI Installer

Rust/Axum 製 API サーバと Vue 3 製フロントエンドを Tauri 2 でラップし、Windows 向けアプリケーションとして配布しています。

主な機能

地図・マーカー管理

地図上にマーカーを追加し、位置や内容を編集できます。

マーカーの追加・移動・編集・削除
Markdown による詳細本文の記述
指定マーカーへのフォーカス・ズームイン
マーカー検索
国土地理院の通常地図・航空写真を初期タイルとして利用

レイヤ管理

情報はレイヤ単位で整理できます。

ユーザーごとの master レイヤ自動作成
任意レイヤの追加・名称変更・削除
マスターレイヤでの全件横断検索
個別レイヤ内検索
レイヤ単位または全件の JSON エクスポート / インポート

JSON エクスポートは、マーカーと図形を含む形式に対応で出力します。この機能で他の端末でも地図上のデータを復元することができます。

図形描画

レイヤに紐付けて、地図上に図形を描けます。

ポリゴン
ポリライン
矩形
円

図形には名前を付けられます。図形名は地図上のラベルとして表示され、後から名前や所属レイヤを変更できます。削除直後の取り消しにも対応しています。

画像・PDF・動画管理

アップロードできる形式は次のとおりです。

PNG / JPG / JPEG / GIF / WebP / PDF / MP4

アップロード上限は 1 ファイル 100MB です。

画像は再エンコードして保存し、EXIF などのメタデータを除去します。画像サムネイルも生成し、マークダウン表示時には ?thumb=true を使ってサムネイルをバックエンドに要求し、軽量表示します。

MP4 は可能な場合 poster 画像を生成し、動画タグの poster として利用します。Markdown 内の動画は preload="none" で描画し、ポップアップ内の画像・動画は details 展開時に遅延読み込みします。

マークダウンへの埋め込み文字列も自動生成します。

![画像](url)
[PDF](url)
?[動画](url)

一時共有URL

サーバ単体モードや適切に公開された環境では、選択したレイヤを一時共有 URL として公開できます。

共有対象レイヤを選択して URL を発行
有効期限を指定
任意の共有パスワードを設定
図形を共有対象に含めるか選択
既存リンクの内容更新
共有停止
デスクトップ / モバイル向け専用レイアウトで閲覧

共有ページは live データではなく、発行時点のレイヤ・マーカー・図形情報を保持するスナップショット方式です。

認証とセキュリティまわり

GeoCode-Web は、ローカル利用だけでなくサーバ単体モードも持つため、認証まわりも実装しています。

アクセストークン + リフレッシュトークンを JWT で発行
両トークンは HttpOnly Cookie で保持（http 環境では設定を変えないと動かないので注意）
リフレッシュトークンは /account/refresh に限定
TOTP による二段階認証
ログイン失敗回数に応じた再試行待ち
アカウントロック
管理者によるユーザー作成・パスワードリセット・ロック解除

画像の参照可否はユーザー単位のプライバシーモードで制御します。プライバシーモードが ON の場合、自分以外からの画像アクセスを遮断します。

起動モード

GeoCode-Web には、通常の Tauri デスクトップアプリとしての起動と、サーバ単体モードがあります。

Tauri デスクトップアプリ

インストーラで導入後、アプリを起動します。

初回起動時はセットアップ画面が表示され、次の項目を設定します。

アプリタイトル
管理者ユーザー名 / パスワード
アカウントロック回数
待機制限開始回数
待機時間
アクセストークン有効期限
リフレッシュトークン有効期限

セットアップ完了後、設定ファイル、SQLite DB、アップロードファイル保存用ディレクトリが作成されます。

サーバ単体モード

GUI を使わず、Axum サーバだけを起動することもできます。

# ホストのみ指定する場合。ポートは 3000 を使用
geocode_web_single -s 0.0.0.0

# ホストとポートを指定する場合
geocode_web_single -s 0.0.0.0:9090

事前に Tauri GUI でセットアップを完了しておく必要があります。

HTTP 環境で運用する場合、デフォルトでは SECURE_COOKIE=true のため Cookie が機能しません。その場合は、設定ファイルの secure_cookie を false に変更します。

{
  "secure_cookie": "false"
}

上記は一例です。規模によってはリバースプロキシなどの使用も検討したほうが良いですが、使う環境の状況によるでしょう。

モバイル対応

User-Agent に Mobile が含まれるアクセスには、モバイル向け UI を返します。

モバイル版では、ツール群をフローティングボタンと全画面モーダル中心の操作にしています。一時共有 URL のプレビューも、モバイル向けレイアウトに切り替わります。

配布とCI

現時点の主なサポート対象は Windows 版です。

配布形式は次のとおりです。

MSI インストーラ .msi
cargo が生成する単体実行ファイル .exe

GitHub Actions では、v* タグ push または手動実行により Windows 向けリリースビルドを行います。

CI では、フロントエンドの型チェック・ビルド、Tauri/Rust に埋め込む成果物生成、cargo fmt --check、cargo test --locked を実行します。

OSSとしての方針

GeoCode-Web-Single は、ソースコードを OSS として公開しつつ、一般利用者には Windows 向けリリース成果物をフリーソフトのように利用できる形で配布します。

通常の不具合報告、機能要望、改善提案は GitHub Issue で受け付けます
Pull Request は許可済みユーザーからのみ受け付けます（私のキャパの問題です）
セキュリティ上の問題は公開 Issue に書かず、セキュリティポリシーの案内に従ってください

ライセンスは MIT License です。

まとめ

GeoCode-Web は、場所に紐付いた情報をローカル中心で管理するために開発した地図アプリケーションです。

地図、マークダウン、ファイル添付、図形描画、レイヤ管理、一時共有 URL を組み合わせて、個人または小中規模チームで使える地図アプリケーション環境を目指しています。

ブラウザだけで試せるデモ版もあるので、まずはそちらから触ってもらえると嬉しいです。

PC用ブラウザデモ版: https://demo-geocode-web.pages.dev
スマホ用ブラウザデモ版: https://demo-geocode-web-mobile.pages.dev
GitHub: https://github.com/itsuki-maru/GeoCode-Web-Single