クロスブラウザスクリプトの作成テクニック

ディスプレイサイズに合わせてブラウザの新しいウィンドウを開く

クロスブラウザスクリプトの作成テクニック第5回

半場方人[著]

更新日: 2008/08/26
公開日: 2006/10/19

ポスト

ダウンロードサンプルファイル (3.6 KB)

IEの場合はキオスクモードでウィンドウを開く

　IEのウィンドウサイズ設定の問題を回避するために、fullscreenオプションを使ってそれぞれのブラウザに適したスクリプトを用意しましょう。

fullscreenオプションと「キオスクモード」

　Windows版IEで発生するウィンドウサイズの問題を回避するには、Windows版のIEの場合は「ウィンドウのサイズを少し小さくして開く」という方法があります。しかし、ピクセル単位での微調整が必要となるのでなかなか大変です。そこでもう一歩進めて、IEではopenメソッドのfullscreenオプションを使って新しいウィンドウを開くように、サンプルを変更しましょう。

　fullscreenオプションはIE独自のオプションで、このオプションを使うと「キオスクモード」という外枠がないブラウザウィンドウが画面いっぱいに開きます。ただし、MacOS版のIEではfullscreenオプションがサポートされていません。

ブラウザと対応オプション

ブラウザ	outerWidth	outerHeight	width	height	fullscreen
IE	×	×	○	○	○
IE（MacOS版）	×	×	○	○	×
Netscape Navigator 4	○	○	○	○	-
Safari	×	×	○	○	-
Opera（Windows版）	○	○	○	○	-
Opera（MacOS版）	×	×	○	○	-

　そこで前項の「sample_2.html」に手を加え、以下の4種類のスクリプトを用意します。そして、ブラウザを判断して適切な処理を実行するように、スクリプトを変更しましょう。

IE（Windows版）用のスクリプト
IE（MacOS版）用のスクリプト
Netscape Navigator系ブラウザ用とOpera（Windows版）用のスクリプト
SafariとOpera（MacOS版）用のスクリプト

　なお、Windows版のIEで開くキオスクウィンドウは、［Alt］+［F4］のキー操作で閉じることができます。

sample_3.html

 1 <script type="text/javascript">
 2 <!--
 3 function Full() {
 4   var UA=navigator.userAgent;
 5    var safari=UA.indexOf("Safari");
 6    var opera=UA.indexOf("Opera");
 7    var IE=UA.indexOf("MSIE");
 8    var mac=UA.indexOf("Mac");
 9   if ((IE ==-1 && safari==-1) || (opera != -1 && mac ==-1)) {
10     window.open("full_1.html","mywindow","outerWidth="+
         screen.availWidth+",outerHeight="+screen.availHeight+" ");
11   }
12   else {
13      if (opera != -1 || safari != -1) {
14       window.open("full_1.html","mywindow","width="+
           screen.availWidth+",height="+screen.availHeight+" ");
15       }
16     else{
17         if (mac != -1 ){
18           window.open("full_1.html","mywindow","width="+
               screen.width+",height="+screen.height+" ");
19         }
20         else{window.open("full_2.html","mywindow",
             "fullscreen=yes");}
21     }
22   }
23 }
24 //-->
25 </script>

full_2.html（「sample_3.html」から呼び出される）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>フルスクリーン</title>
<style type="text/css">
<!--
body { background-color: #ffffff; }
-->
</style>
</head>
<body>
-フルスクリーン-
<p>
Windows版IE用。<br>
[alt] + [F4]でウィンドウが閉じます。
</p>
</body></html>

サンプルファイル「sample_3.html」を試す

　このサンプルでも、「sample_1.html」の6～12行目のスクリプト部分を変更しています。それ以外の部分はまったく同じです。また、以下の処理に対応する部分は「sample_2.html」と同じです（かっこ内は「sample_2.html」の行番号）。

ユーザーエージェントを変数に代入する処理（4行目）
ユーザーエージェントから、「Safari」「Opera」「MSIE」「Mac」という文字列をそれぞれ検索する処理を変数に代入する処理（5～8行目）
Netscape Navigator系ブラウザとWindows版のOperaを判断し、それらのブラウザに最適化したウィンドウを新しく開く処理（9～11行目）

　そして、以下のelse内の処理が「sample_3.html」での変更点となります。

sample_3.html（抜粋）

12 else {
13    if (opera != -1 || safari != -1) {
14     window.open("full_1.html","mywindow","width="+
         screen.availWidth+",height="+screen.availHeight+" ");
15     }
16   else{
17       if (mac != -1 ){
18         window.open("full_1.html","mywindow","width="+
             screen.width+",height="+screen.height+" ");
19       }
20       else{window.open("full_2.html","mywindow",
           "fullscreen=yes");}
21   }
22 }

ブラウザの判別と処理の振り分け

　「sample_3.html」では、MacOS版のOperaとSafari、MacOS版のIE、そしてその他のブラウザになるWindows版のIEとを判別し、処理を振り分けています。

　MacOS版のOperaとSafari用の処理は13～15行目に記述しています。これらのブラウザの判断は、13行目のif文で行っています。Safariは、ユーザーエージェント内に文字列「Safari」が含まれています、またWindows版のOperaはすでに判断が終わっているので、ユーザーエージェント内に文字列「Opera」という文字列が含まれているブラウザは、MacOS版のOperaということになります。これにより、MacOS版のOperaとSafariを判断する条件式は以下のようになります。

opera != -1 || safari != -1

　これらのブラウザ用の新しいウィンドウを開く処理は「sample_2.html」の13行目、新しく開くウィンドウのサイズをwidth、heightオプションを使って設定しているスクリプトと同じです。

　そして、16～21行目のelse内の処理がIE用の処理となります。

　このうち17～19行目がMacOS版のIE用の処理です。この中でMacOS版のIEの判断は17行目のif文で行っています。これまでの処理で、IE以外のブラウザはすでに判断済みなので、ユーザーエージェント内にMacOSを表す文字列「Mac」が含まれていれば、そのブラウザはMacOS版のIEです。これにより、MacOS版のIEを判断するif文の条件式は以下のようになります。

mac != -1

　そして、実際のウィンドウを開く処理は18行目です。MacOS版IE用のスクリプトは、14行目のスクリプトと同じでも構いません。

openメソッドのオプション設定の変更

　しかしMac版のIEでは、開くウィンドウがディスプレイのサイズと完全には一致しません。これは、MacOS版のIEのscreenオブジェクトが正常な値を返さないことに原因があります。そこで今回のこのサンプルでは、openメソッドのオプションに設定するウィンドウサイズの部分を以下のように変更します。

"width="+screen.width+",height="+screen.height+" "

　これによって、横幅の値にディスプレイ表示領域全体の横幅の値を持つwidthプロパティを、高さの値にディスプレイの表示領域全体の高さの値を持つheightプロパティを設定しています。この場合、本来ならavailWidth、availHeightプロパティを使ってウィンドウを開くよりも大きなウィンドウが開くはずです。しかし、実際は、width、heightプロパティを使ってもavailWidth、availHeightプロパティを使っても、ほぼ同じサイズのウィンドウが開きます。ちなみに、この時に開くウィンドウはディスプレイよりも少し小さめのサイズとなり、ウィンドウがディスプレイからはみ出すことはありません。

　そして、以下のelseの処理が、最後に残ったWindows版のIE用の処理になります。

20 else{window.open("full_2.html","mywindow","fullscreen=yes");}

　ここではオプションの設定で、ウィンドウのサイズを指定せず、fullscreen=yesとすることによって、キオスクモードでウィンドウを開いています。ディスプレイいっぱいにウィンドウが開くキオスクモードの場合、他のブラウザのように、開いたブラウザを左上端に移動する必要はありません。そこでサンプルでは、ウィンドウを移動するスクリプトを設定していないHTMLファイル「full_2.html」を、新しいウィンドウに読み込むようにしています。

まとめ

　今回は、screenオブジェクトやwindowオブジェクトのopenメソッドの実装の違いを考慮したスクリプトを、OSやブラウザを判断し、それぞれに適したブラウザで実行する方法について解説しました。

　今回紹介したscreenオブジェクトやopenメソッドのいくつかのオプションは、JavaScript 1.2で追加されたスクリプトです。このためバージョン3以前のNetscape NavigatorやIEでは、それらを含むスクリプトは機能しません。しかしながら、openメソッドはサポートしていないオプションを無視するので、それらをサポートしていないブラウザでも、サイズの指定は行われませんがエラーになることなく新しいウィンドウが開きます。また、Windows版IEのfullscreenオプションで開くウィンドウは、Windows XP Service Pack 2から、キオスクモードのウィンドウではなく最大化されたウィンドウに仕様が変更されています。

　次回も引き続き、ブラウザのJavaScriptの実装の違いを吸収するために、ブラウザの種類を判断し、それに合わせたスクリプトを作る例を紹介していきたいと思います。

この記事は参考になりましたか？

連載通知を行うには会員登録(無料)が必要です。
既に会員の方はを行ってください。

印刷用を表示

ポスト

クロスブラウザスクリプトの作成テクニック連載記事一覧: ブラウザごとのwindowオブジェクトの違いを理解する

ブラウザごとのeventオブジェクトの違いを理解する

ブラウザがサポートしているスクリプトを判断する 2

もっと読む

この記事の著者: 半場方人（ハンバマサヒト）

Netscape2.XでJavaScriptに初めて出合ったころ、「なぜJavaScriptの日本語の書籍が無いんだ」、とあちこちで嘆いていたら、じゃあおまえが書け、とお声がかかり、JavaScript関連の書籍を執筆するようになる。執筆に際していつも考えるのは、「JavaScript初心者だった頃の気持ちを忘れないよに」、ということ。主な著書は、「標準Webデザイン講座　JavaScript＆Ajax」(翔泳社)などがある。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事