HTML5-20100626

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 を募集しています

HTML5-20100626

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (15)

Similar to HTML5-20100626

Similar to HTML5-20100626 (20)

Recently uploaded

Recently uploaded (10)

HTML5-20100626