Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

12,464 views

Published on

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

Published in: Technology
  • Be the first to comment

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

×