svgアニメーションを実装してみよう 20150207
TRANSCRIPT
SVGアニメーションを 実装してみよう！
JavaScript祭スピンオフ！ フロントエンド祭り in Co-Edo
Let’s begin SVG!
Self-Intoroduction
職 種：アプリケーションエンジニア(LAMP/Java/Oracle）
最近の願望：Rails開発 & スマホアプリ開発をしてみたい。
好きなもの：JavaScript
一緒に勉強しましょう( ́ ▽ ` )ﾉ
Self-Intoroduction
• WordPressもくもく倶楽部@Co-Edo
• Swiftビギナーズ倶楽部@Co-Edohttp://swift-beginners.doorkeeper.jp/
http://wp-moku.doorkeeper.jp/
• Ruby on Rails ビギナーズ倶楽部@Co-Edo http://ror-beginners.doorkeeper.jp/
勉強会やってます！
Today's Agenda
１）SVGって何ですか？
２）SVGの使い方
３）SVGアニメーションを実装してみよう！
４）SVG・Canvasどう使う？
５）便利なプラグイン紹介
１）SVGって何ですか？
■正式名称は
（スケーラブル ベクター グラフィックス）Scalable Vector Graphics
拡張可能なベクター画像
（IE8以前は外部ライブラリが必要）
１）SVGって何ですか？
画像ファイル形式のひとつです。SVGの他には、PNG、JPG、GIF等がある。
(́･ω･`) ｼｮﾎﾞｰﾝ
なんだ・・・ 単なる画像ファイルか
１）SVGって何ですか？
数値と式で計算して 表示する画像
(`･ω･́) ｼｬｷｰﾝ ただの画像じゃないよ！
<svg> <circle cx="200" cy="120" r="100" fill="green" /> </svg>
１）SVGって何ですか？決定的に他のファイル形式とは違う特長がある！
SVGは
XMLでマークアップする。
ベクター形式（数値や式）で画像を扱う。
JPG PNG GIF…etc
ビットマップ（ラスター）形式で画像を扱う。
拡大縮小をすると画像が荒れる。
拡大縮小などをしても画像が荒れない。
ベクターとビットマップって？
ビットマップ（ラスタ）画像 （点が集まったデータ）
ベクター画像 （数値と式のデータ）
SVGのいいところ
<svg>要素に、テキストが書ける。 <text>要素として記述してグラフィックの 構成要素として扱うことができるので、 SEOに有効になる。
<svg width="1100" height="500"> <text x="50" y="500" font-size="500">SVG</text> </svg>
SVGのいいところ
ロゴやアイコンをSVGで保持すると、 多様化するディスプレイのサイズや、 Retinaディスプレイのような
ハイエンド機種にも対応が楽になる。
えっ！？でも、大変じゃない？数値と式で
ロゴやアイコンを 書くなんてムリ！！
心配無料です！Illustratorで、SVG出力
超簡単！
心配無料です！Illustratorで、SVG出力
▪️SVGファイルを保存 「メインメニュー」>「ファイル」>「保存 / 別名で保存」>「SVG」を選択
ファイルを 見てみましょう
心配無料です！２）SVGの使い方
2-1）<img>タグを使う<img src="icon.svg" />
2-2）<object>タグを使う<object type="image/svg+xml" data="icon.svg"></object>
2-4）インラインSVGHTML5から、インラインSVGがサポートされ、 HTML内にSVGを直接記述が可能。
2-3）CSSのBackgroundプロパティに指定html { background-image: url(icon.svg); }
３）SVGアニメーションを実装してみよう！
DEMO
４）SVG・Canvasどう使う？
Canvasとは：
• 動的な2次元ビットマップ画像を描画するHTML要素。
• Canvasは、HTML5から新しく追加された。
• アニメーション機能がない。
• JavaScripベースで動的に図を描くことができる。
• ビットマップ・グラフィックスなので拡大縮小すると画質の劣化が発生する。
• 主要ブラウザの最新版で実装されている（IE8以前は外部ライブラリが必要）
４）SVG・Canvasどう使う？
４）SVG・Canvasどう使う？
SVG： 図形はDOM要素なので、マウスクリック等のイベントに対する実装が簡単。 なので、図形のパーツに連動した処理や、JavaScriptとの親和性が高い。 画像のサイズが大きいデータは、数値で描画できるので高速な傾向がある。
Canvas： ビットマップなので、ピクセル操作ができる。 SVGのような、図形に対するイベント処理は難しい。 SVGのようにDOMを構成しないので、オブジェクト数が多い描画が高速。
５）便利なプラグイン紹介
Snap.svg（Adobeが公開したSVG用JavaScriptライブラリ） http://snapsvg.io/ svg.js（軽量JavaScriptライブラリ） http://www.svgjs.com/
SVG向けJSプラグイン
・CREATEJS（Adobeがスポンサー・ActionScriptライクに記述ができる。） http://www.createjs.com/#!/CreateJS ・jCanvas（jQueryライクに記述ができる。） http://calebevans.me/projects/jcanvas/ ・JapanMap（canvasで日本地図を表示してくれるjQueryプラグイン） http://takemaru-hirai.github.io/japan-map/
Canvas向けJSプラグイン
Thank you :)