リニューアルというわけではありませんが、jQuery を使ったアニメーションを…

この記事をフルスクリーンで見るフルスクリーンモードを終了するには Esc キーを押してください。または、ココをクリックしてください。

タイトルの通り、リニューアルというわけではないのですが、ちょこっと変更・更新しました。

当サイトで、数ヶ所 Flash を使ってアニメーションを表示させているところがあります。
フッターの紙飛行機がグルグル廻っているアニメーション(これくらいなら Flash を使わなくても『GIF アニメーションでいいのでは?』という声も聞こえてきそうですが…)、ホームの ” identity ” という箇所に表示しているアニメーション、それとブログトップのサイドバーのアナログ時計です。
そのうち時計の Flash だけを残して、他のアニメーションは Flash で表示させるのをやめました。

何故かというと、iPad が発売されてから会社のお偉いさんが iPad で自社のホームページを見た時に

上司:「わが社のホームページが表示しないぞ!」
担当者:「 iPad が Flash に対応していないので、見られないんです。」
上司:「何だそれは?」
担当者:「いや、ですから Apple が…」
上司:「そんなことはどうでもいい。見られるようにしろ!」

と…

Flash を使っているサイトでは上記の様なやりとりがあるというのを、時々耳にします。

当サイトの場合は、Flash の箇所が見られなくてもたいした影響はないのですが、ホームにド〜ンと Flash を使っていたり、いわゆるフル Flash サイトなどは、確かに見られないとかなり影響があるかも知れませんね。
映画のオフィシャルサイトを iPad で見た時にず〜っと真っ黒だったりしましたからね。
一時期、グローバルナビゲーションメニューに Flash を使うのが流行ったような気がしますが、その場合だと iPad で見た時にはグローバルメニューが表示しないわけなので、どこのページへも行くことができないですよね。
フル Flash サイトの場合は兎も角、一部に Flash を使っている場合だとスクリプトでページを切り替えたり、Flash の代わりに画像を表示させるようにするのが、手っ取り早いと思います。
当サイトも、iPad、iPhone の環境変数を利用して、スクリプトで代替画像を表示するようにしていました。
でも、最近は便利なスクリプトもありますので、一層のこと Flash をやめてしまえと… :D

アニメーションを表示するのに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 が便利だと思いますので、興味のある方はお試しあれ。

次回は、また別のスクリプトを紹介したいと思います。

  • このエントリーをはてなブックマークに追加

フルスクリーンモードを終了するには Esc キーを押してください。または、ココをクリックしてください。