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