インラインSVGをつかって地図っぽいものをつくってみる
30
2012/7/21 第5回 HTML5など勉強会 HTML5-West.jp Kadoppe インラインSVGをつかって 地図っぽいものをつくってみる 1
-
Upload
kohei-kadowaki -
Category
Technology
-
view
5.482 -
download
3
description
2012/7/21に大阪で開催された「第5回 HTML5など勉強会」でのプレゼン資料です。
Transcript of インラインSVGをつかって地図っぽいものをつくってみる
2012/7/21 第5回 HTML5など勉強会HTML5-West.jp Kadoppe
インラインSVGをつかって地図っぽいものをつくってみる
1
自己紹介•名前：門脇 恒平 @kadoppe
•職業：エンジニアRails, (Java|Coffee)Script, Objective-C
•肩書き：HTML5-West.jpコアメンバー/ShareWis Inc. CTO
•趣味：ポッドキャスト/ Ust配信
2
最近ももクロが好きすぎて辛いです。
本日の資料
•プレゼンスライド
• SlideShare: http://www.slideshare.net/kadoppe
•ソースコード
• GitHub: https://github.com/kadoppe
3
Chapter 1:
SVGとはなんぞや。
4
いい資料あり〼
•才色兼備なグラフィックス - SVGが見せるWebの未来Mozilla Japan - Brian Birtlesさん
http://people.mozilla.org/~bbirtles/pres/fxdevcon-2012/
5
この資料読むだけでSVGはOK！
SVGの３つの特徴
6
ベクターグラフィック
XMLフォーマット
インラインSVG
ベクター vs ビットマップ
7出展: http://ja.wikipedia.org/wiki/ファイル:Bitmap_VS_SVG.svg
ベクターグラフィック
点で画像を表現 線で画像を表現
画像をXMLで書く！•プログラマーが大好き(?)なXMLが使える
•円：<circle>要素
•四角：<rect>要素
•線：<path>要素
•グループ化：<g>要素
8出展: http://ja.wikipedia.org/wiki/ファイル:SVG.svg
XMLフォーマット
HTMLにSVGを埋め込む！
•HTML文書に直接SVGの要素を記述できる
9
インラインSVG
<!DOCTYPE html><html> <head></head> <body> <h1>SVG画像だよ。<h1>
<svg> <circle> </svg> </body></html>
CSSによるルックアンドフィール変更
JavaScriptによる操作/イベントハンドリング
が可能に！
対応ブラウザ
10
>= 1.5 >= 9 最初から >= 3.0
ただし、ブラウザ間でサポートしている機能、挙動に違いがある
Chapter 2:
インラインSVGでつくる地図っぽいもの
12
Webブラウザ + SVG = ？？
13
インラインSVGを使って何かつくりたい！
SVGといったら「ズーム」だ！
Webブラウザ + ズーム = 地図！？
Webブラウザ + SVG = 地図
14
納得！（仕事でもつくってるしね。）
Webブラウザで動く地図といえば？
15
Bing Maps Google Maps
特徴その１：ドラッグで地図を動かせる（Pan）
特徴その２：ホイールでズームレベルを変更できる（Zoom in / Zoom out)
ライブコーディング•ゴール：Zoom / Pan機能を備えた地図っぽいもの
• Step 1：地図データの準備
• Step 2：地図データをSVGで描画
• Step 3：CSSでスタイルを整える
• Step 4：Panの実装
• Step 5：Zoomの実装16
※ JavaScriptのライブラリは使わない
地図データの準備
•完璧な地図データは作成できない→ 円で陸地を、背景で海を表現
•各円の半径、中心座標データをJSON形式で作成
17
Step 1
地図データは自分で作成したい！
完成イメージ
地図データをSVGで描画• 今回使うSVG要素
• <svg>要素：SVG画像を表す
• <circle>要素：円を表す
18
Step 2
<svg><!-- SVG画像 --></svg>
<!-- 座標(10, 20)に半径5pxの円を表示 --><circle cx=”10” cy=”20” r=”5”>
<circle>要素をappendChild()を使って追加していく
補足: createElementNS()
• document.createElementNS()
• XML名前空間を指定して要素を生成するメソッド
• SVG要素の生成にはSVGのXML名前空間の指定が必要
19
Step 2
// 要素は生成されないvar circleElm1 = document.createElement(“circle”);
// 要素は生成されるvar circleElm2 = document.createElementNS( “http://www.w3.org/2000/svg”, “circle” );
CSSでスタイルを整える
20
Step 3
地図に見えない！
現在の”地図”
CSSで背景色、要素の色を指定する
Panの実装
•実装手順を分割
1. <circle>要素をまとめて動かせるようにする
2. ドラッグ操作を検出してPanできるようにする
21
Step 4
マウスドラッグで地図をPanしたい！
1. <circle>要素をまとめて動かす• 今回使うSVG要素：<g>要素
• 役割１：複数のSVG要素をグループ化する
• 役割２：子要素の位置/形状をまとめて操作する (transform属性)
22
Step 4
<g><circle><circle><circle><circle></g>
<!-- 子要素をx軸方向に50px, y軸方向に25px動かす -->
<g transform=”translate(50, 25)”><!-- 略 --></g>
とりあえず決め打ちで地図をPanしてみる
2. ドラッグ操作を検出してPanする
• <svg>要素に以下のイベントハンドラを登録
•mousedown → mousemove → mouseup
23
Step 4
ドラッグ開始 ドラッグ中 ドラッグ終了
ドラッグ中のマウスポインタの移動量を元に<g>要素のtransform属性の値を変更する
Zoomの実装
•実装手順を分割
1. <circle>要素をまとめて拡大/縮小できるように
2. ホイール操作を検出してZoomできるようにする
24
Step 5
マウスホイールで地図をZoomしたい！
1. <circle>要素をまとめて拡大縮小
• <g>要素のtransform属性にscale()を指定
25
Step 5
とりあえずは決め打ちでZoomしてみる
<!-- 子要素のサイズを２倍に -->
<g transform=”translate(50, 25) scale(2)”></g>
2. ホイール操作を検出してZoomする
• ホイール操作の検出方法はブラウザによって異なる
• Google Chromeの場合
• <svg>要素に mousewheel イベントハンドラを登録
• 他のブラウザの場合
• 参考記事： http://codaholic.org/?p=1139
26
Step 5
マウスホイールが動いた向きをもとに<g>要素のtransform属性の値を変更する
今回はChromeのみ対応
完成！
27
描画 Pan Zoom
改善ポイント
• Google Maps / Bing Maps に近づくために
• Zoom機能のクロスブラウザ対応
•マウスポインタの位置に向かってZoomしたい
• Panした時の挙動に慣性をつける
28
まとめ• SVGの３つの特徴
•ベクターグラフィック
• XMLフォーマット
•インラインSVG
•Webブラウザ + SVG = 地図
• JavaScriptとCSSを使って地図っぽいものをつくった
29
おしまい！
30
ご清聴ありがとうございました！
