SVGでつくるインタラクティブWebアプリケーション
•
16 gostaram•8,228 visualizações
2012年10月6日に開催された神戸ITフェスティバル 2012におけるセミナー枠で使用したプレゼン資料です。 サンプルコードはこちら↓ https://github.com/kadoppe/kobe-it-fes-2012
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a SVGでつくるインタラクティブWebアプリケーション
Semelhante a SVGでつくるインタラクティブWebアプリケーション (20)
Mais de Kohei Kadowaki
Mais de Kohei Kadowaki (13)
SVGでつくるインタラクティブWebアプリケーション
- 2. 自己紹介 • 名前：門脇 恒平 @kadoppe • 職業：ソフトウェアエンジニア Webアプリケーション / iOSアプリケーション • 所属： ShareWis Inc. CTO / HTML5-West.jpコアメンバ • 昨日までCEATEC Japanという展示会で 出展してました。 2
- 3. 本日の資料 • プレゼンスライド • SlideShare: http://www.slideshare.net/kadoppe • サンプルコード • GitHub: https://github.com/kadoppe/kobe-it-fes-2012 3
- 4. SVG、知ってますか？ 4
- 5. 質問1 名前を聞いたことある人？ 5
- 6. 質問2 少しでも触ったことがある人？ 6
- 7. 質問3 実際に仕事で使っている人？ 7
- 8. 僕とSVG • 実際に仕事でバリバリ使ってます • SVGを使うようになって世界が広がりました • どんな風に使っているのかについては後ほど 8
- 9. SVGを一言で表すと 画像 マークアップ ＋ フォーマット 言語 9
- 10. SVGの仕様 全部読むのは大変！ 10
- 11. SVGマスターへの3ステップ Step1 SVGの基本的な特徴を理解し、実際のWebサイ 初級 ト制作に役立てることができる Step2 SVGの各種表現方法を駆使して、画像に対して 中級 いろいろな効果を加えることができる Step3 SVGとJavaScript / CSS を連携させて、Web 上級 アプリケーションを開発することができる 11
- 12. SVGマスターへの3ステップ Step1 SVGの基本的な特徴を理解し、実際のWebサイ 初級 ト制作に役立てることができる 今日の主題 Step2 SVGの各種表現方法を駆使して、画像に対して 中級 いろいろな効果を加えることができる Step3 SVGとJavaScript / CSS を連携させて、Web 上級 アプリケーションを開発することができる 12
- 14. SVGってなんだろう？ 14
- 15. SVGとは？ • S: Scalable （拡大可能な） • V: Vector （ベクター） • G: Graphics （画像） • 直訳すると「拡大可能なベクター画像」 15
- 16. SVGを一言で表すと 画像 マークアップ ＋ フォーマット 言語 16
- 17. 画像フォーマットとしてのSVG • JPEG, PNG, GIFのなかま • Quick Lookで表示できる • Webブラウザでも表示できる • Illustratorなどのアプリケーションから書き出せる 17
- 18. マークアップ言語としてのSVG • XML形式のマークアップ言語 • HTMLみたいなものだと考えればOK • 画像なのにテキストエディタで作成・編集可能 18
- 19. SVGの特徴 特徴1 拡大・縮小してもキレイに見える！ 特徴2 画像内のパーツを個別に扱える 19
- 20. 特徴１ 拡大・縮小してもキレイに見える！ 理由： SVGは ベクターグラフィック だから 20
- 21. ビットマップ vs ベクターグラフィック 点で画像を表現 線で画像を表現 出展: http://ja.wikipedia.org/wiki/ファイル:Bitmap_VS_SVG.svg 21
- 22. 特徴２ パーツを個別に扱える •パーツの移動 •パーツの色・形の変更 •パーツのクリック検出 •など 22
- 23. その他の機能 • フィルター（ぼかし、ドロップシャドウなど） • クリッピングマスク • グラデーション • アニメーション • テキスト情報の保持 23
- 24. SVGでWebアプリケーション？ 24
- 25. SVGとWebアプリの関係 <!DOCTYPE html> • インラインSVG <html> <head></head> （HTML5の機能のひとつ） <body> <h1>SVG画像だよ。<h1> • HTMLファイルの中にSVG <svg> <circle> のタグを直接記述できる </svg> </body> </html> 25
- 26. インラインSVGによってできること その1 CSSによる見た目の変更 その2 JavaScriptによる画像の操作、イベント検出 グラフィカル & インタラクティブな Webアプリケーションが実現可能に 26
- 27. はいだしょうこ画伯の5年間の成長を、SVGで 事例１ モーフィングにしてみた モーフィングの例 27 http://jsdo.it/norahiko/monster-spoo
- 28. 事例２ ShareWis 学習を冒険に変える無料学習サイト 「知識の地図」をSVGで実装 28 http://share-wis.com
- 29. SVGをマークアップしてみよう 29
- 30. SVGで描画できる基本的な図形 • 四角形 (<rect>要素) • 円 (<circle>要素) • 楕円 (<ellipse>要素) • 直線 (<line>要素) • 折れ線 (<polyline>要素) • 多角形 (<polygon>要素) • パス (<path>要素) 30
- 31. 円 (<circle>要素) • 役割 • 円を描画する <circle r="半径" cx="円の中心のx座標" cy="円の中心のy座標" fill="塗りつぶし色" /> 31
- 32. 直線 (<line>要素) • 役割 • 直線を描画する <line x1="始点のx座標" y1="始点のy座標" x2="終点のx座標" y2="終点のy座標" stroke=”線の色” /> 32
- 33. DEMO 33
- 34. 画像に変化や動きをつけてみよう 34
- 35. 画像に変化や動きをつける方法 • 変化 • SVGフィルタ • 動き • SVGアニメーション 35
- 36. SVGフィルタ 変換後 元画像 フィルタ 画像 さまざまな効果をSVG画像に適用 36
- 37. フィルタの重ねがけ 変換後 元画像 フィルタ フィルタ 画像 複数の効果を重ねることもできる 37
- 38. SVGフィルタの例 • 色の変換 (feColorMatrix) • ぼかし (feGaussianBlur) • ２つのフィルタリング結果を合成 (feBlend) • 平行移動 (feOffset) • 光をあてる (feDiffuseLighting, feSpecularLighting) 38
- 39. ドロップシャドウを適用する • 4つのフィルタを利用 • ぼかし (feGaussianBlur) • 色の変換 (feColorMatrix) • 平行移動 (feOffset) • ２つのフィルタリング結果を合成 (feBlend) 39
- 40. DEMO 40
- 41. ドロップシャドウまとめ 元画像 ぼかし 半透明 ずらす （アルファチャンネル） 元画像 合成 ドロップ シャドウ 41
- 42. SVGアニメーション • 図形の属性値に時間的変化を与えられる機能 • 例） • <circle>要素の半径 • <circle>要素の中心座標 • <circle>要素の塗りつぶし色 42
- 43. <animate>要素 • アニメーションさせたい図形の子要素として追加する <animate attributeName=”変化させる属性名” begin=”開始時間” dur=”継続時間” from=”属性の初期値” to=”属性の終了値 repeatCount=”リピート回数” /> 43
- 44. DEMO 44
- 45. JavaScript / CSSと連携させよう 45
- 46. CSSとの連携 • 図形の属性値をCSSで指定 <style> circle.large { fill: #FFBB00; } </style> <circle class=”large” ... /> 46
- 47. DEMO 47
- 48. JavaScriptとの連携 • できること • 画像に図形をリアルタイムに追加 • 図形にイベントハンドラを登録 SVGをつかったインタラクティブな Webアプリケーションが実現可能に 48
- 49. 画像に図形をリアルタイムに追加 手順1 createElementNS()メソッドで図形を生成 手順2 appendChild()メソッドで図形を描画 49
- 50. DEMO 50
- 51. 図形にイベントハンドラを登録 手順1 addEventListener()メソッドを呼び出す 手順2 イベント発生時の処理を実装 51
- 52. DEMO 52
- 53. まとめ • SVG • 画像フォーマット + マークアップ言語 • アニメーションや画像処理の機能が利用可能 • JavaScript + CSS + SVG • インタラクティブWebアプリケーションが実現可能 53
- 54. おしまい！ ご清聴ありがとうございました！ 54