【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エンジニア採用情報

  関連記事

ゼロからAngularでSPAを作ってみた(3) CI: 継続的インテグレーション編

前回までのおさらいと今回やること 前々回(はじめてのアプリ編)と前回(デプロイ・公開編)で、作成した Angular のチャットアプリを Web に公開するところまでいきました。 でも、デプロイするのに、毎回決まったコマンドを打つのって面倒ですよね。 今回は GitHub でソースコードを管理して、 …

Burpの使い方!

こんにちは、第二ソリューション開発部の谷口です。 受託開発の部署で開発を担当してます。 APIを扱う機会が多く、今回は通信内容を確認するためのローカルプロキシツール「Burp」について書かせて頂きます。 Burpとは Webアプリケーション開発時の検証において、Webサーバとブラウザ間の通信内容を確 …

Selenium × PHP でテスト自動化!【環境構築編】

はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 テスト自動化の背景 わたくしが担当するXmediaOneでは品質担保のために①コードベ …

最強のSQLクライアント(GUIツール)「TeamSQL」を使ってみた!

はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 エンジニアの皆さん、SQLクライアント(GUIツール)って何使ってます? わたくしはこ …

MacのSSHポートフォワーディングツール「autossh」と「Coccinellida」をご紹介!

はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 さて、皆さんはSSHポートフォワーディングするときにどんな方法で行っていますか? わた …

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

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

kubernetes の全ノード上で同じコンテナを動かす

今回は、kubernetes上で同一コンテナを全ノードで動かす方法を紹介したいと思います。kubernetes自体の起動方法はここでは割愛します。 はじめに 以前、CoreOSのFleet上でmackerel-agentを動かすということを行いました。今回は、kubernetes上で同じようにクラス …

【クラウド初心者向け】Google Cloud Platform(GCP)でWebサイトを公開してみよう!

はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 背景 わたくしは最近プライベートで開発したWebサービスをインターネット上に公開しまし …

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

こんにちは。 インフラ開発部の上田です。 普段は自社開発システムのインフラ担当として、日々頑張って仕事をしています。 今回は、近年話題になっているDockerについて、取り上げてみようと思います! なぜDockerなのか・・・? そもそもDockerとは何か・・・?   当社では様々なサー …

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

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