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

     - マルチメディア , ,  


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要素で描いた円を記述して並べました。

スクリーンショット 2015-07-30 17.42.17

拡大してみると・・・

 

canvasで描いた図形
  スクリーンショット 2015-07-30 15.28.05

svgで描いた図形
スクリーンショット 2015-07-30 15.31.48

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

 

Google Swiffy

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

スクリーンショット 2015-07-30 15.44.20

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

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

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

 


DACエンジニア採用情報

  関連記事

profile?atom?mp4のよくわからないあれこれ(profile編)

どうもこんにちわ。2年目のRhiannonです。 僕が入社した2014年は、来る来る詐欺で終わっていた動画広告元年が 現実のものとなり、最近では動画広告を目にすることも増えてきました。 ただ、動画は画像などに比べるとファイル自体が複雑なものになっています。 そのため、「動画ファイルってなんだかよく分 …

profile?atom?mp4のよくわからないあれこれ(atom編)

どうもこんにちわ。 最近は長尺の動画広告が増えてきましたね。 youtubeでもインストリーム広告で1分以上の長尺の動画広告が流れているのをよく見ます。 (※インストリーム広告:動画コンテンツの中や前後に差し込まれる動画広告) そうなると、ファイルサイズが大きくなるためファイルをダウンロードしながら …