あまなつ日記: AstoreTwirlがMacのSafariでも表示されるように修正しました

« AstoreTwirlがMacのSafariでちゃんと表示されていない件について | メイン | あまなつへのリンクを画像に・・・Astoretwirl »

2007年08月09日

AstoreTwirlがMacのSafariでも表示されるように修正しました

先日はじめたAstoreTwirlがMacのSafariで見ると商品画像が表示されないと連絡頂いた内容「AstoreTwirlがMacのSafariでちゃんと表示されていない件について」ですが、とりあえずは表示されるように修正できたと思います。
（Mac、Safariの環境によっては表示されない可能性はあります）

とりあえず、わかっている内容だけでも書いておこうと思います。

◇まず、はじめに
私はMacを持っていませんので、Safari 2.0.4 のスクリーンショットを撮ってくれるサービスを使い、カット＆トライを繰り返しながらでとりあえず、表示出来るようにした感じです。

◇表示されない原因？
　商品が床に映っているようなイメージを表現するのに canvas　タグを使って、そこにミラーを表現する方法を使っています。
　ＩＥは違いますが、fairefoxやsafariはそれを使うことでミラーな感じを表現できます。

　まず、styleにdisplay:none;を指定してcanvasにミラーを描画後、回転する位置に合わせて
　canvas　のサイズ、位置を指定してdisplay:inline;として表示させていたのですが・・・

　どうもMacのsafariでは、display:none;の時点でエラーになっていたと思われました
　（Macの環境がないので前述のサイトで色々試した結果そうだと思われる）
　とりあえず、その部分をはずすだけで、商品画像も、ミラーの部分（とりあえず）も表示されるようになりましたが・・・

◇ミラー部分のサイズの調整ができない・・・
　今度は、canvas　のサイズの指定
　　obj.style.width='**px'; obj.style.height = '**px';　のようにしてもMacのsafariだけはサイズが変更できない・・・
　　obj.setAttribute("width","**px"); な感じでやってもサイズが変更できない・・・
　　他にも色々試したのですがどうもうまくいきません。
　なぜ、出来ないのかはわかりませんが出来ないので今回はあきらめました・・・

◇ミラー部分を作成中にcanvas　を消しておく
　display:none;　で表示を消すとエラーになっているようなので
　visibility:hidden;　で表示を消しておいて　visibility='visible';　で表示させるように変更しました。

◇とりあえず表示されるようになったと思います。
　そんなことで、ミラー部分の表示はあきらめましたがMacのSafariでも、表示されるようになったと思います。

◇やっぱりMacも必要かな・・・
　ちょっと Apple MacBook 初めてのMacです。

WindowsノートPCが壊れてしまい、初めてMacを購入しました。理由はこのスペックでWindowsのノートPC購入を考えると「高い！」ということです。私はWindowsXP（HomeEdition）正規版も一緒に購入し、BootCampで半分Windowsマシンとしても使用しております。個人的には快適です。１クリックボタンやキーボードなど初期設定で「んっ？」がありましたがフリーソフトで対応出来てます。私はお買い得だと思いました。Apple MacBook でも買ってみるかな・・・でも、金無いしなぁ・・・