umap を使って オンライン ガイドマップを作ろう! · 2015. 2. 14. · umap...
TRANSCRIPT
![Page 2: umap を使って オンライン ガイドマップを作ろう! · 2015. 2. 14. · umap を使って オンライン ガイドマップを作ろう! 山下康成@京都府向日市](https://reader035.vdocuments.net/reader035/viewer/2022062605/5fc67050c32d640513762848/html5/thumbnails/2.jpg)
umap とは
サイト埋め込み用の地図を 作成することが可能なサービス
http://umap.openstreetmap.fr/ja/
![Page 3: umap を使って オンライン ガイドマップを作ろう! · 2015. 2. 14. · umap を使って オンライン ガイドマップを作ろう! 山下康成@京都府向日市](https://reader035.vdocuments.net/reader035/viewer/2022062605/5fc67050c32d640513762848/html5/thumbnails/3.jpg)
例:京都府向日市 古墳めぐり
http://umap.openstreetmap.fr/ja/map/map_
16631#14/34.9606/135.6988
![Page 4: umap を使って オンライン ガイドマップを作ろう! · 2015. 2. 14. · umap を使って オンライン ガイドマップを作ろう! 山下康成@京都府向日市](https://reader035.vdocuments.net/reader035/viewer/2022062605/5fc67050c32d640513762848/html5/thumbnails/4.jpg)
まずはサインアップ
(初回のみ)
![Page 5: umap を使って オンライン ガイドマップを作ろう! · 2015. 2. 14. · umap を使って オンライン ガイドマップを作ろう! 山下康成@京都府向日市](https://reader035.vdocuments.net/reader035/viewer/2022062605/5fc67050c32d640513762848/html5/thumbnails/5.jpg)
「サインイン」(初回のみ)
使用するアカウントを選択
![Page 6: umap を使って オンライン ガイドマップを作ろう! · 2015. 2. 14. · umap を使って オンライン ガイドマップを作ろう! 山下康成@京都府向日市](https://reader035.vdocuments.net/reader035/viewer/2022062605/5fc67050c32d640513762848/html5/thumbnails/6.jpg)
![Page 7: umap を使って オンライン ガイドマップを作ろう! · 2015. 2. 14. · umap を使って オンライン ガイドマップを作ろう! 山下康成@京都府向日市](https://reader035.vdocuments.net/reader035/viewer/2022062605/5fc67050c32d640513762848/html5/thumbnails/7.jpg)
地図を作る
![Page 8: umap を使って オンライン ガイドマップを作ろう! · 2015. 2. 14. · umap を使って オンライン ガイドマップを作ろう! 山下康成@京都府向日市](https://reader035.vdocuments.net/reader035/viewer/2022062605/5fc67050c32d640513762848/html5/thumbnails/8.jpg)
マップを作成
![Page 9: umap を使って オンライン ガイドマップを作ろう! · 2015. 2. 14. · umap を使って オンライン ガイドマップを作ろう! 山下康成@京都府向日市](https://reader035.vdocuments.net/reader035/viewer/2022062605/5fc67050c32d640513762848/html5/thumbnails/9.jpg)
目的地を表示
スクロールして目的地を表示
「地図中心点と ズームレベルを保存」で 今の位置を記憶させておく
![Page 10: umap を使って オンライン ガイドマップを作ろう! · 2015. 2. 14. · umap を使って オンライン ガイドマップを作ろう! 山下康成@京都府向日市](https://reader035.vdocuments.net/reader035/viewer/2022062605/5fc67050c32d640513762848/html5/thumbnails/10.jpg)
ピンを置いて概要を書く
概要を書いて保存
![Page 11: umap を使って オンライン ガイドマップを作ろう! · 2015. 2. 14. · umap を使って オンライン ガイドマップを作ろう! 山下康成@京都府向日市](https://reader035.vdocuments.net/reader035/viewer/2022062605/5fc67050c32d640513762848/html5/thumbnails/11.jpg)
ピンの形や色は拡張プロパティ
![Page 12: umap を使って オンライン ガイドマップを作ろう! · 2015. 2. 14. · umap を使って オンライン ガイドマップを作ろう! 山下康成@京都府向日市](https://reader035.vdocuments.net/reader035/viewer/2022062605/5fc67050c32d640513762848/html5/thumbnails/12.jpg)
名称をつける
![Page 13: umap を使って オンライン ガイドマップを作ろう! · 2015. 2. 14. · umap を使って オンライン ガイドマップを作ろう! 山下康成@京都府向日市](https://reader035.vdocuments.net/reader035/viewer/2022062605/5fc67050c32d640513762848/html5/thumbnails/13.jpg)
バルーンのコンテンツを書く
リンクを張るときにはURLを書く 写真を置くときには {{ 写真のURL }}
![Page 14: umap を使って オンライン ガイドマップを作ろう! · 2015. 2. 14. · umap を使って オンライン ガイドマップを作ろう! 山下康成@京都府向日市](https://reader035.vdocuments.net/reader035/viewer/2022062605/5fc67050c32d640513762848/html5/thumbnails/14.jpg)
写真は、twitter や Facebook に
facebook に置いて 「画像URLをコピー」
twitterに置いて 「画像URLをコピー」
![Page 15: umap を使って オンライン ガイドマップを作ろう! · 2015. 2. 14. · umap を使って オンライン ガイドマップを作ろう! 山下康成@京都府向日市](https://reader035.vdocuments.net/reader035/viewer/2022062605/5fc67050c32d640513762848/html5/thumbnails/15.jpg)
編集終了
![Page 16: umap を使って オンライン ガイドマップを作ろう! · 2015. 2. 14. · umap を使って オンライン ガイドマップを作ろう! 山下康成@京都府向日市](https://reader035.vdocuments.net/reader035/viewer/2022062605/5fc67050c32d640513762848/html5/thumbnails/16.jpg)
できた!
![Page 17: umap を使って オンライン ガイドマップを作ろう! · 2015. 2. 14. · umap を使って オンライン ガイドマップを作ろう! 山下康成@京都府向日市](https://reader035.vdocuments.net/reader035/viewer/2022062605/5fc67050c32d640513762848/html5/thumbnails/17.jpg)
地図を使う
![Page 18: umap を使って オンライン ガイドマップを作ろう! · 2015. 2. 14. · umap を使って オンライン ガイドマップを作ろう! 山下康成@京都府向日市](https://reader035.vdocuments.net/reader035/viewer/2022062605/5fc67050c32d640513762848/html5/thumbnails/18.jpg)
このURLをコピーして、 伝えたい人に送る
![Page 19: umap を使って オンライン ガイドマップを作ろう! · 2015. 2. 14. · umap を使って オンライン ガイドマップを作ろう! 山下康成@京都府向日市](https://reader035.vdocuments.net/reader035/viewer/2022062605/5fc67050c32d640513762848/html5/thumbnails/19.jpg)
マップ埋め込み
More
サイトへのマップ
埋め込みと共有
このコードをコピーして、 サイトに埋め込む