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