SVGでつくるインタラクティブWebアプリケーション

5,603
-1

Published on

2012年10月6日に開催された神戸ITフェスティバル 2012におけるセミナー枠で使用したプレゼン資料です。

サンプルコードはこちら↓
https://github.com/kadoppe/kobe-it-fes-2012

0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,603
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
17
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

SVGでつくるインタラクティブWebアプリケーション

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

×