デジタルmap関連サービスの活用・運用
11/13 横浜ストリーム アドバンスト講座
東京都市大学 横浜キャンパス
13:00 16:00
#ystream
本日の講座内容
• Timeline Mapの設置と設定
• スマートフォンでの利用について
• マップコンテンツを作るためのチームづくり
Timeline Mapの設置と設定
TimelineMapの設置と設定
• ソースコードの取得
• 初期設定ファイルの編集
• サーバーへのアップロード
• その他のカスタマイズ
TimelineMapの設置と設定
• ソースコードの取得
ファイルのダウンロード
ファイル内容の確認
ファイルのダウンロード
http://ueno-lab.com/ystream/index.php?page_id=61
ファイル内容の確認
今回編集するファイル
・config.php
・pc.php
・pc.css
・db.xml
・ht.access
TimelineMapの設置と設定
• 初期設定ファイル(config.php)の編集
Googlemaps APIの取得
緯度経度の設定
ズーム設定
タイムラインバンド
Googlemaps APIの取得
「Google Maps API に登録する」ページへ
地図を表示出来る状態にします
利用規約への同意にチェックを入れ、
mapを設置するURLを記入し、
「APIキーを生成する」ボタンをクリック
「次のキーが生成されました」以降の
文字列をコピーする
config.phpを開き、
「Googleから取得したAPIキー」に
コピーした文字列を入力
「設置するアドレス」についても記入
緯度経度の設定
http://42.195km.net/run-wiki/googlexy.htm
「座標を取得」ボタンを押すと
緯度、経度の値が取得出来る
地図を開いた際に最初に表示される
場所を決めます。
経度:default_lng
緯度:default_lat へ、それぞれ入力
ズーム設定
地図を開いた際の最初の縮尺を決めます。
タイムラインバンドの設定
タイムラインの1目盛ごとの期間を決めます。
TimelineMapの設置と設定
• サーバーへのアップロード
winscpの起動、サーバーへの接続
ファイルアップロード
権限設定
winscpの起動、サーバーへの接続
ファイルアップロード
今回使用するサーバー:http://gp01.sv.yc.tcu.ac.jp/
ログインID&パスワード:配布資料を参照してください
hv_tlmapのフォルダを丸ごとアップロードしま...
TimelineMapの設置と設定
• その他カスタム(主にpc.phpの編集)
マーカーアイコンの変更
タイムラインバンドの幅を変える
カテゴリ設定の変更
投稿者を限定する(ベーシック認証)
画像アップローダーについて
マーカーアイコンの変更
KsGMapDataMarker(
"a",//カテゴリ
"./Images/marker_a/standard01%count%.png" ,
  //マーカーに使用する画像の保存場所(%count%:連番)
"./I...
http://www.ksgmap.jp/download/material.html
配布されている
素材ファイル
http://www.powerhut.co.uk/googlemaps/custom_markers.php
アイコン自作に役立つサイト
タイムラインバンドの幅を変える
pc.php
171行目付近
TL上部
TL下部
width: 20%
width: 80%
intervalPixels: 200
タイムラインバンド全体の幅を変えたい場合
pc.css
47行目付近
height: 200px;
カテゴリ設定の変更
投稿者を限定する(ベーシック認証)
投稿者を限定する(ベーシック認証)
htpasswd -bc(1回目のみ) (ファイル保管場所) (投稿用ユーザ名) (投稿用パスワード)
htpasswd -b(2回目以降) (ファイル保管場所) (投稿用ユーザ名) (投稿用パスワード)
●...
画像アップローダーについて
●mapのURLの末尾に「/up」を付けることでアクセス可能
●サムネイルを自動的に作成してくれる
 (サムネイル:画像を一覧しやすくするために縮小したもの)
 →mapの吹き出しに画像を差し込みたい場合に利用すると...
サムネイルをコピーしたURLを登録フォームに記載
スマートフォンでの利用について
講師紹介
• 加藤大騎さん
慶應義塾大学 安村研究室 修士2年
TimelineMap 製作者
マップコンテンツを作るための
チームづくり
マップコンテンツを作るための
チームづくり
• データ収集
• mapデザイン
• データ打ち込み
• ブログへ詳細記事を書く
• ページデザイン
必要な工程
事例:横浜歴史マップ(前田,2009)
マップコンテンツを作るための
チームづくり
• 学生と地域住民の方による共同活動
• 主な情報収集→インタビュー
街を歩きながら
資料を参照しながら
福井氏のネットワーク
横浜コミュニティデザインラボ
前田氏のネットワーク
上野研究室
ギークコミュニティ
前田氏福井氏
地域情報 マップシステム
設置・運用
※ギーク:技術オタク
マップコンテンツを作るための
チームづくり
• 地域コミュニティのネットワークを活用して
情報を収集する
• データを打ち込み始める前に
mapのデザインを固めておく必要がある
→Timelineバンド、カテゴリ、
 マーカーアイコン等
• 地...
1113 map
1113 map
Upcoming SlideShare
Loading in …5
×

1113 map

606 views
569 views

Published on

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

Published in: Education, Travel, Sports
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
606
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

1113 map

  1. 1. デジタルmap関連サービスの活用・運用 11/13 横浜ストリーム アドバンスト講座 東京都市大学 横浜キャンパス 13:00 16:00 #ystream
  2. 2. 本日の講座内容 • Timeline Mapの設置と設定 • スマートフォンでの利用について • マップコンテンツを作るためのチームづくり
  3. 3. Timeline Mapの設置と設定
  4. 4. TimelineMapの設置と設定 • ソースコードの取得 • 初期設定ファイルの編集 • サーバーへのアップロード • その他のカスタマイズ
  5. 5. TimelineMapの設置と設定 • ソースコードの取得 ファイルのダウンロード ファイル内容の確認
  6. 6. ファイルのダウンロード http://ueno-lab.com/ystream/index.php?page_id=61
  7. 7. ファイル内容の確認 今回編集するファイル ・config.php ・pc.php ・pc.css ・db.xml ・ht.access
  8. 8. TimelineMapの設置と設定 • 初期設定ファイル(config.php)の編集 Googlemaps APIの取得 緯度経度の設定 ズーム設定 タイムラインバンド
  9. 9. Googlemaps APIの取得 「Google Maps API に登録する」ページへ 地図を表示出来る状態にします
  10. 10. 利用規約への同意にチェックを入れ、 mapを設置するURLを記入し、 「APIキーを生成する」ボタンをクリック
  11. 11. 「次のキーが生成されました」以降の 文字列をコピーする
  12. 12. config.phpを開き、 「Googleから取得したAPIキー」に コピーした文字列を入力 「設置するアドレス」についても記入
  13. 13. 緯度経度の設定 http://42.195km.net/run-wiki/googlexy.htm 「座標を取得」ボタンを押すと 緯度、経度の値が取得出来る 地図を開いた際に最初に表示される 場所を決めます。
  14. 14. 経度:default_lng 緯度:default_lat へ、それぞれ入力
  15. 15. ズーム設定 地図を開いた際の最初の縮尺を決めます。
  16. 16. タイムラインバンドの設定 タイムラインの1目盛ごとの期間を決めます。
  17. 17. TimelineMapの設置と設定 • サーバーへのアップロード winscpの起動、サーバーへの接続 ファイルアップロード 権限設定
  18. 18. winscpの起動、サーバーへの接続 ファイルアップロード 今回使用するサーバー:http://gp01.sv.yc.tcu.ac.jp/ ログインID&パスワード:配布資料を参照してください hv_tlmapのフォルダを丸ごとアップロードします 権限設定 db.xml :rw-rw-rw(666) up/img :rwxrwxrwx(777) up/imgs:rwxrwxrwx(777) 特に以下のファイルについて設定します
  19. 19. TimelineMapの設置と設定 • その他カスタム(主にpc.phpの編集) マーカーアイコンの変更 タイムラインバンドの幅を変える カテゴリ設定の変更 投稿者を限定する(ベーシック認証) 画像アップローダーについて
  20. 20. マーカーアイコンの変更 KsGMapDataMarker( "a",//カテゴリ "./Images/marker_a/standard01%count%.png" ,   //マーカーに使用する画像の保存場所(%count%:連番) "./Images/marker_a/standard_shadow.png",   //マーカーの影に使用する画像の保存場所 ",[A-Z]", //マーカーの連番の種類(数字:[0-9],英字:[A-Z]) 20,//アイコン幅 34,//アイコン高さ 37,//アイコン影幅 34,//アイコン影高さ 10,34, //アイコンの設置点 10,2); //情報ウィンドウ(吹き出し)の開始点 詳しくは以下を参照 http://www.ksgmap.jp/document/marker.html pc.php 72行目付近
  21. 21. http://www.ksgmap.jp/download/material.html 配布されている 素材ファイル
  22. 22. http://www.powerhut.co.uk/googlemaps/custom_markers.php アイコン自作に役立つサイト
  23. 23. タイムラインバンドの幅を変える pc.php 171行目付近
  24. 24. TL上部 TL下部 width: 20% width: 80% intervalPixels: 200
  25. 25. タイムラインバンド全体の幅を変えたい場合 pc.css 47行目付近 height: 200px;
  26. 26. カテゴリ設定の変更
  27. 27. 投稿者を限定する(ベーシック認証)
  28. 28. 投稿者を限定する(ベーシック認証) htpasswd -bc(1回目のみ) (ファイル保管場所) (投稿用ユーザ名) (投稿用パスワード) htpasswd -b(2回目以降) (ファイル保管場所) (投稿用ユーザ名) (投稿用パスワード) ●アップロード先でファイル名「.htaccess」を変更する ●「teraterm」などのターミナルソフトでログインし、以下のコマンドを実行する ●「lib」→「restraint」のフォルダに移動し、「ht.access」を以下のように編集 ●winSCPなどでファイルをアップロード
  29. 29. 画像アップローダーについて ●mapのURLの末尾に「/up」を付けることでアクセス可能 ●サムネイルを自動的に作成してくれる  (サムネイル:画像を一覧しやすくするために縮小したもの)  →mapの吹き出しに画像を差し込みたい場合に利用すると良い 「画像一覧」をクリックすると一覧へ
  30. 30. サムネイルをコピーしたURLを登録フォームに記載
  31. 31. スマートフォンでの利用について
  32. 32. 講師紹介 • 加藤大騎さん 慶應義塾大学 安村研究室 修士2年 TimelineMap 製作者
  33. 33. マップコンテンツを作るための チームづくり
  34. 34. マップコンテンツを作るための チームづくり • データ収集 • mapデザイン • データ打ち込み • ブログへ詳細記事を書く • ページデザイン 必要な工程
  35. 35. 事例:横浜歴史マップ(前田,2009)
  36. 36. マップコンテンツを作るための チームづくり • 学生と地域住民の方による共同活動 • 主な情報収集→インタビュー 街を歩きながら 資料を参照しながら
  37. 37. 福井氏のネットワーク 横浜コミュニティデザインラボ 前田氏のネットワーク 上野研究室 ギークコミュニティ 前田氏福井氏 地域情報 マップシステム 設置・運用 ※ギーク:技術オタク
  38. 38. マップコンテンツを作るための チームづくり • 地域コミュニティのネットワークを活用して 情報を収集する • データを打ち込み始める前に mapのデザインを固めておく必要がある →Timelineバンド、カテゴリ、  マーカーアイコン等 • 地図だけでなく、関連するページを考慮した 総合的なデザインが必要

×