自由な地理空間情報をSPAで活用する / Utilize free geospatial information in SPA

自由な地理空間情報をSPAで活用する
坂ノ下勝幸
諸国・浪漫 / OpenStreetMap Foundation Japan
Facebook: K.Sakanoshita Twitter: @K_Sakanoshita
P.1
本資料で利用している地図： © OpenStreetMap contributors

View Slide

P.2
自己紹介 - 坂ノ下勝幸
◼
主な所属コミュニティ・団体
⚫ OpenStreetMap Foundation Japan
⚫
諸国・浪漫、Code for OSAKA/Kusatsu/Harima
◼
主な活動内容
⚫ OpenStreetMap/Wikipedia編集イベント（オープンデータソン）
✓ マッピングパーティの開催および協力
✓ ウィキペディアタウンの開催および協力
⚫
オープンソース/データの活用（アプリ開発など）
◼
目指していること
⚫
地元の情報は、自分たちで発信する文化を作る
⚫
現場こそ最強のツールとデータが使えるように
P.2

View Slide

P.3
自由な地理空間情報とは
◼ OpenStreetMapのこと
⚫ ODbLで提供する地球全体の地理空間データベース
⚫
単に無料な地理空間データを意味せず、誰でも自由に参加することが
出来る国際プロジェクト。イギリスで2004年から開始されている
◼
組織間コラボレーションのプラットフォーム
⚫
発展途上国で人道支援をするにも、最初に必要なのは「地図」
P.3

View Slide

P.4
SPAとは
◼ Single Page Applicationの頭文字
⚫ JavaScriptが進化し、Webブラウザでもクライアントサーバー
システムと同様なアプリケーション開発が出来るようになった
⚫ JavaScript上で動作する各種フレームワークが発展したことで、
プログラマがあまり意識しなくてもSPAを開発出来るようなる
✓ なお、発表者（私）自身は、大きめなフレームワークを使いこなせてない
◼
サーバー側の変化
⚫ Webブラウザ側の処理割合を高めているため、サーバー内部の
処理をシンプル化出来る場合がある（API提供のみを行うなど）
⚫ Webブラウザ内のJavaScriptコードは簡単に書き換えることが
出来るので、サーバー側で各種チェックをすることは大前提
⚫
サーバーとWebブラウザの役割（責任分界点）を明確にする
必要がある（Webブラウザのデータ改ざんの影響を最小化）
P.4

View Slide

P.5
私がやりたいこと
◼
やりたいこと（目的）
⚫
市民活動のデジタル対応を推進したい（楽に便利に）
⚫
オープンデータの社会実装（デジタルアーカイブにも繋げる）
◼
市民活動の問題点
⚫
個人や任意団体が中心であり、継続的な活動は結果論となる
⚫
定期的な収入は無いため、継続した費用を出すのは難しい
⚫
全般的にIT（スマホ、パソコン）を使いこなせる人が少ない
⚫
メンバーにプログラマやインフラエンジニアがいるのは稀
✓ そもそも住んでいる世界が違っており、あまり知り合う機会さえ無い
✓ プログラマが（偶然）結婚して、子供が出来てPTAに参加するなどで
初めて市民活動と関われる可能性がある
その地域の歴史や文化を担っている方たちを支援したい
ただし、魚を与えるのでは無く、釣り方を伝える方法で
P.5

View Slide

P.6
どうやって進めるか
◼
「市民活動の問題点」から分かること
⚫
継続的な出費が出来る体制では無いので、サーバーは利用出来ない
⚫
データを整備しても、それを長期保管するためのストレージは無い
⚫
プログラム開発は無理。設定ファイルを変更する程度ならなんとか
◼
上記の条件から考え出したこと
⚫
各組織が無料提供しているサービスの範囲内で出来ることをする
✓ GitHub Pages
✓ Google Spreadsheet
✓ OpenStreetMap Tile Server
✓ Overpass APIなど
各組織が提供してくれている無料サービスの範囲内で
デジタル化を進めるにはSPAが使えるのではと考える
P.6

View Slide

P.7
SPAをどう活用するか
◼ SPAで出来ることは意外とたくさんある
⚫
プログラマならGitHub Pagesで無料で簡単にWeb公開出来る
⚫ GitHubのリポジトリならWebブラウザから簡単にfork出来る
⚫ Google Spreadsheetを簡易データベースとして活用出来る
⚫
地図の表示にOpenStreetMapのタイルサーバーを活用出来る
⚫
店舗・施設情報は、OpenStreetMapのデータを活用出来る
⚫
施設の詳細情報は、Wikipediaのデータを活用出来る
◼
そのためには活動に必要なデータを整理する
⚫
データを「パブリック」と「プライベート」に分ける
✓ 全世界に公開しても良いデータと、自分たちの活動に使うデータにする
⚫
パブリックデータ保管場所にOpenStreetMap/Wikipediaを使う
ことで、保管コスト削減と、他組織で活用する相乗効果を狙う
P.7

View Slide

P.8
試行錯誤 1回目
P.8

View Slide

P.9
ホームレスの居場所をカウントする
◼
非公開のWebアプリでNPO内で一度利用して頂く
⚫
夜回り時、ホームレスの居場所を実態調査している（市の委託事業）
⚫
紙地図にメモした内容を
目でカウントするよりも
素早く集計が出来る
⚫
場所の特定が手間になる
OpenStreetMapにビルの
名前が少ないことが理由
◼
利用した結果
⚫
作業効率は良くなるが、
技術者が必要なことと、
紙で十分なことと判明
⚫
実態調査は年に一度だけ
なのもある
P.9

View Slide

P.10
オープンデータを利用する
◼ SPAとして開発し、以下のサービスを利用
⚫
地図タイルサーバーはOpenStreetMapが無償提供しているものを利用
✓ https://wiki.openstreetmap.org/wiki/JA:タイル利用規約
✓ ヘビーユースでは無い、市民活動（コミュニティ）での利用は可能
⚫ Google SpreadsheetにGoogle App Scriptで簡易的なAPIを用意
✓ POST/GETでデータ（ホームレスの位置と状態）の送受信が出来る仕組み
✓ データ送信（POST/GET）する度に全件の
データが送られてくる簡易的な仕組み
◼ Google Spreadsheetデータを集計
⚫ EXCELにそのままコピーが可能
⚫
関数などを使えばすぐに集計が可能
◼
用途が特殊なので非公開のアプリ
⚫
その後のアプリ開発に流用している
P.10

View Slide

P.11
P.11

View Slide

P.12
みんなでテイクアウトMAP
◼
⚫
コロナ第一波（2020年4月）に開発
◼
目的
⚫
コロナ禍の影響で店舗がどう変化するか記録し
将来に残すことで、将来における研究・分析に
活用出来るオープンデータを整備すること
◼
理由
⚫
そのために、日本各地で作られるテイクアウト
マップの店舗情報を一元管理する必要がある
⚫
一元管理に最適なデータベースを検討した結果、
全世界で活用されているOpenStreetMapが
適切と判断（COVID-19タグも定義済み）
12 /

View Slide

P.13
システム構成とその意図
◼
システム構成
⚫ GitHub PagesでWebサイト公開
✓ リポジトリも同様
https://github.com/K-Sakanoshita/takeaway
⚫
設定ファイルはJSONファイル
✓ 地図の初期表示位置（緯度経度）
✓ ズームレベル、アプリ内からのリンク先
✓ 表示するデータの種別（key=value形式）
⚫
見た目はindex.htmlとcssファイル
✓ 地方版を開発する時は、リポジトリを
forkし、JSONとindex.htmlを編集する
だけで完了する
◼
プログラマで無くても構築可能
⚫
設計をシンプルにした上で、構築
方法の手順を分かりやすく記載
P.13

View Slide

P.14
公開と現在の状況
◼
公開後の展開
⚫
アプリの仕組上、日本全土を対象とするのは
困難なことと、地域毎にズームや初期位置を
指定するニーズがあるため地域版を展開
⚫ Code for Harima/Amagasaki/Kusatsuにて
各地版を構築、また淀川3区版、大阪キタ版
作州版、鳥取西部版、東京版、苅田版も展開
⚫ GitHubの勉強も兼ねてforkする方も居られて
2022年末時点では、38 forkされている
◼
現在の状況
⚫
第一波の収束と共に活動は下火になるものの、
アプリはOpenStreetMapのデータをそのまま
利用しているので常に最新情報が表示される
14 /

View Slide

P.15
要望・反省と今後の希望
◼
開発者に寄せられた要望
⚫
テイクアウトに限らず、色んなお店や施設も表示して欲しい
✓ ランチマップ、マイボトルなどの水マップなど
⚫
その店に関する最新情報（特価品など）も掲載して欲しい
⚫
店舗の写真（外装、店内）、料理の写真も掲載して欲しい
◼
要望から浮かんだ今後の方針
⚫
地図上で情報を表示することは分かりやすいと感じられること
⚫
誰でも簡単に目的に沿ったデジタル地図を作ることが出来ると
様々な市民活動に良い影響を与えられる可能性があること
⚫
プライベートなデータ（特売品や写真）も取り扱えるようにする
特定の会社によるサービスではなく、もっと汎用的で
オープン（相互扶助）なデジタル地図を作る仕組みや
用意していきたい
P.15

View Slide

P.16
P.16

View Slide

P.17
コミュニティマップメーカー
P.17
◼
「みんなでテイクアウトMAP」に Google Spreadsheet の
データ操作を組み込んた汎用的なデジタル地図アプリ
Wikimedia Commons
データベース
Wikipedia
データベース
OpenStreetMap
データベース
独自に作るデータ
（スプレッドシート）
国際的なオープンデータの
プラットフォーム(保管先)
国際的なオープンデータの
プラットフォーム(保管先)
地域の方たちが必要な情報だけを
分かりやすく地図表示するアプリ
地域の方たちが必要な情報だけを
分かりやすく地図表示するアプリ
https://github.com/K-Sakanoshita/community_mapmaker

View Slide

P.18
地域の「やりたいこと」を実現する
◼
コミュニティマップメーカーで「やりたいこと」を実現
⚫
そのために「必要なこと」を明確に提示することが出来る
⚫
「必要なこと」とは、Wikimedia各プロジェクトやOpenStreetMapを
編集をすることで、資料（データ）を収集、整理、記録すること
⚫
オープンデータであるため、同じ地域の他活動への支援にもなる
P.18

View Slide

P.19
開発時にかなり注意したこと
◼
単に地図上にピンを立てるだけでは駄目
⚫
他のデータと連携させることを意識する必要がある
⚫
具体的には、OpenStreetMapの地物（POI）と連携させる
⚫
連携させることで、Wikipedia/Wikidataの利用も出来る
⚫
同じ地物なことをデータ上から確認が出来るようになる
◼
市民がオープンデータを作る動機づけとする
⚫
特定の市民活動だけに使えるデータ整備はもったいない
✓ データが連携しないので、結合時はいわゆる「名寄せ」が必要になる
⚫
例えば、「記念碑」をOpenStreetMapにマッピングすれば
歴史・文化情報として記録されるだけで無く、災害発生時の
一時避難の待ち合わせ場所としての活用も可能となる
✓ 地域に特化したデータ整備を国や自治体に任せるには限界がある
✓ 各地で市民活動があるが、そのリソースを共有して将来に残したい
P.19

View Slide

P.20
2021～2022年に開発したアプリ
◼
「コミュニティマップメーカー」を使ったマップたち
⚫
大阪思い出のこしマップ
✓ https://armd-02.github.io/OsakaMemories/
⚫
図書館年表マップ
✓ https://armd-02.github.io/library_chronology/
⚫
くさつお宝マップ
✓ https://armd-02.github.io/kusatsu_treasure/
⚫
あぁっとマーク淀川
✓ https://armd-02.github.io/AattoMark-Yodogawa/
⚫
『鴨川運河100の視点』マップ
✓ https://armd-02.github.io/KamogawaCanal/
⚫ Open History & Culture Map
✓ https://armd-02.github.io/openhc-map/
目的は別々でもソースコードは同じ
P.20

View Slide

P.21
大阪思い出のこしプロジェクト
◼
図書館が「地域の思い出」を集めてレファレンスした結果を
補足説明した上で、オープンデータとして将来に残す活動
⚫
図書館が得意なことと、地域情報がリンクしていく
◼
大阪思い出のこしマップは、場所を示しながら読むアプリ
⚫
例えば、「旭区」の場所を即答できる人はそんなに居ない
P.21

View Slide

P.22
Open History & Culture Map
◼
歴史・文化に関する情報を地図上に表示するアプリ
⚫ Wikipediaタグがあるものも地図に表示するため、実はWikipediaを
地図で見るアプリとしても利用出来る（同種のアプリは少ない）
P.22
Wikipedia記事（概要）

View Slide

P.23
くさつお宝マップ
◼
地域活動でも思い出のこし
⚫
子供たちが何かを感じた場所の思い出やクイズを記録するアプリ
⚫
「草津おみやげラボ」の
子育て中の方たちからの
依頼で開発・活用中
◼
データがお宝になる
⚫
子供たちも大人になるが
その時の思い出は残る
⚫
色んな場所で遊んで感じ
たことを残し、共感して
いく活動
P.23

View Slide

P.24
地域活動は「場所」がより重要となる
◼
『鴨川運河100の視点』マップ（開発中）
⚫
琵琶湖疏水を京都伏見まで引き込んで作った運河
⚫
運河を作るにあたり、大小様々な橋が掛けられた
⚫
地元の方にとって思い出が詰まった橋でもある
◼
あぁっとマーク淀川
⚫
大阪の十三を中心に「淀壁」と
呼ぶ壁画、お地蔵さん、活動に
賛同した店舗を紹介する地図
⚫
店舗が密集している場所なため
自分たちでコントロール可能な
より詳細な地図は有用となる
P.24

View Slide

P.25
◼ 2022/11/21～27に開催された十三周辺のアートイベント
⚫
たくさんの店舗や施設が関わって、様々な作品が提示されていた
⚫
参加者がスマホで近くの施設を調べるアプリとして活用していた
十三アートフェスマップ2022
P.25

View Slide

P.26
遊具のある公園マップ（開発中）
◼
公園内の遊具を地図で調べるためのアプリ
⚫
親が子供を連れて公園に遊びに行く際、どういった遊具があるのか、
子供の希望に沿った公園を選び、楽しく遊ぼうという趣旨で開発中
P.26

View Slide

P.27
開発で苦労した所
◼
チャレンジレスポンス認証の実装
⚫ Google App Scriptでチャレンジレスポ
ンス認証を作るが、HTTPSで暗号化し
ている経路上でどこまで対応が必要？
◼ Overpass APIサーバーの扱い
⚫ OpenStreetMapから任意の場所にある
データを取得するAPI名がOverpass
⚫
公式APIサーバーは連続利用出来ない
✓ クエリをまとめて一回で取得し、ローカル
キャッシュするように工夫をしている
⚫
有志が公開しているサーバーも利用
✓ 無応答時は別サーバーへ切り替えも実装
P.27

View Slide

P.28
今後の開発方針
◼
サーバーを使わない開発方針は維持したいが
⚫ Google Spreadsheet以外の選択肢も提供したい（候補募集中）
⚫
レンタルサーバーのMySQLやPostgreSQLが使えるなど
◼
みんなでテイクアウトMAPの手軽さを提供したい
⚫ Google Spreadsheetを用意して、Google App Scriptを仕込む
必要があるので、プログラマ以外では準備が難しい状況
⚫
みんなでテイクアウトMAPの様に、手順に沿って作業すれば
プログラマ以外でもデジタル地図を作れるようにしたい
◼
デザイン・スタイルのカスタマイズを強化したい
⚫
現状、どのアプリもインターフェースは共通になっている
⚫
共通のメリットもあるが、リスト表示を画面分割にするなど
各地の活動や目的に最適化したデザイン・スタイルの提供を
簡単に出来るようにしていきたい
P.28

View Slide

P.29
参考資料1
◼
⚫ https://github.com/K-Sakanoshita/takeaway
◼
⚫ https://github.com/K-Sakanoshita/community_mapmaker
◼
淀川アートネット（十三アートフェスマップ2022）
⚫ https://yodogawaartnet.jimdofree.com/
◼
大阪思い出のこしプロジェクトとマップ
⚫ https://www.oml.city.osaka.lg.jp/index.php?page_id=1301
⚫ https://armd-02.github.io/OsakaMemories
◼ Open History & Culture Map
⚫ https://armd-02.github.io/openhc-map
P.29

View Slide

P.30
参考資料2
◼ OpenStreetMap
⚫ https://www.openstreetmap.org/
◼
世界がOpenStreetMapを必要とする理由
⚫ https://qiita.com/nyampire/items/073c850f083cf9fb8d35
◼ Overpass API
⚫ https://wiki.openstreetmap.org/wiki/JA:Overpass_API
◼ Wikipedia
⚫ https://ja.wikipedia.org/
◼ Wikimedia Commons
⚫ https://commons.wikimedia.org/
◼ Wikidata
⚫ https://www.wikidata.org/
P.30

View Slide

自由な地理空間情報をSPAで活用する / Utilize free geospatial information in SPA

自由な地理空間情報をSPAで活用する / Utilize free geospatial information in SPA

K.Sakanoshita

More Decks by K.Sakanoshita

Other Decks in Education

Featured

Transcript