ウィンドウを開いて表示する

　Ajaxでプログラムを作成しているとマルチウィンドウで内容、結果を表示させたい場合があります。このような場合、自前でウィンドウシステムを作る手段もありますが、なかなか面倒です。そこで、Prototype JavaScript Windowsを利用すれば手軽にマルチウィンドウ／ダイアログの表示を行う事ができるようになります。Prototype JavaScript Windowsのダウンロードは以下のURLから行うことができます。

http://prototype-window.xilinus.com/

　頻繁にバージョンがあがっているため、ここで掲載しているサンプルが動作しなくなったり、不具合が発生する可能性もあります。ここで使用しているのはv0.6です。
まず、手軽なところでウィンドウを開いて表示させてみましょう。ウィンドウを作成するにはnew Window()とします。パラメータにウィンドウの名前やタイトルバーに表示される名前、サイズなどを指定します。上記サイトで公開されているパラメータを指定します。（非公開のもあるみたいですが動きます）


Prototype JavaScript Windowsを利用するにはprototype.jsとscript.aculo.usのeffects.jsが必要です。そしてwindow.jsライブラリを読み込ませれば準備完了です。
new Window()で必要なパラメータを指定しただけでは画面上に表示されません。また、内容も空っぽです。ウィンドウ内に文字（実際にはHTMLデータ）を表示するにはgetContent().innerHTMLに表示する内容を入れます。表示するにはshow()メソッドを使います。
ウィンドウの外観はあらかじめ用意されている画像データとスタイルシートを利用します。もちろん、画像を書き換えれば自分のオリジナルのウィンドウになります。
以下のサンプルは320x240のサイズで座標(10,200)にウィンドウを表示します。（実際のサンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Prototype JavaScript Windowsサンプル</title>
<link href="default.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="effects.js"></script>
<script type="text/javascript" src="window.js"></script>
<script type="text/javascript"><!--
function openWin()
{
subwin = new Window("win1", { className: "dialog", title: "PJW Sample", left:10, top:200, width:320, height:240, zIndex:200});
subwin.getContent().innerHTML = "ウィンドウに文字が出ます！";
subwin.show();
}
// --></script>
</head>
<body>
<h1>Prototype JavaScript Windowsサンプル</h1>
<form>
<input type="button" value="ウィンドウを開く" onClick="openWin()">
</form>
</body>
</html>

ウィンドウ内には文字や画像ではなく、指定したURLのページを表示させることもできます。この場合にはWindow()のオプションパラメータでurlを指定し表示させたいページのURLを指定します。以下のサンプルではhttp://www.openspc2.org/のページデータを表示します。（サンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Prototype JavaScript Windowsサンプル</title>
<link href="default.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="effects.js"></script>
<script type="text/javascript" src="window.js"></script>
<script type="text/javascript"><!--
function openWin()
{
subwin = new Window("win1", { className: "dialog", title: "PJW Sample", left:10, top:200, width:320, height:240, zIndex:200, url: "http://www.openspc2.org/"});
subwin.show();
}
// --></script>
</head>
<body>
<h1>Prototype JavaScript Windowsサンプル</h1>
<form>
<input type="button" value="ウィンドウを開く" onClick="openWin()">
</form>
</body>
</html>

上記のサンプルを実行してウィンドウを表示させた後に、いったんウィンドウを閉じます。再度ウィンドウを開くと、ウィンドウがドラッグできなかったり、おかしな現象に遭遇してしまうでしょう。これはウィンドウの名前(ID)が以前と同じものを利用してしまったために発生します。特にマルチウィンドウで開く場合には以下のように毎回異なる名前を指定する必要があります。（サンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Prototype JavaScript Windowsサンプル</title>
<link href="default.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="effects.js"></script>
<script type="text/javascript" src="window.js"></script>
<script type="text/javascript"><!--
winNo = 1; // Window Number
function openWin()
{
subwin = new Window("win"+winNo, { className: "dialog", title: "PJW Sample", left:10, top:200, width:320, height:240, zIndex:200, url: "http://www.openspc2.org/"});
subwin.show();
winNo++;
}
// --></script>
</head>
<body>
<h1>Prototype JavaScript Windowsサンプル</h1>
<form>
<input type="button" value="ウィンドウを開く" onClick="openWin()">
</form>
</body>
</html>

　通常のウィンドウ以外にダイアログも表示させることができます。これは次項で説明します。

[目次へ]

(2006.4.1)