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

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

2. 本日の講座内容
• Timeline Mapの設置と設定
• スマートフォンでの利用について
• マップコンテンツを作るためのチームづくり

3. Timeline Mapの設置と設定

4. TimelineMapの設置と設定
• ソースコードの取得
• 初期設定ファイルの編集
• サーバーへのアップロード
• その他のカスタマイズ

5. TimelineMapの設置と設定
• ソースコードの取得
ファイルのダウンロード
ファイル内容の確認

6. ファイルのダウンロード
http://ueno-lab.com/ystream/index.php?page_id=61

7. ファイル内容の確認
今回編集するファイル
・config.php
・pc.php
・pc.css
・db.xml
・ht.access

8. TimelineMapの設置と設定
• 初期設定ファイル(config.php)の編集
Googlemaps APIの取得
緯度経度の設定
ズーム設定
タイムラインバンド

9. Googlemaps APIの取得
「Google Maps API に登録する」ページへ
地図を表示出来る状態にします

10. 利用規約への同意にチェックを入れ、
mapを設置するURLを記入し、
「ＡＰＩキーを生成する」ボタンをクリック

11. 「次のキーが生成されました」以降の
文字列をコピーする

12. config.phpを開き、
「Googleから取得したAPIキー」に
コピーした文字列を入力
「設置するアドレス」についても記入

13. 緯度経度の設定
http://42.195km.net/run-wiki/googlexy.htm
「座標を取得」ボタンを押すと
緯度、経度の値が取得出来る
地図を開いた際に最初に表示される
場所を決めます。

14. 経度：default_lng
緯度：default_lat へ、それぞれ入力

15. ズーム設定
地図を開いた際の最初の縮尺を決めます。

17. タイムラインバンドの設定
タイムラインの１目盛ごとの期間を決めます。

18. TimelineMapの設置と設定
• サーバーへのアップロード
winscpの起動、サーバーへの接続
ファイルアップロード
権限設定

19. 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)
特に以下のファイルについて設定します

20. TimelineMapの設置と設定
• その他カスタム(主にpc.phpの編集)
マーカーアイコンの変更
タイムラインバンドの幅を変える
カテゴリ設定の変更
投稿者を限定する（ベーシック認証）
画像アップローダーについて

21. マーカーアイコンの変更
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行目付近

22. http://www.ksgmap.jp/download/material.html
配布されている
素材ファイル

23. http://www.powerhut.co.uk/googlemaps/custom_markers.php
アイコン自作に役立つサイト

24. タイムラインバンドの幅を変える
pc.php
171行目付近

25. TL上部
TL下部
width: 20%
width: 80%
intervalPixels: 200

26. タイムラインバンド全体の幅を変えたい場合
pc.css
47行目付近
height: 200px;

27. カテゴリ設定の変更

29. 投稿者を限定する（ベーシック認証）

30. 投稿者を限定する（ベーシック認証）
htpasswd -bc(１回目のみ) （ファイル保管場所） (投稿用ユーザ名) (投稿用パスワード)
htpasswd -b(２回目以降) （ファイル保管場所） (投稿用ユーザ名) (投稿用パスワード)
●アップロード先でファイル名「.htaccess」を変更する
●「teraterm」などのターミナルソフトでログインし、以下のコマンドを実行する
●「lib」→「restraint」のフォルダに移動し、「ht.access」を以下のように編集
●winSCPなどでファイルをアップロード

31. 画像アップローダーについて
●mapのURLの末尾に「/up」を付けることでアクセス可能
●サムネイルを自動的に作成してくれる
（サムネイル：画像を一覧しやすくするために縮小したもの）
→mapの吹き出しに画像を差し込みたい場合に利用すると良い
「画像一覧」をクリックすると一覧へ

32. サムネイルをコピーしたＵＲＬを登録フォームに記載

33. スマートフォンでの利用について

34. 講師紹介
• 加藤大騎さん
慶應義塾大学 安村研究室 修士２年
TimelineMap 製作者

35. マップコンテンツを作るための
チームづくり

36. マップコンテンツを作るための
チームづくり
• データ収集
• mapデザイン
• データ打ち込み
• ブログへ詳細記事を書く
• ページデザイン
必要な工程

37. 事例：横浜歴史マップ(前田,2009)

38. マップコンテンツを作るための
チームづくり
• 学生と地域住民の方による共同活動
• 主な情報収集→インタビュー
街を歩きながら
資料を参照しながら

39. 福井氏のネットワーク
横浜コミュニティデザインラボ
前田氏のネットワーク
上野研究室
ギークコミュニティ
前田氏福井氏
地域情報 マップシステム
設置・運用
※ギーク：技術オタク

40. マップコンテンツを作るための
チームづくり
• 地域コミュニティのネットワークを活用して
情報を収集する
• データを打ち込み始める前に
mapのデザインを固めておく必要がある
→Timelineバンド、カテゴリ、
マーカーアイコン等
• 地図だけでなく、関連するページを考慮した
総合的なデザインが必要