Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2006/10/19 00:00

JavaScriptを使って、ブラウザの新しいウィンドウを表示可能領域いっぱいに開く場合、ブラウザの種類によって実装方法が異なります。そこで本稿では、具体的な実例を挙げながらクロスブラウザスクリプトの作成方法について解説します。

目次

はじめに

 ブラウザの種類やバージョン、おのおののブラウザ独自の実装の違いを考慮し、同じように動作するスクリプトを「クロスブラウザスクリプト」と言います。ここでは、クロスブラウザスクリプトを実現する方法について順を追って解説していきます。

 クロスブラウザスクリプトを作るには、ブラウザの種類やバージョンを判断し、そのブラウザに最適化したスクリプトを実行する必要があります。前回は、「ブラウザに合わせたスクリプトを実行する」として、JavaScriptを使ってブラウザの種類やバージョンを判断する方法を解説し、判断したブラウザに合わせたスクリプトを実行する方法を、実例を挙げて解説していきました。今回も前回に引き続き、クロスブラウザスクリプトの例を、サンプルを挙げながら解説していきたいと思います。

 今回は、前回解説した内容をもとに進めていきます。このため、前回の内容も併せて参照するようにしてください。

過去の連載記事

ディスプレイと同じサイズのウィンドウを開く(基本)

 最初に、基本となるスクリプトを作成しましょう。これに変更を加えていって、目的の処理を行うスクリプトを完成させます。

screenオブジェクト

 Netscape Navigator 4からサポートされたJavaScript 1.2では、ディスプレイの表示サイズや色数などの情報を値に持つ、screenオブジェクトが追加されました。このオブジェクトを使うと、ユーザーのディスプレイの状況に合わせてブラウザの見栄えを調整する、といったことが可能になります。screenオブジェクトの用法および、サポートしているプロパティなどは、以下の表のとおりです。

screenオブジェクトの用法
screen.プロパティ
プロパティ(JavaScript 1.2)
プロパティ 意味
width ディスプレイの幅(ピクセル)
height ディスプレイの高さ(ピクセル)
availWidth タスクバーなどの部分を除いたディスプレイの幅(ピクセル)
availHeight タスクバーなどの部分を除いたディスプレイの高さ(ピクセル)
pixelDepth ディスプレイ深度(bits/pixel)
colorDepth ディスプレイ色深度(nビットカラー)
メソッド
なし
イベントハンドラ
なし
サンプルコード内の行表示について
 本稿で紹介するサンプルコードの左端に太字で表示されている数字は、行番号です。本文中で行番号を指定した説明があるもののみ、行番号を表示しています。
 

 screenオブジェクトを使えば、ブラウザを表示しているユーザーのディスプレイサイズに合わせて、ほぼそれと同じサイズのブラウザウィンドウを開く、といったことも可能です。例えば、ディスプレイの表示領域全体から、Windowsのタスクバーのようなコンテンツを表示できない部分を除いた、ディスプレイ内の表示可能領域とほぼ同じ大きさのブラウザウィンドウを新しく開くスクリプトの基本形は、次のようになります。

sample_1.html
 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html><head>
 3 <meta http-equiv="Content-Script-Type" content="text/javascript">
 4 <meta http-equiv="Content-Style-Type" content="text/css">
 5 <title>Sample_1</title>
 6 <script type="text/javascript">
 7 <!--
 8 function Full() {
 9   window.open("full_1.html","mywindow","outerWidth="+
       screen.availWidth+",outerHeight="+screen.availHeight+" ");
10 }
11 //-->
12 </script>
13 <style type="text/css">
14 <!--
15 body { background-color: #ffffff; }
16 -->
17 </style>
18 </head>
19 <body>
20 *画面と同じサイズのウィンドウを開く (基本)
21 <p>
22 <form>
23      <input type="button" value=" ウィンドウを開く "
           onClick="Full();">
24 </form>
25 </p>
26 </body></html>
full_1.html(「sample_1.html」から呼び出される)
 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html><head>
 3 <meta http-equiv="Content-Script-Type" content="text/javascript">
 4 <meta http-equiv="Content-Style-Type" content="text/css">
 5 <title>フルスクリーン</title>
 6 <script type="text/javascript">
 7 <!--
 8 moveTo(0,0)
 9 //-->
10 </script>
11 <style type="text/css">
12 <!--
13 body { background-color: #ffffff; }
14 -->
15 </style>
16 </head>
17 <body>
18 -フルスクリーン-
19 </body></html>

新しいウィンドウを開く時の処理

 このサンプル「sample_1.html」では、[ウィンドウを開く]ボタンをクリックすると、ディスプレイ全体のサイズからタスクバーなどを除いた縦と横のサイズを、ウィンドウ外周の縦と横のサイズに設定した、新しいウィンドウを開くようにしています。

 [ウィンドウを開く]ボタンをクリックした時、フォーム内に設定したイベントハンドラonClickによって(「sample_1.html」の23行目)、ウィンドウを開く処理を行う関数Full()が発生します。関数Full()の処理は、8~10行目の以下の部分です。

sample_1.html(抜粋)
 8 function Full() {
 9   window.open("full_1.html","mywindow","outerWidth="+
       screen.availWidth+",outerHeight="+screen.availHeight+" ");
10 }

 新しいウィンドウは、windowオブジェクトのopenメソッドを使って開きます。openメソッドの用法は、次のとおりです。openメソッドは、上の抜粋部分の2行目で設定しています。

openメソッドの用法
window.open("URI","ウィンドウ名","オプション")

 サンプルでは、まずURIの値に「full_1.html」を設定しています。これにより、新しく開いたウィンドウには、HTMLファイル「full_1.html」が読み込まれます。次にウィンドウ名として、「mywindow」を設定しています。新しく開いたウィンドウは、このウィンドウ名を指定することによって、JavaScriptを使った操作が可能になります。

 そして、オプションには「outerWidth」「outerHeight」の値を設定しています。これらはJavaScript 1.2で追加されたオプションで、それぞれ次のような意味を持ちます。

ウィンドウの幅を設定するオプション
オプション 意味
outerWidth 新しく開くウィンドウの外周の横幅の値。
outerHeight 新しく開くウィンドウの外周の縦幅の値。

 サンプルでは、以下のように設定しています。

ディスプレイの表示可能領域の横幅の値の設定
"outerWidth="+screen.availWidth
ディスプレイの表示可能領域の縦幅の値の設定
"outerHeight="+screen.availHeight

 これにより、ブラウザの外周がディスプレイ表示可能領域と同じサイズのウィンドウが開きます。

 なお、Windows版のOperaのように、新しいウィンドウをタブで開く設定があるタブブラウザの場合、ユーザが新しいウィンドウをタブで開くように設定していると、ユーザの設定が優先され、新しいタブに指定したHTMLファイルが読み込まれます。この時、ウィンドウサイズの変更は行われません。

 さらに、新しいウィンドウに読み込まれる「full_1.html」では、8行目でwindowオブジェクトのmoveToメソッドを使って「moveTo(0,0)」と設定しています。これにより、新しく開いたブラウザウィンドウの左上の角が、ディスプレイ表示可能領域の左上端に移動します。このように設定すると、新しく開いたウィンドウはディスプレイ表示領域からはみ出さず、画面内いっぱいに表示されます。

 以上がディスプレイいっぱいに、新しいウィンドウを開くスクリプトの基本形となります。しかしながら、このスクリプトは、Internet Explorer(以下、IE)やSafariなど、Netscape Navigator系以外のブラウザやMacOS版のOperaでは、うまく機能しない場合があります。それは、それらのブラウザでouterWidthouterHeightオプションがサポートされていないからです。そこで、クロスブラウザスクリプトの出番となります。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 半場 方人(ハンバ マサヒト)

    Netscape2.XでJavaScriptに初めて出合ったころ、「なぜJavaScriptの日本語の書籍が無いんだ」、とあちこちで嘆いていたら、じゃあおまえが書け、とお声がかかり、JavaScript関連の書籍を執筆するようになる。執筆に際していつも考えるのは、「JavaScript初心者だった頃...

バックナンバー

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

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5