言語設定や JavaScript サポートなど、さまざまな Web ブラウザーの特性によって、Web アプリケーションの動作はブラウザーごとに異なってきます。このようなブラウザー間での不統一性は、アプリケーションの見映えを損ねるだけではなく、アプリケーションが中断する原因になることも珍しくありません。この記事では、これらの問題を解決するためのヒントの数々を紹介します。

各種のブラウザーに対処する

Web ページがどこででも動作するわけではないのは、主にブラウザーの種類によってサポートされる標準が異なるためです。この問題を克服する最善の方法は共通の属性とメソッドだけを使うことですが、それには特殊なコードを作成しなければならない場合もあります。

innerText 属性を実装する

オブジェクトの開始タグと終了タグで囲まれたテキストを設定または取得するにはinnerText 属性を使用しますが、これは Microsoft® Windows® Internet Explorer® でのみ定義されている属性です。この属性は一般的に使用されているものの、標準属性ではありません。代わりに innerHTML を使うこともできますが、innerText と同じというわけにはいきません。innerText 属性は、子ノードのテキストを直接取得するなどの特殊な機能があるため、簡潔なコードを書くのに役立ちます。また、既存のページが innerText を使用している場合もあります。そのような既存のページでより多くのブラウザーをサポートできるようにするには、innerText 属性を自分自身で実装することによって対処します。例えば、Mozilla ベースのブラウザーにこの属性を実装するには、リスト 1 の方法があります。

                

HTMLElement.prototype.__defineGetter__ 
(
   "innerText",function()
   //define a getter method to get the value of innerText, 
   //so you can read it now! 
   {
      var textRange = this.ownerDocument.createRange();
      //Using range to retrieve the content of the object
      textRange.selectNodeContents(this);
      //only get the content of the object node
      return textRange.toString();
      // give innerText the value of the node content
   }
);

スクロール値とウィンドウ・サイズを取得する

ほとんどの Web アプリケーションには、ウィンドウ・サイズやスクロールの値など、形状に関する値が必要ですが、ブラウザーはこれらの値を異なる属性に保管している場合があります。属性によっては、名前は同じでも意味が異なるといったこともあります。そのため、独自の変数を作成して属性値を表すほうが有効です。リスト 2 に、ほとんどのメジャーなブラウザーで固有の属性を作成する方法を示します。

                

var scrollLeft,scrollTop;
// scrollLeft: The distance between the horizontal scrollbar 
// with the left edge of the frame.
// scrollTop:  The distance between the vertical scrollbar
// with the top edge of the frame. 

// Get the scroll value from different browsers.
// Determine the browser type first. 
// And then get the value from the particular property.		
if (window.pageYOffset){  
	scrollTop = window.pageYOffset 
} else if(document.documentElement && document.documentElement.scrollTop){ 
	scrollTop = document.documentElement.scrollTop; 
} else if(document.body){ 
	scrollTop = document.body.scrollTop; 
} 

if(window.pageXOffset){ 
	scrollLeft=window.pageXOffset 
} else if(document.documentElement && document.documentElement.scrollLeft){ 
	scrollLeft=document.documentElement.scrollLeft; 
} else if(document.body){ 
	scrollLeft=document.body.scrollLeft; 
}


var windowWidth,windowHeight; // frame width & height

if(window.innerWidth){ 
	windowWidth=window.innerWidth; 
} else if(document.documentElement && document.documentElement.clientWidth){ 
	windowWidth=document.documentElement.clientWidth; 
} else if(document.body){ 
	windowWidth=document.body.offsetWidth; 
} 

if(window.innerHeight){ 
	windowHeight=window.innerHeight; 
} else if(document.documentElement && document.documentElement.clientHeight){ 
	windowHeight=document.documentElement.clientHeight; 
} else if(document.body){ 
	windowHeight=document.body.clientHeight; 
}

双方向言語でのウィンドウの原点

アラビア語やヘブライ語などの一部の言語は、右から左の方向で読まれる双方向言語として知られています。現在のブラウザーは、コンテンツを右から左に表示する機能をサポートしています。ただし、ページを右から左に表示する場合、Internet Explorer ではウィンドウに別の原点を定義します。この原点はキャンバスの左隅ではなく、表示部分の左隅に位置します。つまり、ページの一部が負の x 値を持つため、ページの一部の要素が誤った位置に表示されるということです。図1 に、Internet Explorer でページが左から右に表示される場合の原点の位置を示します。

Internet Explorer でページを右から左に表示する場合には、例えば要素の位置を原点のオフセットで調整するなど、演算を変更しなければならないことに注意してください。

ツリー表示リストを複数行にする

ツリー表示リストを表示するには、<ul> タグと <li> タグを使用します。ですが、Mozilla ベースのブラウザーでは <li> タグ内に別の要素を組み込むことが許可されていないため、単純なリスト項目しか使えません。この問題を解決するには、テーブルを利用してツリー表示リストを作成します。LI の代わりに TABLE を使って項目を実装すると、複合項目を使用できるようになります。

ただし、TABLE に複数の列がある場合には、再び問題に突き当たります。マウスでウィンドウのサイズを変更すると、ページは図2 のように表示されます。

図3 に、フレームのサイズを変更するとページがどのようになるかを示します。この場合、列はグリッドに合わせて表示されなくなります。

ツリー表示のテーブルで TD に幅を割り当てることもできますが、それではあまり上手くいきません。TD の幅はその最大サイズを意味するだけなので、ウィンドウのサイズを変更すると、ブラウザーが表示コンテンツの量を増やすために TD をサイズ変更してしまうからです。整然とした表示を実現するには別の手段、DIV が必要になります (この記事では、DIV、TABLE、TD は DOM ツリー内のノードを表しますが、もちろん HTML タグとして扱うこともできます)。

残念ながら、DIV も同様の問題を引き起こすことにすぐ気付きます。DIV の幅は絶対値ではなく、むしろ最小幅であるためです。ウィンドウのサイズを変更すると、ブラウザーによっては DIV の幅も同じく変更してしまいます。それでは、TD と DIV を組み合わせるという手段はどうでしょう。TD に DIV をネストさせると、セルの最大サイズと最小サイズの両方が定義されることになります。これで、図4 に示すようにサイズは固定されます。

上に戻る

複数言語に対処する

アプリケーションが複数の言語をサポートする場合は、同じテキストでも言語によってその長さが変わってくるため、ページの外観を損ねる可能性があることに注意してください。このような状況を改善するには、テキストを含む DIV を調整します。

適切なサイズを DIV に定義する

例えば、DIV を使ってポップアップ・メニューを描くとします。ただし、メニューに固定サイズを指定しないと、ページをスクロールするときに図5 のような問題が起こります。

上記の図を見ておわかりのように、テキストはオーバーフローしています。DIV に固定サイズがない場合、Internet Explorer は自動的に表示部分のサイズを DIV に指定します。そのため、ページをスクロールして表示されていない部分を見ようとすると、DIV のサイズが足りないため、テキストがオーバーフローすることになります。この問題を解決するには、DIV に固定サイズを指定する必要があります。

ここで、サイズの対処方法を見つけ出さなければなりません。複数の言語をサポートする場合、DIV 内のテキスト長は一定ではないことから、サイズをハードコーディングすることは不可能です。テキストの長さを動的に取得してから DIV のサイズを設定しなければなりませんが、ここでテーブルが役に立ちます。テーブルのサイズは、その可視性に依存しないためです。リスト 3 に、DIV に適切な幅を指定する方法を示します。

                
var leftmenu = document.getElementById("leftmenu");
var divWidth = parseInt(document.getElementById("divtable").offsetWidth);
leftmenu.style.width = divWidth  +"px";

上に戻る

ブラウザーの設定の違いに対応する

問題は、ブラウザーや言語の違いだけでなく、ユーザーに起因することもあります。ユーザーがブラウザーに特殊な設定を行ったために問題が発生することは珍しくありません。例えば、JavaScript 機能を無効に設定すると、アプリケーションに問題を引き起こします。

JavaScript をサポートしないブラウザーをサポートする

ユーザーによっては、まだ古いバージョンのブラウザーを使っていたり、ブラウザーで JavaScript を無効に設定しているために Web ページが正しく表示されないことがあります。この問題に対処するには、<noscript> タグを使用できます。これは単に、このタグにテキストを追加して、ユーザーのブラウザーが JavaScript をサポートしていないこと、そしてページを正しく表示できないことをユーザーに伝えるというだけのことです。リスト 4 に、この場合に使用できるコードを示します。

                
<html>
	<head>
	<noscript>
		Your browser does not support JavaScript, 
		or you've disabled the JavaScript in your browser, 
		so you cannot view this page correctly.
	</noscript>
	</head>
</html>

ただし、この問題に対するソリューションとしてこれよりも有効なのは、JavaScript に依存しないバージョンの Web アプリケーションを用意することです。そうすることで、ユーザーが JavaScript サポートを有効にしているかどうかに関わらず、アプリケーションを使用できるようになります。ユーザーを非スクリプト・バージョンに誘導するには、リスト 5 のコードを使用します。

                
<noscript>
	<meta HTTP-EQUIV="REFRESH" CONTENT="0;URL=noscriptversion.jsp?">
</noscript>

上に戻る

まとめ

この記事では、たくさんのヒントを提供しました。例えば、Mozilla ベースのブラウザーで innerText 属性を実装する方法、形状の値を表す変数を使用してすべてのブラウザーが値を使用できるようにする方法、そして Internet Explorer でページを右から左に表示する際に原点のオフセットによって要素の位置を調整する方法などです。さらに、ツリー表示リストを複数行にする方法、DIV 要素に適切なサイズを設定する方法、JavaScript をサポートしないブラウザーをサポートする方法についても説明しました。これらのヒントが日頃の作業に役立つことを願います。

参考文献

学ぶために

• 「The cranky user: Curbing JavaScript dependency」(Peter Seebach 著、developerWorks、2001年3月): なぜ JavaScript が特定のブラウザーで実行されない可能性があるか、そしてページを JavaScript に依存させてはならない理由を説明しています。
  
  
• 「JavaScript and the Document Object Model」(Nicholas Chase 著、developerWorks、2002年7月): DOM に対する JavaScript の手法を詳しく説明しています。
  
  
• 「A cross-browser DHTML table」(Shelley Saxena 著、developerWorks、2001年5月): DHTML と JavaScript を使ってブラウザー間テーブルを作成する方法を学んでください。
  
  
• W3C (World Wide Web Consortium) 標準: W3C 標準でページを作成してください。複数のブラウザーをサポートする最善の方法です。
  
  
• Mozilla: このブラウザーの正式 Web サイトにアクセスしてください。
  
  
• テクノロジーのブックストア: この技術やその他の技術に関する本を参照してください。
  
  
• developerWorks Web development ゾーン: Web 技術を専門とした記事およびチュートリアルで、サイト開発の技術を磨いてください。
  
  
• developerWorks technical events and webcasts: 学習の早道となり、難しいソフトウェア・プロジェクトの品質とその結果を改善する技術的セッションが満載です。
  
  

製品や技術を入手するために

• IBM トライアル・ソフトウェア: developerWorks から直接ダウンロードできるソフトウェアで、次の開発プロジェクトを構築してください。
  
  
• developerWorks の Web Development Downloads and products エリア : さまざまな無料ダウンロードを紹介しています。
  
  

議論するために

• developerWorks blogs: developerWorks blogsから developerWorks コミュニティーに加わってください。
  
  

著者について

この記事を評価する

コメント

上に戻る

目次

• 各種のブラウザーに対処する
• 複数言語に対処する
• ブラウザーの設定の違いに対応する
• まとめ
• 参考文献
• 著者について
• コメント