当ブログ（PC版）画面上部のバナー

は、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コードに変換されます。

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

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

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