---
title: OpenStreetMap のレシートマッピングを手助けするウェブアプリの試作 (MUG-JP ver)
tags:  #javascript #mugjp  
author: [Tom Konda](https://www.docswell.com/user/tom-konda)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/2JVDP52YJQ.jpg?width=480
description: MapLibre Meetup Japan #04 で発表したスライドです。
published: March 19, 25
canonical: https://www.docswell.com/s/tom-konda/59V72Y-mug-jp_4-receipt-mapping
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/2JVDP52YJQ.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/5EGYP6RWEL.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/4JQM24VQ7P.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/K74VLQMYJ1.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/LJ13LP8N7G.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/GJWPV2GM72.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/4EZK4DLME3.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/Y76Q31W57V.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/G75RL4MGE4.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/9J2DLV9DJR.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/DEY2Q34MEM.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/VJN8KVY378.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/YE9KV6PPE3.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/GE8RPZDXJD.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/LELK1DMNJR.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/4JM2WPYQJW.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/PJRMY19KE9.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/3EKQ439RED.jpg)

試作したアプリケーションの現状
• 取りあえず動く程度の完成度
• 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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/L73PLGWGE5.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/87DLN1KNEG.jpg)

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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/2EVDP5VYEQ.jpg)

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