20151121開発体験会資料です。

1. 全国路線図API体験会
2015年11月21日
ヴァル研究所 コンテンツ開発部
今井信夫
1

2. アジェンダ
1. 全国路線図の概要説明 (10分)
2. ハンズオン形式によるAPI体験 (60分)
1. 環境準備
2. 路線図上の駅にピンを立てる
3. 路線図上の特定の路線を強調表示させる
4. 路線図上の駅に任意の写真や情報を載せる
5. 路線図上で選択した駅の情報を取得する
6. 路線図上の駅間を強調表示させる
3. 応用事例の説明 (15分)
1. ユーザーレイヤーの応用（停車駅案内）
2. 画面内の駅リスト表示
4. フリータイム (40分)
5. 質疑応答 (20分)
2

3. 現在の路線図
3

4. 現在の路線図へのニーズ
1. 全国を俯瞰できる路線図が欲しい
– 現状の路線図は、地域ごとに一枚絵で書かれ
ているため、全体を俯瞰するのが難しい。
2. 表現手段としての路線図がほしい
– 経路探索時の駅選択の入力補助には使用でき
るが、他の用途では使用できない。
4

5. そこで新しい路線図を作りました
1. 全国を俯瞰できる路線図
– 全国すべての鉄道路線をシームレスに見渡す
ことができる路線図
2. プログラマブル
– WEBサイト、スマホなどの各種アプリ
ケーションとの連携を容易に実現する
路線図操作用のJavaScriptAPI
5

6. 全国路線図構成
6
Tile
Server
API
Server

7. 全国路線図JavaScriptAPIの機能
1. 路線図を表示すること
2. 初期値設定（中心地指定、表示範囲指定）
3. デバック用コンソール表示
4. 駅をマーキングすること（標準マーカー、カスタマイズマーカー）
5. 路線色を変えること
6. 駅間色を変えること
7. 最寄り駅取得
8. ハッシュ機能(URLの末尾に座標情報を表示)
9. サイドメニュー、カスタマイズサイドメニュー
10.ユーザレイヤー（任意の駅に画像、テキスト、リンクを貼れる）
11.etc...
7

8. サンプル 1/4
8
路線を強調表示

9. サンプル ２/4
9
駅間を強調表示

10. サンプル ３/4
10
駅に写真を置く

11. サンプル ４/4
11
英語版も作成中（他の言語も今後追加予定）

12. ハンズオン形式によるAPI体験
12
環境準備
1. chromeなどの開発者コンソールのあるブラウザをご用意ください
2. zipファイルの内容確認
1. stations.csv 駅マスタ
2. lines.csv 路線マスタ
3. sections.csv 駅間マスタ
→大雑把ですが、駅間コードは路線コード＋連番で構成されています
4. index.htmlと01～09のHTML
3. index.htmlをブラウザで開く
4. 「1.最小限のテンプレート」リンクを押下して、
路線図が表示されることを確認してください

13. 最小限のテンプレート
13
1. コードの概要
01_basic.html
全国路線図の基本構造です。
最小限のテンプレートになります。
body onloadでinit関数を呼び、その中でRosenクラス
をイニシャライズしています。
このイニシャライザーの中で初期値の設定などを行い
ます。divタグに付けた、id(この場合はmap)とnew
Rosenの第一引数は合わせてください。

14. 路線図上の駅にピンを立てる
14
1. コードの概要
02_station_marker.html
rosen.setStationMarker(22828);
→東京駅の駅コードは22828
2. 問題
1. 高円寺(22671)に標準マーカーを置いてください。
2. 渋谷(22715)にクリックイベント付きのマーカを置いてくだ
さい。
3. 品川(22709)にカスタムマーカーをおいてください。

15. 路線図上の特定路線を強調表示させる
15
1. コードの概要
03_line_color.html
rosen.highlightLine(339);
→都営地下鉄三田線の路線コードが339
2. 問題
1. 有楽町線(334)を強調表示してください。
2. 東急東横線(314)を赤色(ff0000)で強調表示してください
。

16. 路線図上の駅に任意の写真や情報を載せる
16
1. コードの概要
04_user_layer.html
rosen.setStationPopup(22828, ポップアップクラス);
→引数に駅コード＋ポップアップクラス
■ポップアップクラスの種類
1. imagePopup
2. textPopup
3. htmlPopup
2. 問題
1. 六本木(23049)に画像を表示してください(imagePopupを使用)
2. 目黒(23018)にテキストを表示してください(textPopupを使用)

17. 路線図上で選択した駅の情報を取得する
17
1. コードの概要
05_station_info.html
rosen.on("selectStation", function(data) {}
→クリックイベントの設置＆コールバックのdataの中に
駅情報が入ってきます
2. 問題
クリックした駅にマーカーを設置して、テキストポップアッ
プでその駅名を表示してください

18. 路線図上で駅間選択して路線を表示させる
18
1. コードの概要
06_highlight_section.html
rosen.highlightSections([3390190]);
→都営地下鉄三田線(神保町 - 水道橋)の駅間コードが3390190
2. 問題
1. 東西線(高田馬場 - 飯田橋)を強調表示してください。
[3310120,3310130,3310140,3310150]
2. 上記を赤色(ff0000)で強調表示してください。

19. クリックイベント設置
19
1. 駅クリックイベント
07_click_station.html
rosen.on("selectStation", function(data) {}
2. 路線クリックイベント
08_click_line.html
rosen.on("selectLine", function(data) {}
3. 駅間クリックイベント
09_click_section.html
rosen.on("selectSection", function(data) {}

20. 休憩タイム

21. 応用事例の説明（青山）
1. カスタムマーカーを使用した停車駅案内
2. 画面内の駅リスト表示
3. その他サンプル
21

22. 本日はありがとうございました。
22