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

  関連記事

初心者がRailsで開発 – deviseでユーザー認証設定 –

こんにちは、2年目のYukaです。 開発部所属でありながら実は、、 実際に自分で手を動かして開発する機会がなかなかありませんでした。。 しかしついに、、、 開発初心者がRailsでWebアプリの開発に挑戦します!! 今回のゴールは社内でも使用しているGoogleアカウントで簡単にログインができるよう …

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

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

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

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

ゼロからAngularでSPAを作ってみた(1) はじめてのアプリ編

はじめに Single Page Application (SPA)って知っていますか? Webサイトでコンテンツのリンクをクリックした時に妙に表示が早いな〜というとき、実はページを移動するのではなくてページの一部のみを書き換えていたりします。 こういったサイトの作り方を Single Page A …

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

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

Burpの使い方!

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

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

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

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

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

ゼロからAngularでSPAを作ってみた(2) デプロイ・公開編

前回のおさらいと今回やること 前回(はじめてのアプリ編)では、Angular で簡単なチャットアプリを作るところまでやりました。ディレクトリ構成については説明できていなかったのですが、次のようになっています。(主なディレクトリとファイルのみ抜粋) + dist (ビルド・コンパイル後のファイルのディ …

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

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