JavaScriptはVBScriptやActiveXと違って基本的にNNでもIEでもWinでもMacでもUNIXでも使えるクロスプラットフォームでクロスブラウザな言語です。とはいえ、ブラウザの進歩にともなうバージョン間の違いやマシン環境による違いも当然ながら存在しています。
この本では主にブラウザ間の違いをあまり意識せずにDHTMやJavaScriptを書けるようにすることを意図していますが、
将来のバージョンやDHTMLを使えない古いバージョンアップや環境の違いに対応するときなどのために処理を分岐する方法を学んでおくことも不可欠です。
ここでは、JavaScriptに必須のそれらのいくつかの方法について説明します。
1.ブラウザを調べる
2.ブラウザバージョンを調べる
3.OSを調べる
4.オブジェクトの有無を調べる
5.IEのバージョンを細かく調べる
6.IEの条件コンパイル(コメント内へ記述)
7.タグで分岐する
8.SCRIPTタグを理解できないブラウザ対策
9.サーバー側で分岐する(Perl)
10.サーバー側で分岐する(PHP)
11.サーバー側で分岐する(SSI)
1.ブラウザを調べる
navigatorオブジェクトのプロパティuserAgentなどの中には下表のような文字列が格納されています。それらを取り出してブラウザ名を特定できる文字列があるかどうかなどを調べ、
そのブラウザに限定された処理を分岐する方法です。
たとえば、下記で使っているindexOf()は文字の位置を検索するメソッドで、
navigator.userAgent.indexOf("Gecko")と書くとGeckoという文字列が含まれていればその位置を返し、
含まれていなければ-1を返します。そこで、もしそれが-1ではなければ Geckoという文字列が含まれていることになりますから
Geckoエンジン用の命令を実行するように限定することができるようになります。
1.Netscape
if(navigator.appName=="Netscape"){
//Netscape用の命令をここに書く
}
2.Netscape6 や Mozilla(オープンソース版)
if(navigator.userAgent.indexOf("Gecko")!=-1){
//Netscape6や7などMozillaのGeckoエンジンを
//使用したブラウザ用の命令をここに書く
}
3.Netscape6のみ
if(navigator.userAgent.indexOf("Netscape6")!=-1){
//Netscape6用の命令をここに書く
}
4.Internet Explorer
if(navigator.appName=="Microsoft Internet Explorer"){
//IE用の命令をここに書く
}
5.Internet Explorer
if(navigator.userAgent.indexOf("MSIE")!=-1){
//IE用の命令をここに書く
}
6.Opreaすべて
if(window.opera){
//Oprea用の命令をここに書く
// OperaはusaerAgentにNetscapeやIEのusaerAgent文字列を
// 自由に含ませられるので要注意。それらと動作が違う時は
// 先に分岐しておく必要がある。
}
7.Oprea6の場合
if(navigator.userAgent.search('opera(\ |\/)6') != -1){
//Oprea6用の命令をここに書く
// OperaはusaerAgentにNetscapeやIEのusaerAgent文字列を
// 自由に含ませられるので要注意。それらと動作が違う時は
// 先に分岐しておく必要がある。
}
8.Oprea7の場合
if(navigator.userAgent.search('opera(\ |\/)7') != -1{
//Oprea7用の命令をここに書く
// OperaはusaerAgentにNetscapeやIEのusaerAgent文字列を
// 自由に含ませられるので要注意。それらと動作が違う時は
// 先に分岐しておく必要がある。
}
9.Safari (Mac OSX用ブラウザ)の場合
if(navigator.userAgent.indexOf("Safari")!=-1){
//Safari用の命令をここに書く
// SafariのusaerAgentには like Gacko という
// 文字列が含まれるので要注意。n6,n7,m1などと混在し、
// 動作が違う時はこれらより先に分岐する。
}
10.Konqueror (Linux KDE用ブラウザでSafariのベースにもなっている)の場合
if(navigator.userAgent.indexOf("Konqueror")!=-1){
//Konqueror用の命令をここに書く
}
11.DreamPassport (ドリームキャスト用ブラウザ)
if(navigator.userAgent.indexOf("DreamPassport")!=-1){
//ドリームパスポート用の命令をここに書く
}
12.PS2 NetFront (PS2用ブラウザ)
if(navigator.userAgent.indexOf("AveFront")!=-1){
//PS2 NetFront用の命令をここに書く
}
13.PS2 EGBROWSER (PS2用ブラウザ)
if(navigator.userAgent.indexOf("Planetweb")!=-1){
//PS2 EGBROWSER用の命令をここに書く
}
14.Zaurus (シャープZaurus 用ブラウザ)
if(navigator.userAgent.indexOf("sharp pda browser")!=-1){
//Zaurus用の命令をここに書く
}
* 三項演算子版バリエーション
1.Netscape
if( navigator.appName=="Netscape" ? true : false ){
//Netscape用の命令をここに書く
}
2.Netscape
var NN = navigator.appName=="Netscape" ? true : false
if( NN ){
//Netscape用の命令をここに書く
}
3.Netscape
if( navigator.appName=="Netscape" ? 1 : 0 ){
//Netscape用の命令をここに書く
}
参考: 下表は各ブラウザごとのuserAgentやappVersionの例です。
各OS/ブラウザ別 navigatorオブジェクトのプロパティ一覧
ブラウザごとの navigator.userAgent 例
| OS |
ブラウザ |
navigator.userAgent |
| MacOS9 |
IE4.5 |
Mozilla/4.0 (compatible; MSIE 4.5;
Mac_PowerPC) |
| IE5.0 |
Mozilla/4.0(compatible;MSIE5.0;Mac_PowerPC) |
| N2.02[ja] |
Mozilla/2.02 [ja] (Macintosh; I; PPC) |
| N3.04 |
Mozilla/3.04 (Macintosh; I; PPC) |
| N4.7 |
Mozilla/4.7 [ja] (Macintosh; I; PPC) |
| Mozilla 0.9.1 |
Mozilla/5.0 (Macintosh; U; PPC; en-US;
rv:0.9.1) Gecko/20010607 |
| iCab 2.51 |
iCab J/2.5.1 (Macintosh; I; PPC) |
| MacOSX |
Mozilla1.1
|
Mozilla/5.0
(Macintosh; U; PPC Mac OS X; en-US; rv:1.1) Gecko/20020826 |
| IE5.1 |
Mozilla/4.0
(compatible; MSIE 5.12; Mac_PowerPC)
|
Safari
|
Mozilla/5.0
(Macintosh; U; PPC Mac OS X; ja-jp) AppleWebKit/48 (like Gecko)
Safari/48 |
| Win95 |
IE4.01 |
Mozilla/4.0 (compatible; MSIE 4.01; Windows
95) |
| Win98 |
IE5.0 |
Mozilla/4.0 (compatible; MSIE 6.0b; Windows
98; Win 9x 4.90) |
| NN4.75 |
Mozilla/4.75 [ja] (Win98; U) |
| WinMe |
IE6.0b |
Mozilla/4.0 (compatible; MSIE 6.0b; Windows
98; Win 9x 4.90) |
| NN3.03 |
Mozilla/3.03 (Win95; I) |
| NN4.7 [ja] |
Mozilla/4.7 [ja] (Win95; I) |
| NN4.78 [ja] |
Mozilla/4.78 [ja] (Win98; U) |
| N6.01 |
Mozilla/5.0 (Windows; U; Win 9x 4.90;
ja-JP; m18) Gecko/20010131 Netscape6/6.01 |
| N6.1 |
Mozilla/5.0 (Windows; U; Win 9x 4.90;
ja-JP; rv:0.9.2) Gecko/20010726 Netscape6/6.1 |
| N6.2 |
Mozilla/5.0 (Windows; U; Win 9x 4.90;
ja-JP; rv:0.9.4) Gecko/20011019 Netscape6/6.2 |
| Mozilla 0.9.7 |
Mozilla/5.0 (Windows; U; Win 9x 4.90;
en-US; rv:0.9.7) Gecko/20011221 |
| Opera 6.0 |
Opera/6.0 (Windows ME; U) _ [en] *注意 |
| WinNT4.0 |
IE5.5 |
Mozilla/4.0 (compatible; MSIE 5.5; Windows
NT 4.0) |
| NN4.75 |
Mozilla/4.75 [ja] (WinNT; U) |
| Mozilla 1.0 |
Mozilla/5.0 (Windows; U; WinNT4.0; en-US;
rv:1.0.0) Gecko/20020530 |
| WinXP |
IE6.0 |
Mozilla/4.0 (compatible; MSIE 6.0; Windows
NT 5.1) |
| Mozilla 1.0 |
Mozilla/5.0 (Windows; U; Windows NT 5.1;
en-US; rv:1.0.0) Gecko/20020530 |
| Linux(RedHat) |
NN4.76 |
Mozilla/4.76 [ja/[Vine,RedHat]] (X11; U;
Linux 2.4.2-2 i586) |
| PS2 |
NetFront |
Mozilla/3.0 (AveFront/2.6) |
| EGBROWSER |
Mozilla/3.0 (Planetweb/v1.07 Build 141; SPS
JP) |
| DP(ドリキャス) |
DP3 |
Mozilla/3.0 (DreamPassport/3.0) |
注意
*
Mac IE5.0では「MSIE5.0」のようにMSIEとバージョン番号5.0の間にスペースがありませんが、これ以外のIEにはMac,Winともに半角スペースが入っています。
*
Safariには like Gecko
という文字列が入っていますが、Geckoエンジンを使用しているわけではありません。したがってGeckoエンジンを使用したブラウザ(N6,N7,Mozilla等)と動作が違う部分では「Gecko」という文字列で分岐する場合はそれらのブラウザより先の行で分岐する必要があります。
*
Operaや
iCabはnavigatorオブジェクトのプロパティをユーザーが設定で書き換えてしまうことができるため設定によってuserAgent文字列が変化します。このためブラウザ分岐が混乱する危険があります。それぞれuserAgentのOperaやiCabという文字列をチェックしましょう。
OperaのuserAgent文字列変化例
Identify as Mozilla 5.0 の場合
[userAgent]:Mozilla/5.0 (Windows ME; U) Opera 6.0 _ [en]
[appVersion]:5.0 (Windows ME; U)
Identify as Mozilla 4.76 の場合
[userAgent]:Mozilla/4.76 (Windows ME; U) Opera 6.0 _ [en]
[appVersion]:4.76 (Windows ME; U)
Identify as Mozilla 3.0 の場合
[userAgent]:Mozilla/3.0 (Windows ME; U) Opera 6.0 _ [en]
[appVersion]:3.0 (Windows ME; U)
Identify as MSIME 5.0 の場合
[userAgent]:Mozilla/4.0 (compatible; MSIE 5.0; Windows ME) Opera 6.0 _
[en] [appVersion]:4.0 (compatible; MSIE 5.0; Windows ME)
2.ブラウザバージョンを調べる
navigatorオブジェクトのプロパティappVersionの最初の1文字をcharAt(0)で取り出して
ブラウザのメジャーバージョンによる分岐を行うことができます。
ここで特に注意しておきたいのは、appVersionの最初の一文字目は、IE4とIE5ではともに「4」、N6では「5」ということでブラウザ名称の番号とは必ずしも一致していないことです。
1.バージョン 2.x
if(navigator.appVersion.charAt(0)==2){
//バージョン2.x(NN2.x,IE3.x[Mac版はver3])用の命令をここに書く
}
2.バージョン 3.x
if(navigator.appVersion.charAt(0)==3){
//バージョン3.x(NN3.x,IE3.x[Mac版])用の命令をここに書く
}
3.バージョン 4.x
if(navigator.appVersion.charAt(0)==4){
//バージョン4.x(NN4.x,IE4.x)用の命令をここに書く
}
4.バージョン 4.x以上
if(navigator.appVersion.charAt(0)=>4){
//バージョン4.x(NN4.x,IE4.x)以上用の命令をここに書く
}
3.OSを調べる
navigator.userAgentには上記の表でわかるとおり、OSを特定できる文字列も含まれています。 そこで、もしそれが含まれていれば
そのOS用の命令を実行するように限定することが可能です。 N4,IE4以降のブラウザでは専用のプロパティも追加されています
(ただし、JavaScript実装ブラウザでnavigator.userAgent未実装のブラウザは無いので
userAgentの方がオールマイティでしょう)。
1.Win
if(navigator.userAgent.indexOf("Win")!=-1){
//Win用の命令をここに書く
}
2.Mac
if(navigator.userAgent.indexOf("Mac")!=-1){
//Mac用の命令をここに書く
}
3.X11
if(navigator.userAgent.indexOf("X11")!=-1){
//X11用の命令をここに書く
}
--(*N4,IE4以降追加された方法)--
4.Win3.1
if(navigator.platform=="Win16"){
//Win3.1用の命令をここに書く
}
5.Win95/NT
if(navigator.platform=="Win32"){
//Win95/NT用の命令をここに書く
}
6.Mac68k
if(navigator.platform=="Mac68k"){
//Mac68k用の命令をここに書く
}
7.MacPPC
if(navigator.platform=="MacPPC"){
//MacPPC用の命令をここに書く
}
8.UNIX
if(navigator.platform=="UNIX"){
//UNIX用の命令をここに書く
}
Sample
<script language="JavaScript">
<!--
// 各OS別にメッセージを表示する
// OS
var Win = navigator.userAgent.indexOf("Win") != -1 ? true : false
var Mac = navigator.userAgent.indexOf("Mac") != -1 ? true : false
var X11 = navigator.userAgent.indexOf("X11") != -1 ? true : false
var msg = ""
if(Win) msg = "<b> Win </b>ですね"
else if(Mac) msg = "<b> Mac </b>ですね"
else if(X11) msg = "<b> X11 </b>ですね"
document.write(msg)
//-->
</script>
Sample各OS別にメッセージを表示する
4.オブジェクトの有無を調べる
ここまでの１〜３までの方法は、各ブラウザやバージョン、OSごとに異なる実装を分岐して吸収するのに役立ちますが
それぞれの環境でどのような実装がなされているかをあらかじめ知っている必要があります。
これに対して、この「オブジェクトの有無を調べる」方法はそれらの実装状況を知らなくても使える分岐方法です。
つまり、条件式に使うオブジェクトが存在すれば実行し、存在しなければ実行しないので、あらかじめその
オブジェクトがその環境に実装されているかを知っている必要が無いのです。
(この本では主にこの方法を使っていますが、この本のサンプルの
document.layersやdocument.allの部分を上記の分岐方法に書き換えて 使用してもかまいません)
1.layers
if(document.layers){
//layersが使える場合(NN4用)の命令をここに書く
}
2.all
if(document.all){
//allが使える場合(IE4用)の命令をここに書く
}
3.getElemetById
if(document.getElemetById){
//getElemetByIdが使える場合
//(W3C-DOM対応ブラウザ N6/Mozilla/IE5)の命令をここに書く
}
4.images
if(document.images){
//imagesが使える場合(NN3,IE4[Mac版はIE3]以上用)
//の命令をここに書く
}
5.opener
if(document.opener){
//openerが使える場合(NN2,NN3,IE4[Mac版はIE3]以上用)
//の命令をここに書く
}
5.etc...
Sample
DHTMLを使えるブラウザと使えないブラウザを分岐する
1.オブジェクトの有無を調べる
if(document.layers || document.all || document.getElemetById)){
//DHTMLを使える場合(NN4 6,IE4 5用)の命令をここに書く
} else {
//DHTMLを使えない場合の命令をここに書く
alert('NN4かIE4以上でみてね^^;;')
}
2.ブラウザとバージョンを調べる
var brwsr=( navigator.appName=="Netscape"
||navigator.appName=="Microsoft Internet Explorer")
var ver=(navigator.appVersion.charAt(0)>=4)
var dhtmlbrwsr=(brwsr||ver)
if(dhtmlbrwsr){
//DHTMLを使える場合(NN4 6,IE4 5用)の命令をここに書く
} else {
//DHTMLを使えない場合の命令をここに書く
history.go(-1) //前のページへ戻す
}
3.IEとNN4とN6/Mozillaの動作を分岐する
function showLAYER(layName){
if ( document.all )document.all( layName ).style.visibility ='visible'
else if ( document.layers)document.layers[ layName ].visibility ='show'
else if ( document.getElementById )
document.getElementById( layName ).style.visibility ='visible'
}
5.IEのバージョンを細かく調べる
IEにはJScript2.0(IE4以降)で実装されたスクリプトエンジンのバージョンを返す独自の関数があります。
上記の分岐方法に加えて更にIEのバージョンに依存したものを厳密に分岐しようという時に役に立ちます。
1.ScriptEngine()
スクリプト言語名(JScript,VBA,VBScriptなど)を返します｡
この関数はJScript2.0で実装されたためJScript2.0以降なら
「JScript」という文字列を返します｡(IE3.0はJScript1.0,IE4.0はJScript3.0)
typeof ScriptEngine を使うとJScript1.0以前のバージョンまたは
これを認識しないブラウザは"undefined"を返すので分岐できます。
if(typeof ScriptEngine){
//IIS1.0(JScript2.0),IE4.0(JScript3.0)以降用
} else {
//IE3.0(JScript1.0)以前またはIE以外のブラウザ用
}
2.ScriptEngineMajorVersion()
使用中の言語のメジャーバージョンを整数で返します｡
3.ScriptEngineMinorVersion()
使用中の言語のマイナーバージョンを整数で返します｡
if(typeof ScriptEngineMajorVersion){
var smav = ScriptEngineMajorVersion() //メジャーバージョン
var smiv = ScriptEngineMinorVersion() //マイナーバージョン
var sv = smav + smiv/10
if( sv == 3 ){
// JScript3.0 用 --IE4.0
} else if( sv == 5 ){
// JScript5.0 用
} else if( sv == 5.1 ){
// JScript5.1 用
} else if( sv == 5.5 ){
// JScript5.5 用
} else if( sv == 5.6 ){
// JScript5.6 用
} else {
// 上記以外用
}
} else {
//IE3.0(JScript1.0)以前またはIE以外のブラウザ用
}
4.ScriptEngineBuildVersion()
使用中の言語のビルドバージョンを整数で返します｡
if(ScriptEngineBuildVersion){
if( ScriptEngineBuildVersion() == 6626 ){
// ビルドバージョンが6626の場合だけの処理
}
}
各アプリケーション別 JScriptデフォルト実装のバージョン一覧表
|
デフォルト実装ブラウザ
|
デフォルト実装IIS
|
デフォルト実装ツール
|
デフォルト実装OS
|
JScript 1.0
|
IE3.0
|
|
|
|
| JScript 2.0 |
|
IIS3.0
|
|
|
| JScript 3.0 |
IE4.0
|
IIS4.0
|
|
|
| JScript 4.0 |
|
|
VS 6.0
|
|
| JScript 5.0 |
IE5.0
|
|
|
|
| JScript 5.1 |
IE5.01
|
|
|
Win 2000
|
| JScript 5.5 |
IE5.5
|
|
|
Win Me
|
| JScript 5.6 |
IE6.0
|
|
|
Win XP
|
*IEはInternet Explorer *IISはInternet Information Server *VSはVisual
Studio
6.IEの条件コンパイル(コメント内へ記述)
IE4(JScriptバージョン3.0)からは、スクリプトのコメント内に条件付で処理を行うステートメントが追加されています。コメント内に書きますので、これを認識できないブラウザでは何も起こりません。ただし、逆にこの条件コンパイル変数を知らずにコメント内へ書き込むとIE4以降では、コメント内の記述にもかかわらず予想しないエラーに見舞われますので注意が必要です。
条件コンパイルをオンにすると、JScript コンパイラでは、@
で始まる識別子を条件コンパイル変数としてコンパイルします。条件コンパイルを指定するには、/*@cc_on @*/
と書いて条件コードを開始します。
/*@cc_on @*/
/*@if (@_jscript)
alert("JScriptを使えます:"+@_jscript_version)
@else @*/
alert("JScriptを使えません")
/*@end @*/
条件コンパイルのステートメント
| ステートメント |
意味 |
| @cc_on |
条件コードを開始 |
| @if(条件) ... @elif(条件) ... @else ... @end |
条件式の値を評価して適切なステートメントを実行 |
| @set @変数名 = term |
条件コンパイル ステートメントで使用する変数を作成 |
条件コンパイルの環境変数
| 変数 |
意味 |
| @_win32 |
Win32 システム上で実行されていれば真 (true) |
| @_win16 |
Win16 システム上で実行されていれば真 (true) |
| @_mac |
Apple Macintosh システム上で実行されていれば真 (true) |
| @_alpha |
DEC Alpha プロセッサ上で実行されていれば真 (true) |
| @_x86 |
Intel プロセッサ上で実行されていれば真 (true) |
| @_mc680x0 |
Motorola 680x0 プロセッサ上で実行されていれば真 (true) |
| @_PowerPC |
Motorola PowerPC プロセッサ上で実行されていれば真 (true) |
| @_jscript |
常に真 (true) |
| @_jscript_build |
JScript スクリプト エンジンのビルド番号 |
| @_jscript_version |
JScript バージョン番号 (メジャー.マイナー) |
7.タグで分岐する
scriptタグにはlanguage属性があり、言語の種類とバージョンを限定することができます。
但し、HTML4.01では、language属性は推奨されなくなり、替わりにtype属性を使うことが
求められていますが、type属性とlanguage属性を併記するとlanguage属性を無効化してしまう
という実装のためにバージョン指定ができなくなるという問題がありますので、 この点に強く留意して使うことをお勧めします。
1.language属性
スクリプト言語名(JavaScript,JScript,VBScriptなど)とバージョンを指定します｡
<script language="JavaScript">
<!--
JavaScriptを解釈できるブラウザ共通のコード
//-->
</script>
<script language="JavaScript1.1">
<!--
JavaScript1.1コード (N3など)
//-->
</script>
<script language="JScript">
<!--
IE専用のコード
//-->
</script>
2.type属性
スクリプト言語のMIMEタイプ(text/javascriptなど)を指定します｡
<script type="text/javascript">
<!--
JavaScriptを解釈できるブラウザ共通のコード
//-->
</script>
3.注意事項
type属性とlanguage属性を併用するとlanguage属性が無効になります
<script type="text/javascript" language="JavaScript1.5">
<!--
JavaScript1.5とは無関係にJavaScriptを解釈できる
すべてのブラウザで実行されてしまいます。
//-->
</script>
language属性の各バージョンがデフォルト実装されたかまたは該当するブラウザ一覧表
|
Netscape(Moziila)
|
Win IE
|
Mac IE
|
Opera
|
JavaScript
|
N2.x
|
IE3.x
|
IE3.x
|
O4.x
|
| JavaScript 1.1 |
N3.x
|
IE4.x
|
IE4.x
|
O4.x
|
| JavaScript 1.2 |
N4.x
|
-
|
-
|
O4.x
|
| JavaScript 1.3 |
N4.06〜、N4.5〜
|
IE5.x
|
IE5.x
|
O5.x
|
| JavaScript 1.4 |
-
|
-
|
IE5.x
|
O6.x
|
| JavaScript 1.5 |
N6.x
|
IE6.x
|
-
|
-
|
* N7,Mozilla1.0,IE6.0現在 Netscape以外はおおむね該当するバージョンです
*N4はN4.0x系統とN4.x系統があり、それぞれN4.06〜、N4.5〜でスクリプトバージョンが変わっています。
language属性の各バージョンのタグ内コードをコンパイルするブラウザ一覧表
(language属性へ下記バージョンを指定した時に無視せずにコンパイルするブラウザです。逆にエラーが出る場合もあります)
|
Netscape(Moziila)
|
Win IE
|
Mac IE
|
Opera
|
JavaScript
|
N2.x〜N7.x
|
IE3.x〜IE6.x
|
IE3.x〜IE5.x
|
O4〜O6.x
|
| JavaScript 1.1 |
N3.x〜N7.x
|
IE4.x〜IE6.x
|
IE4.x〜IE5.x
|
O4〜O6.x
|
| JavaScript 1.2 |
N4.x〜N7.x
|
IE4.x〜IE6.x
|
IE5.x
|
O4〜O6.x
|
| JavaScript 1.3 |
N4.06〜、N4.5〜N7.x
|
IE5.x〜IE6.x
|
IE5.x
|
O5〜O6.x
|
| JavaScript 1.4 |
N6.x〜N7.x
|
-
|
IE5.x
|
O6.x
|
| JavaScript 1.5 |
N6.x〜N7.x
|
-
|
-
|
-
|
* N7,Mozilla1.0,IE6.0現在
*コンパイルするからといってそこに書かれたコードを実行できるとは限らないため各ブラウザの実装ベースの対応には注意しなければなりません。
参考 :
1.萩原さんの
SCRIPT Tag:version
2.
スクリプトバージョンのチェック
8.SCRIPTタグを理解できないブラウザ対策
現在のパソコン用のブラウザでscriptタグを理解できないものというのは希少と言える状況ですが、それでも
存在しないというわけではありませんし、JavaScriptをoffにしている方もいます。
また、最近は、PC以外にも様々な機器が登場してきていますから
そういう機器に実装されたJavaScriptを解釈できないブラウザも存在しています。
それらのブラウザで見るとscriptタグの中身はソースがむき出しで表示されてとても醜いページになってしまいます。
そこで、それらのブラウザ見た時にスクリプト部分が むき出しで表示されてしまわないための方法です。
<!--から//-->の間に記述する
HTMLのコメント内に記述すれば、画面へ表示されなくなります。
最後の//は、逆にスクリプトを理解できるブラウザで-->をスクリプトと
誤認しないためにJavaScriptでコメントとして扱うようにしています。
これを//-->の替わりにHTMLのコメントとして<!---->このように書く
方法も昔はよく使われましたが、最近はあまりみかけなくなりました。
<script language="JavaScript">
<!--
JavaScriptコード
//-->
</script>
<script language="JavaScript1.1">
<!--
JavaScriptコード
<!---->
</script>
9.サーバー側で分岐する(Perl)
HTMLやスクリプトでブラウザ分岐する方法のほかにサーバー側で分岐してしまう方法があります。
環境変数の$HTTP_USER_AGENTでブラウザのユーザーエージェントを調べてブラウザへ送る前にあらかじめ絞り込んでしまう方法です。
上記のJavaScriptによる分岐ほど細かな分類はできませんが、
逆にスクリプトやHTMLを解釈しないブラウザまでチェックできるメリットがあり、
また、最初から該当ブラウザには不要なデータの送信をしないことでブラウザの負荷を軽減することも可能です。
#!/usr/local/bin/perl
# ユーザーエージェント文字列を取り出します
my $UsrAgent = $ENV{'HTTP_USER_AGENT'} ;
# UAを/で分割します(Mozilla/直後の文字列を$user_agent[0]で取り出すためです)
@user_agent = split(/\//,$UsrAgent) ;
# 各ブラウザをあらわす文字列があるかどうかを調べます
my $msie = index($UsrAgent,'MSIE') !=-1 ; # MSIE
my $msie4 = index($UsrAgent,'MSIE 4')!=-1 ; # MSIE4
my $opera = index($UsrAgent,'Opera') !=-1 ; # Opera
my $gecko = index($UsrAgent,'Gecko') !=-1 ; # Mozilla(N6,N7...)
my $drepass1 = index($UsrAge,"DreamPassport/1")!=-1 ; # ドリームパスポート1
my $drepass2 = index($UsrAge,"DreamPassport/2")!=-1 ; # ドリームパスポート2
my $drepass3 = index($UsrAge,"DreamPassport/3")!=-1 ; # ドリームパスポート3
my $ps2nf = index($UsrAge,"AveFront")!=-1 ; # PS2用NetFront
my $ps2ez = index($UsrAge,"Planetweb")!=-1 ; # PS2用EGBROWSER
# PDA
my $zaurus = index($UsrAge,"sharp pda browser")!=-1 ; # ザウルス
# OS
my $win = index($UsrAgent,"Win") != -1 ; # Windows
my $mac = index($UsrAgent,"Mac") != -1 ; # Mac
my $x11 = index($UsrAgent,"X11") != -1 ; # X11
# 携帯
my $astel = $user_agent[0] eq 'ASTEL' ; # .i ASTEL
my $au = index($UsrAgent,'UP.Browser')!=-1 ; # EZweb au
my $auold = $user_agent[0] eq 'UP.Browser' ; # (EZweb au _old)
my $aunew = index($UsrAgent,"KDDI")!=-1 ; # (EZweb au _new)
my $h = $user_agent[0] eq 'PDXGW' ; # H"
my $docomo = $user_agent[0] eq 'DoCoMo' ; # DoCoMo
my $jphone = $user_agent[0] eq 'J-PHONE' ; # J-PHONE
# 情報別にメッセージをセット
my $msg = "" ;
if($opera){ //OperaはIEやMozillaにもマッチしてしまうので先に分別する
$msg = "Operaですね" ;
} elsif($win) {
$msg = "Windowsですね" ;
} elsif($mac) {
$msg = "Macですね" ;
} elsif($x11) {
$msg = "X11ですね" ;
} elsif($docomo) {
$msg = "ドコモの携帯ですね" ;
} else {
$msg = "わかりませんでした" ;
}
print <<__HTM__;
Content-type: text/html
<script language='JavaScript'>
alert('このブラウザは $msg')
</script>
__HTM__
Sample :
http://game.gr.jp/svmix/pl/ua.cgi(回線をつないでください)
10.サーバー側で分岐する(PHP)
PHPでもPerlと同様の分岐が可能です。環境変数の$HTTP_USER_AGENTの文字列からブラウザを特定する文字列を検出して分岐するのも同じです。
<?
//ユーザーエージェント文字列を取り出します
$UsrAgent = $HTTP_USER_AGENT ;
//各ブラウザをあらわす文字列があるかどうかを調べます
$msie = ereg('MSIE',$UsrAgent) ; # MSIE
$msie4 = ereg('MSIE 4',$UsrAgent) ; # MSIE4
$msie6 = ereg('MSIE 6',$UsrAgent) ; # MSIE6
$opera = ereg('Opera',$UsrAgent) ; # Opera
$gecko = ereg('Gecko',$UsrAgent) ; # Mozilla(N6,N7...)
if($opera){ //OperaはIEやMozillaよりも先に分別する
$msg = 'Operaですね' ;
} elseif($msie4){
$msg = 'IE4ですね' ;
} elseif($msie6){
$msg = 'IE6ですね' ;
} elseif($gecko){
$msg = 'Geckoを使っていますね' ;
} else {
$msg = 'JavaScript使えますね' ;
}
echo "
<script language='JavaScript'>
alert('$msg $UsrAgent')
</script>
" ;
?>
Sample :
http://game2.ncs.gr.jp/~tato/svmix/php/ua.php3(回線をつないでください)
11.サーバー側で分岐する(SSI)
上記PHPと同様のものをSSIで試したもの。Perl,PHP,SSIに限らずサーバーサイドの言語ならおおむね似通った方法で分岐が可能です。
<script>
<!--
<!--#if expr="$HTTP_USER_AGENT=/Opera/" -->
alert('Operaですね') //Opera用スクリプトをここに書く
<!--#elif expr="$HTTP_USER_AGENT=/MSIE 4/" -->
alert('IE4ですね') //IE4用スクリプトをここに書く
<!--#elif expr="$HTTP_USER_AGENT=/MSIE 5/" -->
alert('IE5ですね') //IE5用スクリプトをここに書く
<!--#elif expr="$HTTP_USER_AGENT=/MSIE 6/" -->
alert('IE6ですね') //IE6用スクリプトをここに書く
<!--#elif expr="$HTTP_USER_AGENT=/Gecko/" -->
alert('Geckoエンジンを使っていますね') //Gecko用スクリプトをここに書く
<!--#else -->
alert('JavaScript使えますね') //その他用スクリプトをここに書く
<!--#endif -->
//-->
</script>
Sample :
http://game.gr.jp/svmix/ssi/ua.htm(回線をつないでください)
上記にみてきたようにDHTML/JavaScriptコ−ドをユーザーの環境に合わせて分岐するにはたとえば、ペ−ジに入った瞬間にNN,IE,その他をチェックしてそれぞれのペ−ジへ飛ばしてしまう方法から、
クロスコ−ド１本で処理する方法、サーバー側で分岐してしまう方法までさまざまなやり方があります。
それぞれ一長一短がありますのでケ−スに応じて使い分けましょう。
いずれにしても、この本で利用しているクロスブラウザ関数は各環境別の処理を関数内へリストアップしているのと同じことですので、
それらを分解して利用すれば様々な使い方にも手軽に応用できると思います。