【HTML5】4ツール出力ファイルサイズ比較

     - 開発ツール  


こんにちは、近江です。

前回もHTML5のSwiffyについて書かせて頂きましたが、まだまだHTML5について調査しています。

今回はSwiffyを含めた4つのHTML5系ツールで、同じ素材で同じアニメーションを作成した時のファイルサイズを比較したいと思います。

何故ファイルサイズの比較をするかと言うと、アドサーバは入稿するファイルの容量制限があるため、今後アドサーバにHTML5を入稿する事になった際に、ファイルサイズはかなり大きなポイントになるからです。

比較ツール

Google Web Designer

HTML5作成ツール。現在はベータ版で無料ダウンロードできます。
https://www.google.com/webdesigner/

個人的な意見としてはFlashと比較してアニメーションを付ける際に少し面倒且つUIもわかりにくい。。。
でもAdWordsでサポートされており、AdWords向け出力機能が付いています。

Adobe Edge Animate CC

AdobeのHTML5作成ツール。ただ、2015年11月をもって開発を終了したらしく、今後はAdobe Animate CCとして近日リリース予定のようです。

Adobe製品なのでUIは割りとわかりやすいです。手軽にHTML5広告を作成できます。

Adobe Flash Professional CS6

皆さんお馴染みFlash Professionalですが、プラグインとしてToolkit for CreateJSをAdobe Extension ManagerにインストールするとHTML5に出力できるようになります。

また、上で触れたAdobe Animate CCですが、このFlash Professionalも改名してAdobe AnimateCCになるようです。

ということはEdge Animateと統合するということですかね。
ちなみにAdobe Flash Professional CCでは、HTML5 Canvasという機能でHTML5出力ができるようです。

Google Swiffy

swfファイルからHTML5へ変換するツールです。サイトから無料で変換できます。(https://developers.google.com/swiffy/convert/upload

また、FlashProfessionalにプラグインでインストールすれば、Flashの管理画面からswiffy変換して出力できます。
今回はFlashプラグインで出力したswiffyで比較したいと思います。

出力ファイルサイズ

出力されるファイルサイズ比較です。
以下のように同じアニメーションを4ツールそれぞれで作成しました。画像は全て110KBの300×250サイズのpngを使ってます。
キャプチャですが、実際は上から降ってきて真ん中でバウンドするってアニメーションです。
※4つとも動きがバラバラなので4つ見えている状態でタイミングよくキャプチャするのに10枚くらい撮影しました。
比較ツール

左から順に見ていきます。

Google Web Designer Adobe Edge Animate CC Adobe Flash Professional CS6 Google Swiffy(Flashプラグイン)
htmlファイル 41KB 0.791KB 1.31KB 14.8KB
jsファイル 2.35KB 2.71KB
画像ファイル 110KB 110KB 36KB
合計 151KB 113KB 40KB 14.8KB

※Flashでは画像ファイルを圧縮してjpgファイルにするので軽くなっている。

ということで、出力されるファイルだけで比較するとSwiffyが1位でした〜。
そしてGWDがビリ。ですが、仕方ない理由があります。

なぜならGWD以外は外部jsを呼び出しているからです。GWDは外部jsを読み込んでない分htmlファイルの容量が大きくなります。
なので最終的に使われる外部jsまで全て含めたファイルサイズで言うと勝負はわからないです。

また、GWDが外部jsを読み込んでいない理由はAdWordsの仕様でHTMLファイル入稿時は外部jsを読み込む記述が書かれていると弾かれる仕様になっているためです。
これによってかなりファイルサイズにおいても不利な状況になっています。

ちなみにSwiffy変換後画像ファイルはどうなったの?と気になりますが、恐らくGoogleのサーバに置かれ、表示時に呼び出すようになっているようです。

また、上記はFlash管理画面からSwiffy変換プラグインで出力しました結果ですが、一度swfファイルにしてswiffy管理画面から変換すると、何故か53KBになりました。
見た目は全く同じで画質が良くなったわけでもないし、謎です。。

画質

・Google Web Designer
gwd
・Adobe Edge Animate CC
edgeanimate
・Adobe Flash Professional CS6
flashcs6
・Google Swiffy(Flashプラグイン)
swiffy

Flash管理画面から出力した下2つが薄いですね。
これはキャプチャなので、更に画質が悪くなってしまってますが、上2つは実際拡大してもかなり綺麗です。

まとめ

ファイルサイズが軽いのはFlash・Swiffy、画質がいいのはWebDesigner・EdgeAnimateとなりました。

でも画質は拡大してやっと差がわかるくらいで、実際のところ拡大しなければFlashでも全然問題ないです。
なので、ファイルサイズが軽い、画質も問題ないFlashがやっぱり主流になっていくのでしょう。皆さん使い慣れてるし。

そして近日リリースのAdobeAnimateCCがかなり気になりますね!

リリースしてゲットしたらすぐに投稿します!


DACエンジニア採用情報

  関連記事

l_077
fastavroとjqでAVRO形式のファイルからデータを取得しよう

AVRO形式のファイルを取り扱いたい AVROとはApacheプロジェクトのひとつとして開発されているデータ交換形式です。 コンパクトなバイナリで高速なシリアライズ・デシリアライズが行えるため、サーバーログなどに利用されています。 弊社内での一部システムのログデータにも利用されているのですが、専用の …

全ファイルを検索
意外と知らないかも? Chrome DevTools の機能10選

みんな使っている Chrome DevTools。 Web開発やトラブルシューティングには必須ですが、便利な機能を知らないで使っている人がいたり、Web で使い方を調べても古い情報だったりすることがあるので、部内で Chrome DevTools についての勉強会を開催しました。 ここでは、その中か …

https---www.pakutaso.com-assets_c-2015-06-GREEN_YO20140125-thumb-1000xauto-16638
クラウド電話API “Twilio”で起こされてみた

どうも、開発部のクラヴマガです。 弊社サービスも最近はAWSの様なクラウド環境でサービスを構築することが多くなりました。 そこで問題になるのが、障害などによる深夜対応・・・。 データセンターに物理サーバをおいていた頃は、データセンターから障害発生時に 電話連絡をもらっていたのですが、クラウド環境では …

index
Android 非同期処理についてまとめてみた

Androidには、UIに影響を与えないよういくつか非同期処理が用意されています。 今回は非同期処理の代表的な ・Service ・IntentService ・HandlerThread について違いを踏まえながらまとめます! 非同期処理について(http://codezine.jp/articl …

logomono-tableau-software-mono
Tableauを利用してMySQLとRedshiftのクロスDBジョインを実現する

はじめに RedshiftやTreasureDataなどのデータマート用のDBにはID単位の解析結果が格納され、ローカルのMySQLにはIDに紐づいた名称マスタが管理されている構成の場合、データマートのクロス集計結果に対してIDに紐づいた名称を付与したいことがあります。 データマート用に用意したDB …

dockerlogo
自社サービスのDocker化(後編)

こんにちは。 インフラ開発部の上田です。 前回、前編としてDockerについて書き、早半年も経ちました。 前編はこちらです 今回は後編として、以下について書いてみたいと思います。 ■複数プロセス起動 前編で書いた通り、通常のOS起動時とは異なり、コンテナ上で個別にプロセスを起動する必要があります。 …

監視
Charlesを使ってスマホアプリ(iOS)のUAを調べてみた

はじめに ここ最近のスマホアプリには、Webブラウザの機能を実装したものが少なくありません。 (“スマホアプリ内で立ち上がるブラウザ「アプリ内ブラウザ」”の機能は「WebView」というコンポーネントを用いて実装されています。) 昨今のWebサイト、サービス運営に於いて、「通 …

sd
x-callback-urlを使ってみた

x-callback-urlとは? iOSのアプリ間連携の仕様の一つみたいです。簡単に言うと、ディープリンクを行うためにカスタムURLスキームを利用するが、アプリ毎にバラバラな規則でURLスキームを設定するとアプリ間連携をスムーズに行うことができないため、どのような規則でURLスキームを設定するかを …

gnu
いまさらですが… GNU screen チートシート

最近はローカル環境で開発するようになってきたので、screen コマンドを使う機会も少なくなって来たような気がします。で、使ってないと忘れてしまうので、チートシートを作ってみました。 参照サイト GNU screen [quick_reference] 起動 コマンド 動作 screen -S &l …

スクリーンショット 2015-05-29 6.49.13
Vagrantの機能を使って開発環境の効率をあげてみた。

プラットフォーム・ワンのシステムの運用・保守担当のエンジニアです。 保守の仕事に関わると、 ユーザからのお問い合わせだったり、監視アラートによる検知から システムを調査することがあります。 ログとソースコードを見て、不具合を特定し改修する。 すぐできればカッコいいですが、 「本番環境に反映して別のエ …