狠狠撸

インライン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

本日の資料

? プレゼンスライド

? 狠狠撸Share: 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

厂痴骋デモまとめサイト「蝉惫驳飞辞飞」
http://svgwow.org

11

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

12

Webブラウザ + SVG = ？？

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

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

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

13

Webブラウザ + SVG = 地図

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

14

奥别产ブラウザで动く地図といえば？

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

狠狠撸

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

More Related Content

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