Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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