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

  関連記事

x-callback-urlを使ってみた

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

【小ネタ】タスク管理ツール移行: Trello から Asana

  プロジェクトチームのタスク管理ツールを Trello から Asana に変えることになり、 タスクの移行が意外と簡単にできた、というお話です。 Trello と Asana もともと使っていたのは Trello(トレロ)です。 プロジェクト > タスクグループ > タスク …

Burpの使い方!

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