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