OpenStreetMap のレシートマッピングを手助けするウェブアプリの試作 (MUG-JP ver)

OpenStreetMap のレシート マッピングを手助けする ウェブアプリの試作 (MUG-JP ver) Tom Konda (X: @tom_k_en, OSM ID: tom_konda)

おことわり • 今回の発表内容は FOSS4G Hokkaido 2024 の懇親会 LT と重複する箇所が多いです 2025/3/18 MapLibre Meetup Japan #04 1

自己紹介 • Tom Konda • ウェブ地図関係：State of the Map Japan 2016 にて「OpenStreetMap 地図メモ検索アプリの開発」発表 • 普段：OSS のコンテンツ管理システム、Drupal へコントリビュートし てます 2025/3/18 MapLibre Meetup Japan #04 2

OpenStreetMap とは？ • 自由に使用可能な地理情報データベース • 本発表では、以後 OSM とします • ユーザが施設や店舗、建物、道路などの地理情報データを入れ てデータベースを拡充していく • 大雑把に言えば、ウィキペディアの地図版 • ODbL というデータベース向けのライセンスに準拠 • 入れていくデータもこのライセンスに準拠 • 現地調査からの入力は問題なし • レシートから入れるのは現在のところ問題なし 2025/3/18 MapLibre Meetup Japan #04 3

OSM に追加できそうなレシートのデータ • 主に記載されるデータ • 店舗名 • 支店名 • 住所 • 電話番号 • 稀に記載されるデータ • 郵便番号 • 店舗コード • お店の URL 2025/3/18 MapLibre Meetup Japan #04 4

OSM に現地でレシートのデータを反映する には • スマホのデータ入力アプリ（Every Door など）を使えば反映 可能 • GPS の位置情報が得られれば、ほぼ正確な位置に施設や店舗の 追加可能 2025/3/18 MapLibre Meetup Japan #04 5

現地でのレシートのデータ反映は難しい こともある • 時間的制約（友人と一緒に行動、駐車場、etc） • 名称などに読みが思いつかない文字が含まれてスマホからの 入力が困難 • 読みが思いつかない例：菁莪小学校跡地（せいが：神奈川県厚木市） • Apple pencil のようなスタイラス入力を毎回使用しないですよね？ 現地でマッピングできていないレシートがたまりがち 2025/3/18 MapLibre Meetup Japan #04 6

その結果 2025/3/18 MapLibre Meetup Japan #04 7

家でレシートのデータをマッピングする にしても 場所が思い出せなければマッピング不能 • 例えば、旅行で立ち寄った、飲食店の位置をしばらく経って思 い出せますか？ • レシートのデータがあっても、それがどこにあるかは教えてくれない このような状態だと、レシートマッピングは大変 なのでマッピング指針を考える 2025/3/18 MapLibre Meetup Japan #04 8

試作したウェブアプリケーションでの マッピング指針 • 現地 • スマホのブラウザで以下の2つを行い保存 • レシートの写真撮影 • GPS の位置情報取得 • 補足情報として簡単なメモも取れるようにする •家 • マッピングを行う際の手元にスマホを置き、スマホのブラウザに保存 した情報の読み込み 2025/3/18 MapLibre Meetup Japan #04 9

試作したウェブアプリケーションの構成 保存時 以下を IndexedDB に保存 • 緯度経度 • Geolocation API 使用 • 写真 • カメラ使用 • メモ • 投稿日時 2025/3/18 MapLibre Meetup Japan #04 10

Indexed DB とは • ウェブブラウザ単独で使用可能なデータベース • Cookie やウェブストレージ API より大きいデータを扱える • 画像ファイル、バイナリファイルの取り扱いも可能 • ブラウザによるが最低でも 1 GB は使用可能 • ウェブストレージ API は全ブラウザ 10 MB まで • データの登録・呼び出し方が結構特殊 • SQL のようなクエリではない • ラッパーライブラリ（Dexie.js）で対応 2025/3/18 MapLibre Meetup Japan #04 11

保存手順1. 写真のアップロード capture 属性付きの input 要素でカメラを起動してレシートを撮影し、 アップロード 2025/3/18 MapLibre Meetup Japan #04 12

保存手順2. 緯度経度の取得 Geolocation API によって緯度経度の取得 2025/3/18 MapLibre Meetup Japan #04 13

保存手順3. メモの記入と保存 • 登録するボタンから保存 • メモの記入は任意 2025/3/18 MapLibre Meetup Japan #04 14

試作したウェブアプリケーションの構成 読み込み時 2025/3/18 MapLibre Meetup Japan #04 15

読み込み手順 2025/3/18 MapLibre Meetup Japan #04 16

試作したアプリケーションの現状 • 取りあえず動く程度の完成度 • UI の構成要素を並べてみた程度 • 読み出しは IndexedDB の情報をそのまま出力する程度 • レポジトリとURL • Github: tom-konda/receipt-mapping-helper • URL: https://tom-konda.github.io/receipt-mappinghelper/index.html 2025/3/18 MapLibre Meetup Japan #04 17

今後の課題 • UI の実装 • スマホで見やすい表示を目指す • 画像サイズの最適化 • レシートのマッピングのために美麗な画像である必要はない • IndexedDB 周りの改善 • インデックスの変更と投稿日時降順への変更 • ローカル環境では対応済み 2025/3/18 MapLibre Meetup Japan #04 18

メモとして使うときのスマホ縦画面想定 UI 参考:Every Door 緯度経度の表 示は地図 地図は小さめ 写真表示 は下半分 2025/3/18 MapLibre Meetup Japan #04 19

まとめ • レシートマッピングは現地でアプリを使用しても、時間的制約 などでマッピング出来ないことがある • マッピング出来なかったレシートがたまりがち • 後からレシートのデータを家でマッピングするにしても現地の 位置情報が不明瞭 • 位置を思い出せなければマッピング不能 • スマホを使い現地で GPS の位置情報と写真を記録し、家で記 録した情報をメモとして使用するマッピング指針を立てた • Geolocation API + IndexedDB を利用したウェブアプリを試作した 2025/3/18 MapLibre Meetup Japan #04 20