インラインSVGをつかって地図っぽいものをつくってみる
•
10 likes•15,130 views
2012/7/21に大阪で開催された「第5回 HTML5など勉強会」でのプレゼン資料です。
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to インラインSVGをつかって地図っぽいものをつくってみる
Similar to インラインSVGをつかって地図っぽいものをつくってみる (20)
More from Kohei Kadowaki
More from Kohei Kadowaki (14)
Recently uploaded
Recently uploaded (8)
インライン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