第1回 HTML5minutes!! https://atnd.org/events/52545 登壇資料

1. 第1回 HTML5minutes!!
∼triton-js∼

2. 面白法人カヤック
HTMLファイ部・人事部
中農稔
http://www.kayac.com/team/nakano-minoru
エンジニア（JSer、ASer）
ウェブアニメーター
自己紹介

3. SNS
nenjiru
https://twitter.com/nenjiru
http://qiita.com/nenjiru
http://jsdo.it/nenjiru

4. ぱんちら.js
JavaScriptでテクスチャマッピング
http://www.slideshare.net/minorunakanou/pantirajs-html5

5. 本日のテーマ

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

7. レスポンシブ

8. 応答性のよいデザイン

9. 柔軟性

10. おっぱい

11. ウィンドウリサイズに応じて
ゆれるおっぱいつくってみた
アダルトあ
http://adult-ah.com/oppai/

12. SVG
スケーラブルベクターグラフィックス
拡大縮小してもイメージが劣化しない
Adobe Illustrator でデータをつくれる
DOMのように扱えるグラフィック

13. 書式
<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 二次ベジェ

14. Illustrator
SVG形式で出力

15. 表示デモ
demo-svg
クリックイベントでアニメーションが開始する
＊JavaScript未使用！

16. 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.

17. d属性しんどい
とても高機能なSVGですが
d属性をダイレクトにJSで操作して
アニメーションさせるのはつらいです

18. ライブラリ
•Raphaël
•Snap.svg
•D3.js
•Paper.js ←オススメ

19. 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

20. まとめ
・SVGまだまだ可能性ひめてる
・SVGはイラレでデータをつくれる
・SVGもっと普及してほしい
・SVGのライブラリもそれなりにある

21. https://atnd.org/events/53863
来週やります！

22. ご静聴ありがとうございました