Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
君でも出来る!ジオアプリ開発のススメ / You can do it too! Recomme...
Search
K.Sakanoshita
August 28, 2021
Education
0
410
君でも出来る!ジオアプリ開発のススメ / You can do it too! Recommendation of geo app development
2021/08/28 FOSS4G TOKAI 2021
K.Sakanoshita
August 28, 2021
Tweet
Share
More Decks by K.Sakanoshita
See All by K.Sakanoshita
Wikimedia Commons + OSMをWeb APIで活用する / Utilizing Wikimedia Commons + OSM with Web API
barsaka2
0
37
MapLibreで地図サイトをつくる!
barsaka2
1
500
OpenStreetMap概要説明 / Introducing OpenStreetMap
barsaka2
0
350
MapLibre GL JSとOverpass APIでWebアプリを作る / Create a web application with MapLibre GL JS and Overpass API
barsaka2
0
500
家族で使う防災マップを簡単に作ろう / easy create a disaster map for family
barsaka2
1
110
家族で使う防災マップを簡単に作ろう / Let's easily create a disaster prevention map for family use.
barsaka2
0
130
オープンデータソン概要説明 / about OpenDatathon
barsaka2
0
240
自由な地理空間情報をSPAで活用する / Utilize free geospatial information in SPA
barsaka2
0
180
Wikipedia概要説明 / About Wikipedia
barsaka2
0
880
Other Decks in Education
See All in Education
PSYC-560 R and R Studio Setup
jdbedics
0
510
Canva
matleenalaakso
0
400
Human Perception and Cognition - Lecture 4 - Human-Computer Interaction (1023841ANR)
signer
PRO
0
680
ブームだけで終わらせない、組織内でコーチングを活用する方法/How to Use Coaching in Your Organization Without It Being Just a Fad
yuko_yokouchi
1
280
HCI and Interaction Design - Lecture 2 - Human-Computer Interaction (1023841ANR)
signer
PRO
0
790
#英語力ランキング批判:EF-EPI,TOEFLスコア,英語教育実施状況調査
terasawat
0
530
プロダクト・エンジニア・QAE 3軸でのナレッジシェアのススメ
hinac0
1
810
Qualtricsで相互作用実験する「SMARTRIQS」実践編
kscscr
0
260
Comezando coas redes
irocho
0
340
week12@tcue2024
nonxxxizm
0
680
Library Prefects 2024-2025
cbtlibrary
0
100
The Blockchain Game
jscottmo
0
3.6k
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
73
9k
Teambox: Starting and Learning
jrom
132
8.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
GraphQLの誤解/rethinking-graphql
sonatard
66
9.9k
A Modern Web Designer's Workflow
chriscoyier
692
190k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Done Done
chrislema
181
16k
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
Testing 201, or: Great Expectations
jmmastey
38
7k
A designer walks into a library…
pauljervisheath
202
24k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
Transcript
1 / 26 君でも出来る!ジオアプリ開発のススメ 諸国・浪漫 /OpenStreetMap Foundation Japan 坂ノ下 勝幸
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 / 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 / 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">© OpenStreetMap contributors</a>'}); map = L.map('mapid').setView([34.71966, 135.48467],17); map.addLayer(osm); 三行ほどのプログラムで地図を表示させることが可能 OpenStreetMap はこのパラメータで表示可能 地図を表示させる 緯度経度(地図の位置)を決める
24 / 26 Web サイトの場所 • 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