SlideShare a Scribd company logo
第1回 HTML5minutes!!
∼triton-js∼
面白法人カヤック
HTMLファイ部・人事部
中農稔
http://www.kayac.com/team/nakano-minoru
エンジニア(JSer、ASer)
ウェブアニメーター
自己紹介
SNS
nenjiru
https://twitter.com/nenjiru
http://qiita.com/nenjiru
http://jsdo.it/nenjiru
ぱんちら.js
JavaScriptでテクスチャマッピング
http://www.slideshare.net/minorunakanou/pantirajs-html5
本日のテーマ
レスポンシブおっぱいでまなぶ
スケーラブルグラフィックス
レスポンシブ
応答性のよいデザイン
柔軟性
おっぱい
ウィンドウリサイズに応じて
ゆれるおっぱいつくってみた
アダルトあ
http://adult-ah.com/oppai/
SVG
スケーラブルベクターグラフィックス
拡大縮小してもイメージが劣化しない
Adobe Illustrator でデータをつくれる
DOMのように扱えるグラフィック
書式
<svg>	
<circle cx="0" cy="0" r="30" />	
<path d="M 0 0 q 150 -100 300 0" />	
</svg>
d属性のパスデータ構文
・M modeTo 座標移動
・L lineTo 直線をひく
・C curveTo 三次ベジェ
・Q Quadratic 二次ベジェ
Illustrator
SVG形式で出力
表示デモ
demo-svg
クリックイベントでアニメーションが開始する
*JavaScript未使用!
oh. . .
<path id="bikiniLeft" stroke="#000000" stroke-width="1.3197" stroke-miterlimit="10" d="M3
c-40.545,88.065-76.878,196.041-76.878,196.041S163.219,503.9,163.393,692.887c0,97.
c62.188,23.381,146.33,29.262,209.33,6.51c159.213-49.248,157.615-215.391,157.615-2
c-71.497-80.744-96.098-160.163-96.098-160.163s26.907-97.38,66.628-183.228c39.72-85.8
c-9.236,7.918-35.049,22.476-35.049,22.476C426.858,92.042,425.139,86.715,386.276,1
<animate attributeType="XML" attributeName="d" repeatCount=""	
dur="300ms" 	
calcMode = "spline"	
keySplines = "0 0.5 0.5 1;0.5 0 1 0.5"	
keyTimes = "0;0.5;1"	
values="	
M386.276,171.125	
c-40.545,88.065-76.878,196.041-76.878,196.041S163.219,503.9,163.393,692.887c0,97.
c62.188,23.381,146.33,29.262,209.33,6.51c159.213-49.248,157.615-215.391,157.615-2
c-71.497-80.744-96.098-160.163-96.098-160.163s26.907-97.38,66.628-183.228c39.72-8
c-9.236,7.918-35.049,22.476-35.049,22.476C426.858,92.042,425.139,86.715,386.276,1
;	
M386.276,171.125	
c-40.545,88.065-76.878,196.041-76.878,196.041S163.219,503.9,163.393,692.887c0,97.
c62.188,23.381,146.33,29.262,209.33,6.51c159.213-49.248,157.615-215.391,157.615-2
c-71.497-80.744-96.098-160.163-96.098-160.163s26.907-97.38,66.628-183.228c39.72-8
c-9.236,7.918-35.049,22.476-35.049,22.476C426.858,92.042,425.139,86.715,386.276,1
; M386.276,171.125	
c-40.545,88.065-76.878,196.041-76.878,196.041S163.219,503.9,163.393,692.887c0,97.
d属性しんどい
とても高機能なSVGですが
d属性をダイレクトにJSで操作して
アニメーションさせるのはつらいです
ライブラリ
•Raphaël
•Snap.svg
•D3.js
•Paper.js ←オススメ
Paper.js のオブジェクト構造は
Illustratorライクで非常に理解しやすい
Path.segments[0].handleIn.x	
Path.segments[0].handleIn.y	
Path.segments[0].handleOut.x	
Path.segments[0].handleOut.y
debug-mode
まとめ
・SVGまだまだ可能性ひめてる
・SVGはイラレでデータをつくれる
・SVGもっと普及してほしい
・SVGのライブラリもそれなりにある
https://atnd.org/events/53863
来週やります!
ご静聴ありがとうございました

More Related Content

レスポンシブおっぱいでまなぶスケーラブルグラフィックス