HTML5-20100626

1,883 views

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,883
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5-20100626

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

×