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