Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:47.

画面の中央にサブウインドウを表示させる

JavaScriptを使ってサブウインドウを表示する際、画面の中央に表示させたいと思うことがあります。
例えば、情報を選択するために表示したサブウインドウで、何かを選択するまでは次へ進んで欲しくない場合などです。
そんな場合には、目立つように画面の中央に表示した方が分かりやすいかもしれません。

JavaScriptでサブウインドウを開く方法は、記事「サブウインドウを開く」で解説済みです。
あとは、閲覧者の画面サイズ(※表示可能領域のサイズ)を取得して、サブウインドウを表示する座標を計算すれば良いでしょう。

画面の表示可能領域のサイズを取得するには、以下のようにscreenオブジェクトの「availWidthプロパティ」と「availHeightプロパティ」を使います。

var sw = screen.availWidth;  // 表示可能領域の横幅
var sh = screen.availHeight; // 表示可能領域の高さ

画面の横幅と高さを取得するには、Width・Heightというプロパティがあります。
しかし、これらのプロパティだと「タスクバーなど、アプリケーションの表示には使えない領域」も含んだ値が返ってきます。
タスクバーやツールバーが細い場合にはあんまり影響ないかも知れませんが、(Windows Vistaのように横にでかいバーがある場合は特に)『画面全体』よりは『表示可能領域』を基準にした方が、真ん中っぽく見える気がします。

というわけで、画面内で『ウインドウの表示に利用できる空間』を取得するには、上記のように「availWidthプロパティ」と「availHeightプロパティ」を使います。

画面の中央に表示されるよう座標を計算する

仮に今、横360px×縦240pxのサブウインドウを表示したいとします。
このウインドウを、画面の表示領域の中央に表示させるには、以下のような計算が必要です。

var subx = ( screen.availWidth - 360 ) / 2;
var suby = ( screen.availHeight - 240 ) / 2;

これで、変数subxとsubyには「サブウインドウを表示する座標(ウインドウ左上の座標)」が格納されます。
変数subxがX座標、変数subyがY座標です。
※計算方法は簡単で、(「表示可能領域の横幅」-「サブウインドウの横幅」)÷2 を計算するだけです(高さも同様)。

実際にサブウインドウを表示するには

サブウインドウを開くには、windowオブジェクトのopenメソッドを使います。
細かなオプションについては、記事「サブウインドウを開く」で解説しているのでここでは省きます。

画面の中央にサブウインドウを表示させるには、以下のようなJavaScriptソースを記述します。

<script type="text/javascript">
function ShowSubWindow() {
   // サブウインドウの設定
   var subw = 360;   // サブウインドウの横幅
   var subh = 240;   // サブウインドウの高さ
   var subp = "sample.html";   // 表示するページ(URL)
   var subn = "sakura";   // サブウインドウの名称

   // 表示座標の計算
   var subx = ( screen.availWidth  - subw ) / 2;   // X座標
   var suby = ( screen.availHeight - subh ) / 2;   // Y座標

   // サブウインドウのオプション文字列を作る
   var SubWinOpt = "width=" + subw + ",height=" + subh + ",top=" + suby + ",left=" + subx";

   // サブウインドウを表示
   window.open(subp, subn, SubWinOpt);
}
</script>
<input type="button" value="画面中央にサブウインドウを表示" onclick="ShowSubWindow();">

上記のソースで特に書き換える必要があるのは、太字の箇所のみです。あとは、そのままコピーするだけで使えます。
実はこのソースだと微妙に中央には表示されないのですが、まあおおむね中央に表示されます。(詳しくは最後に解説)
これを表示させると、以下のように見えます。

上記では、JavaScriptソースを分かりやすく見せるために、わざわざscript要素を使って関数を作り、input要素から呼び出して使うようにしました。
でも、実際には以下のように、すべてのJavaScriptソースを、input要素のonclick属性内に記述することもできます。

<input type="button" value="画面中央にサブウインドウを表示" onclick="window.open('sample.html', 'tomoyo', 'width=360,height=240,top=' + (screen.availHeight-360)/2 + ',left=' + (screen.availWidth-240)/2);">

上記では、input要素のonclick属性内に、サブウインドウ左上位置を計算する式も直接記述しています。
ちょっと長くなってしまいますが、わざわざ関数を作る必要がないので、1カ所しか記述しない場合には短い記述で済みます。サブウインドウのサイズ(縦横)を2度ずつ記述しないといけないのがちょっと面倒かも知れませんが。

これを表示すると、以下のように見えます。(機能は、先ほどの例とまったく同一のはずです。)

なお、サブウインドウを開くopenメソッドのオプションでは、「top=」の方にY座標を、「left=」の方にX座標を記述しないといけません。

  • topは上端からの距離を示すので、X座標ではなくY座標を与えないといけません。
  • leftは左端からの距離を示すので、Y座標ではなくX座標を与えないといけません。

この2つは、逆に指定してしまいがちな気がしますので、注意して下さい。

実はぴったり画面中央には配置されない

width・heightは表示領域のサイズ、outerWidth・outerHeightがウインドウそのもののサイズサブウインドウを表示するopenメソッドのオプションとして、先のソースでは以下の4つを指定しています。

  • width : 表示領域の横幅
  • height : 表示領域の高さ
  • top : ウインドウ左上の表示位置(画面上端からの距離:Y座標)
  • left : ウインドウ左上の表示位置(画面左端からの距離:X座標)

ここでポイントなのは、widthやheightで表す値は、「サブウインドウのサイズ」ではなく「サブウインドウ内の描画領域のサイズ」だという点です。
ウインドウ枠やタイトルバー・ツールバー・ステータスバーなどのサイズは含んでいません。
なので、主に上下方向では完全に中央には配置されません。
たいてい、ウインドウ上側にツールバーなどが配置されるため、全体的にちょっと下寄りに表示されることが多いでしょう。

ウインドウそのもののサイズを指定できるouterWidth・outerHeightプロパティもあるんだけど

実は、openメソッドのオプションには、widthやheightの代わりに以下のような指定も使えます。

  • outerWidth : ウインドウの横幅
  • outerHeight : ウインドウの高さ

これを使えば、サブウインドウそのものの大きさを指定できるので、ぴったり画面中央に配置可能です。
では、なぜ使わなかったのか……というと、Internet Explorerなど一部のブラウザでは、この指定方法に対応していないためです。残念ながら……。

実際には、そんなにぴったり正確に画面中央に表示しなければならないケースってあまりないですよね?(^_^;)
だいたい中央あたりに見えればそれで良い、ということがほとんどではないかと思います。
なので、上記のサンプルでは、細かい差は気にせずwidthとheightを使ってサブウインドウを作りました。(^_^;)

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど