html5-20100626
TRANSCRIPT
NSEG-Favicon の作り方～ロゴもあります～
天野卓 @ ToI 企画
自己紹介
佐久市で Web アプリケーションを開発しています。
LAMP
Movable Type のプラグインをフリーソフトウェアと
して配布しています。
http://tec.toi-planning.net
テストの勉強をしています。
RSpec
この発表に関する資料
以下の URL からダウンロードできます。
http://www.slideshare.net/tag/nseg
今日作るもの
http://www.screencast.com/t/ZWY1YjQ0M
http://github.com/usualoma/NSEG
キーワード ( 技術的な要素 )
HTML5
SVG (Scalable Vector Graphics)
canvas 要素
CSS3
transform
JavaScript
jQuery
動作環境
SVG を表示することのできる Web ブラウザ
Chrome
Firefox
Opera
Safari
用意するもの
Web ブラウザ (IE を除く )
SVG エディタ (Dia)
テキストエディタ (Vim)
NSEG を愛する気持ち
作業手順
１. SVG エディタで絵を書く
２. 書き出した SVG ファイルを編集する
３. HTML ファイルを作成して SVG を読み込む
４. JavaScript でアニメーションさせる
５. テストを書いて確認する
1. SVG エディタで絵を書く
1. SVG エディタで絵を書く
シンプルな方が後で扱いやすい
2. 書き出した SVG ファイルを編集する
JavaScript から扱うために印をつける
「 <g id="prefecture"> 」 「 <g id="nseg"> 」
SVG ファイルは XML で書かれているのでテキスト
エディタで編集することができる
2. 書き出した SVG ファイルを編集する
3. HTML ファイルを作成してSVG を読み込む
インライン SVG を使いたい
( 既存の JavaScript ライブラリをそのまま使うため )
<html> <body> <svg> ... <path /> ... </svg> </body></html>
3. HTML ファイルを作成してSVG を読み込む
Chrome や Safari は SVG には対応しているがイ
ンラインの SVG には対応していない ?
=> ライブラリを使ったらうまくいった
「 jQuery SVG 」
4. JavaScript でアニメーションさせる
jQuery を使うと簡単
path.css('opacity', 0);path.animate( { opacity: 1 }, 500 );
path.drawPath({ duration: 800, easing : 'easeOutBounce',});
5. テストを書いて確認する
QUnit
jQuery のプロジェクトで使われているユニットテストの
フレームワーク
HTML ファイルにスクリプトを読み込むだけで簡単に使
うことができる
5. テストを書いて確認する
SVG だとテキストベースでテストが書きやすい
完成しました
ロゴも
http://www.screencast.com/t/MzljMzllZ
http://jsdo.it/usualoma/nseg
動作環境
canvas 要素を利用できる Web ブラウザ
Chrome
Firefox
Opera
Safari
用意するもの
Web ブラウザ (IE を除く )
グラフィックスソフト
テキストエディタ (Vim)
NSEG を愛する気持ち
作業手順
１. グラフィックスソフトで絵を描く
２. ( 作成した画像ファイルを JavaScript で扱いやすい
形式 (JSON) に変換する )
３. JavaScript でアニメーションさせる
完成しました
SVG と canvas
納得しました！※ 本人の了解を得て掲載しています。
以上です
参考 URL
Dia
http://projects.gnome.org/dia/
jQuery SVG
http://keith-wood.name/svg.html
QUnit
http://docs.jquery.com/QUnit
jsdo.it
http://jsdo.it/
ご静聴ありがとうございました
NSEG では引き続き
ロゴと Favicon を募集しています