FlashからHTML5へ　驚異の再現度Google Swiffy

Tweet

GoogleChromeがウェブページ上にあるメイン以外のFlashコンテンツを停止する機能を公開

「えっ!?ChromeでFlash停止するようになっちゃうの!?」

6月8日に様々なIT系記事で取り上げられた話題ですが、
私は配信系ソリューションを担当しているので結構焦りましたね〜笑

Chromeがプラグインのデフォルト設定を変えてしまうようで、それに伴ってFlashが自動停止するようになってしまいます。
自動再生されていたFlash広告が停止してしまったら広告効果激減です。

何か動画を自動再生させられるFlashに取って代わる方法はないのか？

はい、それはHTML5で実現するアニメーションです。
Flashのプラグインを必要とせずHTML5とjavascriptでアニメーションを実現する手法です。
Flashの脆弱性が見つかるなどの問題もあり、HTML5での動画再生の普及はますます加速していくと思います。

今回はChromeの問題を受けて注目されている、FlashにHTML5に変換できるGoogle Swiffyを紹介します。
このSwiffyで変化されたhtmlファイルでは主にSVGを使用してアニメーションを実現しています。
まずはこのSVGの素晴らしさを伝えましょう。

SVGとは？

SVG（Scalable Vector Graphics）は、ベクター形式の画像フォーマットです。
ベクター形式とは、点と点で結ばれた線で図形を表す方法で、アプリケーションでいえばAdobe社のIllustratorがベクター形式を採用しています。
最近のブラウザではこのsvgをHTML内に直接書くことができます。

画像フォーマットといえばJPEG、GIF、BMP、PNG、TIFが有名ですが、これらは全てラスタ形式と呼ばれ、いわゆる「ドット絵」です。
SVGで用いるベクター形式は点同士を結ぶ線を演算した結果なので、拡大した時のクオリティはラスタ形式と比較して歴然です。

htmlで図形を表現する際は、HTML5から追加されたcanvas要素もありますが、これもラスタ形式です。

SVG vs CANVAS!

一つのhtmlファイルに、canvas要素で描いた円と、svg要素で描いた円を記述して並べました。

拡大してみると・・・

canvasで描いた図形
　　

svgで描いた図形

svgの方が綺麗ですね！これがベクター形式のクオリティです。
やっぱりラスタ形式だとどうしてもドットっぽさが出てしまいますね。

Google Swiffy

SwiffyはFlashで生成したswfファイルをアップロードすれば、SVGで再生されるHTML5ファイルを生成してくれる無料のツールです。
現在は1MBまでのswfファイルを変換できます。
以下はSwiffyの画面です。

1でswfファイルアップロード、2で同意にチェック、3で変換開始です。
これはswfファイル変換後の状態です。
一番下のViewConversionを右クリックしてhtmlファイルを取得できます。

変換してみればわかりますが、再現度はかなり高いです！
canvas要素に変換するツールもあるようですが、やはりここまでの再現度は出ないようです。

Flash以外のアニメーションを探している方は是非お試しあれ。

Tweet

  関連記事