Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

K.Sakanoshita

January 06, 2023
Tweet

More Decks by K.Sakanoshita

Other Decks in Education

Transcript

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

    View Slide

  2. P.2
    自己紹介 - 坂ノ下 勝幸

    主な所属コミュニティ・団体
    ⚫ OpenStreetMap Foundation Japan

    諸国・浪漫、Code for OSAKA/Kusatsu/Harima

    主な活動内容
    ⚫ OpenStreetMap/Wikipedia編集イベント(オープンデータソン)
    ✓ マッピングパーティの開催および協力
    ✓ ウィキペディアタウンの開催および協力

    オープンソース/データの活用(アプリ開発など)

    目指していること

    地元の情報は、自分たちで発信する文化を作る

    現場こそ最強のツールとデータが使えるように
    P.2

    View Slide

  3. P.3
    自由な地理空間情報とは
    ◼ OpenStreetMapのこと
    ⚫ ODbLで提供する地球全体の地理空間データベース

    単に無料な地理空間データを意味せず、誰でも自由に参加することが
    出来る国際プロジェクト。イギリスで2004年から開始されている

    組織間コラボレーションのプラットフォーム

    発展途上国で人道支援をするにも、最初に必要なのは「地図」
    P.3

    View Slide

  4. P.4
    SPAとは
    ◼ Single Page Applicationの頭文字
    ⚫ JavaScriptが進化し、Webブラウザでもクライアントサーバー
    システムと同様なアプリケーション開発が出来るようになった
    ⚫ JavaScript上で動作する各種フレームワークが発展したことで、
    プログラマがあまり意識しなくてもSPAを開発出来るようなる
    ✓ なお、発表者(私)自身は、大きめなフレームワークを使いこなせてない

    サーバー側の変化
    ⚫ Webブラウザ側の処理割合を高めているため、サーバー内部の
    処理をシンプル化出来る場合がある(API提供のみを行うなど)
    ⚫ Webブラウザ内のJavaScriptコードは簡単に書き換えることが
    出来るので、サーバー側で各種チェックをすることは大前提

    サーバーとWebブラウザの役割(責任分界点)を明確にする
    必要がある(Webブラウザのデータ改ざんの影響を最小化)
    P.4

    View Slide

  5. P.5
    私がやりたいこと

    やりたいこと(目的)

    市民活動のデジタル対応を推進したい(楽に便利に)

    オープンデータの社会実装(デジタルアーカイブにも繋げる)

    市民活動の問題点

    個人や任意団体が中心であり、継続的な活動は結果論となる

    定期的な収入は無いため、継続した費用を出すのは難しい

    全般的にIT(スマホ、パソコン)を使いこなせる人が少ない

    メンバーにプログラマやインフラエンジニアがいるのは稀
    ✓ そもそも住んでいる世界が違っており、あまり知り合う機会さえ無い
    ✓ プログラマが(偶然)結婚して、子供が出来てPTAに参加するなどで
    初めて市民活動と関われる可能性がある
    その地域の歴史や文化を担っている方たちを支援したい
    ただし、魚を与えるのでは無く、釣り方を伝える方法で
    P.5

    View Slide

  6. P.6
    どうやって進めるか

    「市民活動の問題点」から分かること

    継続的な出費が出来る体制では無いので、サーバーは利用出来ない

    データを整備しても、それを長期保管するためのストレージは無い

    プログラム開発は無理。設定ファイルを変更する程度ならなんとか

    上記の条件から考え出したこと

    各組織が無料提供しているサービスの範囲内で出来ることをする
    ✓ GitHub Pages
    ✓ Google Spreadsheet
    ✓ OpenStreetMap Tile Server
    ✓ Overpass APIなど
    各組織が提供してくれている無料サービスの範囲内で
    デジタル化を進めるにはSPAが使えるのではと考える
    P.6

    View Slide

  7. P.7
    SPAをどう活用するか
    ◼ SPAで出来ることは意外とたくさんある

    プログラマならGitHub Pagesで無料で簡単にWeb公開出来る
    ⚫ GitHubのリポジトリならWebブラウザから簡単にfork出来る
    ⚫ Google Spreadsheetを簡易データベースとして活用出来る

    地図の表示にOpenStreetMapのタイルサーバーを活用出来る

    店舗・施設情報は、OpenStreetMapのデータを活用出来る

    施設の詳細情報は、Wikipediaのデータを活用出来る

    そのためには活動に必要なデータを整理する

    データを「パブリック」と「プライベート」に分ける
    ✓ 全世界に公開しても良いデータと、自分たちの活動に使うデータにする

    パブリックデータ保管場所にOpenStreetMap/Wikipediaを使う
    ことで、保管コスト削減と、他組織で活用する相乗効果を狙う
    P.7

    View Slide

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

    View Slide

  9. P.9
    ホームレスの居場所をカウントする

    非公開のWebアプリでNPO内で一度利用して頂く

    夜回り時、ホームレスの居場所を実態調査している(市の委託事業)

    紙地図にメモした内容を
    目でカウントするよりも
    素早く集計が出来る

    場所の特定が手間になる
    OpenStreetMapにビルの
    名前が少ないことが理由

    利用した結果

    作業効率は良くなるが、
    技術者が必要なことと、
    紙で十分なことと判明

    実態調査は年に一度だけ
    なのもある
    P.9

    View Slide

  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

    View Slide

  11. P.11
    試行錯誤 2回目
    P.11

    View Slide

  12. P.12
    みんなでテイクアウトMAP

    みんなでテイクアウトMAP

    コロナ第一波(2020年4月)に開発

    目的

    コロナ禍の影響で店舗がどう変化するか記録し
    将来に残すことで、将来における研究・分析に
    活用出来るオープンデータを整備すること

    理由

    そのために、日本各地で作られるテイクアウト
    マップの店舗情報を一元管理する必要がある

    一元管理に最適なデータベースを検討した結果、
    全世界で活用されているOpenStreetMapが
    適切と判断(COVID-19タグも定義済み)
    12 /

    View Slide

  13. 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

  14. P.14
    公開と現在の状況

    公開後の展開

    アプリの仕組上、日本全土を対象とするのは
    困難なことと、地域毎にズームや初期位置を
    指定するニーズがあるため地域版を展開
    ⚫ Code for Harima/Amagasaki/Kusatsuにて
    各地版を構築、また淀川3区版、大阪キタ版
    作州版、鳥取西部版、東京版、苅田版も展開
    ⚫ GitHubの勉強も兼ねてforkする方も居られて
    2022年末時点では、38 forkされている

    現在の状況

    第一波の収束と共に活動は下火になるものの、
    アプリはOpenStreetMapのデータをそのまま
    利用しているので常に最新情報が表示される
    14 /

    View Slide

  15. P.15
    要望・反省と今後の希望

    開発者に寄せられた要望

    テイクアウトに限らず、色んなお店や施設も表示して欲しい
    ✓ ランチマップ、マイボトルなどの水マップなど

    その店に関する最新情報(特価品など)も掲載して欲しい

    店舗の写真(外装、店内)、料理の写真も掲載して欲しい

    要望から浮かんだ今後の方針

    地図上で情報を表示することは分かりやすいと感じられること

    誰でも簡単に目的に沿ったデジタル地図を作ることが出来ると
    様々な市民活動に良い影響を与えられる可能性があること

    プライベートなデータ(特売品や写真)も取り扱えるようにする
    特定の会社によるサービスではなく、もっと汎用的で
    オープン(相互扶助)なデジタル地図を作る仕組みや
    用意していきたい
    P.15

    View Slide

  16. P.16
    試行錯誤 3回目
    P.16

    View Slide

  17. P.17
    コミュニティマップメーカー
    P.17

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

    View Slide

  18. P.18
    地域の「やりたいこと」を実現する

    コミュニティマップメーカーで「やりたいこと」を実現

    そのために「必要なこと」を明確に提示することが出来る

    「必要なこと」とは、Wikimedia各プロジェクトやOpenStreetMapを
    編集をすることで、資料(データ)を収集、整理、記録すること

    オープンデータであるため、同じ地域の他活動への支援にもなる
    P.18

    View Slide

  19. P.19
    開発時にかなり注意したこと

    単に地図上にピンを立てるだけでは駄目

    他のデータと連携させることを意識する必要がある

    具体的には、OpenStreetMapの地物(POI)と連携させる

    連携させることで、Wikipedia/Wikidataの利用も出来る

    同じ地物なことをデータ上から確認が出来るようになる

    市民がオープンデータを作る動機づけとする

    特定の市民活動だけに使えるデータ整備はもったいない
    ✓ データが連携しないので、結合時はいわゆる「名寄せ」が必要になる

    例えば、「記念碑」をOpenStreetMapにマッピングすれば
    歴史・文化情報として記録されるだけで無く、災害発生時の
    一時避難の待ち合わせ場所としての活用も可能となる
    ✓ 地域に特化したデータ整備を国や自治体に任せるには限界がある
    ✓ 各地で市民活動があるが、そのリソースを共有して将来に残したい
    P.19

    View Slide

  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

    View Slide

  21. P.21
    大阪思い出のこしプロジェクト

    図書館が「地域の思い出」を集めてレファレンスした結果を
    補足説明した上で、オープンデータとして将来に残す活動

    図書館が得意なことと、地域情報がリンクしていく

    大阪思い出のこしマップは、場所を示しながら読むアプリ

    例えば、「旭区」の場所を即答できる人はそんなに居ない
    P.21

    View Slide

  22. P.22
    Open History & Culture Map

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

    View Slide

  23. P.23
    くさつお宝マップ

    地域活動でも思い出のこし

    子供たちが何かを感じた場所の思い出やクイズを記録するアプリ

    「草津おみやげラボ」の
    子育て中の方たちからの
    依頼で開発・活用中

    データがお宝になる

    子供たちも大人になるが
    その時の思い出は残る

    色んな場所で遊んで感じ
    たことを残し、共感して
    いく活動
    P.23

    View Slide

  24. P.24
    地域活動は「場所」がより重要となる

    『鴨川運河100の視点』マップ(開発中)

    琵琶湖疏水を京都伏見まで引き込んで作った運河

    運河を作るにあたり、大小様々な橋が掛けられた

    地元の方にとって思い出が詰まった橋でもある

    あぁっとマーク淀川

    大阪の十三を中心に「淀壁」と
    呼ぶ壁画、お地蔵さん、活動に
    賛同した店舗を紹介する地図

    店舗が密集している場所なため
    自分たちでコントロール可能な
    より詳細な地図は有用となる
    P.24

    View Slide

  25. P.25
    ◼ 2022/11/21~27に開催された十三周辺のアートイベント

    たくさんの店舗や施設が関わって、様々な作品が提示されていた

    参加者がスマホで近くの施設を調べるアプリとして活用していた
    十三アートフェスマップ2022
    P.25

    View Slide

  26. P.26
    遊具のある公園マップ(開発中)

    公園内の遊具を地図で調べるためのアプリ

    親が子供を連れて公園に遊びに行く際、どういった遊具があるのか、
    子供の希望に沿った公園を選び、楽しく遊ぼうという趣旨で開発中
    P.26

    View Slide

  27. P.27
    開発で苦労した所

    チャレンジレスポンス認証の実装
    ⚫ Google App Scriptでチャレンジレスポ
    ンス認証を作るが、HTTPSで暗号化し
    ている経路上でどこまで対応が必要?
    ◼ Overpass APIサーバーの扱い
    ⚫ OpenStreetMapから任意の場所にある
    データを取得するAPI名がOverpass

    公式APIサーバーは連続利用出来ない
    ✓ クエリをまとめて一回で取得し、ローカル
    キャッシュするように工夫をしている

    有志が公開しているサーバーも利用
    ✓ 無応答時は別サーバーへ切り替えも実装
    P.27

    View Slide

  28. P.28
    今後の開発方針

    サーバーを使わない開発方針は維持したいが
    ⚫ Google Spreadsheet以外の選択肢も提供したい(候補募集中)

    レンタルサーバーのMySQLやPostgreSQLが使えるなど

    みんなでテイクアウトMAPの手軽さを提供したい
    ⚫ Google Spreadsheetを用意して、Google App Scriptを仕込む
    必要があるので、プログラマ以外では準備が難しい状況

    みんなでテイクアウトMAPの様に、手順に沿って作業すれば
    プログラマ以外でもデジタル地図を作れるようにしたい

    デザイン・スタイルのカスタマイズを強化したい

    現状、どのアプリもインターフェースは共通になっている

    共通のメリットもあるが、リスト表示を画面分割にするなど
    各地の活動や目的に最適化したデザイン・スタイルの提供を
    簡単に出来るようにしていきたい
    P.28

    View Slide

  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

    View Slide

  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

    View Slide