【windows+IE で制作したホームページ】

「mac+safari」で閲覧できるように変更してみた

　「windows+IE」で制作したホームページを「mac+safari」で閲覧できるように変更してみました。「クロスブラウザ」という程大げさなものではありませんが、ここでは、その顛末をレポートしてみました。なお、このレポートは、ある程度ウェブ技術(HTML+javascript+PHP等)の基礎知識を有している方を対象ということで初歩的な解説は省いてあります。ご了承下さい。

は　じ　め　に

クロスブラウザという程ではないがマックにも対応しよう

■マックユーザーを完全無視してんのかあ...と、ときどき苦情が舞い込む

　パソコンのOSや使用するブラウザによって、閲覧するホームページの見え方が大きく違ったり、スクリプトが動いたり動かなかったり等、さまざまな問題が発生します。一時のブラウザ戦争が概ねマイクロソフト社のインターネット・エクスプローラ(IE)の勝利に決着したとはいえ、firefox 等の第3勢力が台頭しNetscapeやmac陣営の巻き返しも予想され、ブラウザ戦国時代が終焉したとは思われません。その上、少数派であるはずのmacユーザーはすこぶる声が大きい...(と勝手に判断m(_ _)m)。

　右の画像が、windows + IE7.0 で最適化しているホームページ。すこぶる正常な世界でございます。ここで、「windows + IE7.0以外では正常に動きません」と、しっかりお断りしているページであっても「マックユーザーを完全無視してんのかあ」という苦情がときどき飛び込みます。

　「とてもお宅さままで対応するのは難しいのよ」という本音は隠しつつ、ひたすら「申し訳ありません。このページはIE専用です。」と頭を下げているだけでした。

■理想はクロスブラウザ、しかし現実にはコスト増大

　すべてのユーザーが同じようにみることのできるホームページを作る、というのは、制作側にとってひとつの理想ではありますが、現実にはとても対応しきれるものでありません。同じブラウザでもバージョンの差、あるいはOSとの組み合わせの違いでも、微妙なところで見え方が違ってきます。ある部分では全く違っていたりします。手間暇を充分かければなんとか技術的に対応できないことはないのですが、その分、メンテナンスの手間も増大。コストダウンを要求されている昨今、そうそうは理想ばかり追っかけてばかりもいられません。

　まあ、そういう真実は真実として、やはり「声の大きい」ユーザーさまには必要最小限でいいから対応しておこう、ということになったのであります。「声は大きいほど有利」です(^^)。

■比較したOSとブラウザ

　制作したOSとブラウザは、windows XP(SP2) + IE7.0 ホームページ閲覧に使用したマックマシンは MacBook safari(ver.3.0.4)です。これ以外の組み合わせでは、どうなるか判りません。

項目ごとにひとつづつ見え方を確認して、ディバックする

　まずはweb工房のホームページのトップページをみる

■ぎゃあ、これじゃ不満もでるわなあ...とつくづく納得

　これまで全くマック未対応であったわがweb工房のトップページ。右側の画像が mac + safari の世界であります。「同じ世界」を見ているのですが、ゆがんだ世界に見えます。実際にこれをみたら、マックユーザーは怒るよねぇ...と思いつつ、まじめに数えてみたら、右の画像の範囲だけでも次のような不具合がありました。

• ヘッダ部のオブェクトの配置が正常ではない(CSS)
• 「web工房オフィシャルサイト...」というページの表題の位置が下すぎる(CSS)
• ヘッダ画像下の横並びのメニューがちゃんと表示されない(CSS)
• ヘッダ部の日付の内、西暦年表示が「2008」ではなく「108」(javascript)
• Information/What's New の枠内が字化けしている(Ajax)
• 「お気に入りに登録」が動作しない(javascript)
• 「Window Close」が動作しない(javascript)

　これじゃ、まともなページとはとても言えません。IEという回路を通してみると正常に見えるが、safariという回路を通してはめちゃくちゃになる。なにやら自分の人生を暗示しているようですが、それは閑話休題。

■一応、正常に動いていると思われる機能

　上の画像の範囲で下記の各機能は正常に動いているように思われます。これらはsafariに全く対応をしていなくても大丈夫、というのではなく、後述するようにjavascriptで以前から少しづつ対応してきていることによるものかも知れません。

• 「Window Resize」(ウィンドウサイズ変更)、「Reload」(更新)、「PageEnd」(ページの下部にジャンプ)の各機能(javascript)
• ヘッダ部のアクセスカウンター表示(cgi/perl)
• 右側から現れるネオンサイン文字(marquee機能)
• 「霊峰富士と高尾の森」の画像表示(アクセスした時刻毎に画像が変わる)(javascript)
• InformationとWhat's Newの切替(javascript)

　ヘッダ部の表示の不具合はスタイルシート(CSS)の問題

■オブジェクの高さ("height")指定が肝

　当初のトップページのヘッダ部のタグを簡略化すると下記のように、各パーツは「web標準」の手法を適用し<div></div>を用いて配置しています(スタイルは width/float等の主要なもののみ記述、枠線は省略)。

　　(htmlファイル:<div>によるパーツ(オブジェクト)の配置

<div id="layHeader1" style="width:660px;padding:10px;text-align:center;">
<div id="layHeader1_l" style="width:200px;text-align:left;float:left;">
(左側の内容)
</div>
<div id="layHeader1_r" style="width:450px;text-align:center;float:right;">
(右側の内容)
</div>
</div>

　これによって、上記はIEでは次のように表示されます。IE6.0とIE7.0では若干枠の幅が違っています(画像)。 ところがこのままですと、mac + safari では枠が重なります(画像)。

　実は、IEではスタイルシートで<div>の高さ(height)を指定しなくても、ちゃんと内容を記述した分の高さを確保してくれるのですが、safariでは高さを指定しなければならない、というのがタネ明かしです。高さ指定が省略できれば、内容を書き増したりしたときに高さ指定をし直さなくてもいいので便利なのですが。IE と safari で表示が乱れるときは、まず、この高さ指定を調整して下さい。

　3つの<div>のスタイルシート設定に height="50px"を付加すると下記のように表示されます。IEでもsafariでもほぼ同じように表示されているはずです。

　この問題はweb標準に即してレイアウトしたために生じる問題で、実は従来からの方法のように表組み(<table>〜</table>)したときは起こらない、というのがなにやら「微妙」なこころもちであります。以前、制作した「古い」ホームページではほとんど手を入れることなく mac+safari で閲覧できたりします(^^;)。

■"padding"、"margin"が第二の肝

　各パーツ(オブジェクト)の表示位置が微妙に異なる場合等では、オブジェクトの余白(paddingとmargin)の指定方法を疑って下さい。margin指定していたが、padding指定をし直したら正常化することが多々ありました。ヘッダ部の横並びのメニューがの不具合は、この方法により修正されました。まあ、他のブラウザに比べて「IE6.0でのpaddingとwidthの解釈が異常すぎる」ので、IE6.0とIE7.0でも大きく異なっているのが現実でありますが。

　Information/What's New の枠内が字化けしている

■これは Ajax の仕様の問題だから結構難しい

　この部分は、お知らせや新着情報を記述した別のhtmlファイルデータをAjaxで作成したスクリプトで自動読み込みしています。ページ全体を再読み込みするのではなく、この部分だけ読み込むので、サーバーとのアクセス時間が短縮できます。ホームページを動的に更新するのには非常に便利な方法でして、最近、よく使われています。

Ajaxで読み込まれるファイルは基本的にUTF-8であること、とされています。トップページの文字コードはShift-JISですが、IEでは問題なく表示されますが、afari では字化けします。トップページ自体をUTF-8で記述すれは解決するかもしれませんか、まあ、windows派なもので(^^;)ゞ

■データファイルの拡張子を.txtに変更して字化けを回避

　この字化けを回避するためにいろいろな方法があって、結構、難しい方法です。ところが、実は別のhtmlファイルをtxtファイルに拡張子を変更すると、mac + safari では文字化けしなくなります。これは実際にいろいろ実験してみて判ったことでして、理論的な裏付けは判然としません。今回はこの方法により対処しました。

■ヘッダとフッタも同じく対処

　ページ数が増えたときのメンテナンスの効率化のために、ヘッダ部とフッタ部を共通化してajax によって別のheader/footerファイルからのデータ読み込むことにしています。将来、この部分が変われば、別のファイルを変更するだけですべてのページが書き換わります。

実はトップページの画像ではヘッダ部が字化けしていませんが、これは別ファイルからはオブジェクのタグのみ読み込んでおき、その後でjavascriptで英数文字・日本語を書き込んでいるため、字化けすることはありませんでした。。しかし、文字も読み込んでいるフッタ部はしっかり字化けしていました。従いまして、ヘッダ・フッタ部ともデータを読み込んでいる別ファイルは.htmlから.txtに変更ました。

Javascript は問題が一杯

　safari というか mac系の javascript は問題が多い、と書くとマックユーザーから「いいやIE のjavascriptがやくざなんだよ」とお叱りを受けそうですが、確かにjavascriptでは留意すべき事項が多いことは事実です。章を新しくしてこのへんを記述してみたいと思います。

　ＩＥ専用機能ということで割り切るか、どうする？

■「Window Close」が動作しない

　javsscriptは、

　　　　<a href="javascrit://" onclick="window.close">Window Close</a>

などと記述しておりますが、いろいろ調べてみると safari や firefox では javascript でオープンしたウィンドウのみ閉じることができるとのこと。故に、トップページでは動きませんが、そこからjavascriptでオープンするサブウィンドウでは有効です。IEではなんでも閉じるそうです。

　そこで、下記のようなスクリプトに変更します。これはIEとsafariの両方で動きますが、firefoxでも大丈夫だとか。

[XHTML](ボタンの場合)
<input type="button" onclick="fnWinClose()" />
[javascript]
function fnWinClose(){
　　window.opener = window;
　　var win = window.open(location.href,"_self");
　　win.close();
}


■「お気に入りに登録」が動作しない

　javsscriptは、

　　　　window.external.AddFavorite("http://www.webstudio.jp/","web工房 ホームページ");

ですが、これは元々　IEの独自機能ということですので、safari用として対応のしようがありません。

　とりあえず便法でもいいか対処してみる

■西暦年表示が「2008」ではなく「108」

　この部分は、javascriptによりパソコンのシステム時間を読んで日付・時間を書き込んでいます。IEの場合、西暦年は4桁で取得できますが、safariでは下2桁。システムの設定を替えば4桁取得できるのかも知れませんが、まだmacに堪能ではないので、javascript に下記の行を加えて対処しました。

　　西暦年表示(javascript)

　　var now=new Date();
　　var yyyy=now.getYear();
　　var mm= now.getMonth()+1;
　　var dd = now.getDay();

　　if(yyyy<"200"){ //mac+safari対応
　　　　yyyy=eval(yyyy)+1900;
　　}


　マック対応の記述方法

■document.getElementById("ID")...

　以前から用いていたので、今回、トップページの部分で問題は生じませんでしたが、javascripにおいては、オブジェクトの指定方法は次の方法で記述するクセをつけておきましょう。id属性を指定するだけなので間違いは少なくなります。

　　(javascript:マックに対応するオブジェクト指定)

<form name="FORM">
<input type="text" name="txtID" id="txtID" value="12345" />
</form>
<div id="divID2" >ABCDE</div>
　　　　↓(IE 的な記述方法)
　　var strValue1=document.FORM.txtID.value;　(strValue1="12345"となる)
　　var strValue2=document.divID2.innerText;　(strValue2="ABCDE"となる)
　　　　↓(記述方法の変更)
　　var strValue1=document.getElementById("txtID").value;　(strValue1="12345"となる)
　　var strValue2=document.getElementById("txtID").innerText;　(strValue2="ABCDE"となる)


　この他にも沢山あるんではありますが...

■とりあえずはここまで

　以上のようなさまざまな対応策を適用して、なんとかトップページは左の画像のようになりました。ほぼ、IE7.0と同じ見え方に修正されています。スクリプトも正常に動きます。表示に使用しているフォントが同じでないこともあって、微妙なところで異なっているところがありますが、mac + safari で概ね問題なく閲覧できます。これでマックユーザーに「罵倒される」ことはなくなったと思います(^^)。

　web工房のトップページの一部だけでもこれだけの問題が出ますので、実際にはもっと沢山の違いが生じます。とりあえず今回はここまでとしますが、windows + IE 一途のホームページをmac+safari という異質文化に対応させるのは、ホームページを新設する以上の手間ひまと気力・体力が必要なようです。

【更新記録】

※(2007.02.13)　v1.01 一般公開しました。

【AccessCounter】　

※本ページの記載内容を充分理解の上、ご使用下さい。使用されたことにより不利益等が発生しても一切の責任を負いません。
※本ページはA4サイズの用紙に印刷できるようになっていますが、右側がはみ出す場合は、ブラウザで余白の設定を行って下さい。
※印刷時、ナビゲーション用リンク文字やボタン、表示説明用エリア等は印刷されません。
※印刷設定が｢背景を印刷｣するになっていないと、背景として設定されている画像は印刷されません。