Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Like this? Share it with your network

Share

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

  • 4,715 views
Uploaded on

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

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,715
On Slideshare
3,811
From Embeds
904
Number of Embeds
2

Actions

Shares
Downloads
10
Comments
0
Likes
7

Embeds 904

http://kadoppe.com 903
http://webcache.googleusercontent.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. SVGでつくるインタラクティブWebアプリケーション2012/10/06 神戸ITフェスティバルShareWis Inc. 門脇 恒平 1
  • 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
  • 13. 本日のアウトライン1.SVGってなんだろう?2.SVGでWebアプリケーション?3.SVGをマークアップしてみよう4.画像に変化や動きをつけてみよう5.JavaScript/CSSと連携させよう 13
  • 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. 特徴1 拡大・縮小してもキレイに見える! 理由: SVGは ベクターグラフィック だから 20
  • 21. ビットマップ vs ベクターグラフィック 点で画像を表現 線で画像を表現 出展: http://ja.wikipedia.org/wiki/ファイル:Bitmap_VS_SVG.svg 21
  • 22. 特徴2 パーツを個別に扱える •パーツの移動 •パーツの色・形の変更 •パーツのクリック検出 •など 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で事例1 モーフィングにしてみた モーフィングの例 27 http://jsdo.it/norahiko/monster-spoo
  • 28. 事例2 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)• 2つのフィルタリング結果を合成 (feBlend)• 平行移動 (feOffset)• 光をあてる (feDiffuseLighting, feSpecularLighting) 38
  • 39. ドロップシャドウを適用する• 4つのフィルタを利用• ぼかし (feGaussianBlur)• 色の変換 (feColorMatrix)• 平行移動 (feOffset)• 2つのフィルタリング結果を合成 (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