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

  関連記事

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

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

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

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

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

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

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

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

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

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

no image
AWSにRailsアプリをデプロイする(公開編)

次にデプロイするため“aws rails デプロイ”でググってみるとunicorn、nginxというキーワードがでてくるので とりあえずこれを設定していきます。   アプリのsecret_key_baseの設定 [crayon-5a11c06b1447b652666 …

no image
AWSにRailsアプリをデプロイする(準備編)

今回は、せっかくRailsで開発したアプリをAWS上に公開してみたいので その構築方法をまとめていきたいと思います。 (前回の記事:初心者がRailsで開発 – deviseでユーザー認証設定 ) AWSの設定はすでに社内で使用できるようになっていたので割愛します。 ★やりたいこと Gitlabでコ …

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

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

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

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

modern.IEを使ってMac上でWindows10を動かす

Microsoftが提供している modern.IE というプロジェクトがある。そこで提供されている仮想環境を使って、MacにWindows10をインストールしてみる。ちなみに、このプロジェクトの本来の目的はInternet Explorerの表示確認やデバッグの支援。 VirtualBoxの準備 …