デジタルmap関連サービスの活用・運用

11/6 横浜ストリーム アドバンスト講座

東京都市大学 横浜キャンパス13:00 ~ 16:00

#ystream

横浜ストリームとは

地域の人たちが伝える地域情報の潮流をつくるプロジェクト

本講座について【目的】・地図サービスの特性を知り、様々なメディアと組み　合せることで、使いやすくわかりやすいコンテンツの　配信が出来るようになる・大量の情報をwebで扱う際のチーム編成について知る

【手法】　地図サービスの特性と活用例を知る　GoogleMapで地図作成＆公開　TimelineMapを使っての事例紹介と実習（メインは次回）

本日の講座内容

• マップサービスを使用したサイトの事例

• Google マップを使ってみよう

• Timeline Mapの紹介

地図サービスについて

地図サービス？

•インターネット上で地図が参照出来る

•地図で表示出来る内容→位置情報、簡単な目印

従来の地図活用

• 地図画像は１枚の画像→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/

新着記事を地図上に表示

２００８年 市民講座＠本学

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トップページ左上の「地図」と書かれているリンクをクリック

実際に使ってみる

地図が表示されます。画面左の「マイマップ」をクリック

「新しい地図を作成」と書かれているリンクをクリック

実際に使ってみる

実際に使ってみる

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

実際に使ってみる

目印（マーカー）を打つマーカーアイコンを選択後、地図上の設置したい箇所をクリック→詳細項目入力

実際に使ってみる

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

実際に使ってみる• 線を引く（道なり）

ラインアイコンを長押ししていると選択可能です。車で走れる範囲を自動検出して線を描画します。

• シェイプを描くラインアイコンを長押ししていると選択可能です。基本操作は線を引く（直線）と同じです。ダブルクリックすると線の描画を終了し、線を描画した箇所に応じた面を描きます。

実際に使ってみる

動画を埋め込む

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

ココをコピー

実際に使ってみる

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

実際に使ってみる

「完了」で保存

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

ブログへの埋め込み

「リンク」をクリックし、「HTMLを～」の部分をコピーしておく

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

ブログへの埋め込み

ブログへの埋め込み

ブログへの埋め込み

ブログへの埋め込み

ブログへの埋め込み

ブログへの埋め込み

「ＨＴＭＬの編集」をクリック

ブログへの埋め込み

保存しておいた値を入力し、「投稿を公開」

ブログへの埋め込み

Timeline Mapの紹介

TimelineMapとは

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

マーカー 情報ウィンドウ

アイテムナビ

タイムライン

テキスト、画像、動画等を掲載可能

実際に投稿してみる

実際に投稿してみる

実際に投稿してみる

来週の予定

• Timeline Mapをサーバーに設置する

•スマートフォン向けにデザインする方法紹介• mapコンテンツが出来るまでの過程