2013年02月
2013年02月25日
FlashからJavaScriptへ
久し振りのブログUPです。
ようやくと言うのでしょうか？やっとと言うのでしょうか？サウスリッジホーム株式会社のホームページのトップページのFlashアニメーションの変更が完了しました。ホームページ公開から約5年間もの間、トップページのアニメーションを放置プレイにしたままでした。ボク的にはFlashアニメーションで構成し直しても良かったのですが、Flashは、iphoneやipadに使われてるインターネット ブラウザ Safariなどには対応していないので全く表示されません、しかもデータ量もちょっと重めだし、いちいち初めから始まるのがちょっとウットオシカったので特に｢手｣を入れる事なく５年の歳月が経ってしまった。
５年前ではアニメーション（スライドショー）＝Flashが相場でしたが、今ではデータ量も軽いJavaScriptのスライドーショーやアニメーション等も多く採用されるようになりました。大手企業のHPにも多く採用されています。ボク自身そんなにHPのノウハウがある訳ではありませんが、素人なりのJavaScript構築ができるWEBサイトがあるので、その辺りのページを参考に今回はJavaScriptでフォトスライダーを採用してみました。
トップページのFlashをJavaScriptに入替えてみたのですが、これが簡単なようでなかなか上手いこと表示されません。ボクはWEBページを作る時に２台のPCで確認しながらの作業を行います。１台はOSがWindows XP でInternet Explorer8のDELL製(ちなみに純正XPを積んだDELL PCは昨年探しに探して何とか新品で購入。この話はまた今度)。もう一台は OSがWindows 7のFirefox Ｖｅｒ.19 のHewlwtt Packard 製を使用。色々なブラウザを使用することで、ページの表示され方も随分と違うのが分かりますからね。
しかし、ここで問題が発生しました。トップページのFlashをJavaScriptに入替えた上の赤線で囲った部分ですが、一般的に使われているブラウザのFirefox、Google Chrome、Safariではきちんと表示され、しかもちゃんとスライドしてくれるのですが、Internet Explorerだとこんな感じに表示されます。あれこれトライしましたが、全く原因が分かりません。
そこで、 Source codeを詳しく見てみることにしました。CSS（スタイルシート）がイケナいのか、JavaScriptがイケナイのかもうシラミ潰しにやっていきます。こうなると もう画面を凝視してSource codeとにらめっこです。ちなにSource codeとはコンピュータプログラムの元となる一連の文字の羅列です。サウスリッジホームのトップページはこんな感じです。
写真はトップページのSource codeのホンの一部分ですが、矢印の先に〇で囲まれている【，】が余計でした。この【，】が入るだけで、Internet Explorerでは表示されなくなります。ですが、他のブラウザでは何事も無く表示されるのです！！！ この【，】に気づくまでに何と『２日』も要しました！
ハイ、こんな感じに出来上がりました。これでほぼ全てのブラウザに対応され仕上がりも上々です♪
ですが、どういう訳かInternet Explorerだとスライド時の画像がちょっと乱れます。うむ〜、正直IE嫌いになりそうですが、現在色々なブラウザが出ている中で、やっぱりInternet Explorerの使用率が最も高いのも事実です。これからも皆さんが見られるHPですから、もっと快適で見やすくWEBページの構築をするように心がけないといけませんね。最後にInternet Explorer5.5にはトップページのスライダーは対応していませんので、どうかブラウサをVer.UPしてご覧下さい。
サウスリッジホーム株式会社のホームページ
おしまい
ようやくと言うのでしょうか？やっとと言うのでしょうか？サウスリッジホーム株式会社のホームページのトップページのFlashアニメーションの変更が完了しました。ホームページ公開から約5年間もの間、トップページのアニメーションを放置プレイにしたままでした。ボク的にはFlashアニメーションで構成し直しても良かったのですが、Flashは、iphoneやipadに使われてるインターネット ブラウザ Safariなどには対応していないので全く表示されません、しかもデータ量もちょっと重めだし、いちいち初めから始まるのがちょっとウットオシカったので特に｢手｣を入れる事なく５年の歳月が経ってしまった。
５年前ではアニメーション（スライドショー）＝Flashが相場でしたが、今ではデータ量も軽いJavaScriptのスライドーショーやアニメーション等も多く採用されるようになりました。大手企業のHPにも多く採用されています。ボク自身そんなにHPのノウハウがある訳ではありませんが、素人なりのJavaScript構築ができるWEBサイトがあるので、その辺りのページを参考に今回はJavaScriptでフォトスライダーを採用してみました。
トップページのFlashをJavaScriptに入替えてみたのですが、これが簡単なようでなかなか上手いこと表示されません。ボクはWEBページを作る時に２台のPCで確認しながらの作業を行います。１台はOSがWindows XP でInternet Explorer8のDELL製(ちなみに純正XPを積んだDELL PCは昨年探しに探して何とか新品で購入。この話はまた今度)。もう一台は OSがWindows 7のFirefox Ｖｅｒ.19 のHewlwtt Packard 製を使用。色々なブラウザを使用することで、ページの表示され方も随分と違うのが分かりますからね。
しかし、ここで問題が発生しました。トップページのFlashをJavaScriptに入替えた上の赤線で囲った部分ですが、一般的に使われているブラウザのFirefox、Google Chrome、Safariではきちんと表示され、しかもちゃんとスライドしてくれるのですが、Internet Explorerだとこんな感じに表示されます。あれこれトライしましたが、全く原因が分かりません。
そこで、 Source codeを詳しく見てみることにしました。CSS（スタイルシート）がイケナいのか、JavaScriptがイケナイのかもうシラミ潰しにやっていきます。こうなると もう画面を凝視してSource codeとにらめっこです。ちなにSource codeとはコンピュータプログラムの元となる一連の文字の羅列です。サウスリッジホームのトップページはこんな感じです。
写真はトップページのSource codeのホンの一部分ですが、矢印の先に〇で囲まれている【，】が余計でした。この【，】が入るだけで、Internet Explorerでは表示されなくなります。ですが、他のブラウザでは何事も無く表示されるのです！！！ この【，】に気づくまでに何と『２日』も要しました！
ハイ、こんな感じに出来上がりました。これでほぼ全てのブラウザに対応され仕上がりも上々です♪
ですが、どういう訳かInternet Explorerだとスライド時の画像がちょっと乱れます。うむ〜、正直IE嫌いになりそうですが、現在色々なブラウザが出ている中で、やっぱりInternet Explorerの使用率が最も高いのも事実です。これからも皆さんが見られるHPですから、もっと快適で見やすくWEBページの構築をするように心がけないといけませんね。最後にInternet Explorer5.5にはトップページのスライダーは対応していませんので、どうかブラウサをVer.UPしてご覧下さい。
サウスリッジホーム株式会社のホームページ
おしまい
