当ブログ(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でも動作確認はしてありますが…