HTML5 プロジェクトの舞台裏

~とあるSVG女子の開発記録~

自己紹介

他には

本日の流れ
SVGの現状と今後の紹介と
SVG女子作成の流れを紹介
SVGとは

SVG (Scalable Vector Graphics)とは

SVG (Scalable Vector Graphics)とは

10年

WEBの世界が SVG の真の実力を発見するのに要した時間である

SVG 1.0は2001年W3C勧告(SVG 1.1は2003年勧告)

SVGを体験 - SVGで笑い男

SVGで笑い男 - jsdo.it - share JavaScript, HTML5 and CSS

簡単に言うと
「テキストで記述された、JavaScript、CSSで操作できる画像形式」

と言うと、CSS3で画像を記述することもできますが

CSSでキュウべえ(FULL)を描いてみた - jsdo.it - share JavaScript, HTML5 and CSS

SVGはより画像の記述に特化した技術です

というか、CSSは画像を記述する技術じゃない

SVGの現状

正直Web上ではぎりぎり使えるかどうか微妙な所

ただし、SVG自体のポテンシャルは高いし、おそらく近いうちにかなり使えるところに来る

SVGの今後

SVGの今後

SVGでコンテンツを作成する場合、以下のような流れでコンテンツを作成することができる
  1. Illustratorでデザイン作成
  2. SVG書き出し
  3. JS組み込み、サーバサイドとの連携
Flashと同じような流れでテキストコンテンツが作成ができる!

プログラマとデザイナが直接連携できる!

実際使えるの?

実際使えるの?

SVGは基本的に重い

同じ機能があるならできるだけJSやCSSで実装したほうがいい

どう使えるの?

SVGに関して社内のデザイナに聞きました

  • 容量を気にせず大きな画像が使えるのでサイトの背景に1枚画像を敷くようなデザインが可能に
  • CSSから変更できるので画像内のフォント設定や透過度をサイト全体で調整できるのもうれしい
  • ただし、レイヤー名やパスの構造がCSSやJSに影響するので事前設計が重要になる
  • どこまで使えるかはまだ事前に調査する必要がある

ここまでのまとめ

  • SVGはそろそろ使える
  • 問題はブラウザがサポートしているか
  • 機能は非常に豊富だが、速度はあまり早くない
  • ブラウザサポートが進めば高速化されると思うので今後に期待
SVGの現状と今後の紹介 完
SVG女子作成の流れを紹介

目次

全体の構成

アニメーションの再生までは1ページでJSで画面遷移
SVGアニメの再生は別ドメインでiframe
色の変更時も再読込はせずにオンラインで反映

全体の構成

アニメーションの再生までは1ページでJSで画面遷移

全体の構成

SVGアニメの再生は別ドメインでiframe

全体の構成

色の変更時も再読込はせずにオンラインで反映

作成フロー

高速化手法

初期コードは見通しはいいが読み込みが非常に遅かった

この時点で読み込みに3分かかる

改修開始

演出の追加

当初は画面表示開始直後からローディングに入り、完全に読み込みが完了したあとvideoの再生、SVGアニメの再生を行っていた

そこで初期表示画面を追加し、「入り口/Enter」ボタンクリック後ローディング画面へ移行するように変更

裏では「入り口/Enter」ボタンクリック前も読み込みを行なっている

video再生時も裏で軽いシーンをゆっくり読み込む

まだ遅い

DocumentFragmentの活用

DOM Treeに追加されていない要素を使った要素の操作

初期コードではsvgの読み込みとDOM Treeへの追加を同時に行なっていた処理を、svgの読み込みとDOM Treeへの追加を分離

これによりバックグラウンドでの読み込みを詳細に制御できるようになる

video再生時は重いシーンを読み込むと再生が停止してしまうため読み込むシーンを制御したかった

まだ遅い

SVGのレイヤー化

当初SVGファイルは単純に連続再生していた

シーンによっては背景が同じなので背景とキャラクターを分離して別々に動かすことに

アニメーション再生中にJSの処理を追加するとCPUを食うが、SVGが軽量化されたことでメモリ管理の負荷が減って相殺

シーン毎の背景遷移をJSに記述する

お、割といい感じ

CDNの活用

SVGファイルをCloudFrontに設置しCDNから読み込む

もともとアメリカ西海岸のEC2使ってたのもあってデータローディングが高速化(20秒>3秒)

ただ、外部ドメインになるのでクロスドメイン通信が必要

SVGを読み込むhtml、jsをSDNに設置しjsdo.it側からpostMessage通信することで解決

CloudFrontは任意のヘッダが設定できないため、Access-Control-Allow-Originできないことに注意

いける

その他細かい修正

ここまでのまとめ

ご清聴ありがとうございました

時間が余れば開発に使ったツールの紹介

Pages: 1/1