11月6日(土) 横浜ストリームアドバンスト講座 【D】デジタルmap関連サービスの活用・運用 1日目

1. デジタルmap関連サービスの活用・運用
11/6 横浜ストリーム アドバンスト講座
東京都市大学 横浜キャンパス
13:00 ~ 16:00
#ystream

2. 横浜ストリームとは
地域の人たちが伝える
地域情報の潮流をつくるプロジェクト

3. 本講座について
【目的】
・地図サービスの特性を知り、様々なメディアと組み
合せることで、使いやすくわかりやすいコンテンツの
配信が出来るようになる
・大量の情報をwebで扱う際のチーム編成について知る
【手法】
地図サービスの特性と活用例を知る
GoogleMapで地図作成＆公開
TimelineMapを使っての事例紹介と実習（メインは次回）

4. 本日の講座内容
• マップサービスを使用したサイトの事例
• Google マップを使ってみよう
• Timeline Mapの紹介

5. 地図サービスについて

6. 地図サービス？
• インターネット上で地図が参照出来る
• 地図で表示出来る内容
→位置情報、簡単な目印

7. 従来の地図活用
• 地図画像は１枚の画像
→webブラウザ上での表示に一苦労
（ダウンロードに時間がかかる、サイズの調整が出来ない など）
→サイトによって地図の書式が違う
→追加で情報を付加すると見づらくなる
→ブラウザ上で編集出来ない

8. 近年の地図サービス
• 地図データが既に揃っている
• webブラウザでの表示時の負担が少ない
（必要な箇所のみを読み込むため）
• ブラウザから書き込むためのサービスが
充実している

9. 具体的な事例
http://ueno-lab.com/ystream/

10. http://www1.tmtv.ne.jp/~ivtuzuki/rakugaki/rakugakimap.html

11. http://hybrid-collectives.com/linda/
LINDA(ライブハウスマップ)

12. http://www.hamakei.com/mapnews/archives/
新着記事を
地図上に表示

13. ２００８年 市民講座＠本学
http://gpop.sv.yc.tcu.ac.jp/kouza/
「Timeline Map」の
開発、活用を開始

14. http://www.yokohama-album.jp/map/
横浜写真アルバム

15. 横浜歴史マップ
http://yokohamamap.blogspot.com/

16. 横浜イベントナビ
http://event.hamatch.jp/event_s.php

17. http://webtown-yokohama.com/map/
都筑区 イベント情報マップ

18. 水と緑の散策マップ
http://webtown-yokohama.com/work/page_103.html

19. http://gpop.sv.yc.tcu.ac.jp/09fes/site/
横浜祭マップ

20. mapサービスの良いトコロ
• 誰でも容易に設置可能
→特定のテーマやコミュニティに絞ったコンテンツを
簡単に作れる
• 各種ソーシャルメディアとマッシュアップが可能
→位置情報と組み合せることで新たな情報価値を生む

21. Googlemapを使ってみる

22. Googlemapとは
• Googleが提供している地図サービス
• ゼンリンの地図がベース
• アカウントがあれば誰でもオリジナルの
地図が作成可能

23. 実際に使ってみる
googleトップページ左上の
「地図」と書かれているリンクをクリック

24. 実際に使ってみる
地図が表示されます。
画面左の「マイマップ」をクリック

25. 「新しい地図を作成」と書かれている
リンクをクリック
実際に使ってみる

26. 実際に使ってみる
地図画面の左上にボタンが表示されるので
使いたい機能をクリック→地図上で描画

27. 実際に使ってみる
目印（マーカー）を打つ
マーカーアイコンを選択後、
地図上の設置したい箇所を
クリック→詳細項目入力

28. 実際に使ってみる
線を引く（直線）
ラインアイコンを選択後、
地図上の線を引きたい
箇所を順番にクリック
→終端を２回クリックで終了

29. 実際に使ってみる
• 線を引く（道なり）
ラインアイコンを長押ししていると選択可能です。
車で走れる範囲を自動検出して線を描画します。
• シェイプを描く
ラインアイコンを長押ししていると選択可能です。
基本操作は線を引く（直線）と同じです。
ダブルクリックすると線の描画を終了し、
線を描画した箇所に応じた面を描きます。

30. 実際に使ってみる
動画を埋め込む

31. youtubeの動画画面下部にある「埋め込みコード」を
クリックし、出力された値をコピーしておきます。

32. ココをコピー

33. 実際に使ってみる
地図上に配置したマーカーの
編集画面で、「HTML編集」を選択し、
先ほどコピーした値をペーストします。
→OKをクリックして動作確認

34. 実際に使ってみる
「完了」で保存

35. 折角なので
ブログに埋め込もう

36. ブログへの埋め込み
「リンク」をクリックし、
「HTMLを～」の部分をコピーしておく

37. ブログへの埋め込み
ページ上部の
「その他」から
「サービス一覧」を
クリック

38. ブログへの埋め込み

39. ブログへの埋め込み

40. ブログへの埋め込み

41. ブログへの埋め込み

42. ブログへの埋め込み

43. ブログへの埋め込み
「ＨＴＭＬの編集」をクリック

44. ブログへの埋め込み
保存しておいた値を入力し、「投稿を公開」

45. ブログへの埋め込み

46. Timeline Mapの紹介

47. TimelineMapとは
• Googlemapに時間情報を連動させたもの
• 位置情報と時間情報を同時に可視化する

48. マーカー 情報ウィンドウ
アイテムナビ
タイムライン
テキスト、画像、動画等を掲載可能

49. 実際に投稿してみる

50. 実際に投稿してみる

51. 実際に投稿してみる

52. 来週の予定
• Timeline Mapをサーバーに設置する
• スマートフォン向けにデザインする方法紹介
• mapコンテンツが出来るまでの過程