青木和人(タク・タク観光ルート開発チーム)「キラリマッピングプロジェクトOpenStreatMAP,UMAP実習」京都市下京区「区民が主役のまちづくり」サポート事業2014　学生実習説明会，グローカルセンター(京都市下京区)，2014年10月4日, 10月18日．

1. キラリマッピングプロジェクト
OpenStreatMAP,UMAP実習
あおき地理情報システム研究所・
立命館大学
青木和人
京都市下京区「区民が主役のまちづくり」
サポート事業 2014-10-04,18

2. 学生さん
留学生さん
下京区内の観光名所・史跡・商店の情報を英語で、
オープンなデータの作成、オリジナルマップを作成
して、情報発信！
観光名所情報
商店情報
史跡情報 地
域
キラリマッピングプロジェクト
地域活性化

3. オープンとは
OSS（オープンソースソフトウェア)では
1. 使用の自由
2. 変更の自由
3. 配布の自由
出典：大和田 健一：「オープンストリートマップ講習会」http://www.slideshare.net/ohwada/20110419openstrretmap

4. OpenStreetMap(OSM)
出典：OpenStreetMap Japan http://openstreetmap.jp/
OpenStreetMap(OSM)は、
道路地図などの地理情報データを
誰でも利用できるよう、
フリーでオープンな地理空間情報
を
作成することを目的としたプロジェ
クト
誰でも自由に参加して、
誰でも自由に編集でき、
誰でも自由に利用する事が出来ま
す。
地理空間情報におけるオープン
データ

5. キラリマッピングプロジェクト
①OpenStreatMAPの作成
②商店街店舗紹介ホームページの作成
③相互にリンクする

6. (1)オープンストリートマップで島原地域の地図（建物
の形）作成（10月 4日（土）13時～16時)
(2)作成したオープンストリートマップを紙に印刷して、
地元調査
(3)マップの英訳
(4)オープンストリートマップへ店舗の名前や種類を入
力(日本語、英語）
(5)各店舗情報のホームページ作成(日本語、英語）
10月6日～18日まで 学生チームが三班に分かれて
地元調査
(6)オープンストリートマップへ各店舗情報のホーム
ページへのリンクを入力(10月18日（土）10時～16時)
全体の流れ

7. 禁止事項
１．参照・引用は禁止
・ 他の地図（googleMAPとか）
・ ガイドブック、書籍
・ WEBサイト
・ 自治体の情報
２． 個人情報はNG
http://wiki.openstreetmap.org/wiki/JA:Copyright
本日利用するBingMapは許諾ずみ
経験・記憶に基づくものはOK
出典：山下康成：「OpenStreetMapの地図を編集しよう！」
http://www.yamasita.jp/osm/seminar/140712_KyotoOpenDatathon/HowToEditOSM.pdf を基に著者改変

8. 出典：中村直登：「Open streatmap(osm)の説明」http://www.slideshare.net/nakamuranaoto/open-streatmaposm

9. アカウント作成（1）
〜ユーザー登録ページへ〜
1. OMGを開く。（http://www.openstreetmap.org/）
2. ユーザー登録 ココをク
リック
出典：中村直登：「Open streatmap(osm)の説明」http://www.slideshare.net/nakamuranaoto/open-streatmaposm

10. アカウント作成（2）〜ユーザー登録〜
1.各項目
の記入
2.お住まい
の国
パブリックド
メインに
チェック
3.メールの
認証リンクをクリック
登録完了
このリンクを
クリック
それ以外の
国にチェック
ココにチェック
→自分が作成した
データを
他のユーザーが自由
に編集できるようにな
る
・
・
・
・
・
出典：中村直登：「Open streatmap(osm)の説明」http://www.slideshare.net/nakamuranaoto/open-streatmaposm

11. 出典：中村直登：「Open streatmap(osm)の説明」http://www.slideshare.net/nakamuranaoto/open-streatmaposm

12. (1)建物を
描いていきましょう

13. OSMを開く。
（http://www.openstreetmap.org/）
丹波口を入力して！

14. 丹波口へGo

15. Potlatch2 を用いた
アームチェアマッピングの
作業画面へ移動中

16. 航空写真をなぞって、OMSの地図上
建物を追加していく。
右上の「背景」から
bingを選んでクリック
地図スタイルをwireframeへ変更
出典：藤森雄大：「初心者のためのOpen Street Map 入門マニュアル」
http://www.slideshare.net/takahirofujimori/openstreetmap-12934545

17. TIP1. Mキーを押すと、
編集しやすく画面の拡大ができます！
では、編集を始めましょう！
出典：藤森雄大：「初心者のためのOpen Street Map 入門マニュアル」
http://www.slideshare.net/takahirofujimori/openstreetmap-12934545

18. マウスで建物の外枠を囲む！
ここをクリックすると
情報の登録へ
TIP2. Qキーを押すと、直角になります。
失敗したら、
Escボタン
元にもどすボタン
を押します。

19. （これはビルですから）
Buildingのアイコンをクリック！
出典：藤森雄大：「初心者のためのOpen Street Map 入門マニュアル」
http://www.slideshare.net/takahirofujimori/openstreetmap-12934545

20. Detailを押して
Sourceに
Bing,Survey
を入力！
TIP3. Bingの最初の文字のBは
必ず、大文字で！
入力が終わったら
SAVEをクリック！
出典：藤森雄大：「初心者のためのOpen Street Map 入門マニュアル」
http://www.slideshare.net/takahirofujimori/openstreetmap-12934545 を基に著者改変

21. ここに自分が作った
地図の結果物が
できました。
出典：藤森雄大：「初心者のためのOpen Street Map 入門マニュアル」
http://www.slideshare.net/takahirofujimori/openstreetmap-12934545 を基に著者改変

22. SAVEする前に
自分のコメントを
書く欄です！
「グローカルセンター
大学生の島原商店街
活性化プロジェクトにて
追加」
で入力
最後にSAVE！
出典：藤森雄大：「初心者のためのOpen Street Map 入門マニュアル」
http://www.slideshare.net/takahirofujimori/openstreetmap-12934545 を基に著者改変

23. ここに自分が作った
地図の結果物が
できました。

24. 花屋町商店街を大宮通りまで
建物の形を入力！

25. (2)作成したオープンストリートマップ
を紙に印刷して、地元調査
入力した地図を
紙に印刷して、
現地調査で
お店の名前、
写真、
おすすめ商品など
を調査していく。

26. (3)マップの英訳

27. 出典：中村直登：「Open streatmap(osm)の説明」http://www.slideshare.net/nakamuranaoto/open-streatmaposm

28. Nameに
調査したお店の名
前を入れていく
出典：山下康成：「OpenStreetMapの地図を編集しよう！」
http://www.yamasita.jp/osm/seminar/140712_KyotoOpenDatathon/HowToEditOSM.pdf

29. Nameに
調査したお店の名
前を入れていく
出典：山下康成：「OpenStreetMapの地図を編集しよう！」
http://www.yamasita.jp/osm/seminar/140712_KyotoOpenDatathon/HowToEditOSM.pdf

30. (4)オープンストリートマップへ店舗の
名前や種類を入力(日本語、英語）
Nameに調査したお店の名前
(三木酒店）と
key(shop)とvalue(alcohol)
を入れていく

31. Nameに調査したお店の名前
(三木酒店）と
key(shop)とvalue(alcohol)
を入れていく

32. (4) (日本語、英語）での入力

33. (5)各店舗情報のホームページ作
成(日本語、英語） ワードでも可

34. グローカルキラリマッピング 島原商店街ホームページ
投稿を追加

35. グローカルキラリマッピング 島原商店街ホームページ
内容を入力
して、公開
リンク先は
こちら

36. グローカルキラリマッピング 島原商店街ホームページ
http://glocalkirarimapping.wordpress.com/2014/10/17/%E6%
96%B0%E6%92%B0%E7%B5%84%E8%A8%98%E5%BF%B5%E
9%A4%A8/

37. 対象地物を
geoJSONをイ
ンポート
(６) umapの作成

38. http://overpass-turbo.eu/
http://overpas
s-turbo.eu/で
対象地物を
geoJSONで出
力

39. umap
http://umap.openstreetmap.fr/ja
対象地物を
geoJSONをイ
ンポート
uMap OpenStreetMap のレ
イヤを使い、サイト埋め込
み用の地図を即座に作成
することが可能なサービス
です

40. umap
http://umap.openstreetmap.fr/ja/map/new/
対象地物を
geoJSONをイ
ンポート

41. 島原キラリマッピングumap
http://umap.openstreetmap.fr/ja/map/anonymous-
edit/19227%3AvhuYjv5ouhPzgSHLXf7_Z1J7YOY
丹波口を
検索

42. 島原キラリマッピングumap
http://umap.openstreetmap.fr/ja/map/anonymous-
edit/19227%3AvhuYjv5ouhPzgSHLXf7_Z1J7YOY
websiteに
調査したお店の
webページの
リンクを入れていく
編集開始
OpenStreet
Map のマッ
パーのアカ
ウントがあ
ればその ID
でもログイン
できる

43. 島原キラリマッピングumap
http://umap.openstreetmap.fr/ja/map/anonymous-
edit/19227%3AvhuYjv5ouhPzgSHLXf7_Z1J7YOY
ダブルクリック
で編集開始
拡張プロパティ
を開く

44. 島原キラリマッピングumap
http://umap.openstreetmap.fr/ja/map/anonymous-
edit/19227%3AvhuYjv5ouhPzgSHLXf7_Z1J7YOY
Websiteの
URLを入力

45. 島原キラリマッピングumap
http://umap.openstreetmap.fr/ja/map/anonymous-
edit/19227%3AvhuYjv5ouhPzgSHLXf7_Z1J7YOY
Websiteの
URLを入力

46. 島原キラリマッピングumap
http://umap.openstreetmap.fr/ja/map/anonymous-
edit/19227%3AvhuYjv5ouhPzgSHLXf7_Z1J7YOY
色を付けられ
る

47. 島原キラリマッピングumap
http://umap.openstreetmap.fr/ja/map/anonymous-
edit/19227%3AvhuYjv5ouhPzgSHLXf7_Z1J7YOY
お店に
マーカーを
つける
名称や概要
を入れる
色を変えて
みる

48. 島原キラリマッピングumap
http://umap.openstreetmap.fr/ja/map/anonymous-
edit/19227%3AvhuYjv5ouhPzgSHLXf7_Z1J7YOY
入力できた
ら保存
編集を終了

49. 島原キラリマッピングumap
http://umap.openstreetmap.fr/ja/map/anonymous-
edit/19227%3AvhuYjv5ouhPzgSHLXf7_Z1J7YOY
入力できたら
保存
マーカーを
クリックする
と
名称や概要
が表示され
る

50. キラリマッピング 完成！！
建物をクリックす
るとホームペー
ジが開く！