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

7,680 views

Published on

2012/7/21に大阪で開催された「第5回 HTML5など勉強会」でのプレゼン資料です。

Published in: Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,680
On SlideShare
0
From Embeds
0
Number of Embeds
836
Actions
Shares
0
Downloads
16
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

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

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

×