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

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

4,990

Published on

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

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

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×