「新しいiPad」発売記念!ブログのアニメーションバナーをHTML5対応にしてみた


当ブログ(PC版)画面上部のバナー

image

は、Adobe Flashでアニメーションするようになっていますが、iPhoneやiPadのようなFlash非対応デバイスの増加や、Android向けFlashの提供がAndroid 4.0系を最後に停止される見込みであること、また次世代Windows「Windows 8」のInternet Explorerで主に使われるMetroスタイルでFlashをサポートしないなど、何かとFlashの肩身が狭くなってきていました。そこで可能な限り原型を残しつつ、この部分を(Flash非対応ブラウザでも動く)HTML5ベースで再構築することに。

使用したのはGoogleが提供している「Swiffy」というサービス。

Google Swiffy (Google)

このサービスを使うと、Flashのファイル(***.swf)をアップロードすると、同じような動きをするHTML5のコード(***.html)を自動生成してくれます。もちろんFlashの全機能に対応しているわけではないのですが、簡単なアニメーションであればほぼそのまま変換できます。上が元のFlash、下が変換されたHTML5です。画像では何のことだかわからないと思いますが、ほぼ同じような動きをするHTML5コードに変換されます。

image

すでにSwiffyで変換されたアニメーションバナーはこのブログ(PC版)に組み込まれており、HTML5に対応するブラウザではHTML5版が、そうでないブラウザではFlashが自動的に選択されて表示されます。主要ブラウザでひと通り動作確認はしてあります。なおAndroidではHTML5もFlashも動作が不安定なのでアニメーション自体を無効にしています。

実はSwiffyは発表当時に一度試したことがあるのですが、その時はSwiffyの対応もブラウザ側の対応も不十分で、こんなシンプルなアニメーションバナーですらFlashを置き換えることができませんでした。しかし今回はほぼ問題なくHTML5で置き換えることができており、着実に進歩しているなあと。

※タイトルの「新しいiPad」はステマですw。一応iPadでも動作確認はしてありますが…

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Time limit is exhausted. Please reload CAPTCHA.