I want Make full svg website

3,200 views
3,103 views

Published on

I tryed create full svg web site, that report.

Published in: Internet

I want Make full svg website

  1. 1. Full SVG Web Site を 作ろうと思って 古くて最近盛り上がってる(はず)の 画像形式について話すよ! 2014/05/31 Ohotech #9 (自称)Ohotech札幌支部員 まんじゅ(´ん`)
  2. 2. 本日のサマリー ● 古くてナウい(?)SVGは一体何者なのかについて ● SVGでなにができるのか ● SVGで自分がやろうとしていることとか
  3. 3. さて、
  4. 4. このスライドもSVGで作ろうと 思ったのですが
  5. 5. 「SVGでそんな
  6. 6. 『大量のオブジェクトを制御して
  7. 7. つけたり消したりして
  8. 8. 容量肥大化する』のは
  9. 9. 嫌だなあ……。
  10. 10. という事で普通にLibre Office Impressで進め ます。
  11. 11. 自己紹介 ● Who am I ?
  12. 12. で、
  13. 13. SVG #とは
  14. 14. SVGとは Wikipedia 日本語版 「Scalable Vector Graphics」の項より ● 2次元ベクターイメージ用の画像形式 ● 以下もサポート – アニメーション – ユーザーインタラクション ● XMLがベース – HTMLもXMLベースです
  15. 15. ベクターイメージ ● Vector Image ● 座標系 ● グラフ
  16. 16. ベクターイメージ ● 数学的に図形を表現 – 点と点の距離 – 方程式のグラフ – ベジェ曲線とか ● 拡大しても画像が劣化しない ● 描画する際は演算するのでコンピューターには負荷はかかる – (けれど今のコンピューターの処理能力では気にならない)
  17. 17. 「方眼紙のマスに色をつけて塗りつぶす」 のがラスタ― 「方眼紙にグラフを書いて表現する」 のがベクター
  18. 18. 改めて、
  19. 19. SVGとは Wikipedia 日本語版 「Scalable Vector Graphics」の項より ● 2次元ベクターイメージ用の画像形式 ● 以下もサポート – アニメーション – ユーザーインタラクション ● XMLがベース – HTMLもXMLベースです
  20. 20. アニメーション ● パラパラアニメ形式ではない ● どちらかというとAdobe (旧:Macromedia)Flashっぽい – パスの変形 – パスの変形による図形の変形
  21. 21. アニメーションの実装方法 ● 3つある – SVGのanimation要素やtransform要素 – CSSのanimation要素やtransform要素 – Javascriptでゴリゴリ動かす ● CSSやJavascriptでの実装が多い – しかし問題が ● Javascriptは上手に組まないとリソースを食いつぶす(ちょっと重要) ● CSSにSVGのアニメーション処理まで任せちゃうの?(思想の問題)
  22. 22. Javascript実装の利点 ● Webブラウザ上で表現できることは何でもできる ● Javascriptでアニメーションを実装したことのある人なら容易 に実装可能(かも) ● SVGのanimation要素と比べると確実に(書いたとおりに) 動作する 参考資料:svg要素の基本的な使い方まとめ アニメーション http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_12.htm
  23. 23. Javascript実装の問題点 ● 実装の仕方によってはすごく重くなる。 – たくさんのSVG画像を移動させたりするとなおのこと ● Javascriptのアニメーション全般に言えることかな? ● コードが肥大化する – SVGのanimation要素などで実装できるところまでJavascriptで実装 すると面倒くさいことを色々書かないといけない ● Javascriptで後からSVGのanimation要素を追加したり、 編集したりする分にはさほど問題ないかな? 参考資料:svg要素の基本的な使い方まとめ アニメーション http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_12.htm
  24. 24. CSS実装の利点 ● SVGそのものとSVGのアニメーションを別々にできる ● CSSでアニメーションを実装したことのある人なら容易に実装 可能(かも) ● Javascript実装よりは取っ付き易い 参考資料:svg要素の基本的な使い方まとめ アニメーション http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_12.htm
  25. 25. CSS実装の問題点 ● コードが肥大化する – ブラウザエンジンによっての記述を足したりしないと いけない場合もある ● のかな? ● SVG要素内で操作できない属性がある – 位置や範囲を指定するxやyやcxやcyなどの属性 – HTML要素を操作するのには向いているのかな? 参考資料:svg要素の基本的な使い方まとめ アニメーション http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_12.htm
  26. 26. SVG実装の利点 ● 一つのSVGにまとめることができる ● 描画タイミングはブラウザが持ってくれる – CSSもかな? ● 案外CSSでアニメーションを実装したことのある人なら容易に 実装可能 – 筆者の個人的憶測による ● Javascript実装よりは取っ付き易い 参考資料:svg要素の基本的な使い方まとめ アニメーション http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_12.htm
  27. 27. SVG実装の問題点 ● 細かいことができない – シーンの切り替えや動くタイミングの厳密な定義が難しい – SVGファイルの構成によっては動かないこともある ● ブラウザによって動作が違ったりも 参考資料:svg要素の基本的な使い方まとめ アニメーション http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_12.htm
  28. 28. なので 「部品はSVG」 「全体制御はJavascript」 というのがお勧めです。 参考資料:svg要素の基本的な使い方まとめ アニメーション http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_12.htm
  29. 29. Demo 実際みてみる
  30. 30. で、
  31. 31. 個人的にやろうとしていること
  32. 32. Full SVG Web Site を 作ろうと思って 古くて最近盛り上がってる(はず)の 画像形式について話すよ! 2014/05/31 Ohotech #9 (自称)Ohotech札幌支部員 まんじゅ(´ん`)
  33. 33. Full SVG Web Site 全部SVGのWebサイト
  34. 34. あわよくば
  35. 35. ポートフォリオ 全部SVGのポートフォリオ
  36. 36. 今の成果物 ● https://github.com/manzyun/FullSVGWebPage
  37. 37. 参考資料としてMozilla Developer Network Preference is MDN
  38. 38. 「だって、某プログラミングの動画入門サイトの HTMLやCSSの参考リファレンスも、ここを推し てたよね」 (^ん^
  39. 39. 見てみた
  40. 40. (^ん^;
  41. 41. (いや、きっとリファレンスは大丈夫だ) (^ん^
  42. 42. 見てみた
  43. 43. (´ん`
  44. 44. (´A`
  45. 45. MDNでこれなの?!
  46. 46. (もしかして、 翻訳されてないから使われてないのか?) (´q`
  47. 47. (であれば翻訳したら使われ始める?) (´A`
  48. 48. (今引き受けてる仕事も 暇になっちゃったしなあ) (´A`
  49. 49. (Ubuntuの方でろくに 翻訳したことないしなあ) (´A`
  50. 50. (……、) (´A`
  51. 51. (……暇つぶしに翻訳してみるか) (´ん`
  52. 52. ということで、
  53. 53. ということで、 Mozilla Developer Networkの翻訳は
  54. 54. すごく気楽にできる!
  55. 55. Demo 実際に翻訳してみる
  56. 56. まとめ ● SVGはオープン標準画像データとして勧告してる – W3Cで規格されてるよ – 実は2001年からある規格だよ ● アニメーションも可能 – 使い方によってはFlashの代替になるかも? – ただしソースコードが見えるので使いドコロは見極めよう ● Mozilla Developer Networkで翻訳してみないか? – みんなの翻訳で幸せになれる人がきっと居る
  57. 57. このスライドはまんじゅ(´ん`)(高橋秀羅)により クリエイティブ・コモンズ 表示 4.0ライセンスの元に提供されております。 ご静聴ありがとうございます ● 参考資料 – Wikipedia ● http://ja.wikipedia.org/ – Mozilla Developer Network ● http://developer.mozilla.org/ja/ – SVG要素の基本的な使い方まとめ ● http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo.htm

×