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