Slide 1

Slide 1 text

1 / 26 君でも出来る!ジオアプリ開発のススメ 諸国・浪漫 /OpenStreetMap Foundation Japan 坂ノ下 勝幸

Slide 2

Slide 2 text

2 / 26 自己紹介 - 坂ノ下 勝幸 ● 主な所属コミュニティ・団体 – OpenStreetMap Foundation Japan – 諸国・浪漫 /Code for OSAKA&Kusatsu&Harima ● 主な活動内容 – オープンデータの充実( Wikipedia&OpenStreetMap ) – オープンソース / データの活用(各種アプリ開発など) ● 目指していること – 地元の情報は、自分たちで発信する文化を作る – 現場こそ最強のツールとデータが使えるように

Slide 3

Slide 3 text

3 / 26 今回紹介する自作アプリたち

Slide 4

Slide 4 text

4 / 26 みんなでテイクアウト MAP

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

6 / 26 みんなでテイクアウト MAP ● 公開後の展開( 2020 年 4 月~) – アプリの仕組上、日本全土を対象とするのは 困難なことと、地域毎にズームや初期位置を 指定するニーズがあるため地域版を展開 – Code for Harima/Amagasaki/Kusatsu にて 各地版を構築、また淀川 3 区版、大阪キタ版 作州版、鳥取西部版、東京版、苅田版なども ● アプリを展開してもデータの更新が必要な ため、各 Code for などのコミュニティや 地元の団体と協力してデータ充実を図る – 第一波の収束と共に活動は下火になるものの、 アプリは全て、最新データで利用出来ている

Slide 7

Slide 7 text

7 / 26 まち歩きマップメーカー

Slide 8

Slide 8 text

8 / 26 まち歩きマップメーカー 1 ● 誰でも簡単に印刷可能な地図を作ることが出来る PC 用 Web サイト ● 目的 – Office の画像貼付ぐらい 気軽& GIS に詳しく無い 人でも使えるようにする ● 理由 – Google Maps スクリーン ショットを貼るチラシなど 著作権侵害を減らすこと、 自由にカスタマイズをした 便利な地図を提供する

Slide 9

Slide 9 text

9 / 26 まち歩きマップメーカー 2 (事例集)

Slide 10

Slide 10 text

10 / 26 まち歩きマップメーカー 3 (事例集)

Slide 11

Slide 11 text

11 / 26 まち歩きマップメーカー 4 (事例集) ● スタパ齋藤さんの記事で紹介をして 頂きました。ありがとうございます – https://k-tai.watch.impress.co.jp/ docs/column/stapaapple/1345601.html ● 他にも色んな方に使って頂いたり、紹介して 頂いています。感謝!

Slide 12

Slide 12 text

12 / 26 コミュニティマップメーカー

Slide 13

Slide 13 text

13 / 26 コミュニティマップメーカー 1 ● 各地のコミュニティ活動をお手伝いする地図を作るソフトウェア まだ開発中(ずっと?) ● 目的・理由 – コミュニティ活動で地図を使おう としても、印刷して手書きするか Google My Map しか無い状態 ※技術系コミュニティは自作 – Google My Map のジオコーディ ングは利用規約上、 Google 内で しか利用出来ず、オープンデータ の作成・運用には厳しい面がある – その解消と、コミュニティが自由に 使える地図アプリを提供したい

Slide 14

Slide 14 text

14 / 26 コミュニティマップメーカー 2 (大阪) ● 大阪思い出のこしマップ( 2021 年 4 月公開) – 大阪市立図書館の「思い出のこしプロジェクト」は、大阪市内の 図書館の利用者さんから「思い出」を紙で頂いて将来に残す活動 – 残すだけで無く資料を調査し、「思い出」の補足や解説を追加し、 Web サイトに掲載 & オープンデータで公開している – 少し見難いサイトで、伝えたい人に伝わりにくいのが課題 ● 「思い出のこしマップ」を開発 – 開発中のコミュニティマップメーカーに向いた 課題として、およそ一週間程度で開発する – 事前に司書さんへの説明と合意・改善提案を 受けた上で公開する

Slide 15

Slide 15 text

15 / 26 コミュニティマップメーカー 3 (大阪) ● 日本経済新聞の記事で紹介をして 頂きました(図書館のついでに) – https://www.nikkei.com/article/ DGXZQOCD0722F0X00C21A5000000/ ● 生野区では、実際に「思い出」を話し合い ながら残していく活動も始まっている

Slide 16

Slide 16 text

16 / 26 コミュニティマップメーカー 4 (草津) ● くさつお宝マップ( 2021 年 8 月限定公開) – Code for Kusatsu (滋賀県草津市)では、 2017 年頃から OpenStreetMap と Wikipedia の編集イベント(オープンデータ ソン)を開催し、データが少しずつ充実してきている – また、草津市から航空写真をオープンデータで提供されており、 Code for Kusatsu でタイルサーバーを提供している ● https://wiki.openstreetmap.org/wiki/JA:Kusatsu_ortho ● 実在・資料があれば、 OpenStreetMap と Wikipedia には残せるが それを見て「気づいたもの」「楽しかったこと」など、地元の方が 共有して楽しむ用途には、そのままでは使えない – コミュニティマップメーカーから「くさつお宝マップ」を開発 – 地元の方たちが共有したい情報を地図で残せるようにする

Slide 17

Slide 17 text

17 / 26 ● 「大阪思い出のこしマップ」ではデータの閲覧機能しか無いが、 「くさつお宝マップ」ではデータの登録機能を追加開発する – データの保管場所は Google スプレッドシートを利用 ● 2021 年 8 月には、開発の依頼元「草津おみやげらぼ」さんと 小学生( 2 ~ 5 年生中心)でオンラインイベントを開催 – タブレットやスマホで特に問題なく操作が出来ている ● いくつかの要望に対応し、不具合を改善した上で、 11 月のイベントで公開予定 – コロナ禍が落ち着いていると良いな コミュニティマップメーカー 5 (草津)

Slide 18

Slide 18 text

18 / 26 意外とシンプルな開発環境

Slide 19

Slide 19 text

19 / 26 アプリの開発環境 ● 必要機材・環境 – インターネット接続(普通の回線速度で OK ) – パソコン( Windows とか Linux とか) – Web ブラウザ( Chrome とか Firefox とか) – テキストエディタ( Visual Studio Code とかメモ帳とか) インターネットとパソコン以外にお金は掛からない! サーバーを自分で用意しなくても大丈夫!

Slide 20

Slide 20 text

20 / 26 アプリの開発言語 ● 今回紹介したアプリは全て Web アプリ – HTML/CSS の表現力はこの 10 年で飛躍的に向上 – PC サイトの他、スマホサイトも一緒に開発出来る – プログラムは JavaScript でかなりのことが出来る

Slide 21

Slide 21 text

21 / 26 アプリの開発言語 ● 地図などのデータはどこから手に入れる? – サーバーを構築して、各組織が公開・販売している データをサーバーに取り込んで…なんてことは不要 – データは主に二種類 ● 地図(画像、ベクター)は Maptiler 、 Mapbox 社などの サービスを利用(無料プラン)を利用することが出来る – OpenStreetMap のタイルサーバーも利用可能 ● 施設情報(店舗など)は自前、様々な組織が公開している データの他、 OpenStreetMap の OverPass API を利用 することが出来る OverPass API なら、 JavaScript で簡単にデータが手に入る

Slide 22

Slide 22 text

22 / 26 OverPass API で施設情報を取得する ● 以下の URL を開くと、草津市周辺の図書館情報を得られる – JavaScript で以下の URL を GET すればデータが手に入る https://overpass-api.de/api/interpreter?data=[out:json] [timeout:30][bbox:34.97,135.90,35.02,135.98]; (node["amenity"="library"];);out body meta;>;out skel; タグは OpenStreetMap のタグをそのまま指定可能 鮮度はほぼリアルタイム(数分前のデータが手に入る) OverPass API サーバーの URL JSON 形式 30 秒待つ 緯度経度 図書館のタグを指定 出力データの詳細さ、このままで OK

Slide 23

Slide 23 text

23 / 26 Leaflet.js で地図を表示する ● Leaflet.js – JavaScript で簡単に地図を表示・操作するライブラリ ● サンプルプログラム( JavaScript の主要部分を抜粋) let osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 19,attribution: '&copy OpenStreetMap contributors'}); map = L.map('mapid').setView([34.71966, 135.48467],17); map.addLayer(osm); 三行ほどのプログラムで地図を表示させることが可能 OpenStreetMap はこのパラメータで表示可能 地図を表示させる 緯度経度(地図の位置)を決める

Slide 24

Slide 24 text

24 / 26 Web サイトの場所 ● GitHub がオススメ – 今日の FOSS4G TOKAI 2021 のサイトも GitHub ● https://foss4g-tokai.github.io/2021/ – 自分のパソコンで開発し、プログラムを GitHub で公開する イメージで考えれば大丈夫。コマンドを少し覚えれば OK ● 契約しているプロバイダやレンタルサーバーでも OK – 要は HTML/CSS/JavaScript を置けるサイトなら大丈夫 – CMS や SNS に配置するのはセキュリティ的に禁止されて いる場合があるので、レンタルサーバーが良いかな ● 好きなドメイン名を取得して楽しむことも出来るしね

Slide 25

Slide 25 text

25 / 26 最後に伝えたいこと ● 最先端の技術や高度で複雑なシステムを使いこなす領域もある – ただ、まちづくり関連の団体を始めとして、 IT に詳しくない 方たちに向けて、もっと小規模で手頃なツールが少ない状況 ● 著作権侵害も多く、知らない間にリスク化している活動もある ● 手書きの地図を何度もコピーして真っ黒になっている例もある ● そして何より、そのコミュニティで不便な状態が発生している ● おまけに、データ整備も地元中心で行う文化を作っていきたい 少し HTML/CSS/JavaScript を勉強して、 Web アプリを作れると IT に詳しくない方たちの活動を支援出来る可能性があると思います

Slide 26

Slide 26 text

26 / 26 今日説明したソフトウェア ● 全てオープンソースで公開しているので、参考になれば幸いです MIT ライセンスの範囲内で好きにパクってください(笑) – みんなでテイクアウト MAP ● https://github.com/K-Sakanoshita/takeaway – まち歩きマップメーカー ● https://github.com/K-Sakanoshita/mapmaker – コミュニティマップメーカー ● https://github.com/K-Sakanoshita/community_mapmaker