タイトルの通り、リニューアルというわけではないのですが、ちょこっと変更・更新しました。
当サイトで、数ヶ所 Flash を使ってアニメーションを表示させているところがあります。
フッターの紙飛行機がグルグル廻っているアニメーション（これくらいなら Flash を使わなくても『GIF アニメーションでいいのでは？』という声も聞こえてきそうですが…）、ホームの ” identity ” という箇所に表示しているアニメーション、それとブログトップのサイドバーのアナログ時計です。
そのうち時計の Flash だけを残して、他のアニメーションは Flash で表示させるのをやめました。
何故かというと、iPad が発売されてから会社のお偉いさんが iPad で自社のホームページを見た時に
上司：「わが社のホームページが表示しないぞ！」
担当者：「 iPad が Flash に対応していないので、見られないんです。」
上司：「何だそれは？」
担当者：「いや、ですから Apple が…」
上司：「そんなことはどうでもいい。見られるようにしろ！」
と…
Flash を使っているサイトでは上記の様なやりとりがあるというのを、時々耳にします。
当サイトの場合は、Flash の箇所が見られなくてもたいした影響はないのですが、ホームにド〜ンと Flash を使っていたり、いわゆるフル Flash サイトなどは、確かに見られないとかなり影響があるかも知れませんね。
映画のオフィシャルサイトを iPad で見た時にず〜っと真っ黒だったりしましたからね。
一時期、グローバルナビゲーションメニューに Flash を使うのが流行ったような気がしますが、その場合だと iPad で見た時にはグローバルメニューが表示しないわけなので、どこのページへも行くことができないですよね。
フル Flash サイトの場合は兎も角、一部に Flash を使っている場合だとスクリプトでページを切り替えたり、Flash の代わりに画像を表示させるようにするのが、手っ取り早いと思います。
当サイトも、iPad、iPhone の環境変数を利用して、スクリプトで代替画像を表示するようにしていました。
でも、最近は便利なスクリプトもありますので、一層のこと Flash をやめてしまえと… 😀
アニメーションを表示するのに3つのスクリプトを使っていますので、順番に紹介していきたいと思います。
まず、ひとつ目は ” jQuery Canimate Plugin “。
jQuery Canimate Plugin のサイトを見てもらうとわかりますが、設置もとても簡単です。
PNG ファイルでも OK だし、フレームレートも設定できて便利です。
ただ、ファイル名だけ『 YourFrameName####.xxx 』というように決まっていますので、注意が必要です。
YourFrameName → 何でもいいと思う。
#### → 4桁の連番。
xxx → gif png などのファイルタイプ。
もう一つ、アニメーション用の画像を < body > 直下に < div class=”canimate_preloader” > < /div > として読み込みますので、レイアウトが崩れるサイトがあるかも知れません。
一応、読み込み画像を『 style=”height: 0px; width: 1px; “ 』としているようですが、もしレイアウトが崩れるようなことがあれば、スタイルシートで対処してください。
サンプルを見てもらえればわかると思いますが、Flash か jQuery なのか、ほとんどわかりません。
まぁ、これくらいの大きさだと GIF アニメーションでもいいのかも知れませんが、もうちょっと大きな画像だとか PNG ファイルを使いたい場合は、この jQuery Canimate Plugin が便利だと思いますので、興味のある方はお試しあれ。
次回は、また別のスクリプトを紹介したいと思います。
