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

第64回 プログラミング・シンポジウム発表資料
https://prosym.org/64/program.html

Web技術の発達でSPA(Single Page Application)と呼ばれるWebサイトが登場している。
SPAの作り方を工夫することで、単純にフロントエンドに処理を集中させるだけでなく、従来は自前で用意していたデータベースを簡略化、外部化が出来る可能性がある。
そこで自由な地理空間情報データベース(OpenStreetMap)を活用したSPAを開発し、地図表現する際に工夫した点を報告し、これらの活用方法を議論したい。

Transcript

1. 自由な地理空間情報をSPAで活用する 坂ノ下 勝幸 諸国・浪漫 / OpenStreetMap Foundation Japan Facebook: K.Sakanoshita Twitter: @K_Sakanoshita P.1 本資料で利用している地図： © OpenStreetMap contributors
2. P.2 自己紹介 - 坂ノ下 勝幸 ◼ 主な所属コミュニティ・団体 ⚫ OpenStreetMap Foundation Japan ⚫ 諸国・浪漫、Code for OSAKA/Kusatsu/Harima ◼ 主な活動内容 ⚫ OpenStreetMap/Wikipedia編集イベント（オープンデータソン） ✓ マッピングパーティの開催および協力 ✓ ウィキペディアタウンの開催および協力 ⚫ オープンソース/データの活用（アプリ開発など） ◼ 目指していること ⚫ 地元の情報は、自分たちで発信する文化を作る ⚫ 現場こそ最強のツールとデータが使えるように P.2
3. P.3 自由な地理空間情報とは ◼ OpenStreetMapのこと ⚫ ODbLで提供する地球全体の地理空間データベース ⚫ 単に無料な地理空間データを意味せず、誰でも自由に参加することが 出来る国際プロジェクト。イギリスで2004年から開始されている ◼ 組織間コラボレーションのプラットフォーム ⚫ 発展途上国で人道支援をするにも、最初に必要なのは「地図」 P.3
4. P.4 SPAとは ◼ Single Page Applicationの頭文字 ⚫ JavaScriptが進化し、Webブラウザでもクライアントサーバー システムと同様なアプリケーション開発が出来るようになった ⚫ JavaScript上で動作する各種フレームワークが発展したことで、 プログラマがあまり意識しなくてもSPAを開発出来るようなる ✓ なお、発表者（私）自身は、大きめなフレームワークを使いこなせてない ◼ サーバー側の変化 ⚫ Webブラウザ側の処理割合を高めているため、サーバー内部の 処理をシンプル化出来る場合がある（API提供のみを行うなど） ⚫ Webブラウザ内のJavaScriptコードは簡単に書き換えることが 出来るので、サーバー側で各種チェックをすることは大前提 ⚫ サーバーとWebブラウザの役割（責任分界点）を明確にする 必要がある（Webブラウザのデータ改ざんの影響を最小化） P.4
5. P.5 私がやりたいこと ◼ やりたいこと（目的） ⚫ 市民活動のデジタル対応を推進したい（楽に便利に） ⚫ オープンデータの社会実装（デジタルアーカイブにも繋げる） ◼ 市民活動の問題点 ⚫ 個人や任意団体が中心であり、継続的な活動は結果論となる ⚫ 定期的な収入は無いため、継続した費用を出すのは難しい ⚫ 全般的にIT（スマホ、パソコン）を使いこなせる人が少ない ⚫ メンバーにプログラマやインフラエンジニアがいるのは稀 ✓ そもそも住んでいる世界が違っており、あまり知り合う機会さえ無い ✓ プログラマが（偶然）結婚して、子供が出来てPTAに参加するなどで 初めて市民活動と関われる可能性がある その地域の歴史や文化を担っている方たちを支援したい ただし、魚を与えるのでは無く、釣り方を伝える方法で P.5
6. P.6 どうやって進めるか ◼ 「市民活動の問題点」から分かること ⚫ 継続的な出費が出来る体制では無いので、サーバーは利用出来ない ⚫ データを整備しても、それを長期保管するためのストレージは無い ⚫ プログラム開発は無理。設定ファイルを変更する程度ならなんとか ◼ 上記の条件から考え出したこと ⚫ 各組織が無料提供しているサービスの範囲内で出来ることをする ✓ GitHub Pages ✓ Google Spreadsheet ✓ OpenStreetMap Tile Server ✓ Overpass APIなど 各組織が提供してくれている無料サービスの範囲内で デジタル化を進めるにはSPAが使えるのではと考える P.6
7. P.7 SPAをどう活用するか ◼ SPAで出来ることは意外とたくさんある ⚫ プログラマならGitHub Pagesで無料で簡単にWeb公開出来る ⚫ GitHubのリポジトリならWebブラウザから簡単にfork出来る ⚫ Google Spreadsheetを簡易データベースとして活用出来る ⚫ 地図の表示にOpenStreetMapのタイルサーバーを活用出来る ⚫ 店舗・施設情報は、OpenStreetMapのデータを活用出来る ⚫ 施設の詳細情報は、Wikipediaのデータを活用出来る ◼ そのためには活動に必要なデータを整理する ⚫ データを「パブリック」と「プライベート」に分ける ✓ 全世界に公開しても良いデータと、自分たちの活動に使うデータにする ⚫ パブリックデータ保管場所にOpenStreetMap/Wikipediaを使う ことで、保管コスト削減と、他組織で活用する相乗効果を狙う P.7
8. P.8 試行錯誤 1回目 P.8
9. P.9 ホームレスの居場所をカウントする ◼ 非公開のWebアプリでNPO内で一度利用して頂く ⚫ 夜回り時、ホームレスの居場所を実態調査している（市の委託事業） ⚫ 紙地図にメモした内容を 目でカウントするよりも 素早く集計が出来る ⚫ 場所の特定が手間になる OpenStreetMapにビルの 名前が少ないことが理由 ◼ 利用した結果 ⚫ 作業効率は良くなるが、 技術者が必要なことと、 紙で十分なことと判明 ⚫ 実態調査は年に一度だけ なのもある P.9
10. 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
11. P.11 試行錯誤 2回目 P.11
12. P.12 みんなでテイクアウトMAP ◼ みんなでテイクアウトMAP ⚫ コロナ第一波（2020年4月）に開発 ◼ 目的 ⚫ コロナ禍の影響で店舗がどう変化するか記録し 将来に残すことで、将来における研究・分析に 活用出来るオープンデータを整備すること ◼ 理由 ⚫ そのために、日本各地で作られるテイクアウト マップの店舗情報を一元管理する必要がある ⚫ 一元管理に最適なデータベースを検討した結果、 全世界で活用されているOpenStreetMapが 適切と判断（COVID-19タグも定義済み） 12 /
13. P.13 システム構成とその意図 ◼ システム構成 ⚫ GitHub PagesでWebサイト公開 ✓ リポジトリも同様 https://github.com/K-Sakanoshita/takeaway ⚫ 設定ファイルはJSONファイル ✓ 地図の初期表示位置（緯度経度） ✓ ズームレベル、アプリ内からのリンク先 ✓ 表示するデータの種別（key=value形式） ⚫ 見た目はindex.htmlとcssファイル ✓ 地方版を開発する時は、リポジトリを forkし、JSONとindex.htmlを編集する だけで完了する ◼ プログラマで無くても構築可能 ⚫ 設計をシンプルにした上で、構築 方法の手順を分かりやすく記載 P.13
14. P.14 公開と現在の状況 ◼ 公開後の展開 ⚫ アプリの仕組上、日本全土を対象とするのは 困難なことと、地域毎にズームや初期位置を 指定するニーズがあるため地域版を展開 ⚫ Code for Harima/Amagasaki/Kusatsuにて 各地版を構築、また淀川3区版、大阪キタ版 作州版、鳥取西部版、東京版、苅田版も展開 ⚫ GitHubの勉強も兼ねてforkする方も居られて 2022年末時点では、38 forkされている ◼ 現在の状況 ⚫ 第一波の収束と共に活動は下火になるものの、 アプリはOpenStreetMapのデータをそのまま 利用しているので常に最新情報が表示される 14 /
15. P.15 要望・反省と今後の希望 ◼ 開発者に寄せられた要望 ⚫ テイクアウトに限らず、色んなお店や施設も表示して欲しい ✓ ランチマップ、マイボトルなどの水マップなど ⚫ その店に関する最新情報（特価品など）も掲載して欲しい ⚫ 店舗の写真（外装、店内）、料理の写真も掲載して欲しい ◼ 要望から浮かんだ今後の方針 ⚫ 地図上で情報を表示することは分かりやすいと感じられること ⚫ 誰でも簡単に目的に沿ったデジタル地図を作ることが出来ると 様々な市民活動に良い影響を与えられる可能性があること ⚫ プライベートなデータ（特売品や写真）も取り扱えるようにする 特定の会社によるサービスではなく、もっと汎用的で オープン（相互扶助）なデジタル地図を作る仕組みや 用意していきたい P.15
16. P.16 試行錯誤 3回目 P.16
17. P.17 コミュニティマップメーカー P.17 ◼ 「みんなでテイクアウトMAP」に Google Spreadsheet の データ操作を組み込んた汎用的なデジタル地図アプリ Wikimedia Commons データベース Wikipedia データベース OpenStreetMap データベース 独自に作るデータ （スプレッドシート） 国際的なオープンデータの プラットフォーム(保管先) 国際的なオープンデータの プラットフォーム(保管先) 地域の方たちが必要な情報だけを 分かりやすく地図表示するアプリ 地域の方たちが必要な情報だけを 分かりやすく地図表示するアプリ コミュニティマップメーカー https://github.com/K-Sakanoshita/community_mapmaker
18. P.18 地域の「やりたいこと」を実現する ◼ コミュニティマップメーカーで「やりたいこと」を実現 ⚫ そのために「必要なこと」を明確に提示することが出来る ⚫ 「必要なこと」とは、Wikimedia各プロジェクトやOpenStreetMapを 編集をすることで、資料（データ）を収集、整理、記録すること ⚫ オープンデータであるため、同じ地域の他活動への支援にもなる P.18
19. P.19 開発時にかなり注意したこと ◼ 単に地図上にピンを立てるだけでは駄目 ⚫ 他のデータと連携させることを意識する必要がある ⚫ 具体的には、OpenStreetMapの地物（POI）と連携させる ⚫ 連携させることで、Wikipedia/Wikidataの利用も出来る ⚫ 同じ地物なことをデータ上から確認が出来るようになる ◼ 市民がオープンデータを作る動機づけとする ⚫ 特定の市民活動だけに使えるデータ整備はもったいない ✓ データが連携しないので、結合時はいわゆる「名寄せ」が必要になる ⚫ 例えば、「記念碑」をOpenStreetMapにマッピングすれば 歴史・文化情報として記録されるだけで無く、災害発生時の 一時避難の待ち合わせ場所としての活用も可能となる ✓ 地域に特化したデータ整備を国や自治体に任せるには限界がある ✓ 各地で市民活動があるが、そのリソースを共有して将来に残したい P.19
20. 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
21. P.21 大阪思い出のこしプロジェクト ◼ 図書館が「地域の思い出」を集めてレファレンスした結果を 補足説明した上で、オープンデータとして将来に残す活動 ⚫ 図書館が得意なことと、地域情報がリンクしていく ◼ 大阪思い出のこしマップは、場所を示しながら読むアプリ ⚫ 例えば、「旭区」の場所を即答できる人はそんなに居ない P.21
22. P.22 Open History & Culture Map ◼ 歴史・文化に関する情報を地図上に表示するアプリ ⚫ Wikipediaタグがあるものも地図に表示するため、実はWikipediaを 地図で見るアプリとしても利用出来る（同種のアプリは少ない） P.22 Wikipedia記事（概要）
23. P.23 くさつお宝マップ ◼ 地域活動でも思い出のこし ⚫ 子供たちが何かを感じた場所の思い出やクイズを記録するアプリ ⚫ 「草津おみやげラボ」の 子育て中の方たちからの 依頼で開発・活用中 ◼ データがお宝になる ⚫ 子供たちも大人になるが その時の思い出は残る ⚫ 色んな場所で遊んで感じ たことを残し、共感して いく活動 P.23
24. P.24 地域活動は「場所」がより重要となる ◼ 『鴨川運河100の視点』マップ（開発中） ⚫ 琵琶湖疏水を京都伏見まで引き込んで作った運河 ⚫ 運河を作るにあたり、大小様々な橋が掛けられた ⚫ 地元の方にとって思い出が詰まった橋でもある ◼ あぁっとマーク淀川 ⚫ 大阪の十三を中心に「淀壁」と 呼ぶ壁画、お地蔵さん、活動に 賛同した店舗を紹介する地図 ⚫ 店舗が密集している場所なため 自分たちでコントロール可能な より詳細な地図は有用となる P.24
25. P.25 ◼ 2022/11/21～27に開催された十三周辺のアートイベント ⚫ たくさんの店舗や施設が関わって、様々な作品が提示されていた ⚫ 参加者がスマホで近くの施設を調べるアプリとして活用していた 十三アートフェスマップ2022 P.25
26. P.26 遊具のある公園マップ（開発中） ◼ 公園内の遊具を地図で調べるためのアプリ ⚫ 親が子供を連れて公園に遊びに行く際、どういった遊具があるのか、 子供の希望に沿った公園を選び、楽しく遊ぼうという趣旨で開発中 P.26
27. P.27 開発で苦労した所 ◼ チャレンジレスポンス認証の実装 ⚫ Google App Scriptでチャレンジレスポ ンス認証を作るが、HTTPSで暗号化し ている経路上でどこまで対応が必要？ ◼ Overpass APIサーバーの扱い ⚫ OpenStreetMapから任意の場所にある データを取得するAPI名がOverpass ⚫ 公式APIサーバーは連続利用出来ない ✓ クエリをまとめて一回で取得し、ローカル キャッシュするように工夫をしている ⚫ 有志が公開しているサーバーも利用 ✓ 無応答時は別サーバーへ切り替えも実装 P.27
28. P.28 今後の開発方針 ◼ サーバーを使わない開発方針は維持したいが ⚫ Google Spreadsheet以外の選択肢も提供したい（候補募集中） ⚫ レンタルサーバーのMySQLやPostgreSQLが使えるなど ◼ みんなでテイクアウトMAPの手軽さを提供したい ⚫ Google Spreadsheetを用意して、Google App Scriptを仕込む 必要があるので、プログラマ以外では準備が難しい状況 ⚫ みんなでテイクアウトMAPの様に、手順に沿って作業すれば プログラマ以外でもデジタル地図を作れるようにしたい ◼ デザイン・スタイルのカスタマイズを強化したい ⚫ 現状、どのアプリもインターフェースは共通になっている ⚫ 共通のメリットもあるが、リスト表示を画面分割にするなど 各地の活動や目的に最適化したデザイン・スタイルの提供を 簡単に出来るようにしていきたい P.28
29. P.29 参考資料1 ◼ みんなでテイクアウトMAP ⚫ 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
30. 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