ＪａｖａＳｃｒｉｐｔ講座(Vol.17)

ＪａｖａＳｃｒｉｐｔ講座
（メールマガジン編）

１０/２７日発行　ヨッシーの”ホームページを作ろう！（JavaScript編）”★Vol.17★

ブラウザ情報の取得

今回と次回の２回で、ブラウザ情報についてのプログラムを作ってみよう。
まず、今回はその人のブラウザの種類を判定するプログラムをやってみるね。
これによって、ブラウザごとに違うページに行ってもらったりすることができるね。

★ ブラウザの種類の表示 ★

ブラウザの種類を判定するためのプログラムを作る前に、
１つ新しい命令を覚えよう。

文字列.indexOf("検索文字",検索開始位置)

文字列から検索文字の場所を調べる

この時返される値は、一致した文字列の先頭文字の場所（ただし先頭を０とする）。
つまり、２番目に見つかれば"１"、５番目ならば"４"が帰ってくるね。
また、一致する文字列が見つからない場合は"-1"が返されるんだ。
すこし、いろいろ指定があってややこしいかもしれないけれど、次の例を見て感覚で覚えよう。

例）
　"ABCDE".indexOf("C",0)
　　⇒"ABDCE"から"C"を１番前(0)から探す。一致場所は３番目なので"2"が返る。

　"abcde".indexOf("d",2)
　　　⇒"abcde"から"d"を３番目(2)から探す。一致場所は２番目なので"1"が返る。

　"12345".indexOf("34",0)
　　　⇒"12345"から"34"を１番目(0)から探す。一致場所は３番目(文字の先頭)なので"2"が返る。

　"ABCDE".indexOf("1",0)
　　⇒"ABDCE"から"1"を１番前(0)から探す。一致場所は無いので"-1"が返る。

　"abcde".indexOf("d")
　　　⇒検索開始位置を指定しない場合は"0"と同じ。つまり、一番前から検索する。一致場所は４番目なので"3"が返る。

わかったかな？
今回のプログラムで使うのは、"一致する文字が見つかった時は必ず０以上が返る！"という仕組みだよ。
(※文字が見つかれば必ず０以上が返ってくるよね。上の例などから理解しよう)
数字が返る、という意味がわからない人もとりあえず先を読んでみよう。
(※できれば、以前のマガジンを読み返そう）

じゃあ、これから実際にブラウザ判定のプログラムを見てみるね。

--ブラウザの種類を判定する--

<HTML>
<HEAD>
<TITLE>ブラウザ判定</TITLE>
<SCRIPT language="JavaScript">

</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
if(ua == 1){
    document.write("あなたの使っているブラウザはIE5です。");
}
else if(ua == 2){
    document.write("あなたの使っているブラウザはIE4です。");
}
else if(ua == 3){
    document.write("あなたの使っているブラウザはNN4です。");
}
else if(ua == 4){
    document.write("あなたの使っているブラウザはIE3です。");
}
else if(ua == 5){
    document.write("あなたの使っているブラウザはIE3です。");
}
else{
    document.write("あなたはなにを使っているのですか？");
}
</SCRIPT>
</BODY>
</HTML>

--解説--

ifの使い方は少しずつわかってきたかな？
今回のプログラムは少し長いけれど、やっていることは単純なことの繰り返しなんだよ。

まず、見慣れない"navigator.userAgent"という文字が並んでいるね。
まずは、これから説明しよう。

navigator.userAgent

エージェント情報の取得

エージェントとは何か、これは僕にもよく知らないんだ。
特に今は名前を覚える必要も無いよ。(このメールマガジンの間だけ覚えておいてね)
プログラムというのは全てを知らないといけないのではなく、その使い方を知っていればいいので、
とりあえずこれを使えばブラウザの判定ができるということを知っておいてね。
（もちろん、知っていた方がいい。ただ、わからない時はわからないなりに覚えておくのも１つの方法。）
じゃ、これを使えば何がわかるか、下を見てみよう

ブラウザ

エージェント情報に入っているもの

エクスプローラー５ Mozilla/4.0 , MSIE 5

エクスプローラー４ Mozilla/4.0 , MSIE 4

エクスプローラー３ MSIE 3.0

ネットスケープ４ Mozilla/4.0

ネットスケープ３ Mozilla/3.0

それぞれのブラウザからエージェント情報を取り出してくると、ブラウザによって上のような情報が送られてくるんだ。
（※実際はもっと長い情報、例えばIE5ならMozilla/4.0 (compatible; MSIE 5.0; Windows 98; DigExt)。今は必要な情報だけを抜き出した。）
だから、ブラウザを判別するというのは、このエージェント情報からブラウザを判別することなんだ。
つまり、エージェント情報から、そのブラウザにしかない文字列を判別して、ブラウザの種類を特定するんだね。
そこで、さっきやった文字列の検索が出てくるんだ。

じゃあ、実際にエージェント情報からブラウザの情報を特定してみよう。
まず、エージェント情報を読み込まないといけないね。

   navigator.userAgent　　　←ここにエージェント情報が入っている

この中から、ブラウザの特定をするための情報を抜き出そう。
さっきのブラウザの種類とエージェント情報の関係の表を見てみよう。
まず、エクスプローラー５を特定したい時は"MSIE 5"という文字列があればいいね。
文字列の検索は
文字列.indexOf("検索文字",検索開始位置)
だったので、
navigator.userAgent.indexOf("MSIE 5.")
というのは

    文字列.indexOf("検索文字",検索開始位置)
       （↑比較↓）
        navigator.userAgent.indexOf("MSIE 5.")

    文字列=navigator.userAgent　　←エージェント情報
    検索文字=MSIE 5              ←エクスプローラ５の場合
    検索開始位置=0　　　　　　　　←何も書いていない場合は”0”

ということだよ。
これで、もし検索対象のエージェント情報に"MSIE 5."という文字列が含まれている場合は、返される値は必ず０以上になったよね。
(わからない人はもう一度上を読み直そう)

if(navigator.userAgent.indexOf("MSIE 5.") >= 0){
    ua = 1;
}

として、もし、エージェント情報からの"MSIE 5"が見つかれば、
(つまり、navigator.userAgent.indexOf("MSIE 5.")が０以上になれば)
"ua"という変数に"1"という数字を入れておく。
という命令なんだ。
同じように、

if(navigator.userAgent.indexOf("MSIE 5.") >= 0){　　　　　←IE5
    ua = 1;
}
else if(navigator.userAgent.indexOf("MSIE 4.") >= 0){　　　←IE4
    ua = 2;
}
else if(navigator.userAgent.indexOf("Mozilla/4.") >= 0){　　←NN4
    ua = 3;
}
else if(navigator.userAgent.indexOf("MSIE 3.") >= 0){　　　←IE3
    ua = 4;
}
else if(navigator.userAgent.indexOf("Mozilla/3.") >= 0){　　←NN3
    ua = 5;
}

も考えることができるよね。
ここで少し断っておくと、ネットスケープを探す時に、navigator.userAgent.indexOf("Mozilla/4.")を使うんだけど、
これは実はエクスプローラーのエージェント情報にも含まれているよね。
だから、エクスプローラーの可能性もあるんじゃないかと思うかもしれないけど、エクスプローラーの場合はそれより前で検索されてしまうので(上を見よ)、ここで検索されるのはネットスケープだけということになるね。
このようにして、それぞれの場合について
(IE5の時)ua=1、(IE4の時)ua=2、(NN4の時)ua=3、(IE3の時)ua=4、(NN3の時)ua=5
という風に変数を指定したので、
最後に、

if(ua == 1){
    document.write("あなたの使っているブラウザはIE5です。");
}
else if(ua == 2){
    document.write("あなたの使っているブラウザはIE4です。");
}
else if(ua == 3){
    document.write("あなたの使っているブラウザはNN4です。");
}
else if(ua == 4){
    document.write("あなたの使っているブラウザはIE3です。");
}
else if(ua == 5){
    document.write("あなたの使っているブラウザはIE3です。");
}
else{
    document.write("あなたはなにを使っているのですか？");
}

で、変数"ua"によって表示する文章を変えているんだ。

[その他、関連した命令]
★lastIndexOf("検索文字",検索開始位置)
・・・・右側（後）から文字列を検索する

今回のブラウザ情報はちょっと難しかったかな。
文字列検索と、エージェント情報自体はそんなに難しくないかもしれないけれど、それらがくっついて１つの命令を作っているとちょっと難しいかもね。

ブラウザ	エージェント情報に入っているもの
エクスプローラー５	Mozilla/4.0 , MSIE 5
エクスプローラー４	Mozilla/4.0 , MSIE 4
エクスプローラー３	MSIE 3.0
ネットスケープ４	Mozilla/4.0
ネットスケープ３	Mozilla/3.0