I want Make full svg website

Full SVG Web Site を作ろうと思って古くて最近盛り上がってる（はず）の画像形式について話すよ！ 2014/05/31 Ohotech #9 （自称）Ohotech札幌支部員まんじゅ（´ん｀）

本日のサマリー ● 古くてナウい（？）SVGは一体何者なのかについて ● SVGでなにができるのか ● SVGで自分がやろうとしていることとか

さて、

このスライドもSVGで作ろうと思ったのですが

「SVGでそんな

『大量のオブジェクトを制御して

つけたり消したりして

容量肥大化する』のは

嫌だなあ……。

という事で普通にLibre Office Impressで進めます。

自己紹介 ● Who am I ?

で、

SVG #とは

SVGとは Wikipedia 日本語版「Scalable Vector Graphics」の項より ● 2次元ベクターイメージ用の画像形式 ● 以下もサポート – アニメーション – ユーザーインタラクション ● XMLがベース – HTMLもXMLベースです

ベクターイメージ ● Vector Image ● 座標系 ● グラフ

ベクターイメージ ● 数学的に図形を表現 – 点と点の距離 – 方程式のグラフ – ベジェ曲線とか ● 拡大しても画像が劣化しない ● 描画する際は演算するのでコンピューターには負荷はかかる – （けれど今のコンピューターの処理能力では気にならない）

「方眼紙のマスに色をつけて塗りつぶす」のがラスタ― 「方眼紙にグラフを書いて表現する」のがベクター

改めて、

SVGとは Wikipedia 日本語版「Scalable Vector Graphics」の項より ● 2次元ベクターイメージ用の画像形式 ● 以下もサポート – アニメーション – ユーザーインタラクション ● XMLがベース – HTMLもXMLベースです

アニメーション ● パラパラアニメ形式ではない ● どちらかというとAdobe (旧:Macromedia)Flashっぽい – パスの変形 – パスの変形による図形の変形

アニメーションの実装方法 ● ３つある – SVGのanimation要素やtransform要素 – CSSのanimation要素やtransform要素 – Javascriptでゴリゴリ動かす ● CSSやJavascriptでの実装が多い – しかし問題が ● Javascriptは上手に組まないとリソースを食いつぶす（ちょっと重要） ● CSSにSVGのアニメーション処理まで任せちゃうの？（思想の問題）

Javascript実装の利点 ● Webブラウザ上で表現できることは何でもできる ● Javascriptでアニメーションを実装したことのある人なら容易に実装可能（かも） ● SVGのanimation要素と比べると確実に（書いたとおりに）動作する参考資料：svg要素の基本的な使い方まとめ　アニメーション http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_12.htm

Javascript実装の問題点 ● 実装の仕方によってはすごく重くなる。 – たくさんのSVG画像を移動させたりするとなおのこと ● Javascriptのアニメーション全般に言えることかな？ ● コードが肥大化する – SVGのanimation要素などで実装できるところまでJavascriptで実装すると面倒くさいことを色々書かないといけない ● Javascriptで後からSVGのanimation要素を追加したり、編集したりする分にはさほど問題ないかな？参考資料：svg要素の基本的な使い方まとめ　アニメーション http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_12.htm

CSS実装の利点 ● SVGそのものとSVGのアニメーションを別々にできる ● CSSでアニメーションを実装したことのある人なら容易に実装可能（かも） ● Javascript実装よりは取っ付き易い参考資料：svg要素の基本的な使い方まとめ　アニメーション http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_12.htm

CSS実装の問題点 ● コードが肥大化する – ブラウザエンジンによっての記述を足したりしないといけない場合もある ● のかな？ ● SVG要素内で操作できない属性がある – 位置や範囲を指定するxやyやcxやcyなどの属性 – HTML要素を操作するのには向いているのかな？参考資料：svg要素の基本的な使い方まとめ　アニメーション http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_12.htm

SVG実装の利点 ● 一つのSVGにまとめることができる ● 描画タイミングはブラウザが持ってくれる – CSSもかな？ ● 案外CSSでアニメーションを実装したことのある人なら容易に実装可能 – 筆者の個人的憶測による ● Javascript実装よりは取っ付き易い参考資料：svg要素の基本的な使い方まとめ　アニメーション http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_12.htm

SVG実装の問題点 ● 細かいことができない – シーンの切り替えや動くタイミングの厳密な定義が難しい – SVGファイルの構成によっては動かないこともある ● ブラウザによって動作が違ったりも参考資料：svg要素の基本的な使い方まとめ　アニメーション http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_12.htm

なので「部品はSVG」「全体制御はJavascript」というのがお勧めです。参考資料：svg要素の基本的な使い方まとめ　アニメーション http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_12.htm

Demo 実際みてみる

で、

個人的にやろうとしていること

Full SVG Web Site を作ろうと思って古くて最近盛り上がってる（はず）の画像形式について話すよ！ 2014/05/31 Ohotech #9 （自称）Ohotech札幌支部員まんじゅ（´ん｀）

Full SVG Web Site 全部SVGのWebサイト

あわよくば

ポートフォリオ全部SVGのポートフォリオ

今の成果物 ● https://github.com/manzyun/FullSVGWebPage

参考資料としてMozilla Developer Network Preference is MDN

「だって、某プログラミングの動画入門サイトの HTMLやCSSの参考リファレンスも、ここを推してたよね」（＾ん＾

見てみた

（＾ん＾；

（いや、きっとリファレンスは大丈夫だ）（＾ん＾

見てみた

（´ん｀

（´A｀

MDNでこれなの？！

（もしかして、翻訳されてないから使われてないのか？）（´ｑ｀

（であれば翻訳したら使われ始める？）（´A｀

（今引き受けてる仕事も暇になっちゃったしなあ）（´A｀

（Ubuntuの方でろくに翻訳したことないしなあ）（´A｀

（……、）（´A｀

（……暇つぶしに翻訳してみるか）（´ん｀

ということで、

ということで、 Mozilla Developer Networkの翻訳は

すごく気楽にできる！

Demo 実際に翻訳してみる

まとめ ● SVGはオープン標準画像データとして勧告してる – W3Cで規格されてるよ – 実は2001年からある規格だよ ● アニメーションも可能 – 使い方によってはFlashの代替になるかも？ – ただしソースコードが見えるので使いドコロは見極めよう ● Mozilla Developer Networkで翻訳してみないか？ – みんなの翻訳で幸せになれる人がきっと居る

このスライドはまんじゅ（´ん｀）（高橋秀羅）によりクリエイティブ・コモンズ表示 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

I want Make full svg website

by Hidetsugu Takahashi, Parasite

on Jun 08, 2014

Statistics

Views

Actions

1 Embed 1

Accessibility

Categories

Upload Details

Usage Rights

Report content

I want Make full svg website Presentation Transcript