OpenStreetMap のレシートマッピングを⼿助けするウェブアプリの試作

OpenStreetMap のレシートマッピングを手助けする ウェブアプリの試作 Tom Konda (OSM ID: tom_konda, X: @tom_k_en) FOSS4G Hokkaido 2024 懇親会LT 2025/02/15

結論 Geolocation API + IndexedDB を利用したウェブアプリを作成しました レポジトリ：https://github.com/tom-konda/receipt-mapping-helper ウェブアプリの URL：https://tom-konda.github.io/receipt-mapping-helper/ FOSS4G Hokkaido 2024 懇親会LT 2025/02/15 1

• https://github.com/tom-konda/receipt-mapping-helper

早速ですが、レシートマッピングしてますか？ OSM に追加できそうなレシートのデータ 店舗名 支店名 住所 電話番号 郵便番号 FOSS4G Hokkaido 2024 懇親会LT 2025/02/15 2

OSM に現地でレシートのデータを反映するには Every Door などのアプリを使えば反映可能 GPS の位置情報が得られれば、ほぼ正確な位置に施設や店舗を追加可能 FOSS4G Hokkaido 2024 懇親会LT 2025/02/15 3

現地でのレシートのデータ反映は難しいこともある 以下の理由で難しい 時間的制約（友人と一緒に行動、駐車場、etc） 名称などに読みが思いつかない文字が含まれてスマホからの入力が困難 読みが思いつかない例：菁莪小学校跡地（せいが：神奈川県厚木市） 現地でマッピングできていないレシートがたまりがち FOSS4G Hokkaido 2024 懇親会LT 2025/02/15 4

その結果 FOSS4G Hokkaido 2024 懇親会LT 2025/02/15 5

家でレシートのデータをマッピングするにしても 場所が思い出せなければマッピング不能 例えば、旅行で立ち寄った、飲食店の位置をしばらく経って思い出せますか？ レシートのデータがあっても、それがどこにあるかは教えてくれない このような状態だと、レシートマッピングは大変なのでマッピング指針を考える FOSS4G Hokkaido 2024 懇親会LT 2025/02/15 6

試作したウェブアプリケーションでのマッピング方針 レシートマッピングを手助け出来るように以下の仕組みを考えた 現地 スマホのブラウザで以下の2つを行い保存 レシートの写真撮影 GPS の位置情報取得 補足情報として簡単なメモも取れるようにする 家 マッピングを行う際の手元にスマホを置き、スマホのブラウザに保存した情 報の読み込み FOSS4G Hokkaido 2024 懇親会LT 2025/02/15 7

試作したウェブアプリ ケーションの構成 保存時 Geolocation API レシート撮影 スマホの ブラウザ 緯度経度 以下を IndexedDB に保存 緯度経度 Geolocation API 使用 写真 カメラ使用 メモ 写真 IndexedDB 緯度経度 写真 メモ 投稿日時 投稿日時 FOSS4G Hokkaido 2024 懇親会LT 2025/02/15 8

試作したウェブアプリケーションの構成 読み込み時 スマホのブラウザ IndexedDB 緯度経度 写真 メモ 投稿日時 FOSS4G Hokkaido 2024 懇親会LT 2025/02/15 9

保存手順1. 写真のアップロード capture 属性付きの input 要素でカメラを起動してレシートを撮影し、アップロー ド ↓ FOSS4G Hokkaido 2024 懇親会LT 2025/02/15 10

保存手順2. 緯度経度の取得 Geolocation API によって緯度経度の取得 ↓ FOSS4G Hokkaido 2024 懇親会LT 2025/02/15 11

保存手順3. メモの記入と保存 登録するボタンから保存 メモの記入は任意 ↓ FOSS4G Hokkaido 2024 懇親会LT 2025/02/15 12

読み込み手順 ↓ FOSS4G Hokkaido 2024 懇親会LT 2025/02/15 13

試作したアプリケーションの現状 取りあえず動く程度の完成度 UI の構成要素を並べてみた程度 読み出しは IndexedDB の情報をそのまま出力する程度 FOSS4G Hokkaido 2024 懇親会LT 2025/02/15 14

今後の課題 UI の実装 スマホで見やすい表示を目指す IndexedDB 周りの改善 インデックスの変更 投稿日時降順にしたい 画像サイズの最適化 レシートのマッピングのために美麗な画像である必要はない FOSS4G Hokkaido 2024 懇親会LT 2025/02/15 15

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

自己紹介 発表者：Tom Konda (X: @tom_k_en, OSM ID: tom_konda) State of the Map Japan 2016 にて「OpenStreetMap地図メモ検索アプリの開 発」発表 発表したアプリは OSM の OAuth 2.0 に非対応なので対応したい 普段は CMS の Drupal へのコントリビュートしてます FOSS4G Hokkaido 2024 懇親会LT 2025/02/15 17