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

K.Sakanoshita

August 28, 2021
Tweet

More Decks by K.Sakanoshita

Other Decks in Education

Transcript

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

    View full-size slide

  2. 2 / 26
    自己紹介 - 坂ノ下 勝幸

    主な所属コミュニティ・団体
    – OpenStreetMap Foundation Japan
    – 諸国・浪漫 /Code for OSAKA&Kusatsu&Harima

    主な活動内容
    – オープンデータの充実( Wikipedia&OpenStreetMap )
    – オープンソース / データの活用(各種アプリ開発など)

    目指していること
    – 地元の情報は、自分たちで発信する文化を作る
    – 現場こそ最強のツールとデータが使えるように

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    コロナの第一波( 2020 年 4 月)時に開発した、
    スマホ・ PC 両対応のテイクアウトマップ

    目的
    – コロナ禍の影響で店舗がどう変化するか記録し
    将来に残すことで、研究・分析に活用すること

    理由
    – そのために、日本各地で作られるテイクアウト
    マップの店舗情報を一元管理する必要がある
    – 一元管理に最適なデータベースを検討した結果、
    全世界で活用されている OpenStreetMap が
    適切と判断( COVID-19 タグも定義済み)

    View full-size slide

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

    公開後の展開( 2020 年 4 月~)
    – アプリの仕組上、日本全土を対象とするのは
    困難なことと、地域毎にズームや初期位置を
    指定するニーズがあるため地域版を展開
    – Code for Harima/Amagasaki/Kusatsu にて
    各地版を構築、また淀川 3 区版、大阪キタ版
    作州版、鳥取西部版、東京版、苅田版なども

    アプリを展開してもデータの更新が必要な
    ため、各 Code for などのコミュニティや
    地元の団体と協力してデータ充実を図る
    – 第一波の収束と共に活動は下火になるものの、
    アプリは全て、最新データで利用出来ている

    View full-size slide

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

    View full-size slide

  8. 8 / 26
    まち歩きマップメーカー 1

    誰でも簡単に印刷可能な地図を作ることが出来る PC 用 Web サイト

    目的
    – Office の画像貼付ぐらい
    気軽& GIS に詳しく無い
    人でも使えるようにする

    理由
    – Google Maps スクリーン
    ショットを貼るチラシなど
    著作権侵害を減らすこと、
    自由にカスタマイズをした
    便利な地図を提供する

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. 11 / 26
    まち歩きマップメーカー 4 (事例集)

    スタパ齋藤さんの記事で紹介をして
    頂きました。ありがとうございます
    – https://k-tai.watch.impress.co.jp/
    docs/column/stapaapple/1345601.html

    他にも色んな方に使って頂いたり、紹介して
    頂いています。感謝!

    View full-size slide

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

    View full-size slide

  13. 13 / 26
    コミュニティマップメーカー 1

    各地のコミュニティ活動をお手伝いする地図を作るソフトウェア
    まだ開発中(ずっと?)

    目的・理由
    – コミュニティ活動で地図を使おう
    としても、印刷して手書きするか
    Google My Map しか無い状態
    ※技術系コミュニティは自作
    – Google My Map のジオコーディ
    ングは利用規約上、 Google 内で
    しか利用出来ず、オープンデータ
    の作成・運用には厳しい面がある
    – その解消と、コミュニティが自由に
    使える地図アプリを提供したい

    View full-size slide

  14. 14 / 26
    コミュニティマップメーカー 2 (大阪)

    大阪思い出のこしマップ( 2021 年 4 月公開)
    – 大阪市立図書館の「思い出のこしプロジェクト」は、大阪市内の
    図書館の利用者さんから「思い出」を紙で頂いて将来に残す活動
    – 残すだけで無く資料を調査し、「思い出」の補足や解説を追加し、
    Web サイトに掲載 & オープンデータで公開している
    – 少し見難いサイトで、伝えたい人に伝わりにくいのが課題

    「思い出のこしマップ」を開発
    – 開発中のコミュニティマップメーカーに向いた
    課題として、およそ一週間程度で開発する
    – 事前に司書さんへの説明と合意・改善提案を
    受けた上で公開する

    View full-size slide

  15. 15 / 26
    コミュニティマップメーカー 3 (大阪)

    日本経済新聞の記事で紹介をして
    頂きました(図書館のついでに)
    – https://www.nikkei.com/article/
    DGXZQOCD0722F0X00C21A5000000/

    生野区では、実際に「思い出」を話し合い
    ながら残していく活動も始まっている

    View full-size slide

  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 には残せるが
    それを見て「気づいたもの」「楽しかったこと」など、地元の方が
    共有して楽しむ用途には、そのままでは使えない
    – コミュニティマップメーカーから「くさつお宝マップ」を開発
    – 地元の方たちが共有したい情報を地図で残せるようにする

    View full-size slide

  17. 17 / 26

    「大阪思い出のこしマップ」ではデータの閲覧機能しか無いが、
    「くさつお宝マップ」ではデータの登録機能を追加開発する
    – データの保管場所は Google スプレッドシートを利用

    2021 年 8 月には、開発の依頼元「草津おみやげらぼ」さんと
    小学生( 2 ~ 5 年生中心)でオンラインイベントを開催
    – タブレットやスマホで特に問題なく操作が出来ている

    いくつかの要望に対応し、不具合を改善した上で、
    11 月のイベントで公開予定
    – コロナ禍が落ち着いていると良いな
    コミュニティマップメーカー 5 (草津)

    View full-size slide

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

    View full-size slide

  19. 19 / 26
    アプリの開発環境

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

    View full-size slide

  20. 20 / 26
    アプリの開発言語

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

    View full-size slide

  21. 21 / 26
    アプリの開発言語

    地図などのデータはどこから手に入れる?
    – サーバーを構築して、各組織が公開・販売している
    データをサーバーに取り込んで…なんてことは不要
    – データは主に二種類

    地図(画像、ベクター)は Maptiler 、 Mapbox 社などの
    サービスを利用(無料プラン)を利用することが出来る
    – OpenStreetMap のタイルサーバーも利用可能

    施設情報(店舗など)は自前、様々な組織が公開している
    データの他、 OpenStreetMap の OverPass API を利用
    することが出来る
    OverPass API なら、 JavaScript で簡単にデータが手に入る

    View full-size slide

  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

    View full-size slide

  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: '&copy
    OpenStreetMap contributors'});
    map = L.map('mapid').setView([34.71966, 135.48467],17);
    map.addLayer(osm);
    三行ほどのプログラムで地図を表示させることが可能
    OpenStreetMap はこのパラメータで表示可能
    地図を表示させる
    緯度経度(地図の位置)を決める

    View full-size slide

  24. 24 / 26
    Web サイトの場所

    GitHub がオススメ
    – 今日の FOSS4G TOKAI 2021 のサイトも GitHub

    https://foss4g-tokai.github.io/2021/
    – 自分のパソコンで開発し、プログラムを GitHub で公開する
    イメージで考えれば大丈夫。コマンドを少し覚えれば OK

    契約しているプロバイダやレンタルサーバーでも OK
    – 要は HTML/CSS/JavaScript を置けるサイトなら大丈夫
    – CMS や SNS に配置するのはセキュリティ的に禁止されて
    いる場合があるので、レンタルサーバーが良いかな

    好きなドメイン名を取得して楽しむことも出来るしね

    View full-size slide

  25. 25 / 26
    最後に伝えたいこと

    最先端の技術や高度で複雑なシステムを使いこなす領域もある
    – ただ、まちづくり関連の団体を始めとして、 IT に詳しくない
    方たちに向けて、もっと小規模で手頃なツールが少ない状況

    著作権侵害も多く、知らない間にリスク化している活動もある

    手書きの地図を何度もコピーして真っ黒になっている例もある

    そして何より、そのコミュニティで不便な状態が発生している

    おまけに、データ整備も地元中心で行う文化を作っていきたい
    少し HTML/CSS/JavaScript を勉強して、 Web アプリを作れると
    IT に詳しくない方たちの活動を支援出来る可能性があると思います

    View full-size slide

  26. 26 / 26
    今日説明したソフトウェア

    全てオープンソースで公開しているので、参考になれば幸いです
    MIT ライセンスの範囲内で好きにパクってください(笑)
    – みんなでテイクアウト MAP

    https://github.com/K-Sakanoshita/takeaway
    – まち歩きマップメーカー

    https://github.com/K-Sakanoshita/mapmaker
    – コミュニティマップメーカー

    https://github.com/K-Sakanoshita/community_mapmaker

    View full-size slide