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