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

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

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

2021/08/28 FOSS4G TOKAI 2021

Cdf45605a1adfab81061bc1c4444847a?s=128

K.Sakanoshita

August 28, 2021
Tweet

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