インラインSVGをつかって地図っぽいものをつくってみる

インラインSVGをつかって
地図っぽいものをつくってみる
2012/7/21 第5回 HTML5など勉強会
HTML5-West.jp Kadoppe

1

自己紹介
• 名前：門脇恒平 @kadoppe

• 職業：エンジニア
Rails, (Java¦Coﬀee)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/

この資料読むだけでSVGはOK！

5

SVGの３つの特徴

ベクター XML インライン
グラフィックフォーマット SVG

6

ベクター
グラフィックベクター vs ビットマップ

点で画像を表現線で画像を表現
出展: http://ja.wikipedia.org/wiki/ファイル:Bitmap_VS_SVG.svg
7

XML
フォーマット画像をXMLで書く！
• プログラマーが大好き(?)なXMLが使える

• 円：<circle>要素

• 四角：<rect>要素

• 線：<path>要素

• グループ化：<g>要素

出展: http://ja.wikipedia.org/wiki/ファイル:SVG.svg
8

インライン
SVG HTMLにSVGを埋め込む！

• HTML文書に直接SVGの要素を記述できる

<!DOCTYPE html>
<html> CSSによるルック
<head></head>
アンドフィール変更
<body>
<h1>SVG画像だよ。<h1>
が可能に！
<svg>
<circle>
</svg> JavaScriptによる操作/
</body> イベントハンドリング
</html>

9

対応ブラウザ

>= 1.5 >= 9 最初から >= 3.0

ただし、ブラウザ間でサポートしている機能、挙動に違いがある

10

SVGデモまとめサイト「svgwow」
http://svgwow.org

11

Chapter 2:
インラインSVGでつくる
地図っぽいもの

12

Webブラウザ + SVG = ？？

インラインSVGを使って何かつくりたい！

SVGといったら「ズーム」だ！

Webブラウザ + ズーム = 地図！？

13

Webブラウザ + SVG = 地図

納得！（仕事でもつくってるしね。）

14

Webブラウザで動く地図といえば？

Bing Maps Google Maps

特徴その１：ドラッグで地図を動かせる（Pan）

特徴その２：ホイールでズームレベルを変更できる
（Zoom in / Zoom out)
15

ライブコーディング
• ゴール：Zoom / Pan機能を備えた地図っぽいもの

• Step 1：地図データの準備

• Step 2：地図データをSVGで描画

• Step 3：CSSでスタイルを整える

• Step 4：Panの実装

• Step 5：Zoomの実装 ※ JavaScriptのライブラリは使わない

16

Step 1
地図データの準備

地図データは自分で作成したい！

• 完璧な地図データは作成できない
→ 円で陸地を、背景で海を表現

• 各円の半径、中心座標データを
JSON形式で作成完成イメージ

17

Step 2
地図データをSVGで描画
• 今回使うSVG要素

• <svg>要素：SVG画像を表す
<svg></svg>

• <circle>要素：円を表す

<circle cx=”10” cy=”20” r=”5”>

<circle>要素をappendChild()を使って追加していく

18

Step 2 補足: createElementNS()
// 要素は生成されない
var circleElm1 = document.createElement(“circle”);

// 要素は生成される
var circleElm2 = document.createElementNS(
“http://www.w3.org/2000/svg”, “circle”
);

• document.createElementNS()

• XML名前空間を指定して要素を生成するメソッド

• SVG要素の生成にはSVGのXML名前空間の指定が必要

19

Step 3
CSSでスタイルを整える

地図に見えない！

現在の地図

CSSで背景色、要素の色を指定する

20

Step 4
Panの実装

マウスドラッグで地図をPanしたい！

• 実装手順を分割

1. <circle>要素をまとめて動かせるようにする

2. ドラッグ操作を検出してPanできるようにする

21

Step 4 1. <circle>要素をまとめて動かす
• 今回使うSVG要素：<g>要素

• 役割１：複数のSVG要素をグループ化する
<g><circle><circle><circle><circle></g>

• 役割２：子要素の位置/形状をまとめて操作する (transform属性)

<g transform=”translate(50, 25)”></g>

とりあえず決め打ちで地図をPanしてみる

22

Step 4 2. ドラッグ操作を検出してPanする

• <svg>要素に以下のイベントハンドラを登録

• mousedown → mousemove → mouseup
ドラッグ開始ドラッグ中ドラッグ終了

ドラッグ中のマウスポインタの移動量を元に
<g>要素のtransform属性の値を変更する

23

Step 5
Zoomの実装

マウスホイールで地図をZoomしたい！

• 実装手順を分割

1. <circle>要素をまとめて拡大/縮小できるように

2. ホイール操作を検出してZoomできるようにする

24

Step 5 1. <circle>要素をまとめて拡大縮小

• <g>要素のtransform属性にscale()を指定


<g transform=”translate(50, 25) scale(2)”></g>

とりあえずは決め打ちでZoomしてみる

25

Step 5 2. ホイール操作を検出してZoomする
• ホイール操作の検出方法はブラウザによって異なる

• Google Chromeの場合

• <svg>要素に mousewheel イベントハンドラを登録

• 他のブラウザの場合

• 参考記事： http://codaholic.org/?p=1139
今回はChromeのみ対応
マウスホイールが動いた向きをもとに
<g>要素のtransform属性の値を変更する
26

完成！

描画 Pan Zoom

27

改善ポイント

• Google Maps / Bing Maps に近づくために

• Zoom機能のクロスブラウザ対応

• マウスポインタの位置に向かってZoomしたい

• Panした時の挙動に慣性をつける

28

まとめ
• SVGの３つの特徴

• ベクターグラフィック

• XMLフォーマット

• インラインSVG

• Webブラウザ + SVG = 地図

• JavaScriptとCSSを使って地図っぽいものをつくった
29

おしまい！

ご清聴ありがとうございました！

30

インラインSVGをつかって地図っぽいものをつくってみる

インラインSVGをつかって地図っぽいものをつくってみる

Recommended

More Related Content

What's hot

What's hot(20)

Viewers also liked

Viewers also liked(9)

Similar to インラインSVGをつかって地図っぽいものをつくってみる

Similar to インラインSVGをつかって地図っぽいものをつくってみる(20)

More from Kohei Kadowaki

More from Kohei Kadowaki(14)

Recently uploaded

Recently uploaded(7)

インラインSVGをつかって地図っぽいものをつくってみる