Successfully reported this slideshow.
デジタルmap関連サービスの活用・運用
11/6 横浜ストリーム アドバンスト講座
東京都市大学 横浜キャンパス
13:00 ~ 16:00
#ystream
横浜ストリームとは
地域の人たちが伝える
地域情報の潮流をつくるプロジェクト
本講座について
【目的】
・地図サービスの特性を知り、様々なメディアと組み
 合せることで、使いやすくわかりやすいコンテンツの
 配信が出来るようになる
・大量の情報をwebで扱う際のチーム編成について知る
【手法】
 地図サービスの特性と活用...
本日の講座内容
• マップサービスを使用したサイトの事例
• Google マップを使ってみよう
• Timeline Mapの紹介
地図サービスについて
地図サービス?
• インターネット上で地図が参照出来る
• 地図で表示出来る内容
→位置情報、簡単な目印
従来の地図活用
• 地図画像は1枚の画像
→webブラウザ上での表示に一苦労 
(ダウンロードに時間がかかる、サイズの調整が出来ない など)
→サイトによって地図の書式が違う
→追加で情報を付加すると見づらくなる
→ブラウザ上で編集出来ない
近年の地図サービス
• 地図データが既に揃っている
• webブラウザでの表示時の負担が少ない
(必要な箇所のみを読み込むため)
• ブラウザから書き込むためのサービスが
充実している
具体的な事例
http://ueno-lab.com/ystream/
http://www1.tmtv.ne.jp/~ivtuzuki/rakugaki/rakugakimap.html
http://hybrid-collectives.com/linda/
LINDA(ライブハウスマップ)
http://www.hamakei.com/mapnews/archives/
新着記事を
地図上に表示
2008年 市民講座@本学
http://gpop.sv.yc.tcu.ac.jp/kouza/
「Timeline Map」の
開発、活用を開始
http://www.yokohama-album.jp/map/
横浜写真アルバム
横浜歴史マップ
http://yokohamamap.blogspot.com/
横浜イベントナビ
http://event.hamatch.jp/event_s.php
http://webtown-yokohama.com/map/
都筑区 イベント情報マップ
水と緑の散策マップ
http://webtown-yokohama.com/work/page_103.html
http://gpop.sv.yc.tcu.ac.jp/09fes/site/
横浜祭マップ
mapサービスの良いトコロ
• 誰でも容易に設置可能
→特定のテーマやコミュニティに絞ったコンテンツを
 簡単に作れる
• 各種ソーシャルメディアとマッシュアップが可能
→位置情報と組み合せることで新たな情報価値を生む
Googlemapを使ってみる
Googlemapとは
• Googleが提供している地図サービス
• ゼンリンの地図がベース
• アカウントがあれば誰でもオリジナルの
地図が作成可能
実際に使ってみる
googleトップページ左上の
「地図」と書かれているリンクをクリック
実際に使ってみる
地図が表示されます。
画面左の「マイマップ」をクリック
「新しい地図を作成」と書かれている
リンクをクリック
実際に使ってみる
実際に使ってみる
地図画面の左上にボタンが表示されるので
使いたい機能をクリック→地図上で描画
実際に使ってみる
目印(マーカー)を打つ
マーカーアイコンを選択後、
地図上の設置したい箇所を
クリック→詳細項目入力
実際に使ってみる
線を引く(直線)
ラインアイコンを選択後、
地図上の線を引きたい
箇所を順番にクリック
→終端を2回クリックで終了
実際に使ってみる
• 線を引く(道なり)
ラインアイコンを長押ししていると選択可能です。
車で走れる範囲を自動検出して線を描画します。
• シェイプを描く
ラインアイコンを長押ししていると選択可能です。
基本操作は線を引く(直線)と同じです。
...
実際に使ってみる
動画を埋め込む
youtubeの動画画面下部にある「埋め込みコード」を
クリックし、出力された値をコピーしておきます。
ココをコピー
実際に使ってみる
地図上に配置したマーカーの
編集画面で、「HTML編集」を選択し、
先ほどコピーした値をペーストします。
→OKをクリックして動作確認
実際に使ってみる
「完了」で保存
折角なので
ブログに埋め込もう
ブログへの埋め込み
「リンク」をクリックし、
「HTMLを~」の部分をコピーしておく
ブログへの埋め込み
ページ上部の
「その他」から
「サービス一覧」を
クリック
ブログへの埋め込み
ブログへの埋め込み
ブログへの埋め込み
ブログへの埋め込み
ブログへの埋め込み
ブログへの埋め込み
「HTMLの編集」をクリック
ブログへの埋め込み
保存しておいた値を入力し、「投稿を公開」
ブログへの埋め込み
Timeline Mapの紹介
TimelineMapとは
• Googlemapに時間情報を連動させたもの
• 位置情報と時間情報を同時に可視化する
マーカー 情報ウィンドウ
アイテムナビ
タイムライン
テキスト、画像、動画等を掲載可能
実際に投稿してみる
実際に投稿してみる
実際に投稿してみる
来週の予定
• Timeline Mapをサーバーに設置する
• スマートフォン向けにデザインする方法紹介
• mapコンテンツが出来るまでの過程
Upcoming SlideShare
Loading in …5
×

1106 map.key

859 views

Published on

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

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

1106 map.key

  1. 1. デジタルmap関連サービスの活用・運用 11/6 横浜ストリーム アドバンスト講座 東京都市大学 横浜キャンパス 13:00 ~ 16:00 #ystream
  2. 2. 横浜ストリームとは 地域の人たちが伝える 地域情報の潮流をつくるプロジェクト
  3. 3. 本講座について 【目的】 ・地図サービスの特性を知り、様々なメディアと組み  合せることで、使いやすくわかりやすいコンテンツの  配信が出来るようになる ・大量の情報をwebで扱う際のチーム編成について知る 【手法】  地図サービスの特性と活用例を知る  GoogleMapで地図作成&公開  TimelineMapを使っての事例紹介と実習(メインは次回)
  4. 4. 本日の講座内容 • マップサービスを使用したサイトの事例 • Google マップを使ってみよう • Timeline Mapの紹介
  5. 5. 地図サービスについて
  6. 6. 地図サービス? • インターネット上で地図が参照出来る • 地図で表示出来る内容 →位置情報、簡単な目印
  7. 7. 従来の地図活用 • 地図画像は1枚の画像 →webブラウザ上での表示に一苦労  (ダウンロードに時間がかかる、サイズの調整が出来ない など) →サイトによって地図の書式が違う →追加で情報を付加すると見づらくなる →ブラウザ上で編集出来ない
  8. 8. 近年の地図サービス • 地図データが既に揃っている • webブラウザでの表示時の負担が少ない (必要な箇所のみを読み込むため) • ブラウザから書き込むためのサービスが 充実している
  9. 9. 具体的な事例 http://ueno-lab.com/ystream/
  10. 10. http://www1.tmtv.ne.jp/~ivtuzuki/rakugaki/rakugakimap.html
  11. 11. http://hybrid-collectives.com/linda/ LINDA(ライブハウスマップ)
  12. 12. http://www.hamakei.com/mapnews/archives/ 新着記事を 地図上に表示
  13. 13. 2008年 市民講座@本学 http://gpop.sv.yc.tcu.ac.jp/kouza/ 「Timeline Map」の 開発、活用を開始
  14. 14. http://www.yokohama-album.jp/map/ 横浜写真アルバム
  15. 15. 横浜歴史マップ http://yokohamamap.blogspot.com/
  16. 16. 横浜イベントナビ http://event.hamatch.jp/event_s.php
  17. 17. http://webtown-yokohama.com/map/ 都筑区 イベント情報マップ
  18. 18. 水と緑の散策マップ http://webtown-yokohama.com/work/page_103.html
  19. 19. http://gpop.sv.yc.tcu.ac.jp/09fes/site/ 横浜祭マップ
  20. 20. mapサービスの良いトコロ • 誰でも容易に設置可能 →特定のテーマやコミュニティに絞ったコンテンツを  簡単に作れる • 各種ソーシャルメディアとマッシュアップが可能 →位置情報と組み合せることで新たな情報価値を生む
  21. 21. Googlemapを使ってみる
  22. 22. Googlemapとは • Googleが提供している地図サービス • ゼンリンの地図がベース • アカウントがあれば誰でもオリジナルの 地図が作成可能
  23. 23. 実際に使ってみる googleトップページ左上の 「地図」と書かれているリンクをクリック
  24. 24. 実際に使ってみる 地図が表示されます。 画面左の「マイマップ」をクリック
  25. 25. 「新しい地図を作成」と書かれている リンクをクリック 実際に使ってみる
  26. 26. 実際に使ってみる 地図画面の左上にボタンが表示されるので 使いたい機能をクリック→地図上で描画
  27. 27. 実際に使ってみる 目印(マーカー)を打つ マーカーアイコンを選択後、 地図上の設置したい箇所を クリック→詳細項目入力
  28. 28. 実際に使ってみる 線を引く(直線) ラインアイコンを選択後、 地図上の線を引きたい 箇所を順番にクリック →終端を2回クリックで終了
  29. 29. 実際に使ってみる • 線を引く(道なり) ラインアイコンを長押ししていると選択可能です。 車で走れる範囲を自動検出して線を描画します。 • シェイプを描く ラインアイコンを長押ししていると選択可能です。 基本操作は線を引く(直線)と同じです。 ダブルクリックすると線の描画を終了し、 線を描画した箇所に応じた面を描きます。
  30. 30. 実際に使ってみる 動画を埋め込む
  31. 31. youtubeの動画画面下部にある「埋め込みコード」を クリックし、出力された値をコピーしておきます。
  32. 32. ココをコピー
  33. 33. 実際に使ってみる 地図上に配置したマーカーの 編集画面で、「HTML編集」を選択し、 先ほどコピーした値をペーストします。 →OKをクリックして動作確認
  34. 34. 実際に使ってみる 「完了」で保存
  35. 35. 折角なので ブログに埋め込もう
  36. 36. ブログへの埋め込み 「リンク」をクリックし、 「HTMLを~」の部分をコピーしておく
  37. 37. ブログへの埋め込み ページ上部の 「その他」から 「サービス一覧」を クリック
  38. 38. ブログへの埋め込み
  39. 39. ブログへの埋め込み
  40. 40. ブログへの埋め込み
  41. 41. ブログへの埋め込み
  42. 42. ブログへの埋め込み
  43. 43. ブログへの埋め込み 「HTMLの編集」をクリック
  44. 44. ブログへの埋め込み 保存しておいた値を入力し、「投稿を公開」
  45. 45. ブログへの埋め込み
  46. 46. Timeline Mapの紹介
  47. 47. TimelineMapとは • Googlemapに時間情報を連動させたもの • 位置情報と時間情報を同時に可視化する
  48. 48. マーカー 情報ウィンドウ アイテムナビ タイムライン テキスト、画像、動画等を掲載可能
  49. 49. 実際に投稿してみる
  50. 50. 実際に投稿してみる
  51. 51. 実際に投稿してみる
  52. 52. 来週の予定 • Timeline Mapをサーバーに設置する • スマートフォン向けにデザインする方法紹介 • mapコンテンツが出来るまでの過程

×