才色兼備なグラフィックス

SVG が魅せる Web の未来

皆さま、こんにちは。Mozilla Japanのブライアンと申します。
今日は「才色兼備なグラフィックス」というテーマで話させていただきたいですが 最初に短い自己紹介をさせていただきます。

今日のテーマと打って変わって、私は才色兼備ではもちろんなくて、 グラフィックスについて話すくせに、デザイナーでもありません。

実は高校のとき、デザイナーになりたかったんですが、センスがなくてあきらめました。 それから、ウェブ開発もあちこちやりましたが、それも以外に難しかったです。
でも、私が悪いと思わなくて、ウェブが悪いと思いましたので、 ウェブを改善するため、2004年にボランティアとしてFirefoxの開発に参加し始めました。

今はMozilla JapanでSVGという技術、特にアニメーションの部分の開発に参加しながら、 そのSVGの標準活動もしております。

しかし、今日はSVGよりウェブより、最初にはモバイルアプリの開発を考慮していただきたいと思います。


iOS

Android
モバイルアプリを作るなら最初に色んな質問が出てきます。
まずiPhoneを対象にしようか?Androidを対象にしようか?

iOS

Android

Windows
Phone

または、Windows Phoneはどうしようか?
一つのプラットフォームに限らないため、Webアプリを作ろうとしても、


iOS

Android

Windows
Phone

タブレット

デスクトップ

どのデバイスを対象にするべきでしょうか。
スマホだけ?タブレットは?デスクトップは?

最近のは、アプリを作る機会が増えたにつれて、選択肢も増えてきました。

それで、今日の目的は…






同じアプリで
どんなデバイスでも
キレイに見えて
使いやすい
アプリの作り方

つまり、SVG?

… を学ぶことです。
[押し]それに対して、主要な要素は「SVG」という技術。
SVGを聞いたことある方は手を上げていただけますか?
SVGを実際に使ったことある方は手を上げていただけますか?

課題

今日はそのSVGについて少し説明してから、 アニメーションのアプリを参考にして、アプリの作り方を考慮します。
そして、みんなさんにそのアプリを使って見ていただきたいと思います。
最後には、これからのSVGの進化を簡単に紹介したいと思います。

Part 1SVGって、どういうもの?

才色兼備なグラフィックス

SVGとは…

簡単に言えば…

普通に説明するときは、SVGはスケーラブル・ベクター・グラフィックスと言われているんですが、
それはちょっとつまらなくて分かりにくいと思いますので、もっと簡単に言えば、
SVGは線でできている画像だと考えられます。


(ビットマップ)
PNG, JPEG等


(ベクター)
SVG
みんなさんはよくご存知だと思いますが、Web上でのグラフィックス、PNG、JPEGなどはビットマップ形式で、点でできています。[押し]
[また押し]SVGの場合は、ベクター形式で、線でできています。[押し]
その違いがあるため、SVGには大きな特徴二つあります。

特徴1いつもキレイに見える

PNG

SVG

まず、SVGはどんなに拡大しても、縮小しても、いつもキレイに見えること。
[押し]お家のでかいテレビの画面でも、
[押し]小さなスマホの画面でも、いつもキレイです。

そして、新しいiPadやMacBook Proのレティナーディスプレーがはやってくると、 この特徴はもっと重要になります。

ある出版社がiPad用の雑誌を全部ビットマップとして出していたんですが、 新しいiPadが出たとき、その高解像度(こうかいぞうど)の画面を生かすため 高解像度版も出したんですが、ファイルサイズが4倍になってしまって、 大きすぎる場合もありました。
SVGの場合は、解像度が高くてもファイルサイズが変わりません。

特徴2パーツが個別に変えられる


PNG
でも、SVGにはもう一つの特徴がございます。
このブタの絵をご覧ください。
私たちがこのブタの部品が認識できますが、
コンピュータが点しか見えないので、そのブタのパーツが区別できません。
例えば、足を動かしたければ、[押し]うまく分けられません。

特徴2パーツが個別に変えられる

SVG

移動

色などを変える

アニメーション

ヒットテスト

しかし、もしその絵が線でできているとしたら、 コンピュータもそのパーツを認識して、分けられます。[Mouse over parts]
それで、パーツを個別に動かせます。[押し]
色とかも変えられるし、パーツを透明(とうめい)にさせることもできます。[押し]
アニメーションもできます。[押し]
[また押し]そして、アプリケーションを作る際、 マウスのクリックはどのパーツに起こったかを判断することは、 つまりヒットテストは、難しいです。
でも、コンピュータが絵のパーツが認識できれば、それは簡単です。[Click parts + click back]

点 x 線

すなわち、SVGの画像が線でできているおかげで、アプリの開発、 特にモバイルのアプリの開発には、大きな利点が二つあります。
*いつもキレイに見えて、
*パーツが認識されて、
才色兼備なグラフィックスだと思ってほしいです。

しかし、SVGの魅力は線だけではありません。

SVGの機能


<circle cx="5" cy="5" r="20"/>

<path d="m84 239h100l200 300z"
 stroke="black" fill="none"/>
      
<text fill="white" stroke="black"
 font-size="28">
 <textPath xlink:href="#textPath">
  フォクすけ
 </textPath>
</text>
      

 <image xlink:href="clouds.jpg"
  height="200" width="300"/>
      
<mask id="eyeMask">
 <ellipse cx="150" cy="121"
   rx="78" ry="29" fill="white"/>
</mask>
<path mask="url(#eyeMask)" ... />
      
<linearGradient id="flameGrad">
 <stop stop-color="#BB180D"
   offset="0"/>
 <stop stop-color="#FFFC94"
   offset=".9"/>
</linearGradient>
<rect fill="url(#flameGrad)" ... />
      
<pattern id="tartan">
 <rect width="100" height="100"
  fill="#00710A"/>
 ...
</pattern>
<polygon fill="url(#tartan)" ... />
      
<filter id="shadowblur">
 <feGaussianBlur in="SourceGraphic"
   stdDeviation="5"/>
</filter>
<path filter="url(#shadowblur)" ... />
      
<style>
 .foot, .nose { fill: #BA00FF; }
 .skin { fill: #FBAEFF; }
</style>
      
<animate attributeName="width"
  dur="3s" repeatCount="2"
  from="100" to="200"
  keySplines="0 0 0.58 1"
  begin="2s; rect.click; animB.begin"/>
      

SVGの機能というと、まずSVGはHTMLのようにマークアップで書けます。 つまり、今まで使われているHTMLを生成(せいせい)する方法はだいたいSVGにも使えます。

例えば、SVGの機能の一つにパスがあります。パスのマークアップはこのようなものです。[押し]

同様にテキストはテキストのまま書かれます。[押し] それで、テキストはアクセスも、ローカライズも、検索もできます。 グーグルがSVGのテキストをインデックスしていますので、 検索エンジン対策にもSVGが役立ちます。

[押し]もちろん、SVGの中にはビットマップはまだ利用できます。 例えば、絵に写真を組み込むとき。

SVGにはPhotoshopやIllustratorのようにマスクとクリップの機能も入っています。[押し][また押し]

グラデーションも[押し]

パターンも[押し]

SVGには、ぼかしや照明効果などのようなフィルター効果を定義する機能もあります。[押し]

そして、HTMLと同様に、SVGにはCSSのスタイルを適用できます。[押し]ばいきんまんフォックすけ!

[押し]最後に、SVGで、マークアップを通じてアニメーションが作れます。 その方法で、複雑な効果でも、例えば、パスに沿って動くアニメーションが、 スクリプトを書かずに簡単に作れます。[押し]

Part 2SVGは、どんな場面で
適用したら良い?

今までは、SVGの特徴と機能を見てみましたが、どのようなアプリやサイトで使った方がいいでしょうか。

今、使える?

まず、実際に今は使えるでしょうか? 現在のブラウザがSVGをサポートしているでしょうか?

答えは全てのブラウザーの最新版がSVGをサポートしていますが 現在に使われているブラウザーだというと…

こういう感じになります。ご覧の通り、サポートはそこそこいいです。 SVGがサポートされていないもっとも使われているブラウザーはIE8です。

モバイルブラウザなら、Android 2のストックブラウザだけがSVGをサポートしていません。 Android 3から、ストックブラウザがSVGをサポートしています。

Polyfills

SVGは今、使える。

しかし、80%サポートを妥協する必要がありません。
SVGの代わりにVML、Flash、または<canvas>でSVGをサポートするPolyfillがいくつかあります。

このような対策で、99%ぐらいのブラウザーに対応できますので、SVGは今でも利用できると思います。

でも、使えることは使えますが、いつ使ったらよいでしょうか?
PNGとSVGの違いはもう、ブタの例を通じて、考慮しましたがCanvasとSVGの使い分けを考えましょう。

SVG x Canvas

まず、インタラクティブなグラフィックスなら、特にイベントを受け取るときはSVGがごく簡単です。

そして、もし画像を保存する必要があれば、SVGの方がふさわしい。Canvasからビットマップしか保存できませんから。

しかし、画像にはパーツが多ければ、SVGはそのパーツを全て管理しますので、SVGのメモリー使用量(しようりょう)がcanvasより高いです。 その場合はcanvasの方が速いかもしれません。

しかし、アプリによっては最適なアプローチは両方を適用することです。

例えば、Mozilla Glowを覚えている方もいらっしゃると思います。 Mozilla Glowの背景はSVGでできています。シリアライズできますから。
Canvasだったら、全部はスクリプトで書かなければなりませんので、大変だと思います。
しかし、ピカピカする円がcanvasで表示されています。それは、数が多くて、インタラクティブではないので、canvasの方が速いかもしれません。
それは、SVGを適用する例一つですが、実はWebには事例がたくさんあります。
Google Maps
ご存知ではない方もいらっしゃると思いますが、実はグーグルマップは ルート案内の機能にSVGを利用しています。 SVGだから、ズームインすると、その線も拡大されて、キレイに見えます。
Bing Map
Bingマップも同様にSVGを利用しています。
Google Docs
グーグル・ドキュメントの図形描画(ずけいびょうが)アプリではSVGファイル保存できるだけでなく アプリの中でもSVGが使われています。
SVGだから、ユーザがサイズを変更しても、印刷をしても、いつもキレイに見える グラフィックスを作成できます。
それに、パーツが分けられるので書かれたグラフィックスはあとで編集できます。
http://wafo.cpol.army.mil/issue/employment.svg
これは米軍(べいぐん)の求人サイトです。UIの全てはSVGなので、どの画面でも対応できます。
地図がズームイン、ズームアウトできるし、地図の内容もインタラクティブです。
http://wafo.cpol.army.mil/issue/employment.svg
例えば、ユーザが国や州をクリックすると、結果が絞り込めます(しぼりこめます)。
http://wallpapers.foxkeh.com/ja/
最後はフォクすけの壁紙メーカー。 このアプリには、フォクすけの絵とカレンダの部分はSVGで表示されています。 SVGのサイズが変更できますので、ユーザがデザインをカスタマイズして、 色んな画面サイズに、例えば携帯にも、壁紙の作成ができます。

Part 3SVGは、どうやって使う?

ここまではSVGが適用できる場面を考えましたが、具体的にどうやって作れるでしょうか?

これから、サンプルのアプリケーションを通じてSVGを作る技術を紹介したいと思います。

そのサンプル・アプリはアニメーション・エディターで、 タブレットでも、スマホでも、デスクトップでも使えるようにしたいです。

これはイラスト作家(さっか)さんからもらったデザインですが、これをWebアプリにしたいです。

まず、SVGの画像を作りましょう。

1) SVGのイラストを作る

これにはいくつかの方法があります。

一番簡単なのは、他人のイラストを使うことです。 Open Clipartというサイトには自由に使えるSVGファイルいっぱいあります。 そのままで使えるし、アプリに合わせてから使うこともできます。

自分のイラストを作るなら、いくつかのツールがあります。

もっとも有名なのはアドビイラストレータ。 今はSVGとして保存できますが、 最近アドビーさんはSVGのワーキンググループに積極的に参加されていますので、 これからアドビさんが更によいツールを開発することを期待しています。

イラストレータ以外のツールだというと…

Inkscape
まず、こちらはInkscapeです。イラストレータに似ていますが、オープンソースで無料で、SVG用の編集ツールです。
Inkscape
このスクショの右上にはSVGのフィルター効果の編集する機能。
右下にはSVGを直接に編集するためのXMLエディター。
SVG-edit

もう一つのツールは、ブラウザーの中で動くSVG edit.

このツールもSVG用のソフトでInkscapeと同様にSVGのマークアップも直接に編集できます。

トレース

しかし、グラフィックスを描くのではなく、ビットマップの画像をベクター化にしたいときもあります。 私たちのアニメーション・エディターの場合はデザイナーさんからこのビットマップをもらいました。 [押し]

幸いに、イラストレータには[押し]ビットマップをベクターにする「画像トレース」という機能が入ってます。

1) SVGのイラストを作る

Inkscapeにもトレースの機能が入っています。

1) SVGのイラストを作る



その機能を使って、ビットマップをSVGに変化できました。[SVGを開く、Ctrl+Shift+M]

ご覧の通り、SVGのサイズを変更しても、キレイに見えます。[Ctrl+W]

2) 画面サイズによって調整する

サイズを変更してもキレイに見えるのはいいことですが、実はときどきその変更をもっと正確(せいかく)にコントロールしたいです。

例えば、アニメーションエディターにはこの鉛筆のアイコンで色を選択するんですが小さくなると選択ができません。

この問題は、CSS media queryで解決できます。

CSS Media Query

      @media screen and (orientation: portrait)
                    and (min-width: 240px) {
        #small {
          display: none;
        }
        #full {
          display: block;
        }
      }
    

→ 結果

CSS media queryで、画面のサイズによって、プロパティを設定できます。

私たちのUIに適用して、画面サイズが小さくなれば、鉛筆の本数を減らすように設定しましょう。[結果をクリックして]

今は、Auroraに入ってるresponsive design modeを使っています。画面のサイズを変えるとデザインも変わります。

これは本当に簡単な例です。ただ、ものを隠したり、表したり、していますが、 他の例というと画像サイズに応じて、ストロークの太さを増減(ぞうげん)することとか、 複雑なイラストを縮小(しゅくしょう)すると、パフォーマンスのため細かい線とか、 重いフィルター効果とかを隠す設定もできます。 [Ctrl+W]

3) SVGファイルを圧縮する

しかし、もう一つの問題があります。 私たちの絵はツールで作りましたが、ツールによっては、作ったファイルサイズが大きいこともあります。
幸いにSVGファイルをオプティマイズするツールがいくつかあります。 場合によっては、50%以上小さくなります。

最初に書いてあるSVG scourはInkscapeにも入っているし、私のオススメです。

gzipも使えますが、実はApacheは自動的にSVGファイルにgzipを適用しますので、 何もしなくても転送量は小さくなります。

4) HTMLに追加する

<img src="pencil.svg">
<object data="pencil.svg">
</object>
    
<html>
  <p>
    <svg><circle/></svg>
  </p>
</html>
<style>
  cursor: url(mouse.svg);
  background-image: url(cheese.svg);
  list-style-image: url(bullet.svg);
</style>
var image = new Image();
image.src = "file.svg";

SVGの画像が作りましたので、HTMLに追加しましょう。それにはいろんな方法があります。

一番簡単なのは、普通の<img>タグ。[押し]
しかし、この方法でSVGはインタラクティブではありません。 例えばSVGファイルのスクリプトが動きません。 インタラクティビティが必要であればobjectエレメント[押し]の方がいい。

この方法で、スクリプトが動くし、よく使われています。

[押し]もう一つの方法はHTML5のページにSVGを直接に入れられます。 グラフィックスが簡単であれば、この方法が一番手っ取り早いんです。

[押し]それ以外の方法だというと、SVGの画像はだいたいビットマップの画像が使える場所にも使えます。 例えば、CSSの背景、カーソルなど。
マウスがマウスになります!

そして、canvasの中にも使えます。

4) HTMLに追加する

  安全 アニメーション インタラクティブ
<img>  
<object>  
直接にHTMLに入れる  
CSSプロパティ  
<canvas>    

一覧で見れば、こういう感じです。

では、デザインを全体的に組み立てましょう!

[クリックして、Ctrl+Shift+M、THEN F5]ご覧ください。
画面サイズに応じて変化して、いつもキレイに見えます。
[Don't close the window, just Ctrl+tab back]

4) インタラクティブ化にする

キレイにできるというSVGの特徴について見てきましたが、次はパーツが区別できるかしこいSVGについて見ていきましょう。

例えば、鉛筆の色の選択はどう処理しましょうか?

簡単に言えば、

  1. まず関心のあるパーツに、つまりその鉛筆のエレメントに、
    クリックイベントを受け取るため登録して、
  2. そして、イベントが生じたときそのイベントのターゲットを調べて、鉛筆の色は簡単に判断できます。
  3. 最後にアプリに「鉛筆の色が変わったよ」というイベントを発火します。

デモを参考にしましょう。[Ctrl+Tab back to demo, show colour selection]

アニメーションも始められます。

アプリはだいたい完成しました。
描く機能はちょっと複雑なので、今日それを省略(しょうりゃく)しますが、
その機能について肝心なのは、それも全部SVGで作られました。 それで、スムーズなパスが簡単に作れます。 [ Demo path smoothing ]

SVGのアニメーションの機能でアニメーションもすぐ実現できます。 [ Demo animation ]

しかし、アプリの機能もう一つを見せたいです。
アニメーションを作成してから、もちろんお友達とシーアしたいです。 SVGがマークアップでできているから、インタネット上で送るのは簡単です。 [ Show おくる and click button ]

そのため、アニメーションを受けて、表示するサーバを設置(せっち)しました。 [ Ctrl+W, go back to slides to show video ]

もちろん、これもSVGで作られました。パスに沿って動かすのはSVGで簡単にできます。

そして、SVGのフィルター効果を使って、キャラクターには影を付けられます。

http://mzl.la/MXemsU

今は、みんなさんに試してみていただきたいと思いますが

実はこのアプリの開発はまだ未完成で、iOSのSafariのバッグのせいで、 申し訳ございませんが、本日、iPhoneのお持ちの方はご利用いただけません。

FirefoxがインストールされているAndroidの端末(たんまつ)をお持ちの方は どうぞ、絵を描いて送っていただけるでしょうか。

[ When everyone has got started, click the QR code to load the wall ]

Part 4未来のウェブ
グラフィックス

最後には、これからのSVGの進化について簡単に紹介したいと思います。

Web Animations

まずはWeb Animationsという技術。 SVGにはアニメーションの機能が入っていますが、みんなさんがご存知のとおりCSS Animationsという技術もあります。 [押し] 実はその二つの技術は全然違います。[押し]

SVGの機能の方が成長しましたが、CSSが普通のHTMLページで使えますので、CSSの方が使われています。 しかし、両方には色んな欠点があります。

それで、私が「Web Animations」というもう一つの技術を提案いたしました。 [押し] 今はグーグルさんとアドビさんとその標準を作っているところですなんですが 簡単に言えば、Web AnimationsはスクリプトのAPIです。

Web Animations

var anim = new Anim();
anim.timing.iterationDuration = 2;
anim.animate(document.querySelectorAll("div.warning"));

そのAPIは作成中ですが、このような感じで使えるはずです。
しかし、直接に使うより、SVGとCSSのアニメーション機能の基本になるように作っています。

SVGのアニメーションも、CSSのアニメーションも、Web Animationsの同じAPIで製作(せいさく)できるし、 両方も同期して動かすのも簡単になります。

Web Animations

基本だけではなく、新しい機能も入っています。

タイム・コンテナーは同期の機能で本当に有力です。CSSはこの面で特に弱いです。

SVGの場合は、アニメーションの再利用は難しいので、それもWeb Animationsに入っています。

SVGとCSS:仲良し

これから、一つの傾向はSVGの機能をCSSでも使われるようになること。 例えば、Filter Effectsという標準によって、HTMLのページにSVGのフィルタ効果が使えます。[Demo + click focus back] 実は、この機能は4年前Firefoxで実装されており、標準化も進められています。

同じように、マスクとクリップの機能もFirefoxではHTMLのコンテンツに適用できます。

SVGのクリプとマスク x HTML


<svg>
  <style>
    @font-face { font-family: "Liberation"; src: url(svg.ttf); }
  </style>
  <text fill="yellow" stroke-width="3">
    L M
  </text>
</svg>

そして、もう一つの発展は、これからOpenTypeのフォントの中にSVGの画像が使えるようになること。 そうすると、多色の文字も、動く文字も作れます。Firefoxの実装はだいたい完成しました。

これはその実装のスクショです。 笑顔の文字の色とかストロークはテキストの外側から継承(けいしょう)しています。 それは昔のSVGフォントという技術でできないこと一つなんです。

SVG 2

今、実装されているSVGはSVG1.1なんですが、SVGのワーキンググループが次のバージョンを作っているところです。

そのバージョンにこのような新しい機能が入っています:

最後の二つを見せてから説明します。

Catmull-Rom パス


Source: Doug Schepers, http://schepers.cc/getting-to-the-point
普段は、スムーズなパスを作るとき、このポイント、この黄色い丸いやつを、全て計算しなかればなりません。 Catmull-Romのパスだったら、[Mouseover] このポイントだけを定義(ていぎ)して、自動的にスムーズなパスが作れます。 これは特にスクリプトでグラフィックスを生成するときに、便利です。

メッシュ グラデーション

最後はSVG2のメッシュグラデーション。これはもっと複雑なグラデーションができる技術です。

メッシュ グラデーション

次は?

本日はSVGについてご紹介させていただきました。
キレイで、便利な技術なので、Webアプリ、特にモバイルアプリを作る方にはオススメです。
使ってみて、いかがでしょうか?

[ Alt+Tab ] もし、今日のプレゼンに対して、ご質問がございましたら、どうぞお気軽にメールしてください。
アニメーション・エディターを使うとき、または私のバグを直してくれるため、この二つのURLを使ってください。

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