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

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

自由な地理空間情報を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
  2. P.2 自己紹介 - 坂ノ下 勝幸 ◼ 主な所属コミュニティ・団体 ⚫ OpenStreetMap Foundation

    Japan ⚫ 諸国・浪漫、Code for OSAKA/Kusatsu/Harima ◼ 主な活動内容 ⚫ OpenStreetMap/Wikipedia編集イベント(オープンデータソン) ✓ マッピングパーティの開催および協力 ✓ ウィキペディアタウンの開催および協力 ⚫ オープンソース/データの活用(アプリ開発など) ◼ 目指していること ⚫ 地元の情報は、自分たちで発信する文化を作る ⚫ 現場こそ最強のツールとデータが使えるように P.2
  3. P.4 SPAとは ◼ Single Page Applicationの頭文字 ⚫ JavaScriptが進化し、Webブラウザでもクライアントサーバー システムと同様なアプリケーション開発が出来るようになった ⚫

    JavaScript上で動作する各種フレームワークが発展したことで、 プログラマがあまり意識しなくてもSPAを開発出来るようなる ✓ なお、発表者(私)自身は、大きめなフレームワークを使いこなせてない ◼ サーバー側の変化 ⚫ Webブラウザ側の処理割合を高めているため、サーバー内部の 処理をシンプル化出来る場合がある(API提供のみを行うなど) ⚫ Webブラウザ内のJavaScriptコードは簡単に書き換えることが 出来るので、サーバー側で各種チェックをすることは大前提 ⚫ サーバーとWebブラウザの役割(責任分界点)を明確にする 必要がある(Webブラウザのデータ改ざんの影響を最小化) P.4
  4. P.5 私がやりたいこと ◼ やりたいこと(目的) ⚫ 市民活動のデジタル対応を推進したい(楽に便利に) ⚫ オープンデータの社会実装(デジタルアーカイブにも繋げる) ◼ 市民活動の問題点

    ⚫ 個人や任意団体が中心であり、継続的な活動は結果論となる ⚫ 定期的な収入は無いため、継続した費用を出すのは難しい ⚫ 全般的にIT(スマホ、パソコン)を使いこなせる人が少ない ⚫ メンバーにプログラマやインフラエンジニアがいるのは稀 ✓ そもそも住んでいる世界が違っており、あまり知り合う機会さえ無い ✓ プログラマが(偶然)結婚して、子供が出来てPTAに参加するなどで 初めて市民活動と関われる可能性がある その地域の歴史や文化を担っている方たちを支援したい ただし、魚を与えるのでは無く、釣り方を伝える方法で P.5
  5. P.6 どうやって進めるか ◼ 「市民活動の問題点」から分かること ⚫ 継続的な出費が出来る体制では無いので、サーバーは利用出来ない ⚫ データを整備しても、それを長期保管するためのストレージは無い ⚫ プログラム開発は無理。設定ファイルを変更する程度ならなんとか

    ◼ 上記の条件から考え出したこと ⚫ 各組織が無料提供しているサービスの範囲内で出来ることをする ✓ GitHub Pages ✓ Google Spreadsheet ✓ OpenStreetMap Tile Server ✓ Overpass APIなど 各組織が提供してくれている無料サービスの範囲内で デジタル化を進めるにはSPAが使えるのではと考える P.6
  6. P.7 SPAをどう活用するか ◼ SPAで出来ることは意外とたくさんある ⚫ プログラマならGitHub Pagesで無料で簡単にWeb公開出来る ⚫ GitHubのリポジトリならWebブラウザから簡単にfork出来る ⚫

    Google Spreadsheetを簡易データベースとして活用出来る ⚫ 地図の表示にOpenStreetMapのタイルサーバーを活用出来る ⚫ 店舗・施設情報は、OpenStreetMapのデータを活用出来る ⚫ 施設の詳細情報は、Wikipediaのデータを活用出来る ◼ そのためには活動に必要なデータを整理する ⚫ データを「パブリック」と「プライベート」に分ける ✓ 全世界に公開しても良いデータと、自分たちの活動に使うデータにする ⚫ パブリックデータ保管場所にOpenStreetMap/Wikipediaを使う ことで、保管コスト削減と、他組織で活用する相乗効果を狙う P.7
  7. P.9 ホームレスの居場所をカウントする ◼ 非公開のWebアプリでNPO内で一度利用して頂く ⚫ 夜回り時、ホームレスの居場所を実態調査している(市の委託事業) ⚫ 紙地図にメモした内容を 目でカウントするよりも 素早く集計が出来る

    ⚫ 場所の特定が手間になる OpenStreetMapにビルの 名前が少ないことが理由 ◼ 利用した結果 ⚫ 作業効率は良くなるが、 技術者が必要なことと、 紙で十分なことと判明 ⚫ 実態調査は年に一度だけ なのもある P.9
  8. 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
  9. P.12 みんなでテイクアウトMAP ◼ みんなでテイクアウトMAP ⚫ コロナ第一波(2020年4月)に開発 ◼ 目的 ⚫ コロナ禍の影響で店舗がどう変化するか記録し

    将来に残すことで、将来における研究・分析に 活用出来るオープンデータを整備すること ◼ 理由 ⚫ そのために、日本各地で作られるテイクアウト マップの店舗情報を一元管理する必要がある ⚫ 一元管理に最適なデータベースを検討した結果、 全世界で活用されているOpenStreetMapが 適切と判断(COVID-19タグも定義済み) 12 /
  10. P.13 システム構成とその意図 ◼ システム構成 ⚫ GitHub PagesでWebサイト公開 ✓ リポジトリも同様 https://github.com/K-Sakanoshita/takeaway

    ⚫ 設定ファイルはJSONファイル ✓ 地図の初期表示位置(緯度経度) ✓ ズームレベル、アプリ内からのリンク先 ✓ 表示するデータの種別(key=value形式) ⚫ 見た目はindex.htmlとcssファイル ✓ 地方版を開発する時は、リポジトリを forkし、JSONとindex.htmlを編集する だけで完了する ◼ プログラマで無くても構築可能 ⚫ 設計をシンプルにした上で、構築 方法の手順を分かりやすく記載 P.13
  11. P.14 公開と現在の状況 ◼ 公開後の展開 ⚫ アプリの仕組上、日本全土を対象とするのは 困難なことと、地域毎にズームや初期位置を 指定するニーズがあるため地域版を展開 ⚫ Code

    for Harima/Amagasaki/Kusatsuにて 各地版を構築、また淀川3区版、大阪キタ版 作州版、鳥取西部版、東京版、苅田版も展開 ⚫ GitHubの勉強も兼ねてforkする方も居られて 2022年末時点では、38 forkされている ◼ 現在の状況 ⚫ 第一波の収束と共に活動は下火になるものの、 アプリはOpenStreetMapのデータをそのまま 利用しているので常に最新情報が表示される 14 /
  12. P.15 要望・反省と今後の希望 ◼ 開発者に寄せられた要望 ⚫ テイクアウトに限らず、色んなお店や施設も表示して欲しい ✓ ランチマップ、マイボトルなどの水マップなど ⚫ その店に関する最新情報(特価品など)も掲載して欲しい

    ⚫ 店舗の写真(外装、店内)、料理の写真も掲載して欲しい ◼ 要望から浮かんだ今後の方針 ⚫ 地図上で情報を表示することは分かりやすいと感じられること ⚫ 誰でも簡単に目的に沿ったデジタル地図を作ることが出来ると 様々な市民活動に良い影響を与えられる可能性があること ⚫ プライベートなデータ(特売品や写真)も取り扱えるようにする 特定の会社によるサービスではなく、もっと汎用的で オープン(相互扶助)なデジタル地図を作る仕組みや 用意していきたい P.15
  13. P.17 コミュニティマップメーカー P.17 ◼ 「みんなでテイクアウトMAP」に Google Spreadsheet の データ操作を組み込んた汎用的なデジタル地図アプリ Wikimedia

    Commons データベース Wikipedia データベース OpenStreetMap データベース 独自に作るデータ (スプレッドシート) 国際的なオープンデータの プラットフォーム(保管先) 国際的なオープンデータの プラットフォーム(保管先) 地域の方たちが必要な情報だけを 分かりやすく地図表示するアプリ 地域の方たちが必要な情報だけを 分かりやすく地図表示するアプリ コミュニティマップメーカー https://github.com/K-Sakanoshita/community_mapmaker
  14. P.19 開発時にかなり注意したこと ◼ 単に地図上にピンを立てるだけでは駄目 ⚫ 他のデータと連携させることを意識する必要がある ⚫ 具体的には、OpenStreetMapの地物(POI)と連携させる ⚫ 連携させることで、Wikipedia/Wikidataの利用も出来る

    ⚫ 同じ地物なことをデータ上から確認が出来るようになる ◼ 市民がオープンデータを作る動機づけとする ⚫ 特定の市民活動だけに使えるデータ整備はもったいない ✓ データが連携しないので、結合時はいわゆる「名寄せ」が必要になる ⚫ 例えば、「記念碑」をOpenStreetMapにマッピングすれば 歴史・文化情報として記録されるだけで無く、災害発生時の 一時避難の待ち合わせ場所としての活用も可能となる ✓ 地域に特化したデータ整備を国や自治体に任せるには限界がある ✓ 各地で市民活動があるが、そのリソースを共有して将来に残したい P.19
  15. 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
  16. P.23 くさつお宝マップ ◼ 地域活動でも思い出のこし ⚫ 子供たちが何かを感じた場所の思い出やクイズを記録するアプリ ⚫ 「草津おみやげラボ」の 子育て中の方たちからの 依頼で開発・活用中

    ◼ データがお宝になる ⚫ 子供たちも大人になるが その時の思い出は残る ⚫ 色んな場所で遊んで感じ たことを残し、共感して いく活動 P.23
  17. P.24 地域活動は「場所」がより重要となる ◼ 『鴨川運河100の視点』マップ(開発中) ⚫ 琵琶湖疏水を京都伏見まで引き込んで作った運河 ⚫ 運河を作るにあたり、大小様々な橋が掛けられた ⚫ 地元の方にとって思い出が詰まった橋でもある

    ◼ あぁっとマーク淀川 ⚫ 大阪の十三を中心に「淀壁」と 呼ぶ壁画、お地蔵さん、活動に 賛同した店舗を紹介する地図 ⚫ 店舗が密集している場所なため 自分たちでコントロール可能な より詳細な地図は有用となる P.24
  18. P.27 開発で苦労した所 ◼ チャレンジレスポンス認証の実装 ⚫ Google App Scriptでチャレンジレスポ ンス認証を作るが、HTTPSで暗号化し ている経路上でどこまで対応が必要?

    ◼ Overpass APIサーバーの扱い ⚫ OpenStreetMapから任意の場所にある データを取得するAPI名がOverpass ⚫ 公式APIサーバーは連続利用出来ない ✓ クエリをまとめて一回で取得し、ローカル キャッシュするように工夫をしている ⚫ 有志が公開しているサーバーも利用 ✓ 無応答時は別サーバーへ切り替えも実装 P.27
  19. P.28 今後の開発方針 ◼ サーバーを使わない開発方針は維持したいが ⚫ Google Spreadsheet以外の選択肢も提供したい(候補募集中) ⚫ レンタルサーバーのMySQLやPostgreSQLが使えるなど ◼

    みんなでテイクアウトMAPの手軽さを提供したい ⚫ Google Spreadsheetを用意して、Google App Scriptを仕込む 必要があるので、プログラマ以外では準備が難しい状況 ⚫ みんなでテイクアウトMAPの様に、手順に沿って作業すれば プログラマ以外でもデジタル地図を作れるようにしたい ◼ デザイン・スタイルのカスタマイズを強化したい ⚫ 現状、どのアプリもインターフェースは共通になっている ⚫ 共通のメリットもあるが、リスト表示を画面分割にするなど 各地の活動や目的に最適化したデザイン・スタイルの提供を 簡単に出来るようにしていきたい P.28
  20. 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
  21. 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