君でも出来る！ジオアプリ開発のススメ / You can do it too! Recommendation of geo app development

2021/08/28 FOSS4G TOKAI 2021

Transcript

1. 1 / 26 君でも出来る！ジオアプリ開発のススメ 諸国・浪漫 /OpenStreetMap Foundation Japan 坂ノ下 勝幸
2. 2 / 26 自己紹介 - 坂ノ下 勝幸 • 主な所属コミュニティ・団体 – OpenStreetMap Foundation Japan – 諸国・浪漫 /Code for OSAKA&Kusatsu&Harima • 主な活動内容 – オープンデータの充実（ Wikipedia&OpenStreetMap ） – オープンソース / データの活用（各種アプリ開発など） • 目指していること – 地元の情報は、自分たちで発信する文化を作る – 現場こそ最強のツールとデータが使えるように
3. 3 / 26 今回紹介する自作アプリたち
4. 4 / 26 みんなでテイクアウト MAP
5. 5 / 26 みんなでテイクアウト MAP • コロナの第一波（ 2020 年 4 月）時に開発した、 スマホ・ PC 両対応のテイクアウトマップ • 目的 – コロナ禍の影響で店舗がどう変化するか記録し 将来に残すことで、研究・分析に活用すること • 理由 – そのために、日本各地で作られるテイクアウト マップの店舗情報を一元管理する必要がある – 一元管理に最適なデータベースを検討した結果、 全世界で活用されている OpenStreetMap が 適切と判断（ COVID-19 タグも定義済み）
6. 6 / 26 みんなでテイクアウト MAP • 公開後の展開（ 2020 年 4 月～） – アプリの仕組上、日本全土を対象とするのは 困難なことと、地域毎にズームや初期位置を 指定するニーズがあるため地域版を展開 – Code for Harima/Amagasaki/Kusatsu にて 各地版を構築、また淀川 3 区版、大阪キタ版 作州版、鳥取西部版、東京版、苅田版なども • アプリを展開してもデータの更新が必要な ため、各 Code for などのコミュニティや 地元の団体と協力してデータ充実を図る – 第一波の収束と共に活動は下火になるものの、 アプリは全て、最新データで利用出来ている
7. 7 / 26 まち歩きマップメーカー
8. 8 / 26 まち歩きマップメーカー 1 • 誰でも簡単に印刷可能な地図を作ることが出来る PC 用 Web サイト • 目的 – Office の画像貼付ぐらい 気軽＆ GIS に詳しく無い 人でも使えるようにする • 理由 – Google Maps スクリーン ショットを貼るチラシなど 著作権侵害を減らすこと、 自由にカスタマイズをした 便利な地図を提供する
9. 9 / 26 まち歩きマップメーカー 2 （事例集）
10. 10 / 26 まち歩きマップメーカー 3 （事例集）
11. 11 / 26 まち歩きマップメーカー 4 （事例集） • スタパ齋藤さんの記事で紹介をして 頂きました。ありがとうございます – https://k-tai.watch.impress.co.jp/ docs/column/stapaapple/1345601.html • 他にも色んな方に使って頂いたり、紹介して 頂いています。感謝！
12. 12 / 26 コミュニティマップメーカー
13. 13 / 26 コミュニティマップメーカー 1 • 各地のコミュニティ活動をお手伝いする地図を作るソフトウェア まだ開発中（ずっと？） • 目的・理由 – コミュニティ活動で地図を使おう としても、印刷して手書きするか Google My Map しか無い状態 ※技術系コミュニティは自作 – Google My Map のジオコーディ ングは利用規約上、 Google 内で しか利用出来ず、オープンデータ の作成・運用には厳しい面がある – その解消と、コミュニティが自由に 使える地図アプリを提供したい
14. 14 / 26 コミュニティマップメーカー 2 （大阪） • 大阪思い出のこしマップ（ 2021 年 4 月公開） – 大阪市立図書館の「思い出のこしプロジェクト」は、大阪市内の 図書館の利用者さんから「思い出」を紙で頂いて将来に残す活動 – 残すだけで無く資料を調査し、「思い出」の補足や解説を追加し、 Web サイトに掲載 & オープンデータで公開している – 少し見難いサイトで、伝えたい人に伝わりにくいのが課題 • 「思い出のこしマップ」を開発 – 開発中のコミュニティマップメーカーに向いた 課題として、およそ一週間程度で開発する – 事前に司書さんへの説明と合意・改善提案を 受けた上で公開する
15. 15 / 26 コミュニティマップメーカー 3 （大阪） • 日本経済新聞の記事で紹介をして 頂きました（図書館のついでに） – https://www.nikkei.com/article/ DGXZQOCD0722F0X00C21A5000000/ • 生野区では、実際に「思い出」を話し合い ながら残していく活動も始まっている
16. 16 / 26 コミュニティマップメーカー 4 （草津） • くさつお宝マップ（ 2021 年 8 月限定公開） – Code for Kusatsu （滋賀県草津市）では、 2017 年頃から OpenStreetMap と Wikipedia の編集イベント（オープンデータ ソン）を開催し、データが少しずつ充実してきている – また、草津市から航空写真をオープンデータで提供されており、 Code for Kusatsu でタイルサーバーを提供している • https://wiki.openstreetmap.org/wiki/JA:Kusatsu_ortho • 実在・資料があれば、 OpenStreetMap と Wikipedia には残せるが それを見て「気づいたもの」「楽しかったこと」など、地元の方が 共有して楽しむ用途には、そのままでは使えない – コミュニティマップメーカーから「くさつお宝マップ」を開発 – 地元の方たちが共有したい情報を地図で残せるようにする
17. 17 / 26 • 「大阪思い出のこしマップ」ではデータの閲覧機能しか無いが、 「くさつお宝マップ」ではデータの登録機能を追加開発する – データの保管場所は Google スプレッドシートを利用 • 2021 年 8 月には、開発の依頼元「草津おみやげらぼ」さんと 小学生（ 2 ～ 5 年生中心）でオンラインイベントを開催 – タブレットやスマホで特に問題なく操作が出来ている • いくつかの要望に対応し、不具合を改善した上で、 11 月のイベントで公開予定 – コロナ禍が落ち着いていると良いな コミュニティマップメーカー 5 （草津）
18. 18 / 26 意外とシンプルな開発環境
19. 19 / 26 アプリの開発環境 • 必要機材・環境 – インターネット接続（普通の回線速度で OK ） – パソコン（ Windows とか Linux とか） – Web ブラウザ（ Chrome とか Firefox とか） – テキストエディタ（ Visual Studio Code とかメモ帳とか） インターネットとパソコン以外にお金は掛からない！ サーバーを自分で用意しなくても大丈夫！
20. 20 / 26 アプリの開発言語 • 今回紹介したアプリは全て Web アプリ – HTML/CSS の表現力はこの 10 年で飛躍的に向上 – PC サイトの他、スマホサイトも一緒に開発出来る – プログラムは JavaScript でかなりのことが出来る
21. 21 / 26 アプリの開発言語 • 地図などのデータはどこから手に入れる？ – サーバーを構築して、各組織が公開・販売している データをサーバーに取り込んで…なんてことは不要 – データは主に二種類 • 地図（画像、ベクター）は Maptiler 、 Mapbox 社などの サービスを利用（無料プラン）を利用することが出来る – OpenStreetMap のタイルサーバーも利用可能 • 施設情報（店舗など）は自前、様々な組織が公開している データの他、 OpenStreetMap の OverPass API を利用 することが出来る OverPass API なら、 JavaScript で簡単にデータが手に入る
22. 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
23. 23 / 26 Leaflet.js で地図を表示する • Leaflet.js – JavaScript で簡単に地図を表示・操作するライブラリ • サンプルプログラム（ JavaScript の主要部分を抜粋） let osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 19,attribution: '<a href="http://openstreetmap.org">&copy OpenStreetMap contributors</a>'}); map = L.map('mapid').setView([34.71966, 135.48467],17); map.addLayer(osm); 三行ほどのプログラムで地図を表示させることが可能 OpenStreetMap はこのパラメータで表示可能 地図を表示させる 緯度経度（地図の位置）を決める
24. 24 / 26 Web サイトの場所 • GitHub がオススメ – 今日の FOSS4G TOKAI 2021 のサイトも GitHub • https://foss4g-tokai.github.io/2021/ – 自分のパソコンで開発し、プログラムを GitHub で公開する イメージで考えれば大丈夫。コマンドを少し覚えれば OK • 契約しているプロバイダやレンタルサーバーでも OK – 要は HTML/CSS/JavaScript を置けるサイトなら大丈夫 – CMS や SNS に配置するのはセキュリティ的に禁止されて いる場合があるので、レンタルサーバーが良いかな • 好きなドメイン名を取得して楽しむことも出来るしね
25. 25 / 26 最後に伝えたいこと • 最先端の技術や高度で複雑なシステムを使いこなす領域もある – ただ、まちづくり関連の団体を始めとして、 IT に詳しくない 方たちに向けて、もっと小規模で手頃なツールが少ない状況 • 著作権侵害も多く、知らない間にリスク化している活動もある • 手書きの地図を何度もコピーして真っ黒になっている例もある • そして何より、そのコミュニティで不便な状態が発生している • おまけに、データ整備も地元中心で行う文化を作っていきたい 少し HTML/CSS/JavaScript を勉強して、 Web アプリを作れると IT に詳しくない方たちの活動を支援出来る可能性があると思います
26. 26 / 26 今日説明したソフトウェア • 全てオープンソースで公開しているので、参考になれば幸いです MIT ライセンスの範囲内で好きにパクってください（笑） – みんなでテイクアウト MAP • https://github.com/K-Sakanoshita/takeaway – まち歩きマップメーカー • https://github.com/K-Sakanoshita/mapmaker – コミュニティマップメーカー • https://github.com/K-Sakanoshita/community_mapmaker